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

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-item/stories/ds-action-list-item.features.stories.js

@@ -0,0 +1,125 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/ActionMenu/Action List Item/Features',
+    component: 'ds-action-list-item',
+};
+export default meta;
+export const Action = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-label="Edit"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const ActionDanger = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="action-danger" ds-label="Delete"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const SingleSelect = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="single-select" ds-label="Name" ds-selected></ds-action-list-item>
+      <ds-action-list-item ds-variant="single-select" ds-label="Date modified"></ds-action-list-item>
+      <ds-action-list-item ds-variant="single-select" ds-label="File size"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const MultiSelect = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="multi-select" ds-label="Name" ds-selected></ds-action-list-item>
+      <ds-action-list-item ds-variant="multi-select" ds-label="Modified" ds-selected></ds-action-list-item>
+      <ds-action-list-item ds-variant="multi-select" ds-label="Size"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const WithIcon = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+      <ds-action-list-item ds-label="Duplicate" ds-icon="content_copy"></ds-action-list-item>
+      <ds-action-list-item ds-label="Download" ds-icon="download"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const WithDescription = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-label="Download" ds-description="Exports the file as a PDF" ds-icon="download"></ds-action-list-item>
+      <ds-action-list-item ds-label="Delete" ds-variant="action-danger" ds-description="This action cannot be undone" ds-icon="delete"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const Disabled = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+      <ds-action-list-item ds-label="Download" ds-icon="download" ds-disabled></ds-action-list-item>
+      <ds-action-list-item ds-label="Delete" ds-variant="action-danger" ds-icon="delete" ds-disabled></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const Unavailable = {
+    render: () => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-label="Edit" ds-icon="edit"></ds-action-list-item>
+      <ds-action-list-item ds-label="Download" ds-icon="download" ds-unavailable ds-description="No download rights"></ds-action-list-item>
+      <ds-action-list-item ds-label="Delete" ds-variant="action-danger" ds-icon="delete" ds-unavailable ds-description="Insufficient permissions"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const UnavailableSelected = {
+    render: () => html `
+    <p class="ds-bodytext-lg">Unavailable selected state for single-select and multi-select variants.</p>
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="single-select" ds-label="Name" ds-selected ds-unavailable ds-description="Not available"></ds-action-list-item>
+      <ds-action-list-item ds-variant="single-select" ds-label="Date modified" ds-unavailable ds-description="Not available"></ds-action-list-item>
+    </ds-action-list>
+    <br />
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="multi-select" ds-label="Name" ds-selected ds-unavailable ds-description="Not available"></ds-action-list-item>
+      <ds-action-list-item ds-variant="multi-select" ds-label="Modified" ds-unavailable ds-description="Not available"></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const DisabledSelected = {
+    render: () => html `
+    <p class="ds-bodytext-lg">Disabled selected state for single-select and multi-select variants.</p>
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="single-select" ds-label="Name" ds-selected ds-disabled></ds-action-list-item>
+      <ds-action-list-item ds-variant="single-select" ds-label="Date modified" ds-disabled></ds-action-list-item>
+    </ds-action-list>
+    <br />
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item ds-variant="multi-select" ds-label="Name" ds-selected ds-disabled></ds-action-list-item>
+      <ds-action-list-item ds-variant="multi-select" ds-label="Modified" ds-disabled></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export const CloseOnSelectFalse = {
+    parameters: {
+        a11y: {
+            config: {
+                rules: [
+                    {
+                        id: 'aria-required-parent',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+    render: () => html `
+    <p class="ds-bodytext-lg">With <code>ds-close-on-select="false"</code>, selecting a single-select item keeps the menu open.</p>
+    <ds-action-menu ds-button-text="Sort by">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="single-select" ds-label="Name" ds-selected ds-close-on-select="false"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="Date modified" ds-close-on-select="false"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="File size" ds-close-on-select="false"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-list-item/stories/ds-action-list-item.stories.js

@@ -0,0 +1,41 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+const meta = {
+    title: 'Base Components/ActionMenu/Action List Item',
+    component: 'ds-action-list-item',
+    argTypes: {
+        dsVariant: {
+            control: 'select',
+            options: ['action', 'action-danger', 'single-select', 'multi-select'],
+        },
+        dsIcon: {
+            control: 'select',
+            options: ['', 'edit', 'delete', 'download', 'content_copy', 'visibility', 'check', 'close', 'more_vert', 'arrow_forward'],
+        },
+    },
+    args: {
+        dsVariant: 'action',
+        dsLabel: 'Action item',
+        dsDescription: '',
+        dsIcon: '',
+        dsDisabled: false,
+        dsSelected: false,
+        dsCloseOnSelect: true,
+    },
+    render: args => html `
+    <ds-action-list ds-role="menu">
+      <ds-action-list-item
+        ds-variant=${args.dsVariant}
+        ds-label=${args.dsLabel}
+        ds-description=${ifDefined(args.dsDescription || undefined)}
+        ds-icon=${ifDefined(args.dsIcon || undefined)}
+        ?ds-disabled=${args.dsDisabled}
+        ?ds-selected=${args.dsSelected}
+        ?ds-close-on-select=${args.dsCloseOnSelect}
+      ></ds-action-list-item>
+    </ds-action-list>
+  `,
+};
+export default meta;
+export const Default = {};
+export const Playground = {};

package/dist/collection/components/01-base-components/ds-action-menu/ds-action-menu.css

@@ -8,7 +8,7 @@
   display: inline-block;
 }
 
-.ds-action-menu__m9sbXh {
+.ds-action-menu__cpPWV0 {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -18,7 +18,7 @@
   position: relative;
 }
 
-.ds-action-menu__m9sbXh__trigger-wrapper {
+.ds-action-menu__cpPWV0__trigger-wrapper {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -27,86 +27,86 @@
   display: inline-flex;
 }
 
-.ds-action-menu__m9sbXh__menu {
+.ds-action-menu__cpPWV0__menu {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-action-menu__m9sbXh__menu[hidden] {
+.ds-action-menu__cpPWV0__menu[hidden] {
   display: none;
 }
-.ds-action-menu__m9sbXh__menu {
+.ds-action-menu__cpPWV0__menu {
   position: absolute;
   z-index: 100;
   min-width: 288px;
   background-color: var(--ds-bgColor-white);
   box-shadow: var(--ds-shadow-overlay);
   border-radius: var(--ds-borderRadius-none);
-  border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
+  border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   font-family: var(--ds-fontFamily-body);
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--ds-borderColor-default) transparent;
 }
-.ds-action-menu__m9sbXh__menu::-webkit-scrollbar {
+.ds-action-menu__cpPWV0__menu::-webkit-scrollbar {
   width: 6px;
 }
-.ds-action-menu__m9sbXh__menu::-webkit-scrollbar-track {
+.ds-action-menu__cpPWV0__menu::-webkit-scrollbar-track {
   background: transparent;
 }
-.ds-action-menu__m9sbXh__menu::-webkit-scrollbar-thumb {
+.ds-action-menu__cpPWV0__menu::-webkit-scrollbar-thumb {
   background-color: var(--ds-borderColor-default);
   border-radius: 3px;
 }
-.ds-action-menu__m9sbXh__menu::-webkit-scrollbar-thumb:hover {
+.ds-action-menu__cpPWV0__menu::-webkit-scrollbar-thumb:hover {
   background-color: var(--ds-borderColor-black);
 }
-.ds-action-menu__m9sbXh__menu {
+.ds-action-menu__cpPWV0__menu {
   max-height: 100dvh;
   padding: var(--ds-spacing-3xSmall) 0;
 }
-.ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-bottom, .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-auto {
+.ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-bottom, .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-auto {
   top: 100%;
   margin-top: var(--ds-spacing-3xSmall);
 }
-.ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-top {
+.ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-top {
   bottom: 100%;
   margin-bottom: var(--ds-spacing-3xSmall);
 }
-.ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-start {
+.ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-start {
   left: 0;
 }
-.ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-end {
+.ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-end {
   right: 0;
 }
-.ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-center {
+.ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-center {
   left: 50%;
   transform: translateX(-50%);
 }
 @supports (anchor-name: --test) {
-  .ds-action-menu__m9sbXh__menu {
+  .ds-action-menu__cpPWV0__menu {
     position: fixed;
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-bottom {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-bottom {
     inset-block: anchor(bottom) auto;
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-top {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-top {
     inset-block: auto anchor(top);
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--placement-auto {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--placement-auto {
     inset-block: anchor(bottom) auto;
     position-try-order: most-height;
     position-try-fallbacks: --ds-action-menu-top-start, --ds-action-menu-top-end, --ds-action-menu-top-center;
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-start {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-start {
     inset-inline: anchor(left) auto;
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-end {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-end {
     inset-inline: auto anchor(right);
   }
-  .ds-action-menu__m9sbXh__menu.ds-action-menu__m9sbXh__menu--align-center {
+  .ds-action-menu__cpPWV0__menu.ds-action-menu__cpPWV0__menu--align-center {
     inset-inline: anchor(center) auto;
   }
 }

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

@@ -0,0 +1,293 @@
+import { html } from "lit";
+import meta from "./ds-action-menu.stories";
+export default {
+    ...meta,
+    title: 'Base Components/ActionMenu/Examples',
+};
+export const DownloadAction = {
+    name: 'Download Action',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Download">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Lataa hakutulokset (.xlsx)" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const DownloadDisabled = {
+    name: 'Download Disabled With Description',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Download">
+      <ds-action-list>
+        <ds-action-list-item
+          ds-variant="action"
+          ds-label="Lataa hakutulokset (.xlsx)"
+          ds-icon="download"
+          ds-unavailable="true"
+          ds-description="Ei käytettävissä hakutuloksia yli 1000."
+        ></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const ShowFields = {
+    name: 'Show Fields',
+    render: () => html `
+    <ds-action-menu ds-button-text="Näytä kentät">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Tutkielman kieli" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Opiskelijanumero"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Koulutusohjelma" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Opintosuunta" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Ohjaajat" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Tarkastajat" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Käsittelijä"></ds-action-list-item>
+        <ds-action-list-item ds-variant="multi-select" ds-label="Määräpäivä"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const ExportActions = {
+    name: 'Export Actions',
+    render: () => html `
+    <ds-action-menu ds-button-text="Vie valitut käsittelytiedot">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="CSV-tiedostoksi (UTF-8)" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="CSV-tiedostoksi (Excel)" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="PDF-tiedostoksi" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const AttachmentActions = {
+    name: 'Attachment Actions',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Liitteen toiminnot">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Avaa välilehdelle" ds-icon="open_in_new"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Lataa liite" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action-danger" ds-label="Siirrä tarpeettomiin" ds-icon="delete"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const CommentActions = {
+    name: 'Comment Actions',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Kommentin toiminnot">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Kopioi linkki kommenttiin" ds-icon="link"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action-danger" ds-label="Siirrä tarpeettomiin" ds-icon="delete"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const AddAttachmentType = {
+    name: 'Add Attachment Type (Long Labels)',
+    render: () => html `
+    <ds-action-menu ds-button-text="Lisää liitetyyppi">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Hakuperustetutkinto: Master of Sambia"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Muu koulutus: Bachelor of Sambia"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Hakukohde: PAPU"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Hakukohde: ATM-DP"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Hakukohde: CHEMS"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Opintosuoritusote"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="CSSD:n raportti opintosuoritusotteesta"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const FileOperations = {
+    name: 'File Operations',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="File operations">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="New" ds-icon="add"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Open..." ds-icon="open_in_new"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Close"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Save"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Duplicate"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Rename..."></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const SortMenu = {
+    name: 'Sort Menu',
+    render: () => {
+        const courses = [
+            { name: 'Ohjelmistotuotanto', startDate: '2024-03-01', displayDate: '1.3.2024' },
+            { name: 'Algoritmit ja tietorakenteet', startDate: '2024-01-15', displayDate: '15.1.2024' },
+            { name: 'Tietokantajärjestelmät', startDate: '2024-11-01', displayDate: '1.11.2024' },
+            { name: 'Verkko-ohjelmointi', startDate: '2024-06-15', displayDate: '15.6.2024' },
+            { name: 'Digitaalinen pedagogiikka', startDate: '2024-09-01', displayDate: '1.9.2024' },
+        ];
+        const sortOptions = [
+            { label: 'Aakkosittain A–Ö', sort: (a, b) => a.name.localeCompare(b.name, 'fi') },
+            { label: 'Aakkosittain Ö–A', sort: (a, b) => b.name.localeCompare(a.name, 'fi') },
+            { label: 'Aiemmin alkavat ensin', sort: (a, b) => a.startDate.localeCompare(b.startDate) },
+            { label: 'Myöhemmin alkavat ensin', sort: (a, b) => b.startDate.localeCompare(a.startDate) },
+        ];
+        const wrapper = document.createElement('div');
+        wrapper.style.cssText = 'max-width: 520px;';
+        const header = document.createElement('div');
+        header.style.cssText = 'display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--ds-spacing-small, 16px);';
+        const title = document.createElement('span');
+        title.className = 'ds-heading-sm';
+        title.textContent = 'Kurssit';
+        header.appendChild(title);
+        const actionMenu = document.createElement('ds-action-menu');
+        actionMenu.setAttribute('ds-button-text', `Järjestä: ${sortOptions[0].label}`);
+        const actionList = document.createElement('ds-action-list');
+        const itemEls = [];
+        sortOptions.forEach((option, i) => {
+            const item = document.createElement('ds-action-list-item');
+            item.setAttribute('ds-variant', 'single-select');
+            item.setAttribute('ds-label', option.label);
+            if (i === 0)
+                item.setAttribute('ds-selected', 'true');
+            item.addEventListener('dsSelect', () => {
+                itemEls.forEach((el, j) => {
+                    if (j !== i)
+                        el.dsSelected = false;
+                });
+                actionMenu.setAttribute('ds-button-text', `Järjestä: ${option.label}`);
+                renderList([...courses].sort(option.sort));
+            });
+            actionList.appendChild(item);
+            itemEls.push(item);
+        });
+        actionMenu.appendChild(actionList);
+        header.appendChild(actionMenu);
+        wrapper.appendChild(header);
+        const listContainer = document.createElement('div');
+        listContainer.style.cssText = 'border: 1px solid var(--ds-borderColor-default); border-radius: 4px; overflow: hidden;';
+        const listEl = document.createElement('ul');
+        listEl.style.cssText = 'list-style: none; margin: 0; padding: 0;';
+        listContainer.appendChild(listEl);
+        wrapper.appendChild(listContainer);
+        const renderList = (sorted) => {
+            listEl.innerHTML = sorted
+                .map((course, i) => `
+          <li style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: var(--ds-spacing-2xSmall, 8px) var(--ds-spacing-small, 16px);
+            ${i < sorted.length - 1 ? 'border-bottom: 1px solid var(--ds-borderColor-default);' : ''}
+          ">
+            <span>${course.name}</span>
+            <span style="color: var(--ds-textColor-secondary); white-space: nowrap; margin-left: var(--ds-spacing-small, 16px);">${course.displayDate}</span>
+          </li>`)
+                .join('');
+        };
+        renderList([...courses].sort(sortOptions[0].sort));
+        return wrapper;
+    },
+};
+export const FilterAndExport = {
+    name: 'Filter And Export',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Filter and export">
+      <ds-action-list>
+        <ds-action-list-item ds-variant="single-select" ds-label="All applications" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="Open only"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="Processed only"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-item ds-variant="action" ds-label="Export CSV" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Export Excel" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Copy link" ds-icon="link"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const FilterAndExportWithGroupTitles = {
+    name: 'Filter And Export With Group Titles',
+    render: () => html `
+    <ds-action-menu ds-icon-only="true" ds-aria-label="Filter and export">
+      <ds-action-list>
+        <ds-action-list-group-title ds-title="Layout"></ds-action-list-group-title>
+        <ds-action-list-item ds-variant="single-select" ds-label="All applications" ds-selected="true"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="Open only"></ds-action-list-item>
+        <ds-action-list-item ds-variant="single-select" ds-label="Processed only"></ds-action-list-item>
+      </ds-action-list>
+      <ds-action-list-divider></ds-action-list-divider>
+      <ds-action-list>
+        <ds-action-list-group-title ds-title="Share"></ds-action-list-group-title>
+        <ds-action-list-item ds-variant="action" ds-label="Export CSV" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Export Excel" ds-icon="download"></ds-action-list-item>
+        <ds-action-list-item ds-variant="action" ds-label="Copy link" ds-icon="link"></ds-action-list-item>
+      </ds-action-list>
+    </ds-action-menu>
+  `,
+};
+export const TextAlignmentInGroups = {
+    name: 'Text Alignment In Groups',
+    render: () => html `
+    <div style="display: flex; gap: 4rem; padding: 1rem; align-items: flex-start;">
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Inconsistent icons</p>
+        <ds-action-menu ds-icon-only="true" ds-aria-label="File operations">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="New" ds-icon="add"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Open..." ds-icon="open_in_new"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Close"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Save"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Duplicate"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Rename..."></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-indented="true" ds-variant="action" ds-label="Archive"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+
+      <div>
+        <p style="font-weight: bold; margin-bottom: 0.5rem;">Consistent icons</p>
+        <ds-action-menu ds-icon-only="true" ds-aria-label="File operations">
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="New" ds-icon="add"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Open..." ds-icon="open_in_new"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Share" ds-icon="share"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Download" ds-icon="download"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Close" ds-icon="close"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Save" ds-icon="save"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Duplicate" ds-icon="content_copy"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action" ds-label="Rename..." ds-icon="edit"></ds-action-list-item>
+          </ds-action-list>
+          <ds-action-list-divider></ds-action-list-divider>
+          <ds-action-list>
+            <ds-action-list-item ds-variant="action" ds-label="Archive" ds-icon="archive"></ds-action-list-item>
+            <ds-action-list-item ds-variant="action-danger" ds-label="Delete" ds-icon="delete"></ds-action-list-item>
+          </ds-action-list>
+        </ds-action-menu>
+      </div>
+    </div>
+  `,
+};