@uh-design-system/component-library 1.5.2-rc.1 → 1.6.0-rc.0

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

@@ -0,0 +1,133 @@
+import { useArgs } from "@storybook/preview-api";
+import { html } from "lit";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { icons } from "../../../00-foundations/icons/iconList";
+const meta = {
+    title: 'Base Components/Modal',
+    component: 'ds-modal',
+    parameters: {
+        docs: {
+            story: {
+                height: '500px',
+                inline: false,
+            },
+            description: {
+                component: `
+> **NOTE**: The controls on the Docs page don't work because the stories are rendered into iframes.
+Open each story's Canvas page to interact with the component using Storybook controls.
+See [Storybook Docs](https://storybook.js.org/docs/api/doc-blocks/doc-block-story#inline) for more info.
+
+Modal component for displaying content above the main page content.
+
+## Opening and closing the modal
+
+The modal is opened by setting the \`dsOpen\` property to true. The modal can be closed by setting it to false, which can be done through various user interactions, such as:
+
+- The following user interactions emit the \`dsModalClose\` event, set a listener to manage the modal's open state:
+  - Clicking on the close button (if \`dsCloseable\` is true)
+  - Pressing the "Esc" key (if \`dsBackdropCloseable\` is true)
+  - Clicking on the backdrop (if \`dsBackdropCloseable\` is true)
+- Dispatching a custom event that triggers closing the modal, such as a click event on a button inside the modal content.
+
+## Variant
+
+The variant of the modal is determined by the \`dsVariant\` property. The available variants are:
+
+- \`default\` (default): for standard, non-destructive actions.
+- \`danger\`: for destructive or irreversible actions.
+
+### Icon
+
+The icon is controlled by the \`dsIcon\` property. However, when using \`dsVariant="danger"\`, a danger icon is displayed regardless of its value.
+
+Set \`dsIconAriaLabel\` property to provide an accessible name for the icon.
+
+## Size
+
+The size of the modal is determined by the \`dsSize\` property. The available sizes are:
+
+- \`auto\`: The modal width is determined by its content.
+- \`small\`: The modal max-width is 480px.
+- \`medium\` (default): The modal max-width is 640px.
+- \`large\`: The modal max-width is 800px.
+- \`full\`: The modal takes the width of the viewport minus the margins.
+
+## Buttons
+
+Modals can contain 1—3 buttons, and Cancel always has the lowest visual priority.
+
+Three-button modals are allowed only in exceptional cases. Use them only when the secondary action performs a meaningful operation that is different from dismissal.
+
+## Autofocus
+
+The \`dsAutoFocusTarget\` property controls which element should receive focus when the modal is opened. The options are:
+
+- \`heading\` (default): Focus the heading element. If there is no heading, attempts to focus the close-button.
+- \`close-button\`: Focus the close button. If there is no close button, set a focus target.
+- \`other\`: Set \`autofocus\` attribute on the element you want to focus.
+
+## Backdrop
+
+The modal component uses the \`ds-backdrop\` component for the backdrop. See its documentation for properties and other usage instructions.
+        `,
+            },
+        },
+    },
+    args: {
+        contentSlot: '<div slot="content">You can edit this text with any custom content.</div>',
+        footerSlot: '<ds-button autofocus="true" slot="footer" ds-variant="primary" ds-text="Primary"></ds-button>',
+        dsVariant: 'default',
+        dsSize: 'medium',
+        dsAutoFocusTarget: 'heading',
+        dsOpen: true,
+        dsScrollable: false,
+        dsCloseable: true,
+        dsIcon: '',
+        dsIconAriaLabel: '',
+        dsBackdropCloseable: true,
+        dsBackdropZIndex: 9999,
+        dsHeadingText: 'Heading',
+        dsHeadingLevel: 2,
+    },
+    argTypes: {
+        dsAutoFocusTarget: {
+            control: 'select',
+            options: ['heading', 'close-button', 'other'],
+        },
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+    },
+    render: (args) => {
+        const [, updateArgs] = useArgs();
+        return html `
+      <ds-button ds-variant="primary" ds-text="Open modal" @click=${() => updateArgs({ dsOpen: true })}></ds-button>
+      <ds-modal
+        ds-variant=${args.dsVariant}
+        ds-size=${args.dsSize}
+        ds-auto-focus-target=${args.dsAutoFocusTarget}
+        ds-open=${args.dsOpen}
+        ds-scrollable=${args.dsScrollable}
+        ds-closeable=${args.dsCloseable}
+        ds-icon=${args.dsIcon}
+        ds-icon-aria-label=${ifDefined(args.dsIconAriaLabel)}
+        ds-backdrop-closeable=${args.dsBackdropCloseable}
+        ds-backdrop-z-index=${args.dsBackdropZIndex}
+        ds-heading-text=${args.dsHeadingText}
+        ds-heading-level=${args.dsHeadingLevel}
+        @dsModalClose=${() => {
+            updateArgs({ dsOpen: false });
+        }}
+      >
+        ${unsafeHTML(args.contentSlot)}${unsafeHTML(args.footerSlot)}
+      </ds-modal>
+    `;
+    },
+};
+export default meta;
+export const Default = {};
+export const Playground = {
+    tags: ['!autodocs'],
+};

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

@@ -3,76 +3,76 @@
   width: 100%;
 }
 
-.ds-notification__m9sbXh {
+.ds-notification__cpPWV0 {
   padding: var(--ds-spacing-xSmall, 12px);
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--neutral {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--neutral {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--neutral .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--neutral .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--neutralWhite {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--neutralWhite {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-light);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--neutralWhite .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--neutralWhite .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-default);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--info {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-info);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--info .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--info .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-info);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--success {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-success);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--success .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--success .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-success);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--attention {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-attention);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--attention .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--attention .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-attention);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--danger {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
   border: var(--ds-borderWidth-hairline, 1px) solid var(--ds-borderColor-danger);
   margin-top: calc(-1 * var(--ds-borderWidth-hairline, 1px));
 }
-.ds-notification__m9sbXh.ds-notification__m9sbXh--danger .ds-notification__m9sbXh__icon {
+.ds-notification__cpPWV0.ds-notification__cpPWV0--danger .ds-notification__cpPWV0__icon {
   color: var(--ds-iconColor-danger);
   margin-bottom: auto;
 }
-.ds-notification__m9sbXh__content {
+.ds-notification__cpPWV0__content {
   display: flex;
   gap: var(--ds-spacing-2xSmall, 8px);
   max-width: 1376px;
   margin: 0 auto;
 }
-.ds-notification__m9sbXh__content__text {
+.ds-notification__cpPWV0__content__text {
   display: flex;
   padding: var(--ds-spacing-4xSmall, 2px) 0;
   flex-direction: column;
@@ -80,11 +80,11 @@
   gap: var(--ds-spacing-4xSmall, 2px);
   flex: 1 0 0;
 }
-.ds-notification__m9sbXh__content__text__heading, .ds-notification__m9sbXh__content__text__description {
+.ds-notification__cpPWV0__content__text__heading, .ds-notification__cpPWV0__content__text__description {
   font-family: var(--ds-fontFamily-body);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-notification__m9sbXh__content__text__description {
+.ds-notification__cpPWV0__content__text__description {
   max-width: var(--ds-notification-description-max-width, 550px);
 }

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

@@ -152,7 +152,7 @@ export class DsNotification extends Mixin(componentFactory('ds-notification', {
         const ariaLabelledby = this.dsAriaLabelledby ?? this.inheritedAttributes['aria-labelledby'] ?? this.ariaLabelledBy;
         const role = this.dsRole ?? this.inheritedAttributes['role'] ?? 'group';
         const restAttributes = omit(this.inheritedAttributes, ['aria-labelledby', 'aria-label', 'role']);
-        return (h("div", { key: '1b127bfbf8682ddc132597ab9d076fd9bb2e178b', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: '9c065c209815d5d169dcda3a8304c2b4ec3554e4', class: contentClass }, h("div", { key: 'dd8ebcae11527e8f19ec9dedaa11ffdef794ee70', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '791bedfc190ef9b8b6e9447ad6b1c24c080c2020', dsName: this.icon })), h("div", { key: '69fb517e3f2e9f836448f856a3814b5ddcfd343e', class: textClass }, h("slot", { key: '6d0fea417b1ba529ae2b0d6455b0773dcdb1c282', name: "heading" }, this.dsHeading && (h("div", { key: '8216f324647ba19a55bf52c121da33f95ac6033f', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '8e78e68b96b5262e03b663f3d290be56b84db1cc', name: "description" }, this.dsDescription && (h("div", { key: 'b6d058bfb696b3cd1bd38facecc9cc71cc9d6493', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'e5b44ec27865c3d1b8fdc7a74e98d36cbddc90a6' })), this.dsDismissable && (h(this.DsButton, { key: 'd45b6cc4ed0e6a327d0585b8fbaa503904fe7c7d', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: '55b54131e78fffb47e01e97c8b7ca7918a3cfdf9', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
+        return (h("div", { key: '162c1c8b4321c00118069067c9486dcbb02a0fd0', class: classes, id: this.dsId, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...restAttributes }, h("div", { key: 'ec667507d53aa772a429ac6ea33947b29a9f5503', class: contentClass }, h("div", { key: 'c774b6b86952e2d825fd6d4306cc6462f0f4d91f', class: `${baseClass}__icon ds-p-3xs` }, h(this.DsIcon, { key: '17b4e3c422bcea87b3f289653a32adbbb4cf6357', dsName: this.icon })), h("div", { key: 'c25b5c48f2613be80f1d5573fb92ed5dafbf622b', class: textClass }, h("slot", { key: '1118cb18dbe0c8e483558d89ba14a2b61bfc6716', name: "heading" }, this.dsHeading && (h("div", { key: '66a232a3d67383c9ed8eda09e765831f3ce87b7a', class: `${textClass}__heading ds-text-semibold-lg`, id: this.headingId, role: this.dsDescription ? 'heading' : undefined, 'aria-level': this.dsDescription ? this.dsHeadingLevel : undefined }, this.dsHeading))), h("slot", { key: '6a21cf4285260e5170cdd8eada1f274832296b9d', name: "description" }, this.dsDescription && (h("div", { key: '89e015f2b62c23d16e0c9477c80b4ed3aa88ee1b', class: `${textClass}__description ds-text-regular-md`, style: { '--ds-notification-description-max-width': this.dsDescriptionMaxWidth } }, this.dsDescription))), h("slot", { key: 'd91cdf542f9088521a771b0204c73b2e5c98b093' })), this.dsDismissable && (h(this.DsButton, { key: '8cfe8f56f55976749b8043a32bebcb41d2143fa4', dsId: `${this.dsId}-dismiss-button`, dsIcon: "close", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsAriaLabelledby: [`${this.dsId}-dismiss-button`, ariaLabelledby].filter(Boolean).join(' '), onClick: this.handleDismissButtonClick }, h(this.DsVisuallyHidden, { key: 'd2136e3c7aa20140cd4b9256610d5d1f4f9b4ba5', slot: "suffix", dsTag: "span" }, this.dsDismissButtonHiddenAssistiveText || this.close))))));
     }
     static get is() { return "ds-notification"; }
     static get encapsulation() { return "scoped"; }

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

@@ -0,0 +1,121 @@
+import { icons } from "../../../00-foundations/icons/iconList";
+import { html } from "lit-html";
+const meta = {
+    title: 'Base Components/Notification/Examples',
+    component: 'ds-notification',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+    },
+};
+export default meta;
+export const IconCustomisation = {
+    render: () => html `
+    <ds-grid ds-container ds-type="grid">
+      <div>
+        <h2 class="ds-heading-lg">Icon customisation</h2>
+        <p class="ds-bodytext-lg">
+          Notification icon matches the <code>ds-variant</code> by default and can't be disabled, but it can be changed for <code>neutral</code>, <code>neutralWhite</code> and
+          <code>info</code>.
+        </p>
+      </div>
+      <ds-notification
+        ds-variant="neutral"
+        ds-heading="Notifications are on"
+        ds-icon="notifications_fill"
+        ds-description="This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed."
+      ></ds-notification>
+      <ds-notification
+        ds-variant="neutralWhite"
+        ds-heading="Account settings"
+        ds-icon="account_circle_fill"
+        ds-description="This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed."
+      ></ds-notification>
+      <ds-notification
+        ds-variant="info"
+        ds-heading="Location access"
+        ds-icon="location_on_fill"
+        ds-description="This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed."
+      ></ds-notification>
+    </ds-grid>
+  `,
+};
+export const SlotUsage = {
+    render: () => html `
+    <style>
+      .ds-sb-description-slot-content {
+        max-width: 550px;
+      }
+    </style>
+    <ds-grid ds-container>
+      <ds-notification
+        ds-variant="neutralWhite"
+        ds-heading="Title"
+        ds-description="This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed."
+        ds-dismissable
+      >
+        <div class="ds-mt-sm ds-mb-2xs">
+          <ds-button ds-variant="secondary" ds-colour="black" ds-value="Action"></ds-button>
+        </div>
+      </ds-notification>
+      <ds-notification ds-variant="info" ds-heading="Toinen tarkastaja on jo arvioinut tutkielman">
+        <div class="ds-sb-description-slot-content ds-text-regular-md">
+          Voit joko
+          <ul>
+            <li>
+              vahvistaa tarkastajan tekemän arvioinnin sellaisenaan, jolloin tarkastajan antamat arvosanat ja sanalliset arvioinnit jäävät voimaan. Huomaa, ettet tällöin voi tehdä
+              eriäviä arviointeja,
+            </li>
+            <li>ohittaa vahvistamisen ja antaa omat arviointisi.</li>
+          </ul>
+        </div>
+        <div>
+          <ds-checkbox-group>
+            <ds-checkbox ds-text="Vahvista osa-alueiden arviointi"></ds-checkbox>
+            <ds-checkbox ds-text="Vahvista arvosanaehdotus ja lausunto"></ds-checkbox>
+          </ds-checkbox-group>
+        </div>
+      </ds-notification>
+    </ds-grid>
+  `,
+};
+export const StackedNotifications = {
+    render: () => html `
+    <style>
+      #notification-stacked-notifications ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <ds-grid ds-container ds-type="grid" id="notification-stacked-notifications">
+      <div>
+        <h2 class="ds-heading-lg" id="notification-stacked-notifications-heading">Stacked notifications</h2>
+        <div role="region" aria-labelledby="notification-stacked-notifications-heading">
+          <ul aria-label="Notifications list">
+            <li>
+              <ds-notification ds-variant="neutral" ds-heading="Title" ds-description="Do not show double border if notifications are stacked."></ds-notification>
+            </li>
+            <li>
+              <ds-notification ds-variant="neutral" ds-heading="Title" ds-description="Do not show double border if notifications are stacked."></ds-notification>
+            </li>
+            <li>
+              <ds-notification ds-variant="info" ds-heading="Title" ds-description="Do not show double border if notifications are stacked."></ds-notification>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </ds-grid>
+  `,
+};
+export const AriaLabelledby = {
+    render: () => html `
+    <div id="notification-aria-labelledby-label">Notification</div>
+    <ds-notification aria-labelledby="notification-aria-labelledby-label" ds-heading="Heading" ds-description="Description"></ds-notification>
+  `,
+};
+export const AriaLabel = {
+    render: () => html `<ds-notification aria-label="Notification" ds-heading="Heading"></ds-notification>`,
+};

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

@@ -0,0 +1,109 @@
+import { html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { icons } from "../../../00-foundations/icons/iconList";
+const meta = {
+    title: 'Base Components/Notification/Features',
+    component: 'ds-notification',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+    },
+    args: {
+        dsDescription: 'This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed.',
+    },
+};
+export default meta;
+export const Neutral = {
+    args: {
+        dsVariant: 'neutral',
+        dsHeading: 'Neutral',
+        dsHeadingLevel: 2,
+    },
+};
+export const NeutralWhite = {
+    args: {
+        dsVariant: 'neutralWhite',
+        dsHeading: 'NeutralWhite',
+        dsHeadingLevel: 2,
+    },
+};
+export const Info = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+    },
+};
+export const Success = {
+    args: {
+        dsVariant: 'success',
+        dsHeading: 'Success',
+        dsHeadingLevel: 2,
+    },
+};
+export const Attention = {
+    args: {
+        dsVariant: 'attention',
+        dsHeading: 'Attention',
+        dsHeadingLevel: 2,
+    },
+};
+export const Danger = {
+    args: {
+        dsVariant: 'danger',
+        dsHeading: 'Danger',
+        dsHeadingLevel: 2,
+    },
+};
+export const Dismissable = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+        dsDismissable: true,
+    },
+};
+export const DescriptionMaxWidth = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: '300px',
+    },
+};
+export const DescriptionMaxWidthNone = {
+    args: {
+        dsVariant: 'info',
+        dsHeading: 'Info',
+        dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: 'none',
+    },
+};
+export const OnlyTitle = {
+    args: {
+        dsVariant: 'success',
+        dsHeading: 'You have been chosen to the course.',
+        dsHeadingLevel: 2,
+        dsDescription: undefined,
+    },
+};
+export const OnlyDescription = {
+    args: {
+        dsVariant: 'success',
+        dsHeading: undefined,
+    },
+};
+export const Slots = {
+    args: {
+        headingSlot: `<div id="notification-slots-heading" slot="heading">Heading slot</div>`,
+        descriptionSlot: `<div slot="description">Description slot</div>`,
+        defaultSlot: `<div>Default slot</div>`,
+    },
+    render: args => html `
+    <ds-notification aria-labelledby="notification-slots-heading">
+      ${unsafeHTML(args.headingSlot)} ${unsafeHTML(args.descriptionSlot)} ${unsafeHTML(args.defaultSlot)}
+    </ds-notification>
+  `,
+};

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

@@ -0,0 +1,84 @@
+import { html } from "lit";
+import { icons } from "../../../00-foundations/icons/iconList";
+const meta = {
+    title: 'Base Components/Notification',
+    component: 'ds-notification',
+    argTypes: {
+        dsIcon: {
+            control: 'select',
+            options: icons.map(icon => icon.name).sort(),
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        dsVariant: 'neutral',
+        dsDismissable: false,
+        dsHeadingLevel: 2,
+        dsDescriptionMaxWidth: '550px',
+    },
+};
+export const Events = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          <ul id="notification-output">
+            <li id="notification-output__dismissed">
+              Notification should be dismissed: <span id="notification-output__dismissed-text">No</span>
+            </li>
+          </ul>
+          <script>
+            document.addEventListener('dsDismiss', (event: CustomEvent<void>) => {
+              const output = document.getElementById('notification-output__dismissed-text');
+              if (output) {
+                output.textContent = 'Yes';
+              }
+            });
+          </script>
+        `,
+            },
+        },
+    },
+    render: () => html `
+    <ds-grid>
+      <ds-grid>
+        <ds-card
+          ds-link-type="none"
+          ds-heading="Events"
+          ds-description="Use the notification to observe the events it triggers. For implementation details, view 'Show code' in the Docs."
+        >
+          <ul slot="content" id="notification-output" class="ds-bodytext-sm ds-m-sm">
+            <li id="notification-output__dismissed">Notification should be dismissed: <span id="notification-output__dismissed-text">No</span></li>
+          </ul>
+        </ds-card>
+      </ds-grid>
+      <ds-grid>
+        <ds-notification
+          ds-variant="info"
+          ds-heading="Information"
+          ds-description="This is an informational notification."
+          ds-dismissable
+          @dsDismiss=${() => {
+        const output = document.getElementById('notification-output__dismissed-text');
+        if (output) {
+            output.textContent = 'Yes';
+        }
+    }}
+        ></ds-notification>
+      </ds-grid>
+    </ds-grid>
+  `,
+};
+export const Playground = {
+    args: {
+        dsVariant: 'neutral',
+        dsDismissable: false,
+        dsHeading: 'Heading',
+        dsHeadingLevel: 2,
+        dsIcon: '',
+        dsDescription: 'This is a notification message. It provides additional information about the current status or action. Please review and proceed as needed.',
+        dsDescriptionMaxWidth: '550px',
+    },
+};