Skip to content

Commit 614182c

Browse files
nielslyngsoenielslyngsoe
authored
Merge pull request #123 from umbraco/feature/uui-dialog-layout
2 parents b0f9e17 + ad564a9 commit 614182c

13 files changed

+4146
-2038
lines changed

‎package-lock.json

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

‎packages/uui-button/lib/uui-button.story.ts

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -241,23 +241,25 @@ Looks.parameters = {
241241
};
242242

243243
export const WithIcon = () => html`
244-
<uui-button look="danger" label="A11Y proper label">
245-
<uui-icon .name=${'bug'}></uui-icon>
246-
</uui-button>
247-
<br />
248-
<br />
249-
<uui-button look="danger" label="A11Y proper label">
250-
<uui-icon .name=${'bug'}></uui-icon>Button with icon
251-
</uui-button>
252-
<br />
253-
<br />
254-
<p>
255-
The default sizing for a button with only an icon is generally too wide,
256-
there please use with the 'compact' attribute.
257-
</p>
258-
<uui-button look="positive" compact label="A11Y proper label">
259-
<uui-icon name="alert"></uui-icon>
260-
</uui-button>
244+
<uui-icon-registry-essential>
245+
<uui-button look="danger" label="A11Y proper label">
246+
<uui-icon .name=${'favorite'}></uui-icon>
247+
</uui-button>
248+
<br />
249+
<br />
250+
<uui-button look="danger" label="A11Y proper label">
251+
<uui-icon .name=${'favorite'}></uui-icon>Button with icon
252+
</uui-button>
253+
<br />
254+
<br />
255+
<p>
256+
The default sizing for a button with only an icon is generally too wide,
257+
there please use with the 'compact' attribute.
258+
</p>
259+
<uui-button look="positive" compact label="A11Y proper label">
260+
<uui-icon name="favorite"></uui-icon>
261+
</uui-button>
262+
</uui-icon-registry-essential>
261263
`;
262264
WithIcon.parameters = {
263265
docs: {

‎packages/uui-dialog-layout/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# uui-dialog-layout
2+
3+
![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-dialog-layout?logoColor=%231B264F)
4+
5+
Umbraco style dialog-layout component.
6+
7+
## Installation
8+
9+
### ES imports
10+
11+
```zsh
12+
npm i @umbraco-ui/uui-dialog-layout
13+
```
14+
15+
Import the registration of `<uui-dialog-layout>` via:
16+
17+
```javascript
18+
import '@umbraco-ui/uui-dialog-layout';
19+
```
20+
21+
When looking to leverage the `UUIDialogLayoutElement` base class as a type and/or for extension purposes, do so via:
22+
23+
```javascript
24+
import { UUIDialogLayoutElement } from '@umbraco-ui/uui-dialog-layout';
25+
```
26+
27+
## Usage
28+
29+
```html
30+
<uui-dialog-layout></uui-dialog-layout>
31+
```

‎packages/uui-dialog-layout/lib/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './uui-dialog-layout.element';

‎packages/uui-dialog-layout/lib/uui-dialog-layout.element.ts

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { LitElement, html, css } from 'lit';
2+
import { property, state } from 'lit/decorators.js';
3+
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
4+
5+
/**
6+
* @element uui-dialog-layout
7+
* @slot default - Use this for the text content
8+
* @slot headline - Use this for slotted headline
9+
* @slot actions - Use this for actions
10+
* @description - Default dialog layout
11+
*/
12+
@defineElement('uui-dialog-layout')
13+
export class UUIDialogLayoutElement extends LitElement {
14+
static styles = [
15+
css`
16+
:host {
17+
display: block;
18+
padding: var(--uui-size-10) var(--uui-size-14);
19+
}
20+
21+
#actions {
22+
margin-top: var(--uui-size-8);
23+
display: flex;
24+
justify-content: end;
25+
gap: var(--uui-size-4);
26+
}
27+
`,
28+
];
29+
30+
/**
31+
* Headline for this notification, can also be set via the 'headline' slot.
32+
* @type string
33+
* @attr
34+
* @default null
35+
*/
36+
@property({ type: String })
37+
headline: string | null = null;
38+
39+
@state()
40+
private _headlineSlotHasContent = false;
41+
42+
private _headlineSlotChanged = (e: Event) => {
43+
this._headlineSlotHasContent =
44+
(e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;
45+
};
46+
47+
/**
48+
* Renders a h3 with the headline slot nested
49+
* @returns {TemplateResult}
50+
* @protected
51+
* @method
52+
*/
53+
protected renderHeadline() {
54+
return html` <h3
55+
style=${this._headlineSlotHasContent || this.headline !== null
56+
? ''
57+
: 'display: none'}>
58+
${this.headline}
59+
<slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
60+
</h3>`;
61+
}
62+
63+
/**
64+
* Renders default slot
65+
* @returns {TemplateResult}
66+
* @protected
67+
* @method
68+
*/
69+
protected renderContent() {
70+
return html`<slot></slot>`;
71+
}
72+
73+
/**
74+
* Renders actions slot
75+
* @returns {TemplateResult}
76+
* @protected
77+
* @method
78+
*/
79+
protected renderActions() {
80+
return html`<slot id="actions" name="actions"></slot>`;
81+
}
82+
83+
render() {
84+
return html`${this.renderHeadline()} ${this.renderContent()}
85+
${this.renderActions()} `;
86+
}
87+
}

‎packages/uui-dialog-layout/lib/uui-dialog-layout.story.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import '.';
2+
3+
import { Story } from '@storybook/web-components';
4+
import { html } from 'lit-html';
5+
6+
export default {
7+
id: 'uui-dialog-layout',
8+
title: 'Displays/Dialog/Dialog Layout',
9+
component: 'uui-dialog-layout',
10+
parameters: {
11+
docs: {
12+
source: {
13+
code: `<uui-dialog-layout></uui-dialog-layout>`,
14+
},
15+
},
16+
},
17+
};
18+
19+
export const Overview: Story = () =>
20+
html`<uui-dialog-layout headline="Headline">
21+
<p>
22+
The dialog layout component provides a default layout to the dialog
23+
component. This is used as a direct child of the dialog element component.
24+
Please view Dialog stories for examples.
25+
</p>
26+
<uui-button slot="actions">Cancel</uui-button>
27+
<uui-button slot="actions" look="positive">Action</uui-button>
28+
</uui-dialog-layout>`;

‎packages/uui-dialog-layout/lib/uui-dialog-layout.test.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
2+
import { UUIDialogLayoutElement } from './uui-dialog-layout.element';
3+
import '.';
4+
5+
describe('UUIDialogLayoutElement', () => {
6+
let element: UUIDialogLayoutElement;
7+
8+
beforeEach(async () => {
9+
element = await fixture(html` <uui-dialog-layout></uui-dialog-layout> `);
10+
});
11+
12+
it('passes the a11y audit', async () => {
13+
await expect(element).shadowDom.to.be.accessible();
14+
});
15+
16+
describe('properties', () => {
17+
it('headline', () => {
18+
expect(element).to.have.property('headline');
19+
});
20+
});
21+
22+
describe('template', () => {
23+
it('renders a default slot', () => {
24+
const slot = element.shadowRoot!.querySelector('slot')!;
25+
expect(slot).to.exist;
26+
});
27+
it('renders a headline slot', () => {
28+
const slot = element.shadowRoot!.querySelector('slot[name="headline"]')!;
29+
expect(slot).to.exist;
30+
});
31+
it('renders a actions slot', () => {
32+
const slot = element.shadowRoot!.querySelector('slot[name="actions"]')!;
33+
expect(slot).to.exist;
34+
});
35+
});
36+
37+
describe('styling', () => {
38+
it('set display none when no headline is provided', () => {
39+
const display = element.shadowRoot!.querySelector('h3')!.style.display;
40+
41+
expect(display).to.equal('none');
42+
});
43+
it('set resets display when a headline is provided', async () => {
44+
element.headline = 'headline';
45+
46+
await elementUpdated(element);
47+
const display = element.shadowRoot!.querySelector('h3')!.style.display;
48+
49+
expect(display).to.equal('');
50+
});
51+
});
52+
});

‎packages/uui-dialog-layout/package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "@umbraco-ui/uui-dialog-layout",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"keywords": [
6+
"Umbraco",
7+
"Custom elements",
8+
"Web components",
9+
"UI",
10+
"Lit",
11+
"Dialog Layout"
12+
],
13+
"description": "Umbraco UI dialog-layout component",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/umbraco/Umbraco.UI.git",
17+
"directory": "packages/uui-dialog-layout"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
21+
},
22+
"main": "./lib/index.js",
23+
"module": "./lib/index.js",
24+
"types": "./lib/index.d.ts",
25+
"type": "module",
26+
"customElements": "custom-elements.json",
27+
"files": [
28+
"lib/**/*.d.ts",
29+
"lib/**/*.js",
30+
"custom-elements.json"
31+
],
32+
"dependencies": {
33+
"@umbraco-ui/uui-base": "0.0.15"
34+
},
35+
"scripts": {
36+
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
37+
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
38+
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
39+
},
40+
"publishConfig": {
41+
"access": "public"
42+
},
43+
"homepage": "https://uui.umbraco.com/?path=/story/uui-dialog-layout"
44+
}

‎packages/uui-dialog-layout/rollup.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { UUIProdConfig } from '../rollup-package.config';
2+
3+
export default UUIProdConfig({
4+
entryPoints: ['index'],
5+
});

‎packages/uui-dialog-layout/tsconfig.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
2+
3+
{
4+
"extends": "../../tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./lib",
7+
"rootDir": "./lib",
8+
"composite": true
9+
},
10+
"include": ["./**/*.ts"],
11+
"exclude": ["./**/*.test.ts", "./**/*.story.ts"],
12+
"references": [
13+
{
14+
"path": "../uui-base"
15+
}
16+
]
17+
}

0 commit comments

Comments
 (0)