Skip to content

Commit fb6b70e

Browse files
RockerbyRockerby
authored
Merge pull request #46 from krebil/feature/box
Adds uui-box examples
2 parents 794b563 + 46f89e9 commit fb6b70e

File tree

4 files changed

+298
-0
lines changed

4 files changed

+298
-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: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
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+
this is a headline
24+
</h3>
25+
<div slot="header" class="header purple-outline spacing">
26+
this is a header
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 from 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+
86+
<h3 slot="headline">
87+
The uui-box header slot
88+
</h3>
89+
<slot>
90+
<div>
91+
<umb-code-block language="HTML">${this.renderHeaderSlotCodeExample()}</umb-code-block>
92+
<p>
93+
The header slot is optional and is used to display additional content in the header of the
94+
box.
95+
</p>
96+
</div>
97+
</slot>
98+
</uui-box>
99+
`;
100+
}
101+
102+
renderHeaderActionsSection(){
103+
return html`
104+
<uui-box>
105+
<h3 slot="headline">
106+
The uui-box header-actions slot
107+
</h3>
108+
<slot>
109+
<div>
110+
<umb-code-block language="HTML">${this.renderHeaderActionsSlotCodeExample()}</umb-code-block>
111+
<p>
112+
The header-actions slot is optional and is used to display actions such as buttons and links in the header of the box.
113+
</p>
114+
</div>
115+
</slot>
116+
</uui-box>
117+
`;
118+
}
119+
120+
renderBoxCodeExample() {
121+
return html`
122+
&lt;uui-box&gt;
123+
&lt;h3 slot=&quot;headline&quot;&gt;
124+
this is a headline
125+
&lt;/h3&gt;
126+
&lt;div slot=&quot;header&quot;&gt;
127+
this is a header
128+
&lt;/div&gt;
129+
&lt;div slot=&quot;header-actions&quot;&gt;
130+
// header actions here
131+
&lt;/div&gt;
132+
&lt;slot&gt;
133+
// content here
134+
&lt;/slot&gt;
135+
&lt;/uui-box&gt;
136+
`;
137+
}
138+
139+
renderHeadlineSlotCodeExample() {
140+
return html`
141+
&lt;h3 slot=&quot;headline&quot;&gt;
142+
This is a headline
143+
&lt;/h3&gt;
144+
`
145+
}
146+
renderHeadlineAttributeCodeExample() {
147+
return html`
148+
&lt;uui-box headline=&quot;This is a headline&quot; headline-variant=&quot;h3&quot;&gt;
149+
&lt;/uui-box&gt;
150+
`
151+
}
152+
153+
renderHeaderActionsSlotCodeExample() {
154+
return html`
155+
&lt;div slot=&quot;header-actions&quot;&gt;
156+
// header actions here / buttons / links / etc
157+
&lt;uui-button href=&quot;https://umbraco.com/&quot; target=&quot;_blank&quot; look=&quot;primary&quot;color=&quot;positive&quot;&gt;
158+
&lt;uui-badge slot=&quot;extra&quot; label=&quot;A11Y label&quot;&gt;!&lt;/uui-badge&gt;
159+
&lt;uui-icon name=&quot;info&quot;&gt;&lt;/uui-icon&gt;
160+
I am a button link
161+
&lt;/uui-button&gt;
162+
&lt;/div&gt;
163+
`
164+
}
165+
166+
167+
renderHeaderSlotCodeExample() {
168+
return html`
169+
&lt;div slot=&quot;header&quot;&gt;
170+
This is a header
171+
&lt;/div&gt;
172+
`
173+
}
174+
175+
static styles = css`
176+
:host {
177+
padding: var(--uui-size-layout-1);
178+
display: block;
179+
180+
--border-size: 2px;
181+
}
182+
183+
:host * {
184+
box-sizing: border-box;
185+
}
186+
187+
.header-actions {
188+
display: flex;
189+
padding: var(--uui-size-space-5);
190+
height: 100%;
191+
192+
}
193+
194+
.header-actions uui-button {
195+
height: min-content;
196+
align-self: center;
197+
}
198+
199+
.container {
200+
display: flex;
201+
flex-direction: column;
202+
gap: var(--uui-size-space-5);
203+
}
204+
205+
.spacing {
206+
padding: var(--uui-size-space-5);
207+
}
208+
209+
.headline {
210+
height: 100%;
211+
margin: 0;
212+
}
213+
214+
.header {
215+
display: flex;
216+
align-items: center;
217+
}
218+
219+
.red-outline {
220+
border: var(--border-size) solid red;
221+
}
222+
223+
.blue-outline {
224+
border: var(--border-size) solid blue;
225+
}
226+
227+
.green-outline {
228+
border: var(--border-size) solid green;
229+
}
230+
231+
.purple-outline {
232+
border: var(--border-size) solid purple;
233+
}
234+
235+
.pink-outline {
236+
border: var(--border-size) solid hotpink;
237+
}
238+
239+
.red {
240+
color: red;
241+
}
242+
243+
.blue {
244+
color: blue;
245+
}
246+
247+
.green {
248+
color: green;
249+
}
250+
251+
.purple {
252+
color: purple;
253+
}
254+
255+
.pink {
256+
color: hotpink;
257+
}
258+
`;
259+
}
260+
261+
declare global {
262+
interface HTMLElementTagNameMap {
263+
'UieBoxDashboard': UieBoxDashboard
264+
}
265+
}

‎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+
]

‎src/Our.Umbraco.UiExamples/package-lock.json

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)