Skip to content

Commit af410f9

Browse files
iOvergaardnielslyngsoe
iOvergaard
and
nielslyngsoe
authored
storybook uui-table documentation (#233)
Co-authored-by: Niels Lyngsø <[email protected]>
1 parent d94f6f3 commit af410f9

File tree

13 files changed

+249
-93
lines changed

13 files changed

+249
-93
lines changed

‎.storybook/preview.js

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const parameters = {
2020
actions: { argTypesRegex: '^on[A-Z].*' },
2121
controls: {
2222
matchers: {
23-
color: /(background|color)$/i,
23+
color: /(background|color)/i,
2424
date: /Date$/,
2525
},
2626
},
@@ -31,19 +31,6 @@ export const parameters = {
3131
method: 'alphabetical',
3232
storySort: sort,
3333
},
34-
// Hides the CSS: [] property on the docs page.
35-
argTypes: {
36-
styles: {
37-
table: {
38-
disable: true,
39-
},
40-
},
41-
formAssociated: {
42-
table: {
43-
disable: true,
44-
},
45-
},
46-
},
4734
};
4835

4936
WebComponentFormatter(customElements);
@@ -52,16 +39,39 @@ setCustomElements(customElements);
5239

5340
function WebComponentFormatter(customElements) {
5441
for (let tag of customElements.tags || []) {
42+
// Hide all attributes, since we only use props for storybook
43+
tag.attributes = [];
44+
45+
// Hide all 'styles' and 'formAssociated' entries for properties
46+
for (let prop in tag.properties || []) {
47+
if (
48+
tag.properties[prop].name === 'styles' ||
49+
tag.properties[prop].name === 'formAssociated'
50+
) {
51+
delete tag.properties[prop];
52+
}
53+
}
54+
55+
// Run through all CSS Custom Properties and clean them a bit
56+
for (let cssProp of tag.cssProperties || []) {
57+
// If the property does not have a type, set it to string
58+
if (!cssProp.type) {
59+
cssProp.type = 'string';
60+
}
61+
}
62+
5563
// Find all names of properties
5664
const propertyNames = (tag.properties || []).map(p => p.name);
5765

66+
// Run through all slots to clean them up a bit
5867
for (let slot of tag.slots || []) {
5968
// Replace the name of the default slot so Storybook will show it
6069
if (typeof slot.name === 'string' && slot.name.length === 0) {
6170
slot.name = 'slot';
6271
}
6372

6473
// If the slot has the same name as a property, then add the word 'slot' to the name
74+
// Bug reported to Storybook here: https://github.com/storybookjs/storybook/issues/17733
6575
if (propertyNames.includes(slot.name)) {
6676
slot.name = `${slot.name} slot`;
6777
}

‎packages/uui-badge/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ import { UUIBadgeElement } from '@umbraco-ui/uui-badge';
2929
## Usage
3030

3131
```html
32-
<uui-badge look="danger">!</uui-badge>
32+
<uui-badge color="danger">!</uui-badge>
3333
```

‎packages/uui-file-preview/lib/uui-file-preview.story.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const AAAOverview: Story = () => {
2727
<uui-icon-registry-essential>
2828
<uui-file-preview id="filePreview">
2929
<uui-action-bar slot="actions">
30-
<uui-button look="danger">
30+
<uui-button color="danger">
3131
<uui-icon name="delete"></uui-icon>
3232
</uui-button>
3333
</uui-action-bar>
@@ -49,7 +49,7 @@ filePreview.file = file;
4949
<uui-file-preview
5050
id="imagePreview">
5151
<uui-action-bar slot="actions">
52-
<uui-button look="danger">
52+
<uui-button color="danger">
5353
<uui-icon name="delete"></uui-icon>
5454
</uui-button>
5555
</uui-action-bar>
@@ -81,7 +81,7 @@ export const Image: Story = () => {
8181
<uui-icon-registry-essential>
8282
<uui-file-preview id="imagePreview">
8383
<uui-action-bar slot="actions">
84-
<uui-button look="danger">
84+
<uui-button color="danger">
8585
<uui-icon name="delete"></uui-icon>
8686
</uui-button>
8787
</uui-action-bar>
@@ -112,7 +112,7 @@ init();
112112
<uui-file-preview
113113
id="imagePreview">
114114
<uui-action-bar slot="actions">
115-
<uui-button look="danger">
115+
<uui-button color="danger">
116116
<uui-icon name="delete"></uui-icon>
117117
</uui-button>
118118
</uui-action-bar>

‎packages/uui-input-file/lib/uui-input-file.element.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export class UUIInputFileElement extends FormControlMixin(LitElement) {
239239
<uui-action-bar slot="actions">
240240
<uui-button
241241
@click=${() => this._removeFile(index)}
242-
look="danger"
242+
color="danger"
243243
label=${`Delete ${file.name}`}>
244244
<uui-icon name="delete" .fallback=${iconDelete.strings[0]}></uui-icon>
245245
</uui-button>

‎packages/uui-menu-item/lib/uui-menu-item.story.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ WithBadge.parameters = {
274274
source: {
275275
code: html`
276276
<uui-menu-item label="Menu Item 2">
277-
<uui-badge slot="badge" look="warning">!</uui-badge>
277+
<uui-badge slot="badge" color="warning">!</uui-badge>
278278
</uui-menu-item>
279279
`.strings,
280280
},

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

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,27 @@ export default {
3636
parameters: {
3737
docs: {
3838
source: {
39-
code: `<uui-popover></uui-popover>`,
39+
code: `
40+
<script>
41+
var popover = document.getElementById('myPopover');
42+
var popoverOpenBtn = document.getElementById('myPopoverBtn');
43+
44+
popoverOpenBtn.addEventListener('click', () => {
45+
popover.open = !popover.open;
46+
});
47+
</script>
48+
49+
<uui-popover placement="bottom-start" id="myPopover">
50+
<uui-button
51+
slot="trigger"
52+
look="primary"
53+
label="Open dropdown"
54+
id="myPopoverBtn">
55+
</uui-button>
56+
<div slot="popover">
57+
My Content appearing inside popover box.
58+
</div>
59+
</uui-popover>`,
4060
},
4161
},
4262
chromatic: { disableSnapshot: true },
@@ -230,6 +250,11 @@ Nested.parameters = {
230250
controls: {
231251
include: ['placement', 'margin'],
232252
},
253+
docs: {
254+
source: {
255+
code: `See story code as example`,
256+
},
257+
},
233258
};
234259

235260
export const Tooltip: Story = props => {
@@ -314,6 +339,11 @@ Tooltip.parameters = {
314339
controls: {
315340
include: ['placement', 'margin'],
316341
},
342+
docs: {
343+
source: {
344+
code: `See story code as example`,
345+
},
346+
},
317347
};
318348

319349
Tooltip.play = () => {

‎packages/uui-table/lib/uui-table-advanced-example.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,22 @@ export class UUITableWithSelectionExampleElement extends LitElement {
3434
display: none;
3535
}
3636
37+
uui-table-row:focus uui-icon,
38+
uui-table-row:focus-within uui-icon,
3739
uui-table-row:hover uui-icon,
3840
uui-table-row[select-only] uui-icon {
3941
display: none;
4042
}
4143
44+
uui-table-row:focus uui-checkbox,
45+
uui-table-row:focus-within uui-checkbox,
4246
uui-table-row:hover uui-checkbox,
4347
uui-table-row[select-only] uui-checkbox {
4448
display: inline-block;
4549
}
4650
51+
uui-table-head-cell:focus,
52+
uui-table-head-cell:focus-within,
4753
uui-table-head-cell:hover {
4854
--uui-symbol-sort-hover: 1;
4955
}

‎packages/uui-table/lib/uui-table-cell.element.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import { property } from 'lit/decorators.js';
66
* Table cell that detects if it has overflow and if so it'll add a title attribute to itself to display full text. Must be a child of uui-table-row
77
* @element uui-table-cell
88
* @slot - slot for table cell content
9+
* @cssprop --uui-table-cell-padding - overwrite the table cell padding
10+
* @cssprop --uui-table-cell-height - overwrite the table cell height
911
*/
1012
@defineElement('uui-table-cell')
1113
export class UUITableCellElement extends LitElement {
1214
static styles = [
1315
css`
1416
:host {
1517
display: table-cell;
16-
height: var(--uui-size-12);
18+
height: var(--uui-table-cell-height, var(--uui-size-12));
1719
padding: var(
1820
--uui-table-cell-padding,
1921
var(--uui-size-4) var(--uui-size-5)
@@ -39,6 +41,10 @@ export class UUITableCellElement extends LitElement {
3941
position: absolute;
4042
inset: 0;
4143
}
44+
45+
:host([no-padding]) {
46+
padding: 0;
47+
}
4248
`,
4349
];
4450

‎packages/uui-table/lib/uui-table-cell.story.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import '.';
2+
3+
import { Story } from '@storybook/web-components';
4+
import { html } from 'lit-html';
5+
6+
import { UUITableCellElement } from './uui-table-cell.element';
7+
8+
export default {
9+
title: 'Layout/Table/Table Cell',
10+
component: 'uui-table-cell',
11+
id: 'uui-table-cell',
12+
};
13+
14+
export const AAAOverview: Story<UUITableCellElement> = props =>
15+
html`
16+
<uui-table
17+
aria-label="Random Umbraco Words"
18+
aria-describedby="table-description">
19+
<uui-table-row>
20+
<uui-table-cell
21+
?disable-child-interaction=${props.disableChildInteraction}
22+
?no-padding=${props.noPadding}
23+
?clip-text=${props.clipText}>
24+
Umbraco
25+
</uui-table-cell>
26+
<uui-table-cell
27+
?disable-child-interaction=${props.disableChildInteraction}
28+
?no-padding=${props.noPadding}
29+
?clip-text=${props.clipText}>
30+
Rocks
31+
</uui-table-cell>
32+
<uui-table-cell
33+
?disable-child-interaction=${props.disableChildInteraction}
34+
?no-padding=${props.noPadding}
35+
?clip-text=${props.clipText}>
36+
${props.slot}
37+
</uui-table-cell>
38+
</uui-table-row>
39+
</uui-table>
40+
`;
41+
AAAOverview.storyName = 'Overview';
42+
AAAOverview.args = {
43+
slot: 'Very very very Very very very Very very very Very very very Very very very long sentence',
44+
};
45+
AAAOverview.parameters = {
46+
docs: {
47+
source: {
48+
code: `
49+
<uui-table aria-label="Example table" aria-describedby="#some-element-id">
50+
51+
<uui-table-row>
52+
<uui-table-cell>Cell 1</uui-table-cell>
53+
<uui-table-cell>Cell 2</uui-table-cell>
54+
</uui-table-row>
55+
56+
</uui-table>
57+
`,
58+
},
59+
},
60+
};

‎packages/uui-table/lib/uui-table-row.element.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { UUITableCellElement } from './uui-table-cell.element';
1212
* Table row element with option to set is as selectable. Parent for uui-table-cell. Must be a child of uui-table.
1313
* @element uui-table-row
1414
* @slot for <uui-table-cell> elements that should be in the row.
15+
* @cssprop --uui-table-row-color-selected - overwrite the color of the selected row
1516
*/
1617
@defineElement('uui-table-row')
1718
export class UUITableRowElement extends SelectOnlyMixin(
@@ -29,7 +30,8 @@ export class UUITableRowElement extends SelectOnlyMixin(
2930
}
3031
3132
:host([selected]) {
32-
outline: 2px solid var(--uui-color-selected);
33+
outline: 2px solid
34+
var(--uui-table-row-color-selected, var(--uui-color-selected));
3335
outline-offset: -3px;
3436
}
3537
`,

0 commit comments

Comments
 (0)