diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts index fac6cc9d24..40b03b66d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts @@ -33,7 +33,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement { /** * Orientation: Horizontal is the default where label goes left and editor right. * Vertical is where label goes above the editor. - * @type {string} + * @enum ['horizontal', 'vertical'] * @attr * @default '' */ @@ -130,6 +130,14 @@ export class UmbPropertyLayoutElement extends UmbLitElement { color: var(--uui-color-text-alt); } + #description * { + max-width: 100%; + } + + #description pre { + overflow: auto; + } + #editorColumn { margin-top: var(--uui-size-space-3); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts index 9bc6df0a3f..85d2e5c65a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts @@ -1,19 +1,118 @@ -import type { Meta, Story } from '@storybook/web-components'; +import type { Meta, StoryObj } from '@storybook/web-components'; import type { UmbPropertyLayoutElement } from './property-layout.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; import './property-layout.element.js'; -export default { +const meta: Meta = { title: 'Workspaces/Property Layout', - component: 'umb-property-layout', id: 'umb-property-layout', -} as Meta; + component: 'umb-property-layout', + args: { + alias: 'Umb.PropertyLayout.Text', + label: 'Text', + description: 'Description', + orientation: 'horizontal', + }, + argTypes: { + orientation: { + options: ['horizontal', 'vertical'], + }, + }, + render: (storyObj) => { + return html` + +
Action Menu
+
Editor
+
+ `; + }, + parameters: { + docs: { + source: { + code: ` + +
Action Menu
+
Editor
+
+ `, + }, + }, + }, +}; -export const AAAOverview: Story = () => - html` -
Action Menu
+export default meta; +type Story = StoryObj; -
Editor
-
`; -AAAOverview.storyName = 'Overview'; +export const Overview: Story = {}; + +export const Vertical: Story = { + args: { + orientation: 'vertical', + }, + render: (storyObj) => { + return html` + + + + `; + }, +}; + +export const WithInvalid: Story = { + args: { + invalid: true, + }, +}; + +export const WithMarkdown: Story = { + decorators: [(story) => html`
${story()}
`], + args: { + alias: 'Umb.PropertyLayout.Markdown', + label: 'Markdown', + description: ` +# Markdown +This is a markdown description + +## Subtitle +- List item 1 +- List item 2 + +### Sub subtitle +1. Numbered list item 1 +2. Numbered list item 2 + +\`\`\`html + +
+
+ +\`\`\` + +> Blockquote + +**Bold text** + +*Italic text* + +[Link](https://umbraco.com) + +![Image](https://umbraco.com/media/sybjwfmh/umbraco-support-working.webp?anchor=center&mode=crop&width=870&height=628&rnd=133425316954430000&quality=80&format=webp&format=webp) + +
+Read more +Details content +
+ `, + }, +}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts index 684e41e7dd..e21ccd2e36 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts @@ -105,4 +105,6 @@ export class UmbCurrentUserStore extends UmbContextBase { } } +export default UmbCurrentUserStore; + export const UMB_CURRENT_USER_STORE_CONTEXT = new UmbContextToken('UmbCurrentUserStore'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts index 39dce63e91..743a336e9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbCurrentUserStore } from './current-user.store.js'; import type { ManifestRepository, ManifestStore, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_CURRENT_USER_REPOSITORY_ALIAS = 'Umb.Repository.CurrentUser'; @@ -14,7 +13,7 @@ const store: ManifestStore = { type: 'store', alias: 'Umb.Store.CurrentUser', name: 'Current User Store', - api: UmbCurrentUserStore, + api: () => import('./current-user.store.js'), }; export const manifests: Array = [repository, store];