Skip to content

Commit e1a4933

Browse files
krebilkrebil
committed
Adds uui-box examples
1 parent eceb9a8 commit e1a4933

File tree

3 files changed

+290
-0
lines changed

3 files changed

+290
-0
lines changed

‎src/Our.Umbraco.UiExamples.v14/src/manifest.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@ export const manifests: Array<ManifestTypes> = [
3434
"name": "Example.UI - Modals",
3535
"js": () => import("./scripts/modals/manifest.ts")
3636
},
37+
{
38+
"type": "bundle",
39+
"alias": "example.ui.box",
40+
"name": "Example.UI - box",
41+
"js": () => import("./scripts/box/manifest.ts")
42+
},
3743
{
3844
"type": "sectionView",
3945
"alias": "example.ui.dashboard.section.boxlayout",

‎src/Our.Umbraco.UiExamples.v14/src/scripts/box/box-dashboard.ts

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
import {LitElement, css, html} from 'lit'
2+
import {customElement} from 'lit/decorators.js'
3+
4+
5+
@customElement('uie-box-dashboard')
6+
export default class UieBoxDashboard extends LitElement {
7+
8+
render() {
9+
return html`
10+
<div class="container">
11+
${this.renderIntroSection()}
12+
${this.renderHeadlineSection()}
13+
${this.renderHeaderSection()}
14+
${this.renderHeaderActionsSection()}
15+
</div>
16+
`
17+
}
18+
19+
renderIntroSection() {
20+
return html`
21+
<uui-box class="red-outline" .headline="test">
22+
<h3 slot="headline" class="blue-outline spacing headline">
23+
The uui-box element
24+
</h3>
25+
<div slot="header" class="header purple-outline spacing">
26+
Other header content
27+
</div>
28+
<div class="header-actions pink-outline" slot="header-actions">
29+
<uui-button href="https://uui.umbraco.com/?path=/docs/uui-box--docs" target="_blank" look="primary"
30+
color="positive">
31+
<uui-badge slot="extra" label="A11Y label">!</uui-badge>
32+
<uui-icon name="info"></uui-icon>
33+
View the Storybook library
34+
</uui-button>
35+
</div>
36+
<slot>
37+
<div class="green-outline spacing">
38+
<umb-code-block language="HTML">${this.renderBoxCodeExample()}</umb-code-block>
39+
<div>
40+
<p>
41+
The uui-box has largely replaces the umb-box element form previous versions of Umbraco.
42+
</p>
43+
<p>
44+
The <span class="red">uui-box</span> element (outlined in red) is used as a wrapper for
45+
boxes in Umbraco. It contains a <span class="blue">headline</span> (outlined in blue),
46+
<span class="purple">header</span> (outlined in purple), <span class="pink">header-actions</span>
47+
(outlined in pink) and <span class="green">content</span> slot (outlined in green) that
48+
are described below in more detail.
49+
</p>
50+
</div>
51+
</div>
52+
</slot>
53+
</uui-box>
54+
`
55+
}
56+
57+
renderHeadlineSection() {
58+
return html`
59+
<uui-box>
60+
<h3 slot="headline">
61+
The uui-box headline slot
62+
</h3>
63+
<slot>
64+
<div>
65+
<umb-code-block language="HTML">${this.renderHeadlineSlotCodeExample()}</umb-code-block>
66+
</div>
67+
<p>
68+
The headline slot is optional and is used to display a title for the box.
69+
</p>
70+
71+
<div>
72+
<umb-code-block language="HTML">${this.renderHeadlineAttributeCodeExample()}</umb-code-block>
73+
</div>
74+
<p>
75+
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.
76+
</p>
77+
</slot>
78+
</uui-box>
79+
`;
80+
}
81+
82+
renderHeaderSection(){
83+
return html`
84+
<uui-box>
85+
<h3 slot="header">
86+
The uui-box header slot
87+
</h3>
88+
<slot>
89+
<div>
90+
<umb-code-block language="HTML">${this.renderHeaderSlotCodeExample()}</umb-code-block>
91+
<p>
92+
The header slot is optional and is used to display additional content in the header of the box.
93+
</p>
94+
</div>
95+
</slot>
96+
</uui-box>
97+
`;
98+
}
99+
100+
renderHeaderActionsSection(){
101+
return html`
102+
<uui-box>
103+
<h3 slot="headline">
104+
The uui-box header-actions slot
105+
</h3>
106+
<slot>
107+
<div>
108+
<umb-code-block language="HTML">${this.renderHeaderActionsSlotCodeExample()}</umb-code-block>
109+
<p>
110+
The header-actions slot is optional and is used to display actions such as buttons and links in the header of the box.
111+
</p>
112+
</div>
113+
</slot>
114+
</uui-box>
115+
`;
116+
}
117+
118+
renderBoxCodeExample() {
119+
return html`
120+
&lt;uui-box&gt;
121+
&lt;h3 slot=&quot;headline&quot;&gt;
122+
this is a title
123+
&lt;/h3&gt;
124+
&lt;div slot=&quot;header&quot;&gt;
125+
this is a header
126+
&lt;/div&gt;
127+
&lt;div slot=&quot;header-actions&quot;&gt;
128+
// header actions here
129+
&lt;/div&gt;
130+
&lt;slot&gt;
131+
// content here
132+
&lt;/slot&gt;
133+
&lt;/uui-box&gt;
134+
`;
135+
}
136+
137+
renderHeadlineSlotCodeExample() {
138+
return html`
139+
&lt;h3 slot=&quot;headline&quot;&gt;
140+
This is a headline
141+
&lt;/h3&gt;
142+
`
143+
}
144+
renderHeadlineAttributeCodeExample() {
145+
return html`
146+
&lt;uui-box headline=&quot;This is a headline&quot; headline-variant=&quot;h3&quot;&gt;
147+
&lt;/uui-box&gt;
148+
`
149+
}
150+
151+
renderHeaderActionsSlotCodeExample() {
152+
return html`
153+
&lt;div slot=&quot;header-actions&quot;&gt;
154+
// header actions here / buttons / links / etc
155+
&lt;uui-button href=&quot;https://umbraco.com/&quot; target=&quot;_blank&quot; look=&quot;primary&quot;color=&quot;positive&quot;&gt;
156+
&lt;uui-badge slot=&quot;extra&quot; label=&quot;A11Y label&quot;&gt;!&lt;/uui-badge&gt;
157+
&lt;uui-icon name=&quot;info&quot;&gt;&lt;/uui-icon&gt;
158+
I am a button link
159+
&lt;/uui-button&gt;
160+
&lt;/div&gt;
161+
`
162+
}
163+
164+
165+
renderHeaderSlotCodeExample() {
166+
return html`
167+
&lt;h3 slot=&quot;header&quot;&gt;
168+
This is a header
169+
&lt;/h3&gt;
170+
`
171+
}
172+
173+
static styles = css`
174+
:host {
175+
padding: var(--uui-size-layout-1);
176+
display: block;
177+
178+
--border-size: 2px;
179+
}
180+
181+
:host * {
182+
box-sizing: border-box;
183+
}
184+
185+
.header-actions {
186+
display: flex;
187+
padding: var(--uui-size-space-5);
188+
height: 100%;
189+
190+
}
191+
192+
.header-actions uui-button {
193+
height: min-content;
194+
align-self: center;
195+
}
196+
197+
.container {
198+
display: flex;
199+
flex-direction: column;
200+
gap: var(--uui-size-space-5);
201+
}
202+
203+
.spacing {
204+
padding: var(--uui-size-space-5);
205+
}
206+
207+
.headline {
208+
height: 100%;
209+
margin: 0;
210+
}
211+
212+
.header {
213+
display: flex;
214+
align-items: center;
215+
}
216+
217+
.red-outline {
218+
border: var(--border-size) solid red;
219+
}
220+
221+
.blue-outline {
222+
border: var(--border-size) solid blue;
223+
}
224+
225+
.green-outline {
226+
border: var(--border-size) solid green;
227+
}
228+
229+
.purple-outline {
230+
border: var(--border-size) solid purple;
231+
}
232+
233+
.pink-outline {
234+
border: var(--border-size) solid hotpink;
235+
}
236+
237+
.red {
238+
color: red;
239+
}
240+
241+
.blue {
242+
color: blue;
243+
}
244+
245+
.green {
246+
color: green;
247+
}
248+
249+
.purple {
250+
color: purple;
251+
}
252+
253+
.pink {
254+
color: hotpink;
255+
}
256+
`;
257+
}
258+
259+
declare global {
260+
interface HTMLElementTagNameMap {
261+
'UieBoxDashboard': UieBoxDashboard
262+
}
263+
}

‎src/Our.Umbraco.UiExamples.v14/src/scripts/box/manifest.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
2+
3+
export const manifests: Array<ManifestTypes> = [
4+
{
5+
"type": "dashboard",
6+
"alias": "example.ui.box.dashboard",
7+
"name": "Box",
8+
"element": () => import("./box-dashboard.ts"),
9+
"weight": -1,
10+
"meta": {
11+
"label": "Box",
12+
"pathname": "box"
13+
},
14+
"conditions": [
15+
{
16+
"alias": "Umb.Condition.SectionAlias",
17+
"match": "example.ui.section"
18+
}
19+
]
20+
}
21+
]

0 commit comments

Comments
 (0)