Skip to content

Commit 52ad57d

Browse files
madsrasmussenmadsrasmussen
committed
Update uui-card-content-node.story.ts
1 parent 741dd2a commit 52ad57d

File tree

1 file changed

+91
-60
lines changed

1 file changed

+91
-60
lines changed

‎packages/uui-card-content-node/lib/uui-card-content-node.story.ts

Lines changed: 91 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,20 @@ export default {
2020
],
2121
};
2222

23+
/* TODO: we should make some kind of component for this data layout */
24+
const cardContent = html`
25+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
26+
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
27+
<li>
28+
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
29+
</li>
30+
<li><span style="font-weight: 700">Some property:</span> Some value</li>
31+
<li>
32+
<span style="font-weight: 700">Another property:</span> Another value
33+
</li>
34+
</ul>
35+
`;
36+
2337
export const AAAOverview: Story = props =>
2438
html`
2539
<uui-card-content-node
@@ -29,17 +43,7 @@ export const AAAOverview: Story = props =>
2943
?error=${props.error}
3044
?disabled=${props.disabled}>
3145
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
32-
<!-- TODO: we should make some kind of component for this data layout: -->
33-
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
34-
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
35-
<li>
36-
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
37-
</li>
38-
<li><span style="font-weight: 700">Some property:</span> Some value</li>
39-
<li>
40-
<span style="font-weight: 700">Another property:</span> Another value
41-
</li>
42-
</ul>
46+
${cardContent}
4347
</uui-card-content-node>
4448
`;
4549
AAAOverview.storyName = 'Overview';
@@ -68,82 +72,63 @@ AAAOverview.parameters = {
6872
},
6973
};
7074

71-
export const CustomIcon: Story = props => html`
75+
export const CustomIcon: Story = () => html`
7276
<uui-icon-registry-essential>
73-
<uui-card-content-node
74-
name=${props.name}
75-
?selectable=${props.selectable}
76-
?selected=${props.selected}
77-
?error=${props.error}
78-
?disabled=${props.disabled}>
79-
<uui-icon slot="icon" name="picture"></uui-icon>
80-
<uui-tag size="s" slot="tag" look="positive">Published</uui-tag>
81-
<!-- TODO: we should make some kind of component for this data layout: -->
82-
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
83-
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
84-
<li>
85-
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
86-
</li>
87-
<li><span style="font-weight: 700">Some property:</span> Some value</li>
88-
<li>
89-
<span style="font-weight: 700">Another property:</span> Another value
90-
</li>
91-
</ul>
77+
<uui-card-content-node name="The card">
78+
<uui-icon slot="icon" name="wand"></uui-icon>
79+
${cardContent}
9280
</uui-card-content-node>
9381
</uui-icon-registry-essential>
9482
`;
9583

9684
CustomIcon.parameters = {
85+
controls: { include: [''] },
9786
docs: {
9887
source: {
9988
code: `
100-
<uui-card-content-node selectable name="The card">
101-
<uui-icon slot="icon" name="bug"></uui-icon>
102-
</uui-card-content-node>
103-
`,
89+
<uui-icon-registry-essential>
90+
<uui-card-content-node name="The card">
91+
<uui-icon slot="icon" name="wand"></uui-icon>
92+
93+
<!-- Content -->
94+
</uui-card-content-node>
95+
<uui-icon-registry-essential>
96+
`,
10497
},
10598
},
10699
};
107100

108-
export const Actions: Story = props => html`
109-
<uui-card-content-node
110-
name=${props.name}
111-
?selectable=${props.selectable}
112-
?selected=${props.selected}
113-
?error=${props.error}
114-
?disabled=${props.disabled}>
101+
export const Actions: Story = () => html`
102+
<uui-card-content-node name="The card">
115103
<uui-action-bar slot="actions">
116104
<uui-button label="Remove">Remove</uui-button>
117105
</uui-action-bar>
118-
<!-- TODO: we should make some kind of component for this data layout: -->
119-
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
120-
<li><span style="font-weight: 700">Created:</span> Yesterday</li>
121-
<li>
122-
<span style="font-weight: 700">Last Edited: </span> 2021-03-15 09:29
123-
</li>
124-
<li><span style="font-weight: 700">Some property:</span> Some value</li>
125-
<li>
126-
<span style="font-weight: 700">Another property:</span> Another value
127-
</li>
128-
</ul>
106+
${cardContent}
129107
</uui-card-content-node>
130108
`;
131109

132110
Actions.parameters = {
111+
controls: { include: [''] },
133112
docs: {
134113
source: {
135114
code: `
136-
<uui-card-content-node selectable name="The card">
137-
<uui-action-bar slot="actions">
138-
<uui-button label="Remove">Remove</uui-button>
139-
</uui-action-bar>
140-
</uui-card-content-node>
115+
<uui-card-content-node name="The card">
116+
<uui-action-bar slot="actions">
117+
<uui-button label="Remove">Remove</uui-button>
118+
</uui-action-bar>
119+
120+
<!-- Content -->
121+
</uui-card-content-node>
141122
`,
142123
},
143124
},
144125
};
145126

146-
export const Disabled = AAAOverview.bind({});
127+
export const Disabled: Story = props => html`
128+
<uui-card-content-node ?disabled=${props.disabled} name="The card">
129+
${cardContent}
130+
</uui-card-content-node>
131+
`;
147132

148133
Disabled.args = {
149134
disabled: true,
@@ -153,7 +138,53 @@ Disabled.parameters = {
153138
docs: {
154139
source: {
155140
code: `
156-
<uui-card-content-node disabled name="The card"></uui-card-content-node>
141+
<uui-card-content-node name="The card" disabled>
142+
<!-- Content -->
143+
</uui-card-content-node>
144+
`,
145+
},
146+
},
147+
};
148+
149+
export const Error: Story = props => html`
150+
<uui-card-content-node ?error=${props.error} name="The card">
151+
${cardContent}
152+
</uui-card-content-node>
153+
`;
154+
155+
Error.args = {
156+
error: true,
157+
};
158+
Error.parameters = {
159+
controls: { include: ['error'] },
160+
docs: {
161+
source: {
162+
code: `
163+
<uui-card-content-node name="The card" error>
164+
<!-- Content -->
165+
</uui-card-content-node>
166+
`,
167+
},
168+
},
169+
};
170+
171+
export const Selectable: Story = props => html`
172+
<uui-card-content-node ?selectable=${props.selectable} name="The card">
173+
${cardContent}
174+
</uui-card-content-node>
175+
`;
176+
177+
Selectable.args = {
178+
selectable: true,
179+
};
180+
Selectable.parameters = {
181+
controls: { include: ['selectable'] },
182+
docs: {
183+
source: {
184+
code: `
185+
<uui-card-content-node name="The card" selectable>
186+
<!-- Content -->
187+
</uui-card-content-node>
157188
`,
158189
},
159190
},

0 commit comments

Comments
 (0)