Skip to content

Commit 493cbd8

Browse files
emyarodemyarod
authored
docs(pictogram-item): add select pictogram knob (#7661)
### Related Ticket(s) unblocks #7433 ### Description This PR adds a pictogram selector knob to the web components storybook to match the React storybook. The SVGs are currently hard coded as a temporary stop gap to unblock #7433 tests, but we should probably import the pictograms directly from the upstream Carbon package. We have a couple of options on how to do this (this can be an engineering huddle discussion): * add `@carbon/pictograms` as a dependency, add `svg-inline-loader` for webpack, and import the SVGs directly inline or * enhance [svgResultCarbonIcon](https://github.com/carbon-design-system/carbon-web-components/blob/master/tools/svg-result-carbon-icon.js) in `carbon-web-components` so that we can import pictogram helpers similar to the icon helpers we currently use (leaning towards this so that we can use them in other components in the library) Either of these can be implemented in the future to avoid hard coding pictograms ### Changelog **New** - pictogram selector in Pictogram Item web component storybook <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
1 parent a04b670 commit 493cbd8

File tree

1 file changed

+136
-25
lines changed

1 file changed

+136
-25
lines changed

‎packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts‎

Lines changed: 136 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,145 @@
1010
import { html } from 'lit-element';
1111
import '../index';
1212
import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
13+
import { select } from '@storybook/addon-knobs';
1314
import styles from './pictogram-item.stories.scss';
14-
1515
import readme from './README.stories.mdx';
1616
import textNullable from '../../../../.storybook/knob-text-nullable';
1717

18+
/* eslint-disable max-len */
19+
const Desktop = html`
20+
<svg
21+
slot="pictogram"
22+
focusable="false"
23+
preserveAspectRatio="xMidYMid meet"
24+
xmlns="http://www.w3.org/2000/svg"
25+
stroke="currentColor"
26+
data-autoid="dds--pictogram-item__pictogram"
27+
aria-label="Pictogram description"
28+
width="64"
29+
height="64"
30+
viewBox="8 8 32 32"
31+
role="img"
32+
class="bx--pictogram-item__pictogram"
33+
>
34+
<path
35+
fill="none"
36+
stroke-linejoin="round"
37+
stroke-miterlimit="10"
38+
stroke-width=".72"
39+
d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
40+
0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
41+
></path>
42+
</svg>
43+
`;
44+
const Pattern = html`
45+
<svg
46+
slot="pictogram"
47+
focusable="false"
48+
preserveAspectRatio="xMidYMid meet"
49+
xmlns="http://www.w3.org/2000/svg"
50+
data-autoid="dds--pictogram-item__pictogram"
51+
aria-label="Pictogram description"
52+
width="64"
53+
height="64"
54+
viewBox="0 0 32 32"
55+
role="img"
56+
class="bx--pictogram-item__pictogram"
57+
style="enable-background:new 0 0 32 32;"
58+
>
59+
<path
60+
id="pattern_1_"
61+
d="M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3
62+
c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16
63+
C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13
64+
c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1
65+
c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8
66+
c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6
67+
c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3
68+
c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36
69+
V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2
70+
c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36
71+
H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1
72+
c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36
73+
c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z
74+
M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2
75+
c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
76+
c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1
77+
c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3
78+
c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z
79+
M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1
80+
C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
81+
c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8
82+
c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8
83+
v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z"
84+
/>
85+
<rect id="_Transparent_Rectangle" style="fill:none;" width="32" height="32" />
86+
</svg>
87+
`;
88+
const Touch = html`
89+
<svg
90+
slot="pictogram"
91+
focusable="false"
92+
preserveAspectRatio="xMidYMid meet"
93+
xmlns="http://www.w3.org/2000/svg"
94+
data-autoid="dds--pictogram-item__pictogram"
95+
aria-label="Pictogram description"
96+
width="64"
97+
height="64"
98+
viewBox="0 0 32 32"
99+
role="img"
100+
class="bx--pictogram-item__pictogram"
101+
>
102+
<path
103+
id="touch_1_"
104+
d="M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444
105+
c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269
106+
c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0
107+
c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01
108+
C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357
109+
c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7
110+
c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337
111+
c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192
112+
c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729
113+
C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729
114+
l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64
115+
c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z"
116+
/>
117+
<rect id="_Transparent_Rectangle" style="fill:none;" width="32" height="32" />
118+
</svg>
119+
`;
120+
/* eslint-enable max-len */
121+
122+
/**
123+
* Returns the pictogram based on the storybook knob value
124+
*
125+
* @param {string} sel string that defines the returning pictogram
126+
* @returns {*} Pictogram SVG markup
127+
*/
128+
const selectPictogram = sel => {
129+
switch (sel) {
130+
case 'Desktop':
131+
return Desktop;
132+
case 'Pattern':
133+
return Pattern;
134+
case 'Touch':
135+
return Touch;
136+
default:
137+
return '';
138+
}
139+
};
140+
141+
const pictograms = {
142+
Desktop: 'Desktop',
143+
Touch: 'Touch',
144+
Pattern: 'Pattern',
145+
};
146+
18147
export const Default = ({ parameters }) => {
19-
const { heading, copy, href, linkCopy } = parameters?.props?.PictogramItem ?? {};
148+
const { heading, copy, href, linkCopy, pictogram } = parameters?.props?.PictogramItem ?? {};
20149
return html`
21150
<dds-pictogram-item>
22-
<svg
23-
slot="pictogram"
24-
focusable="false"
25-
preserveAspectRatio="xMidYMid meet"
26-
xmlns="http://www.w3.org/2000/svg"
27-
stroke="currentColor"
28-
data-autoid="dds--pictogram-item__pictogram"
29-
aria-label="Pictogram description"
30-
width="64"
31-
height="64"
32-
viewBox="8 8 32 32"
33-
role="img"
34-
class="bx--pictogram-item__pictogram"
35-
>
36-
<path
37-
fill="none"
38-
stroke-linejoin="round"
39-
stroke-miterlimit="10"
40-
stroke-width=".72"
41-
d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
42-
0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
43-
></path>
44-
</svg>
151+
${pictogram?.src}
45152
<dds-content-item-heading>${heading}</dds-content-item-heading>
46153
<dds-content-item-copy>${copy}</dds-content-item-copy>
47154
<dds-link-with-icon href="${href}" slot="footer">
@@ -65,6 +172,10 @@ export default {
65172
'Ut enim ad minim veniam\n',
66173
href: textNullable('Link with Icon href:', 'https://example.com', groupId),
67174
linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor', groupId),
175+
pictogram: {
176+
src: selectPictogram(select('Pictogram (required)', pictograms, pictograms.Desktop, groupId)),
177+
'aria-label': textNullable('Aria-label:', 'Pictogram description', groupId),
178+
},
68179
}),
69180
},
70181
},

0 commit comments

Comments
 (0)