add stories for editor-layout and editor-entity

This commit is contained in:
Mads Rasmussen
2022-08-08 13:50:04 +02:00
parent 8ac9ce589d
commit 96a7d8cbe7
8 changed files with 47 additions and 9 deletions

View File

@@ -9,7 +9,7 @@ import { UmbDataTypeStore } from '../../../core/stores/data-type.store';
import { DataTypeEntity } from '../../../mocks/data/data-type.data';
import { UmbDataTypeContext } from './data-type.context';
import '../shared/editor-entity.element';
import '../shared/editor-entity/editor-entity.element';
// Lazy load
// TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.

View File

@@ -9,7 +9,7 @@ import { UmbDocumentTypeStore } from '../../../core/stores/document-type.store';
import { DocumentTypeEntity } from '../../../mocks/data/document-type.data';
import { UmbDocumentTypeContext } from './document-type.context';
import '../shared/editor-entity.element';
import '../shared/editor-entity/editor-entity.element';
// Lazy load
// TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.

View File

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs';
import { UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionManifest, UmbExtensionRegistry } from '../../../core/extension';
import '../shared/editor-entity.element';
import '../shared/editor-entity/editor-entity.element';
@customElement('umb-editor-extensions')
export class UmbEditorExtensionsElement extends UmbContextConsumerMixin(LitElement) {

View File

@@ -9,7 +9,7 @@ import { NodeEntity } from '../../../mocks/data/content.data';
import { UmbNotificationService } from '../../../core/services/notification.service';
import { UmbNodeContext } from './node.context';
import '../shared/editor-entity.element';
import '../shared/editor-entity/editor-entity.element';
// Lazy load
// TODO: Make this dynamic, use load-extensions method to loop over extensions for this node.

View File

@@ -1,14 +1,14 @@
import { css, html, LitElement, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionManifestEditorView, UmbExtensionRegistry } from '../../../core/extension';
import { UmbContextConsumerMixin } from '../../../../core/context';
import { UmbExtensionManifestEditorView, UmbExtensionRegistry } from '../../../../core/extension';
import { map, Subscription } from 'rxjs';
import { IRoute, IRoutingInfo, RouterSlot } from 'router-slot';
import './editor-layout.element';
import '../editor-layout/editor-layout.element';
@customElement('umb-editor-entity')
class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
export class UmbEditorEntity extends UmbContextConsumerMixin(LitElement) {
static styles = [
UUITextStyles,
css`

View File

@@ -0,0 +1,20 @@
import { UmbEditorEntity } from './editor-entity.element';
import './editor-entity.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
export default {
title: 'Editors/Shared/Editor Entity',
component: 'umb-editor-entity',
id: 'umb-editor-entity',
} as Meta;
export const AAAOverview: Story<UmbEditorEntity> = () => html` <umb-editor-entity>
<div slot="icon"><uui-button color="" look="placeholder">Icon slot</uui-button></div>
<div slot="name"><uui-button color="" look="placeholder">Name slot</uui-button></div>
<div slot="footer"><uui-button color="" look="placeholder">Footer slot</uui-button></div>
<div slot="actions"><uui-button color="" look="placeholder">Actions slot</uui-button></div>
<uui-button color="" look="placeholder">Main slot</uui-button>
</umb-editor-entity>`;
AAAOverview.storyName = 'Overview';

View File

@@ -3,7 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
@customElement('umb-editor-layout')
class UmbEditorLayout extends LitElement {
export class UmbEditorLayout extends LitElement {
static styles = [
UUITextStyles,
css`

View File

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