diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts
index bd5981c1ffa..103efe3145e 100644
--- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts
+++ b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts
@@ -10,38 +10,145 @@
import { html } from 'lit-element';
import '../index';
import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20';
+import { select } from '@storybook/addon-knobs';
import styles from './pictogram-item.stories.scss';
-
import readme from './README.stories.mdx';
import textNullable from '../../../../.storybook/knob-text-nullable';
+/* eslint-disable max-len */
+const Desktop = html`
+
+`;
+const Pattern = html`
+
+`;
+const Touch = html`
+
+`;
+/* eslint-enable max-len */
+
+/**
+ * Returns the pictogram based on the storybook knob value
+ *
+ * @param {string} sel string that defines the returning pictogram
+ * @returns {*} Pictogram SVG markup
+ */
+const selectPictogram = sel => {
+ switch (sel) {
+ case 'Desktop':
+ return Desktop;
+ case 'Pattern':
+ return Pattern;
+ case 'Touch':
+ return Touch;
+ default:
+ return '';
+ }
+};
+
+const pictograms = {
+ Desktop: 'Desktop',
+ Touch: 'Touch',
+ Pattern: 'Pattern',
+};
+
export const Default = ({ parameters }) => {
- const { heading, copy, href, linkCopy } = parameters?.props?.PictogramItem ?? {};
+ const { heading, copy, href, linkCopy, pictogram } = parameters?.props?.PictogramItem ?? {};
return html`
-
+ ${pictogram?.src}
${heading}
${copy}
@@ -65,6 +172,10 @@ export default {
'Ut enim ad minim veniam\n',
href: textNullable('Link with Icon href:', 'https://example.com', groupId),
linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor', groupId),
+ pictogram: {
+ src: selectPictogram(select('Pictogram (required)', pictograms, pictograms.Desktop, groupId)),
+ 'aria-label': textNullable('Aria-label:', 'Pictogram description', groupId),
+ },
}),
},
},