@uh-design-system/component-library 0.6.1-rc.0 → 0.7.0

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.features.stories.js

@@ -0,0 +1,152 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Select/Features',
+    component: 'ds-select',
+};
+export default meta;
+export const Native = {
+    render: () => html `
+    <ds-select ds-title="Native Select" ds-placeholder="Select an option" ds-variant="native">
+      <option slot="native" value="option1">Option 1</option>
+      <option slot="native" value="option2">Option 2</option>
+      <option slot="native" value="option3">Option 3</option>
+    </ds-select>
+  `,
+};
+export const CustomId = {
+    render: () => html `
+    <ds-select ds-title="Select with Custom ID" ds-placeholder="Select an option" ds-variant="default" ds-id="custom-select-id">
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const GroupedOptions = {
+    render: () => html `
+    <ds-select ds-title="Grouped Options" ds-placeholder="Select an option" ds-variant="default">
+      <ds-option-group ds-label="Group 1">
+        <ds-option ds-value="group1-option1">Option 1</ds-option>
+        <ds-option ds-value="group1-option2">Option 2</ds-option>
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        <ds-option ds-value="group2-option1">Option 3</ds-option>
+        <ds-option ds-value="group2-option2">Option 4</ds-option>
+      </ds-option-group>
+    </ds-select>
+  `,
+};
+export const Disabled = {
+    render: () => html `
+    <ds-select ds-title="Disabled Select" ds-placeholder="Select an option" ds-variant="default" ds-disabled>
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const Invalid = {
+    render: () => html `
+    <ds-select
+      ds-title="Invalid Select"
+      ds-placeholder="Select an option"
+      ds-variant="default"
+      ds-error-text="This field is required"
+    >
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const LongList = {
+    render: () => html `
+    <ds-select ds-title="Long List" ds-placeholder="Select an option" ds-variant="default">
+      ${Array.from({ length: 50 }, (_, i) => html `<ds-option ds-value=${`option${i + 1}`}>Option ${i + 1}</ds-option>`)}
+    </ds-select>
+  `,
+};
+export const LongGroupedList = {
+    render: () => html `
+    <ds-select ds-title="Long Grouped List" ds-placeholder="Select an option" ds-variant="default">
+      <ds-option-group ds-label="Group 1">
+        ${Array.from({ length: 25 }, (_, i) => html `<ds-option ds-value=${`group1-option${i + 1}`}>Group 1 - Option ${i + 1}</ds-option>`)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        ${Array.from({ length: 25 }, (_, i) => html `<ds-option ds-value=${`group2-option${i + 1}`}>Group 2 - Option ${i + 1}</ds-option>`)}
+      </ds-option-group>
+    </ds-select>
+  `,
+};
+export const WithIcon = {
+    render: () => html `
+    <ds-select ds-title="Select with Icon" ds-placeholder="Search for an option" ds-variant="default" ds-icon="language">
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const WithDescriptions = {
+    render: () => html `
+    <ds-select ds-title="Select with Descriptions" ds-placeholder="Choose an option" ds-variant="default">
+      <ds-option ds-value="option1" ds-description="This is the first option">Option 1</ds-option>
+      <ds-option ds-value="option2" ds-description="This is the second option">Option 2</ds-option>
+      <ds-option ds-value="option3" ds-description="This is the third option">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const DynamicOptionsLoading = {
+    args: {
+        dsLoadingText: 'Loading options...',
+    },
+    render: (args) => {
+        const select = document.createElement('ds-select');
+        select.setAttribute('ds-title', 'Dynamic options');
+        select.setAttribute('ds-placeholder', 'Choose an option');
+        select.setAttribute('ds-variant', 'default');
+        select.setAttribute('ds-loading', 'true');
+        select.setAttribute('ds-loading-text', args.dsLoadingText);
+        select.dsLoadingText = args.dsLoadingText;
+        setTimeout(() => {
+            select.removeAttribute('ds-loading');
+            const option1 = document.createElement('ds-option');
+            option1.setAttribute('ds-value', 'option1');
+            option1.textContent = 'Option 1';
+            const option2 = document.createElement('ds-option');
+            option2.setAttribute('ds-value', 'option2');
+            option2.textContent = 'Option 2';
+            const option3 = document.createElement('ds-option');
+            option3.setAttribute('ds-value', 'option3');
+            option3.textContent = 'Option 3';
+            select.appendChild(option1);
+            select.appendChild(option2);
+            select.appendChild(option3);
+        }, 3000);
+        return select;
+    },
+    name: 'Dynamic options',
+};
+export const DynamicOptionsError = {
+    args: {
+        dsLoadingText: "Loading options...",
+        dsOptionsErrorTitle: "We couldn’t load the options",
+        dsOptionsErrorText: "Try again or if the problem persists contact support.",
+    },
+    render: (args) => {
+        const select = document.createElement('ds-select');
+        select.setAttribute('ds-title', 'Dynamic options (error)');
+        select.setAttribute('ds-placeholder', 'Choose an option');
+        select.setAttribute('ds-variant', 'default');
+        select.setAttribute('ds-loading', 'true');
+        select.setAttribute('ds-loading-text', args.dsLoadingText);
+        setTimeout(() => {
+            select.removeAttribute('ds-loading');
+            select.setAttribute('ds-options-error', 'true');
+            select.setAttribute('ds-options-error-title', args.dsOptionsErrorTitle);
+            select.setAttribute('ds-options-error-text', args.dsOptionsErrorText);
+        }, 3000);
+        return select;
+    },
+    name: 'Dynamic options (error)',
+};

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.stories.js

@@ -0,0 +1,112 @@
+import { html } from "lit";
+function renderDynamicOption(opt) {
+    if (typeof opt === 'string') {
+        try {
+            const parsed = JSON.parse(opt);
+            if (parsed && typeof parsed === 'object' && 'value' in parsed && 'label' in parsed) {
+                return html `<ds-option ds-value=${parsed.dsValue} ?ds-disabled=${parsed.dsDisabled}>${parsed.dsLabel}</ds-option>`;
+            }
+        }
+        catch {
+        }
+        return html `<ds-option ds-value=${opt} ?ds-disabled=${false}>${opt}</ds-option>`;
+    }
+    return html `<ds-option ds-value=${opt.dsValue} ?ds-disabled=${opt.dsDisabled}>${opt.dsLabel}</ds-option>`;
+}
+const meta = {
+    title: 'Base Components/Select',
+    component: 'ds-select',
+    argTypes: {
+        dsVariant: {
+            control: 'radio',
+            options: ['native', 'default'],
+        },
+        dsTitle: {
+            control: 'text',
+        },
+        dsPlaceholder: {
+            control: 'text',
+        },
+        dsClearable: {
+            control: 'boolean',
+        },
+        dsDisabled: {
+            control: 'boolean',
+        },
+        dsErrorText: {
+            control: 'text',
+        },
+        dsIcon: {
+            control: 'text',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsTitle: 'Default Select',
+        dsPlaceholder: 'Select an option',
+        dsVariant: 'default',
+        dsClearable: true,
+        dsDisabled: false,
+        dsErrorText: '',
+        dsIcon: '',
+    },
+    render: (args) => html `
+    <ds-select
+      ds-title=${args.dsTitle}
+      ds-placeholder=${args.dsPlaceholder}
+      ds-variant=${args.dsVariant}
+      ?ds-clearable=${args.dsClearable}
+      ?ds-disabled=${args.dsDisabled}
+      ds-error-text=${args.dsErrorText}
+      ds-icon=${args.dsIcon}
+    >
+      <ds-option ds-value="option1">Option 1</ds-option>
+      <ds-option ds-value="option2">Option 2</ds-option>
+      <ds-option ds-value="option3">Option 3</ds-option>
+    </ds-select>
+  `,
+};
+export const Playground = {
+    args: {
+        dsTitle: 'Playground',
+        dsPlaceholder: 'Select an option',
+        dsVariant: 'default',
+        dsClearable: true,
+        dsDisabled: false,
+        dsErrorText: '',
+        dsIcon: 'language',
+        options: [
+            { dsValue: 'option1', dsLabel: 'Option 1', dsDisabled: false },
+            { dsValue: 'option2', dsLabel: 'Option 2', dsDisabled: false },
+            { dsValue: 'option3', dsLabel: 'Option 3', dsDisabled: false },
+        ],
+    },
+    argTypes: {
+        options: {
+            control: 'object',
+            table: { category: 'Slots' },
+            defaultValue: [
+                { dsValue: 'option1', dsLabel: 'Option 1', dsDisabled: false },
+                { dsValue: 'option2', dsLabel: 'Option 2', dsDisabled: false },
+                { dsValue: 'option3', dsLabel: 'Option 3', dsDisabled: false },
+            ],
+            description: 'Options for dynamic select (Playground only)',
+        },
+    },
+    render: (args) => html `
+    <ds-select
+      ds-title=${args.dsTitle}
+      ds-placeholder=${args.dsPlaceholder}
+      ds-variant=${args.dsVariant}
+      ?ds-clearable=${args.dsClearable}
+      ?ds-disabled=${args.dsDisabled}
+      ds-error-text=${args.dsErrorText}
+      ds-icon=${args.dsIcon}
+      key=${JSON.stringify(args.options)}
+    >
+      ${args.options.map(renderDynamicOption)}
+    </ds-select>
+  `,
+};

package/dist/collection/components/01-base-components/ds-spinner/ds-spinner.js

@@ -42,11 +42,11 @@ export class DsSpinner {
         });
         const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = index => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
-        return (h("div", { key: 'd092937b6f14873e711d9fe3f0cc6d89aab5d998', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: '0fa992bde3a9244616f5b6ba2120ae5f6d0db76e', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: 'b682988e7ce7b7ad97f1b75984d93cf6ac2a57b1', class: "ds-spinner__spinner" }, h("div", { key: '730eb4ea883499e6cdf7995973c7de4f4a70acf5', class: segmentClasses(1) }), h("div", { key: '75abc70543d64621ce44782aba8e18bdfbddb14e', class: segmentClasses(2) }), h("div", { key: '51c6c07fd3310878e791f28fdf423c059008e433', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '3aa887895521f8b8f920266de27fd1c5dc8f7641' }, h("span", { key: 'de4ca68acd2c88ab8e8a0fa63dc0f8cc312ee159' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: 'a65851aeda7507f43c0c9468cbd80f78a3de8db2', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: 'd3736ffa6a0dba10813bf044b43f0de19c4d20fb', class: "ds-spinner__spinner" }, h("div", { key: 'b23b329401fd853c5e24f834ce9ec73b15217a58', class: segmentClasses(1) }), h("div", { key: 'f9d619f5a9ad5dac4ebc606caed35c98c2b9e692', class: segmentClasses(2) }), h("div", { key: '5165008462494014e5fb29d795b449363f819e82', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h("ds-visually-hidden", { key: '4597804a73f0223ca7b58e09a8346b1cce68c9a1' }, h("span", { key: 'cdd40dbb408478afc55ea7a80a8aac1db5a34729' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '385ccceedbf6750de761d7aec6503dccf1445d3d', class: textClasses }, this.dsText)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-tag/ds-tag.css

@@ -0,0 +1,93 @@
+.ds-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.5rem;
+  background-color: var(--ds-palette-black-05);
+  padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
+  gap: var(--ds-spacing-3xSmall);
+}
+.ds-tag.ds-tag--default {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-black-05);
+}
+.ds-tag.ds-tag--default:hover:has(ds-link) {
+  background-color: var(--ds-palette-black-10);
+}
+.ds-tag.ds-tag--default:active:has(ds-link) {
+  background-color: var(--ds-palette-black-20);
+}
+.ds-tag.ds-tag--black {
+  color: var(--ds-palette-white);
+  background-color: var(--ds-palette-black-95);
+}
+.ds-tag.ds-tag--black:hover:has(ds-link) {
+  background-color: var(--ds-palette-black-80);
+}
+.ds-tag.ds-tag--black:active:has(ds-link) {
+  background-color: var(--ds-palette-black-70);
+}
+.ds-tag.ds-tag--white {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-white);
+}
+.ds-tag.ds-tag--white:hover:has(ds-link) {
+  background-color: var(--ds-palette-black-10);
+}
+.ds-tag.ds-tag--white:active:has(ds-link) {
+  background-color: var(--ds-palette-black-20);
+}
+.ds-tag.ds-tag--info {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-blue-05);
+}
+.ds-tag.ds-tag--info:hover:has(ds-link) {
+  background-color: var(--ds-palette-blue-10);
+}
+.ds-tag.ds-tag--info:active:has(ds-link) {
+  background-color: var(--ds-palette-blue-20);
+}
+.ds-tag.ds-tag--danger {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-red-05);
+}
+.ds-tag.ds-tag--danger:hover:has(ds-link) {
+  background-color: var(--ds-palette-red-10);
+}
+.ds-tag.ds-tag--danger:active:has(ds-link) {
+  background-color: var(--ds-palette-red-20);
+}
+.ds-tag.ds-tag--attention {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-yellow-05);
+}
+.ds-tag.ds-tag--attention:hover:has(ds-link) {
+  background-color: var(--ds-palette-yellow-10);
+}
+.ds-tag.ds-tag--attention:active:has(ds-link) {
+  background-color: var(--ds-palette-yellow-20);
+}
+.ds-tag.ds-tag--success {
+  color: var(--ds-palette-black-95);
+  background-color: var(--ds-palette-green-05);
+}
+.ds-tag.ds-tag--success:hover:has(ds-link) {
+  background-color: var(--ds-palette-green-10);
+}
+.ds-tag.ds-tag--success:active:has(ds-link) {
+  background-color: var(--ds-palette-green-20);
+}
+.ds-tag__text {
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-14);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}
+.ds-tag--link {
+  padding: unset;
+}
+.ds-tag--link ds-link::part(ds-link) {
+  min-height: 1.5rem;
+  padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
+}

package/dist/collection/components/01-base-components/ds-tag/ds-tag.js

@@ -0,0 +1,181 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class DsTag {
+    dsText = 'Label';
+    dsIcon = '';
+    dsIconPosition = 'start';
+    dsDownload;
+    dsTarget;
+    dsHref;
+    dsColour = 'default';
+    render() {
+        const classes = classNames('ds-tag', `ds-tag--${this.dsColour}`, {
+            'ds-tag--link': !!this.dsHref,
+        });
+        return (h("div", { key: 'a54bbc1ec29cfa0c6df2f9e40765a746d1e6fcf8', class: classes }, h("slot", { key: '2c4a3c20b956798f114477bc22be6e796cca3f1f', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: '30e3768b29339c327449472b9f530d564d7e0269' }, this.dsHref ? (h("ds-link", { dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: '26cdf6d6b8dea7de55eade2f1b3807da4b9abb24', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h("ds-icon", { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+    }
+    static get is() { return "ds-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsText": {
+                "type": "string",
+                "attribute": "ds-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Label'"
+            },
+            "dsIcon": {
+                "type": "string",
+                "attribute": "ds-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "dsIconPosition": {
+                "type": "string",
+                "attribute": "ds-icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'start'"
+            },
+            "dsDownload": {
+                "type": "boolean",
+                "attribute": "ds-download",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsTarget": {
+                "type": "string",
+                "attribute": "ds-target",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkTarget",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | \"_unfencedTop\"",
+                    "references": {
+                        "LinkTarget": {
+                            "location": "import",
+                            "path": "../ds-link/ds-link",
+                            "id": "src/components/01-base-components/ds-link/ds-link.tsx::LinkTarget"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsHref": {
+                "type": "string",
+                "attribute": "ds-href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dsColour": {
+                "type": "string",
+                "attribute": "ds-colour",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagColour",
+                    "resolved": "\"attention\" | \"black\" | \"danger\" | \"default\" | \"info\" | \"success\" | \"white\"",
+                    "references": {
+                        "TagColour": {
+                            "location": "global",
+                            "id": "global::TagColour"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.examples.stories.js

@@ -0,0 +1,18 @@
+const meta = {
+    title: 'Base Components/Tag/Examples',
+    component: 'ds-tag',
+};
+export default meta;
+export const ExternalLink = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+        dsTarget: '_blank',
+    },
+};
+export const LongLabel = {
+    args: {
+        dsText: 'Lukuvuosi ja ilmoittautuminen tohtoriopinnoissa',
+        dsHref: '#',
+    },
+};

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.features.stories.js

@@ -0,0 +1,64 @@
+import { html } from "lit";
+import { tagColours } from "../../../../utils/tag/tagUtils";
+const meta = {
+    title: 'Base Components/Tag/Features',
+    component: 'ds-tag',
+};
+export default meta;
+export const Link = {
+    args: {
+        dsText: 'Link text',
+        dsHref: '#',
+    },
+};
+export const IconStart = {
+    args: {
+        dsText: 'Label',
+        dsIcon: 'info',
+        dsIconPosition: 'start',
+    },
+};
+export const IconEnd = {
+    args: {
+        dsText: 'Label',
+        dsIcon: 'info',
+        dsIconPosition: 'end',
+    },
+};
+const colourStyle = html `
+  <style>
+    .ds-sb-tag-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ds-spacing-layout-medium);
+    }
+
+    .ds-sb-tag-container ds-tag {
+      padding: var(--ds-spacing-small);
+    }
+
+    .ds-sb-tag-container ds-tag[ds-colour='white'] {
+      background-color: var(--ds-palette-black-05);
+    }
+  </style>
+`;
+export const Colour = {
+    render: () => html `
+    ${colourStyle}
+    <div class="ds-sb-tag-container">
+      ${tagColours.map(colour => html `
+        <ds-tag ds-text="Label" ds-colour="${colour}" title="${colour}"></ds-tag>
+      `)}
+    </div>
+  `
+};
+export const ColourLink = {
+    render: () => html `
+    ${colourStyle}
+    <div class="ds-sb-tag-container">
+      ${tagColours.map(colour => html `
+        <ds-tag ds-text="Link" ds-colour="${colour}" ds-href="#" title="${colour}"></ds-tag>
+      `)}
+    </div>
+  `
+};

package/dist/collection/components/01-base-components/ds-tag/stories/ds-tag.stories.js

@@ -0,0 +1,18 @@
+import { icons } from "../../../00-foundations/icons/iconList";
+const meta = {
+    title: 'Base Components/Tag',
+    component: 'ds-tag',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        },
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        dsText: 'Label',
+    }
+};
+export const Playground = {};