@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Component/LinkList/link-list.css

@@ -9,8 +9,7 @@
 
     & li {
       min-block-size: var(--min-height, var(--spacing-xl));
-      border-block-end: var(--line-width, 1px) solid
-        var(--line-colour, var(--colour-border));
+      border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
 
       &:last-child {
         border-block-end: 0;

package/src/Component/ListItem/Components/ListItemContent.tsx

@@ -2,11 +2,7 @@ import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 
 const ListItemContent = ({ children }: PropsWithChildren): JSX.Element => {
-  return (
-    <div className={classNames("mx-list-item__content", "mx-vertical-flow")}>
-      {children}
-    </div>
-  )
+  return <div className={classNames("mx-list-item__content", "mx-vertical-flow")}>{children}</div>
 }
 
 export default ListItemContent

package/src/Component/ListItem/Components/ListItemMedia.tsx

@@ -5,10 +5,7 @@ type CardProps = PropsWithChildren & {
   skeleton?: boolean
 }
 
-const ListItemMedia = ({
-  children,
-  skeleton = false,
-}: CardProps): JSX.Element => {
+const ListItemMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-list-item__media", "stack")}>
       {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}

package/src/Component/ListItem/ListItem.stories.ts

@@ -13,6 +13,9 @@ import {
   TagTypes,
 } from "@pnx-mixtape/ids-shape"
 
+/**
+ * List Item extends the Card to create a search result type component.
+ */
 const meta: Meta<ListItemType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -26,19 +29,78 @@ const meta: Meta<ListItemType> = {
   },
   argTypes: {
     modifiers: {
+      description:
+        "The **block** modifier makes the whole item clickable. The **reverse** modifier positions the image on the right.",
       options: Object.values(ListItemModifiers),
-      control: "multi-select",
+      control: "check",
+      table: { type: { summary: "enum" } },
+    },
+    info: {
+      description:
+        "Optional text, can be displayed before or after the title using the `infoBefore` option.",
+      type: "string",
+      control: "text",
+      table: {
+        subcategory: "Info content",
+      },
+    },
+    infoBefore: {
+      description: "Display the info field before the title",
+      control: "boolean",
+      table: {
+        defaultValue: { summary: "false" },
+        subcategory: "Info content",
+      },
+      if: { arg: "info", truthy: true },
+    },
+    image: {
+      description: "Optional [Image](/?path=/docs/atom-image--docs) component.",
+      control: "text",
+      table: {
+        type: { summary: "Image" },
+        subcategory: "Item content",
+      },
+    },
+    content: {
+      description: "Content.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "WysiwygText" },
+        subcategory: "Item content",
+      },
+    },
+    link: {
+      description: "[Link](/?path=/docs/atom-link--docs) used as a title.",
+      control: "text",
+      type: {
+        name: "string",
+        required: true,
+      },
+      table: {
+        type: { summary: "Link" },
+        subcategory: "Item content",
+      },
+    },
+    label: {
+      description: "Optional label, displayed above the title.",
+      type: "string",
+      control: "text",
+      table: {
+        subcategory: "Item content",
+      },
+    },
+    tags: {
+      description: "Optional [Tags](/?path=/docs/component-tags--docs).",
+      control: "text",
+      table: {
+        type: { summary: "Tags" },
+        subcategory: "Item content",
+      },
     },
-    label: { control: "text" },
-    info: { control: "text" },
-    infoBefore: { control: "boolean" },
-    // @ts-expect-error The controls follow the shape
-    "image.src": { control: "text" },
-    "image.alt": { control: "text" },
-    "title.title": { control: "text" },
-    "title.as": { options: Object.values(HeadingTypes), control: "select" },
-    "link.href": { control: "text" },
-    "link.title": { control: "text" },
   },
 }
 
@@ -47,12 +109,18 @@ type Story = StoryObj<ListItemType>
 
 export const ListItem: Story = {}
 
+/**
+ * Make the whole item clickable.
+ */
 export const BlockLink: Story = {
   args: {
     modifiers: [ListItemModifiers.BLOCK],
   },
 }
 
+/**
+ * Information can be added above the title
+ */
 export const WithInfo: Story = {
   args: {
     label: "Publication",
@@ -61,12 +129,18 @@ export const WithInfo: Story = {
   },
 }
 
+/**
+ * Or below the title.
+ */
 export const WithUrl: Story = {
   args: {
     info: "https://example.com/some-thing",
   },
 }
 
+/**
+ * Adds a [Tags](/?path=/docs/component-tags--docs) component
+ */
 export const WithTags: Story = {
   args: {
     label: "Resource",
@@ -77,6 +151,9 @@ export const WithTags: Story = {
   },
 }
 
+/**
+ * Adds a [Image](/?path=/docs/atom-image--docs) component
+ */
 export const WithImage: Story = {
   args: {
     label: "Publication",
@@ -89,6 +166,9 @@ export const WithImage: Story = {
   },
 }
 
+/**
+ * Reverse the position of the image.
+ */
 export const ImageReverse: Story = {
   args: {
     modifiers: [ListItemModifiers.REVERSE],

package/src/Component/ListItem/ListItem.stories.tsx

@@ -19,13 +19,12 @@ const meta: Meta<typeof Component> = {
         </div>
         <Text modifier={TextStyles.S}>18 May 2040</Text>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
         </p>
       </ListItemContent>
     ),

package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/ListItem BlockLink smoke-test 1`] = `
 <div class="mx-page default">

package/src/Component/ListItem/__snapshots__/ListItem.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Elements/ListItem ListItem smoke-test 1`] = `
 <div class="mx-container">

package/src/Component/ListItem/list-item.css

@@ -19,8 +19,7 @@
 
   :is(.mx-list-item, .mx-container:has(> .mx-list-item)) {
     &:where(:not(:first-child)) {
-      border-block-start: var(--line-width, 1px) solid
-        var(--line-colour, var(--colour-border));
+      border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
       padding-block-start: var(--gap);
       margin-block-start: var(--gap);
     }

package/src/Component/Navigation/Components/DropdownLevel.tsx

@@ -76,24 +76,16 @@ const DropdownLevel = ({
             onKeyDown={handleKeyDown}
             aria-controls={dropdownId}
             aria-expanded={on}
-            className={classNames(
-              "mx-nav__toggle",
-              "mx-icon",
-              "mx-icon--only",
-              {
-                "mx-icon--chevron-down": !on,
-                "mx-icon--chevron-up": on,
-              },
-            )}
+            className={classNames("mx-nav__toggle", "mx-icon", "mx-icon--only", {
+              "mx-icon--chevron-down": !on,
+              "mx-icon--chevron-up": on,
+            })}
             type="button"
           >
             Sub-navigation
           </button>
           {on && (
-            <ul
-              id={dropdownId}
-              className={classNames("mx-nav__level-2", "mx-nav--open")}
-            >
+            <ul id={dropdownId} className={classNames("mx-nav__level-2", "mx-nav--open")}>
               {item.items.map(subitem => (
                 <li key={subitem.id} className={classNames(subitem.className)}>
                   <Link to={subitem.to} className={null}>

package/src/Component/Navigation/Elements/Navigation.ts

@@ -56,9 +56,7 @@ export default class Navigation extends HTMLElement {
       const item: HTMLLIElement = list.closest("li")
       const link: HTMLAnchorElement = item.querySelector(":scope > a")
       const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)
-      const trigger: HTMLButtonElement = item.querySelector(
-        ":scope > button.mx-nav__toggle",
-      )
+      const trigger: HTMLButtonElement = item.querySelector(":scope > button.mx-nav__toggle")
       if (item && link && trigger) {
         const labelId = `list-label-${id}`
         link.setAttribute("id", labelId)
@@ -117,9 +115,7 @@ export default class Navigation extends HTMLElement {
     })
   }
 
-  handleBreakpoint = ({
-    matches,
-  }: MediaQueryList | MediaQueryListEvent): void => {
+  handleBreakpoint = ({ matches }: MediaQueryList | MediaQueryListEvent): void => {
     const { signal }: AbortController = this.controller
     if (matches) {
       this.addEventListener("mouseover", this.handleFlyout, { signal })
@@ -135,22 +131,19 @@ export default class Navigation extends HTMLElement {
     const windowInnerWidth: number = window.innerWidth
     const edgeCheck: IntersectionObserver = new IntersectionObserver(
       ([{ boundingClientRect, target }], obs) => {
-        if (windowInnerWidth < boundingClientRect.right)
-          target.classList.add("mx-nav--reverse")
+        if (windowInnerWidth < boundingClientRect.right) target.classList.add("mx-nav--reverse")
         obs.disconnect()
       },
     )
     this.subNavs.forEach(({ list }: SubNavType): void => {
       edgeCheck.observe(list)
-      const nestedLists: NodeListOf<HTMLUListElement> =
-        list.querySelectorAll("ul")
+      const nestedLists: NodeListOf<HTMLUListElement> = list.querySelectorAll("ul")
       nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))
     })
   }
 
   get links(): NodeListOf<HTMLAnchorElement> | null {
-    const links: NodeListOf<HTMLAnchorElement> | null =
-      this.querySelectorAll("a")
+    const links: NodeListOf<HTMLAnchorElement> | null = this.querySelectorAll("a")
     if (!links.length) {
       throw new Error(`${this.localName} must links`)
     }
@@ -166,7 +159,7 @@ export default class Navigation extends HTMLElement {
   }
 }
 
-customElements.define("mx-nav", Navigation)
+if (!customElements.get("mx-nav")) customElements.define("mx-nav", Navigation)
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/Component/Navigation/Navigation.stories.ts

@@ -8,6 +8,10 @@ type MxNavigationType = NavigationType & {
   type?: "collapsible" | "dropdown" | "mega" | "footer"
 }
 
+/**
+ * Menu navigation components.
+ * The `collapsible`, `dropdown` and `mega` types require the `Navigation` element javascript.
+ */
 const meta: Meta<MxNavigationType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
@@ -35,6 +39,41 @@ const meta: Meta<MxNavigationType> = {
         },
       },
     ],
+    type: null,
+  },
+  argTypes: {
+    items: {
+      description:
+        "A list of [Link](/?path=/docs/atom-link--docs) objects, that can have nested `items` included. The `current` setting should be used for the current page link.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "Link[]" },
+      },
+    },
+    title: {
+      description: "The nav elements `aria-label` value.",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    id: {
+      description: "The unique id for the navigation.",
+      type: {
+        name: "string",
+        required: true,
+      },
+    },
+    type: {
+      description: "Define the type of navigation to change the display and behavior.",
+      options: ["collapsible", "dropdown", "mega", "footer"],
+      control: "select",
+      type: "string",
+    },
   },
 }
 
@@ -43,6 +82,9 @@ type Story = StoryObj<MxNavigationType>
 
 export const Navigation: Story = {}
 
+/**
+ * Collapsible menu is the base mobile experience for Dropdown and Mega types, but can also be used on its own.
+ */
 export const Collapsible: Story = {
   args: {
     type: "collapsible",
@@ -122,6 +164,9 @@ export const Collapsible: Story = {
   },
 }
 
+/**
+ * Dropdown is horizontal on desktop and has a flyout submenu on mouse over.
+ */
 export const Dropdown: Story = {
   args: {
     type: "dropdown",
@@ -180,6 +225,9 @@ export const Dropdown: Story = {
   },
 }
 
+/**
+ * Mega is horizontal on desktop requires click to access submenu, best for more than 2 levels of links.
+ */
 export const Mega: Story = {
   args: {
     type: "mega",

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
 <nav class="mx-nav mx-nav--dropdown"

package/src/Component/Navigation/__snapshots__/Navigation.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Navigation Collapsible smoke-test 1`] = `
 <div class="mx-page default">

package/src/Component/Navigation/__snapshots__/Navigation.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Navigation InlineNavigation smoke-test 1`] = `
 <nav class="mx-nav mx-nav--inline"

package/src/Component/Navigation/_navigation-collapsible.css

@@ -24,11 +24,9 @@
       & a {
         display: block;
         color: inherit;
-        border-block-end: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
+        border-block-end: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
         padding-block: var(--item-spacing, var(--spacing-xxs));
-        padding-inline: var(--indent, var(--spacing-xxs))
-          var(--item-spacing, var(--spacing-xxs));
+        padding-inline: var(--indent, var(--spacing-xxs)) var(--item-spacing, var(--spacing-xxs));
       }
     }
 

package/src/Component/Navigation/_navigation-dropdown.css

@@ -36,7 +36,7 @@
           );
           color: var(--nav-expanded-foreground, inherit);
 
-          & + .nav__toggle {
+          & + .mx-nav__toggle {
             color: var(--nav-expanded-foreground, inherit);
           }
         }
@@ -70,24 +70,12 @@
         justify-content: flex-start;
       }
 
-      & > li {
-        border-block-start: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
+      & > li > a:where(:not(.mx-button)) {
+        padding-block: var(--item-spacing, var(--spacing-xxs));
+        padding-inline-end: var(--toggle-gap, var(--item-spacing, var(--spacing-xxs)));
 
         @media (--global-nav-up) {
-          border-block-start: 0;
-        }
-
-        & > a:where(:not(.button)) {
-          padding-block: var(--item-spacing, var(--spacing-xxs));
-          padding-inline-end: var(
-            --toggle-gap,
-            var(--item-spacing, var(--spacing-xxs))
-          );
-
-          @media (--global-nav-up) {
-            padding-inline-start: var(--item-spacing, var(--spacing-xxs));
-          }
+          padding-inline-start: var(--item-spacing, var(--spacing-xxs));
         }
       }
     }
@@ -114,20 +102,11 @@
         }
       }
 
-      & > li {
-        @media (--global-nav-down) {
-          border-block-start: var(--line-width, 1px) solid
-            var(--line-colour, var(--colour-border));
-        }
-
-        & > a {
-          &:where(:not(.button)) {
-            padding: var(--item-spacing, var(--spacing-xxs));
+      & > li > a:where(:not(.mx-button)) {
+        padding: var(--item-spacing, var(--spacing-xxs));
 
-            @media (--global-nav-down) {
-              padding-inline-start: var(--spacing-l);
-            }
-          }
+        @media (--global-nav-down) {
+          padding-inline-start: var(--spacing-l);
         }
       }
     }
@@ -143,8 +122,7 @@
     }
 
     & .mx-nav__separator {
-      border-block-start: var(--line-width, 1px) solid
-        var(--line-colour, var(--colour-border));
+      border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
     }
   }
 }

package/src/Component/Navigation/_navigation-mega.css

@@ -25,10 +25,7 @@
         padding-inline-start: 0;
         border-block-start: 0;
         border-radius: 0 var(--border-radius) var(--border-radius) 0;
-        background-color: var(
-          --expanded-background,
-          var(--colour-background-alt)
-        );
+        background-color: var(--expanded-background, var(--colour-background-alt));
         color: var(--expanded-foreground, inherit);
       }
 

package/src/Component/Navigation/_navigation.css

@@ -39,10 +39,7 @@
     border: 0;
     appearance: none;
     position: absolute;
-    color: var(
-      --toggle-foreground,
-      var(--foreground, var(--colour-foreground))
-    );
+    color: var(--toggle-foreground, var(--foreground, var(--colour-foreground)));
     inline-size: var(--spacing-l);
     block-size: var(--spacing-l);
     inset-block-start: var(--toggle-top, 12px);

package/src/Component/Pagination/Components/PaginationContext.tsx

@@ -53,24 +53,12 @@ const PaginationProvider = ({
   // Calculate the "from a to b of x" values.
   const startVal = resultsPerPage * (currentPage - 1) + 1
   const endVal = resultsPerPage * currentPage
-  const pageStart = useMemo<number>(
-    () => (currentPage > 1 ? startVal : 1),
-    [currentPage, startVal],
-  )
-  const pageEnd = useMemo<number>(
-    () => (total > endVal ? endVal : total),
-    [total, endVal],
-  )
+  const pageStart = useMemo<number>(() => (currentPage > 1 ? startVal : 1), [currentPage, startVal])
+  const pageEnd = useMemo<number>(() => (total > endVal ? endVal : total), [total, endVal])
 
-  const showPager: boolean = useMemo(
-    () => total > resultsPerPage,
-    [total, resultsPerPage],
-  )
+  const showPager: boolean = useMemo(() => total > resultsPerPage, [total, resultsPerPage])
 
-  const lastPage: number = useMemo(
-    () => Math.ceil(total / resultsPerPage),
-    [total, resultsPerPage],
-  )
+  const lastPage: number = useMemo(() => Math.ceil(total / resultsPerPage), [total, resultsPerPage])
 
   const visiblePages: number[] = useMemo(() => {
     const pages: number[] = []
@@ -114,9 +102,7 @@ const PaginationProvider = ({
   )
 
   const showLastEllipsis: boolean = useMemo(
-    () =>
-      visiblePages.length !== 0 &&
-      visiblePages[visiblePages.length - 1] !== lastPage - 1,
+    () => visiblePages.length !== 0 && visiblePages[visiblePages.length - 1] !== lastPage - 1,
     [visiblePages, lastPage],
   )
 

package/src/Component/Pagination/Components/PaginationItem.tsx

@@ -36,11 +36,7 @@ const PaginationItem = ({
           <span className={classNames("mx-icon", "mx-icon--arrow-left")}></span>
         )}
         <span>{as}</span>
-        {as === "next" && (
-          <span
-            className={classNames("mx-icon", "mx-icon--arrow-right")}
-          ></span>
-        )}
+        {as === "next" && <span className={classNames("mx-icon", "mx-icon--arrow-right")}></span>}
       </button>
     )}
   </li>

package/src/Component/Pagination/Pagination.stories.ts

@@ -56,6 +56,34 @@ const meta: Meta<PaginationType> = {
       }),
     ],
   },
+  argTypes: {
+    previous: {
+      description: `[Link](/?path=/docs/atom-link--docs) component with the \`${Icons.ARROW_LEFT}\` [Icon](/?path=/docs/atom-icon--docs).`,
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+      },
+    },
+    next: {
+      description: `[Link](/?path=/docs/atom-link--docs) component with the \`${Icons.ARROW_RIGHT}\` [Icon](/?path=/docs/atom-icon--docs).`,
+      control: "text",
+      table: {
+        type: { summary: "Link" },
+      },
+    },
+    pages: {
+      description:
+        "List of `PaginationItem` objects, with either a [Link](/?path=/docs/atom-link--docs) components where `current` is used for the active page, or `ellipsis=true`.",
+      type: {
+        name: "other",
+        required: true,
+        value: "array",
+      },
+      table: {
+        type: { summary: "PaginationItem[]" },
+      },
+    },
+  },
 }
 
 export default meta

package/src/Component/Pagination/Pagination.tsx

@@ -16,9 +16,7 @@ const Pagination = (): JSX.Element => {
 
   const handleClick: MouseEventHandler = e => {
     const target = e.target as HTMLElement
-    const page: string = target
-      .closest("[data-page]")
-      ?.getAttribute("data-page")
+    const page: string = target.closest("[data-page]")?.getAttribute("data-page")
     if (!page) return
     onClick(parseInt(page))
     e.preventDefault()
@@ -27,9 +25,7 @@ const Pagination = (): JSX.Element => {
 
   const handleMouseOver: MouseEventHandler = e => {
     const target = e.target as HTMLElement
-    const page: string = target
-      .closest("[data-page]")
-      ?.getAttribute("data-page")
+    const page: string = target.closest("[data-page]")?.getAttribute("data-page")
     if (page) onMouseOver(parseInt(page))
   }
 
@@ -58,11 +54,7 @@ const Pagination = (): JSX.Element => {
               />
             ))}
             {showLastEllipsis && <PaginationItem as="ellipsis" />}
-            <PaginationItem
-              as="item"
-              number={lastPage}
-              active={currentPage === lastPage}
-            />
+            <PaginationItem as="item" number={lastPage} active={currentPage === lastPage} />
             <PaginationItem
               as="next"
               number={currentPage < lastPage ? currentPage + 1 : null}