diff --git a/src/Our.Umbraco.UiExamples.v14/src/manifest.ts b/src/Our.Umbraco.UiExamples.v14/src/manifest.ts index 603f224..3535618 100644 --- a/src/Our.Umbraco.UiExamples.v14/src/manifest.ts +++ b/src/Our.Umbraco.UiExamples.v14/src/manifest.ts @@ -34,6 +34,12 @@ export const manifests: Array = [ "name": "Example.UI - Modals", "js": () => import("./scripts/modals/manifest.ts") }, + { + "type": "bundle", + "alias": "example.ui.box", + "name": "Example.UI - box", + "js": () => import("./scripts/box/manifest.ts") + }, { "type": "sectionView", "alias": "example.ui.dashboard.section.boxlayout", diff --git a/src/Our.Umbraco.UiExamples.v14/src/scripts/box/box-dashboard.ts b/src/Our.Umbraco.UiExamples.v14/src/scripts/box/box-dashboard.ts new file mode 100644 index 0000000..b353013 --- /dev/null +++ b/src/Our.Umbraco.UiExamples.v14/src/scripts/box/box-dashboard.ts @@ -0,0 +1,265 @@ +import {LitElement, css, html} from 'lit' +import {customElement} from 'lit/decorators.js' + + +@customElement('uie-box-dashboard') +export default class UieBoxDashboard extends LitElement { + + render() { + return html` +
+ ${this.renderIntroSection()} + ${this.renderHeadlineSection()} + ${this.renderHeaderSection()} + ${this.renderHeaderActionsSection()} +
+ ` + } + + renderIntroSection() { + return html` + +

+ this is a headline +

+
+ this is a header +
+
+ + ! + + View the Storybook library + +
+ +
+ ${this.renderBoxCodeExample()} +
+

+ The uui-box has largely replaces the umb-box element from previous versions of Umbraco. +

+

+ The uui-box element (outlined in red) is used as a wrapper for + boxes in Umbraco. It contains a headline (outlined in blue), + header (outlined in purple), header-actions + (outlined in pink) and content slot (outlined in green) that + are described below in more detail. +

+
+
+ + + ` + } + + renderHeadlineSection() { + return html` + +

+ The uui-box headline slot +

+ +
+ ${this.renderHeadlineSlotCodeExample()} +
+

+ The headline slot is optional and is used to display a title for the box. +

+ +
+ ${this.renderHeadlineAttributeCodeExample()} +
+

+ Alternatively, you can use the headline attribute to set the title of the box. And the headline-variant attribute to set the variant of the headline. +

+ + + `; + } + + renderHeaderSection(){ + return html` + + +

+ The uui-box header slot +

+ +
+ ${this.renderHeaderSlotCodeExample()} +

+ The header slot is optional and is used to display additional content in the header of the + box. +

+
+ + + `; + } + + renderHeaderActionsSection(){ + return html` + +

+ The uui-box header-actions slot +

+ +
+ ${this.renderHeaderActionsSlotCodeExample()} +

+ The header-actions slot is optional and is used to display actions such as buttons and links in the header of the box. +

+
+ + + `; + } + + renderBoxCodeExample() { + return html` +<uui-box> + <h3 slot="headline"> + this is a headline + </h3> + <div slot="header"> + this is a header + </div> + <div slot="header-actions"> + // header actions here + </div> + <slot> + // content here + </slot> +</uui-box> + `; + } + + renderHeadlineSlotCodeExample() { + return html` +<h3 slot="headline"> + This is a headline +</h3> + ` + } + renderHeadlineAttributeCodeExample() { + return html` +<uui-box headline="This is a headline" headline-variant="h3"> +</uui-box> + ` + } + + renderHeaderActionsSlotCodeExample() { + return html` +<div slot="header-actions"> + // header actions here / buttons / links / etc + <uui-button href="https://umbraco.com/" target="_blank" look="primary"color="positive"> + <uui-badge slot="extra" label="A11Y label">!</uui-badge> + <uui-icon name="info"></uui-icon> + I am a button link + </uui-button> +</div> + ` + } + + + renderHeaderSlotCodeExample() { + return html` +<div slot="header"> + This is a header +</div> + ` + } + + static styles = css` + :host { + padding: var(--uui-size-layout-1); + display: block; + + --border-size: 2px; + } + + :host * { + box-sizing: border-box; + } + + .header-actions { + display: flex; + padding: var(--uui-size-space-5); + height: 100%; + + } + + .header-actions uui-button { + height: min-content; + align-self: center; + } + + .container { + display: flex; + flex-direction: column; + gap: var(--uui-size-space-5); + } + + .spacing { + padding: var(--uui-size-space-5); + } + + .headline { + height: 100%; + margin: 0; + } + + .header { + display: flex; + align-items: center; + } + + .red-outline { + border: var(--border-size) solid red; + } + + .blue-outline { + border: var(--border-size) solid blue; + } + + .green-outline { + border: var(--border-size) solid green; + } + + .purple-outline { + border: var(--border-size) solid purple; + } + + .pink-outline { + border: var(--border-size) solid hotpink; + } + + .red { + color: red; + } + + .blue { + color: blue; + } + + .green { + color: green; + } + + .purple { + color: purple; + } + + .pink { + color: hotpink; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + 'UieBoxDashboard': UieBoxDashboard + } +} diff --git a/src/Our.Umbraco.UiExamples.v14/src/scripts/box/manifest.ts b/src/Our.Umbraco.UiExamples.v14/src/scripts/box/manifest.ts new file mode 100644 index 0000000..3e0099c --- /dev/null +++ b/src/Our.Umbraco.UiExamples.v14/src/scripts/box/manifest.ts @@ -0,0 +1,21 @@ +import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + "type": "dashboard", + "alias": "example.ui.box.dashboard", + "name": "Box", + "element": () => import("./box-dashboard.ts"), + "weight": -1, + "meta": { + "label": "Box", + "pathname": "box" + }, + "conditions": [ + { + "alias": "Umb.Condition.SectionAlias", + "match": "example.ui.section" + } + ] + } +] \ No newline at end of file diff --git a/src/Our.Umbraco.UiExamples/package-lock.json b/src/Our.Umbraco.UiExamples/package-lock.json new file mode 100644 index 0000000..1447af6 --- /dev/null +++ b/src/Our.Umbraco.UiExamples/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Our.Umbraco.UiExamples", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}