add editor property layout stories

This commit is contained in:
Mads Rasmussen
2022-09-22 13:22:15 +02:00
parent 62dc766d02
commit 18a5e652f1
3 changed files with 22 additions and 5 deletions

View File

@@ -8,7 +8,7 @@ import { createExtensionElement, UmbExtensionRegistry } from '../../../core/exte
import type { ManifestPropertyEditorUI } from '../../../core/models';
import '../../property-actions/shared/property-action-menu/property-action-menu.element';
import '../editor-property-layout.element';
import '../../editors/shared/editor-property-layout/editor-property-layout.element';
@customElement('umb-entity-property')
export class UmbEntityPropertyElement extends UmbContextConsumerMixin(LitElement) {

View File

@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
@customElement('umb-editor-property-layout')
class UmbEditorPropertyLayout extends LitElement {
export class UmbEditorPropertyLayoutElement extends LitElement {
static styles = [
UUITextStyles,
css`
@@ -17,14 +17,14 @@ class UmbEditorPropertyLayout extends LitElement {
render() {
return html`
<slot name="header" class="header"> </slot>
<slot name="editor" class="editor"> </slot>
<slot name="header" class="header"></slot>
<slot name="editor" class="editor"></slot>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-editor-property-layout': UmbEditorPropertyLayout;
'umb-editor-property-layout': UmbEditorPropertyLayoutElement;
}
}

View File

@@ -0,0 +1,17 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbEditorPropertyLayoutElement } from './editor-property-layout.element';
import './editor-property-layout.element';
export default {
title: 'Editors/Shared/Editor Property Layout',
component: 'umb-editor-property-layout',
id: 'umb-editor-property-layout',
} as Meta;
export const AAAOverview: Story<UmbEditorPropertyLayoutElement> = () => html` <umb-editor-property-layout>
<div slot="header"><uui-button color="" look="placeholder">Header</uui-button></div>
<div slot="editor"><uui-button color="" look="placeholder">Editor</uui-button></div>
</umb-editor-property-layout>`;
AAAOverview.storyName = 'Overview';