Skip to content

Commit 8e8730a

Browse files
committed
remove main-slot, add headline prop and slot, to provide default typography for headline. still option to inject things via the header-slot
1 parent 82103ef commit 8e8730a

File tree

8 files changed

+138
-44
lines changed

8 files changed

+138
-44
lines changed

package-lock.json

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

packages/uui-box/README.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,5 @@ import { UUIBoxElement } from '@umbraco-ui/uui-box';
2929
## Usage
3030

3131
```html
32-
<uui-box>
33-
<div slot="header">Header</div>
34-
<div slot="main">Main</main>
35-
</uui-box>
32+
<uui-box headline="Headline"> Content </uui-box>
3633
```

packages/uui-box/lib/uui-box.element.ts

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,91 @@
11
import { LitElement, html, css } from 'lit';
22
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
3+
import { property, state } from 'lit/decorators.js';
4+
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
35

46
/**
57
* A box for grouping elements
68
* @element uui-box
7-
* @slot header - header area for title
8-
* @slot main - main content area
9-
* @slot area with no padding
9+
* @slot headline - headline area
10+
* @slot header - headline area
11+
* @slot default - area for the content of the box
1012
*
1113
*/
1214
@defineElement('uui-box')
1315
export class UUIBoxElement extends LitElement {
1416
static styles = [
17+
UUITextStyles,
1518
css`
1619
:host {
1720
display: block;
1821
box-shadow: var(--uui-shadow-depth-1);
1922
border-radius: var(--uui-border-radius);
2023
background-color: var(--uui-interface-surface);
24+
--uui-box-default-padding: var(--uui-size-space-5);
2125
}
2226
23-
::slotted([slot='header']) {
27+
#header {
28+
display: block;
2429
border-bottom: 1px solid var(--uui-interface-border);
25-
padding: var(--uui-size-4) var(--uui-size-5);
30+
padding: var(--uui-size-space-4) var(--uui-size-space-5);
2631
}
2732
28-
::slotted([slot='main']) {
29-
padding: var(--uui-size-5);
33+
slot:not([name]) {
34+
display: block;
35+
padding: var(--uui-box-default-padding, var(--uui-size-space-5));
3036
}
3137
`,
3238
];
3339

40+
/**
41+
* Headline for this box, can also be set via the 'box' slot.
42+
* @type string
43+
* @attr
44+
* @default null
45+
*/
46+
@property({ type: String })
47+
headline: string | null = null;
48+
49+
@state()
50+
private _headlineSlotHasContent = false;
51+
private _headlineSlotChanged = (e: Event) => {
52+
this._headlineSlotHasContent =
53+
(e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
54+
};
55+
56+
@state()
57+
private _headerSlotHasContent = false;
58+
private _headerSlotChanged = (e: Event) => {
59+
this._headerSlotHasContent =
60+
(e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
61+
};
62+
63+
/**
64+
* Renders a header with the header-slot, headline and headline-slot within
65+
* @returns {TemplateResult}
66+
* @protected
67+
* @method
68+
*/
69+
protected renderHeader() {
70+
return html`<div
71+
id="header"
72+
class="uui-text"
73+
style=${this._headerSlotHasContent ||
74+
this._headlineSlotHasContent ||
75+
this.headline !== null
76+
? ''
77+
: 'display: none'}>
78+
<h5 id="headline">
79+
${this.headline}
80+
<slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
81+
</h5>
82+
<slot name="header" @slotchange=${this._headerSlotChanged}></slot>
83+
</div>`;
84+
}
85+
3486
render() {
3587
return html`
36-
<slot name="header"></slot>
37-
<slot name="main"></slot>
88+
${this.renderHeader()}
3889
<slot></slot>
3990
`;
4091
}

packages/uui-box/lib/uui-box.story.ts

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,22 @@ export default {
1212
};
1313

1414
const Template: Story = () => html`
15-
<uui-box>
16-
<div slot="header">Header</div>
17-
<div slot="main">Main</div>
15+
<uui-box headline="Headline">
16+
Some content of this box, appended in the default slot. Notice the padding
17+
of the default slot can be removed by setting
18+
style="--uui-box-default-padding: 0;"
1819
</uui-box>
1920
`;
2021

2122
export const AAAOverview = Template.bind({});
2223
AAAOverview.storyName = 'Overview';
23-
AAAOverview.parameters = {
24-
docs: {
25-
source: {
26-
code: `
27-
<uui-box>
28-
<div slot="header">Header</div>
29-
<div slot="main">Main</div>
30-
</uui-box>
31-
`,
32-
},
33-
},
34-
};
24+
25+
export const Slots: Story = () => html`
26+
<uui-box>
27+
<uui-button slot="headline" look="placeholder" style="font-weight:inherit;"
28+
>Headline slot</uui-button
29+
>
30+
<uui-button slot="header" look="placeholder">Header slot</uui-button>
31+
<uui-button look="placeholder">Default slot</uui-button>
32+
</uui-box>
33+
`;

packages/uui-box/lib/uui-box.test.ts

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('UUIBox', () => {
77
beforeEach(async () => {
88
element = await fixture(html` <uui-box>
99
<div slot="header">Header</div>
10-
<div slot="main">Main</div>
10+
Main
1111
</uui-box>`);
1212
});
1313

@@ -18,4 +18,27 @@ describe('UUIBox', () => {
1818
it('passes the a11y audit', async () => {
1919
await expect(element).shadowDom.to.be.accessible();
2020
});
21+
22+
describe('properties', () => {
23+
it('has a headline property', () => {
24+
expect(element).to.have.property('headline');
25+
});
26+
});
27+
28+
describe('template', () => {
29+
it('renders a default slot', () => {
30+
const slot = element.shadowRoot!.querySelector('slot')!;
31+
expect(slot).to.exist;
32+
});
33+
34+
it('renders an headline slot', () => {
35+
const slot = element.shadowRoot!.querySelector('slot[name=headline]')!;
36+
expect(slot).to.exist;
37+
});
38+
39+
it('renders a header slot', () => {
40+
const slot = element.shadowRoot!.querySelector('slot[name=header]')!;
41+
expect(slot).to.exist;
42+
});
43+
});
2144
});

packages/uui-box/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
"custom-elements.json"
3030
],
3131
"dependencies": {
32-
"@umbraco-ui/uui-base": "0.0.17"
32+
"@umbraco-ui/uui-base": "0.0.17",
33+
"@umbraco-ui/uui-css": "0.0.4"
3334
},
3435
"scripts": {
3536
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

packages/uui-box/tsconfig.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
"references": [
1313
{
1414
"path": "../uui-base"
15+
},
16+
{
17+
"path": "../uui-css"
1518
}
1619
]
1720
}

packages/uui-button/lib/uui-button.element.ts

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
5454
--uui-button-padding-right-factor: 3;
5555
--uui-button-padding-top-factor: 1;
5656
--uui-button-padding-bottom-factor: 1;
57+
58+
text-align: center;
59+
font-weight: var(
60+
--uui-button-font-weight,
61+
var(--uui-interface-font-weight)
62+
);
5763
}
5864
5965
:host([compact]) {
@@ -90,7 +96,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
9096
calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))
9197
calc(calc(8 / 15 * 1em) * var(--uui-button-padding-bottom-factor))
9298
calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
93-
text-align: center;
99+
text-align: inherit; /* Inherit from host so it can be overwritten from the outside */
94100
vertical-align: middle;
95101
box-shadow: none;
96102
border-width: var(--uui-button-border-width, 1px);
@@ -104,12 +110,10 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
104110
var(--uui-border-radius)
105111
);
106112
cursor: pointer;
107-
font-weight: var(
108-
--uui-button-font-weight,
109-
var(--uui-interface-font-weight)
110-
);
113+
111114
font-size: var(--uui-button-font-size, inherit);
112115
font-family: inherit;
116+
font-weight: inherit; /* Inherit from host so it can be overwritten from the outside */
113117
114118
background-color: var(
115119
--uui-button-background-color,
@@ -185,6 +189,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
185189
186190
/* LOOKS */
187191
192+
:host([look='primary']) {
193+
font-weight: var(--uui-look-primary-font-weight);
194+
}
188195
:host([look='primary']) button {
189196
background-color: var(
190197
--uui-button-background-color,
@@ -203,7 +210,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
203210
--uui-button-border-color,
204211
var(--uui-look-primary-border)
205212
);
206-
font-weight: var(--uui-look-primary-font-weight);
207213
}
208214
:host([look='primary']) button:hover {
209215
background-color: var(
@@ -228,6 +234,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
228234
);
229235
}
230236
237+
:host([look='secondary']) {
238+
font-weight: var(--uui-look-secondary-font-weight);
239+
}
231240
:host([look='secondary']) button {
232241
background-color: var(
233242
--uui-button-background-color,
@@ -246,7 +255,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
246255
--uui-button-border-color,
247256
var(--uui-look-secondary-border)
248257
);
249-
font-weight: var(--uui-look-secondary-font-weight);
250258
}
251259
:host([look='secondary']) button:hover {
252260
background-color: var(
@@ -271,6 +279,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
271279
);
272280
}
273281
282+
:host([look='outline']) button {
283+
font-weight: var(--uui-look-outline-font-weight);
284+
}
274285
:host([look='outline']) button {
275286
background-color: var(
276287
--uui-button-background-color,
@@ -289,7 +300,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
289300
--uui-button-border-color,
290301
var(--uui-look-outline-border)
291302
);
292-
font-weight: var(--uui-look-outline-font-weight);
293303
}
294304
:host([look='outline']) button:hover {
295305
background-color: var(
@@ -314,6 +324,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
314324
);
315325
}
316326
327+
:host([look='placeholder']) {
328+
font-weight: var(--uui-look-placeholder-font-weight);
329+
}
317330
:host([look='placeholder']) button {
318331
background-color: var(
319332
--uui-button-background-color,
@@ -332,7 +345,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
332345
--uui-button-border-color,
333346
var(--uui-look-placeholder-border)
334347
);
335-
font-weight: var(--uui-look-placeholder-font-weight);
336348
}
337349
:host([look='placeholder']) button:hover {
338350
background-color: var(
@@ -357,6 +369,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
357369
);
358370
}
359371
372+
:host([look='positive']) {
373+
font-weight: var(--uui-look-positive-font-weight);
374+
}
360375
:host([look='positive']) button {
361376
background-color: var(
362377
--uui-button-background-color,
@@ -375,7 +390,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
375390
--uui-button-border-color,
376391
var(--uui-look-positive-border)
377392
);
378-
font-weight: var(--uui-look-positive-font-weight);
379393
}
380394
:host([look='positive']) button:hover {
381395
background-color: var(
@@ -400,6 +414,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
400414
);
401415
}
402416
417+
:host([look='warning']) {
418+
font-weight: var(--uui-look-warning-font-weight);
419+
}
403420
:host([look='warning']) button {
404421
background-color: var(
405422
--uui-button-background-color,
@@ -418,7 +435,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
418435
--uui-button-border-color,
419436
var(--uui-look-warning-border)
420437
);
421-
font-weight: var(--uui-look-warning-font-weight);
422438
}
423439
:host([look='warning']) button:hover {
424440
background-color: var(
@@ -443,6 +459,9 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
443459
);
444460
}
445461
462+
:host([look='danger']) {
463+
font-weight: var(--uui-look-danger-font-weight);
464+
}
446465
:host([look='danger']) button {
447466
background-color: var(
448467
--uui-button-background-color,
@@ -461,7 +480,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
461480
--uui-button-border-color,
462481
var(--uui-look-danger-border)
463482
);
464-
font-weight: var(--uui-look-danger-font-weight);
465483
}
466484
:host([look='danger']) button:hover {
467485
background-color: var(

0 commit comments

Comments
 (0)