Skip to content

Commit 43e5d8b

Browse files
iOvergaardiOvergaard
committed
docs(storybook): add decorator
1 parent c66f659 commit 43e5d8b

File tree

1 file changed

+54
-64
lines changed

1 file changed

+54
-64
lines changed

‎packages/uui-ref-node/lib/uui-ref-node.story.ts

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,24 @@ export default {
99
id: 'uui-ref-node',
1010
title: 'Displays/References/Node',
1111
component: 'uui-ref-node',
12+
decorators: [
13+
(Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
14+
],
1215
};
1316

1417
const Template: Story = props => html`
15-
<div style="max-width: 420px;">
16-
<uui-ref-node
17-
name="${props.name}"
18-
detail="${props.detail}"
19-
?selectable=${props.selectable}
20-
?selectOnly=${props.selectOnly}
21-
?error=${props.error}
22-
?disabled=${props.disabled}>
23-
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
24-
<uui-action-bar slot="actions"
25-
><uui-button><uui-icon name="delete"></uui-icon></uui-button
26-
></uui-action-bar>
27-
</uui-ref-node>
28-
</div>
18+
<uui-ref-node
19+
name="${props.name}"
20+
detail="${props.detail}"
21+
?selectable=${props.selectable}
22+
?selectOnly=${props.selectOnly}
23+
?error=${props.error}
24+
?disabled=${props.disabled}>
25+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
26+
<uui-action-bar slot="actions"
27+
><uui-button><uui-icon name="delete"></uui-icon></uui-button
28+
></uui-action-bar>
29+
</uui-ref-node>
2930
`;
3031

3132
export const AAAOverview = Template.bind({});
@@ -52,16 +53,14 @@ AAAOverview.parameters = {
5253
};
5354

5455
export const CustomIcon: Story = () => html`
55-
<div style="max-width: 420px;">
56-
<uui-ref-node-data-type
57-
name="Rabbit Suit Product Page"
58-
detail="path/to/nowhere">
59-
<uui-icon slot="icon" name="shopping-basket-alt"></uui-icon>
60-
<uui-action-bar slot="actions">
61-
<uui-button label="Remove">Remove</uui-button>
62-
</uui-action-bar>
63-
</uui-ref-node-data-type>
64-
</div>
56+
<uui-ref-node-data-type
57+
name="Rabbit Suit Product Page"
58+
detail="path/to/nowhere">
59+
<uui-icon slot="icon" name="shopping-basket-alt"></uui-icon>
60+
<uui-action-bar slot="actions">
61+
<uui-button label="Remove">Remove</uui-button>
62+
</uui-action-bar>
63+
</uui-ref-node-data-type>
6564
`;
6665

6766
CustomIcon.parameters = {
@@ -82,19 +81,14 @@ CustomIcon.parameters = {
8281
};
8382

8483
export const Border: Story = () => html`
85-
<div style="max-width: 420px;">
86-
<uui-ref-node
87-
border
88-
name="Rabbit Suit Product Page"
89-
detail="path/to/nowhere">
90-
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
91-
<uui-action-bar slot="actions">
92-
<uui-button type="button" label="Delete"
93-
><uui-icon name="delete"></uui-icon
94-
></uui-button>
95-
</uui-action-bar>
96-
</uui-ref-node>
97-
</div>
84+
<uui-ref-node border name="Rabbit Suit Product Page" detail="path/to/nowhere">
85+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
86+
<uui-action-bar slot="actions">
87+
<uui-button type="button" label="Delete"
88+
><uui-icon name="delete"></uui-icon
89+
></uui-button>
90+
</uui-action-bar>
91+
</uui-ref-node>
9892
`;
9993

10094
Border.parameters = {
@@ -116,19 +110,17 @@ Border.parameters = {
116110
};
117111

118112
export const Selectable: Story = props => html`
119-
<div style="max-width: 420px;">
120-
<uui-ref-node
121-
?selectable="${props.selectable}"
122-
name="Rabbit Suit Product Page"
123-
detail="path/to/nowhere">
124-
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
125-
<uui-action-bar slot="actions">
126-
<uui-button type="button" label="Delete"
127-
><uui-icon name="delete"></uui-icon
128-
></uui-button>
129-
</uui-action-bar>
130-
</uui-ref-node>
131-
</div>
113+
<uui-ref-node
114+
?selectable="${props.selectable}"
115+
name="Rabbit Suit Product Page"
116+
detail="path/to/nowhere">
117+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
118+
<uui-action-bar slot="actions">
119+
<uui-button type="button" label="Delete"
120+
><uui-icon name="delete"></uui-icon
121+
></uui-button>
122+
</uui-action-bar>
123+
</uui-ref-node>
132124
`;
133125

134126
Selectable.args = {
@@ -154,19 +146,17 @@ Selectable.parameters = {
154146
};
155147

156148
export const Disabled: Story = props => html`
157-
<div style="max-width: 420px;">
158-
<uui-ref-node
159-
?disabled="${props.disabled}"
160-
name="Rabbit Suit Product Page"
161-
detail="path/to/nowhere">
162-
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
163-
<uui-action-bar slot="actions">
164-
<uui-button type="button" label="Delete"
165-
><uui-icon name="delete"></uui-icon
166-
></uui-button>
167-
</uui-action-bar>
168-
</uui-ref-node>
169-
</div>
149+
<uui-ref-node
150+
?disabled="${props.disabled}"
151+
name="Rabbit Suit Product Page"
152+
detail="path/to/nowhere">
153+
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
154+
<uui-action-bar slot="actions">
155+
<uui-button type="button" label="Delete"
156+
><uui-icon name="delete"></uui-icon
157+
></uui-button>
158+
</uui-action-bar>
159+
</uui-ref-node>
170160
`;
171161

172162
Disabled.args = {
@@ -193,7 +183,7 @@ Disabled.parameters = {
193183

194184
const listOfNodeNames: string[] = ArrayOfUmbracoWords(10);
195185
export const Listed: Story = () => html`
196-
<uui-ref-list style="max-width: 420px;">
186+
<uui-ref-list>
197187
${listOfNodeNames.map(
198188
name => html`<uui-ref-node name=${name} detail="path/to/nowhere">
199189
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>

0 commit comments

Comments
 (0)