@pnx-mixtape/mxds 0.0.19 → 0.0.21

package/src/Component/InPageNavigation/InPageNavigation.tsx

@@ -11,6 +11,7 @@ type InPageNavigationProps = {
   levels?: string
 }
 
+// @todo: make composable
 const InPageNavigation = ({
   title = "On this page",
   containerRef,

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

@@ -70,7 +70,7 @@ exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
     </nav>
   </aside>
   <section>
-    <div class="vertical-flow">
+    <div class="mx-vertical-flow">
       <h2 class
           level="h2"
           id="section-1"

package/src/Component/LinkList/LinkList.stories.ts

@@ -5,7 +5,9 @@ import "./link-list.css"
 // Deps.
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
+import Heading from "../../Atom/Heading/heading.twig"
 import { Icons } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs", "ids-mvp"],
@@ -41,3 +43,13 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const LinkList: Story = {}
+
+export const WithTitle: Story = {
+  args: {
+    title: Heading({
+      title: "Popular links",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    }),
+  },
+}

package/src/Component/LinkList/LinkList.stories.tsx

@@ -21,9 +21,3 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const LinkList: Story = {}
-
-export const Divided: Story = {
-  args: {
-    divided: true,
-  },
-}

package/src/Component/LinkList/LinkList.tsx

@@ -3,21 +3,9 @@ import classNames from "classnames"
 import Link from "../../Atom/Link/Link"
 import { Icons } from "../../enums"
 
-type LinkListProps = PropsWithChildren & {
-  divided?: boolean
-}
-// @todo no divided
-const LinkList = ({
-  divided = false,
-  children,
-}: LinkListProps): JSX.Element => (
-  <ul
-    className={classNames("mx-link-list", {
-      "mx-link-list--divided": divided,
-    })}
-  >
-    {children}
-  </ul>
+type LinkListProps = PropsWithChildren & {}
+const LinkList = ({ children }: LinkListProps): JSX.Element => (
+  <ul className={classNames("mx-link-list")}>{children}</ul>
 )
 
 type LinkListItemProps = PropsWithChildren & {
@@ -33,8 +21,9 @@ const LinkListItem = ({
   className,
 }: LinkListItemProps): JSX.Element => (
   <li className={className}>
-    <Link className={classNames("mx-icon", `mx-icon--${icon}`)} to={to}>
+    <Link to={to}>
       {children}
+      <span className={classNames("mx-icon", `mx-icon--${icon}`)} />
     </Link>
   </li>
 )

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

@@ -33,3 +33,40 @@ exports[`Component/LinkList LinkList smoke-test 1`] = `
   </ul>
 </div>
 `;
+
+exports[`Component/LinkList WithTitle smoke-test 1`] = `
+<div class="mx-page default">
+  <h2 class=" mx-heading--m">
+    Popular links
+  </h2>
+  <ul class="mx-link-list">
+    <li>
+      <a href="#">
+        <span>
+          Music
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span>
+          Performances
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span>
+          Get involved
+        </span>
+        <span class="mx-icon mx-icon--chevron-right ">
+        </span>
+      </a>
+    </li>
+  </ul>
+</div>
+`;

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

@@ -1,52 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/Link List Divided smoke-test 1`] = `
-<ul class="mx-link-list mx-link-list--divided">
-  <li>
-    <a href="#1"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Page link #1
-    </a>
-  </li>
-  <li>
-    <a href="#2"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Page link #2
-    </a>
-  </li>
-  <li>
-    <a href="#3"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Page link #3
-    </a>
-  </li>
-</ul>
-`;
-
 exports[`Navigation/Link List LinkList smoke-test 1`] = `
 <ul class="mx-link-list">
   <li>
     <a href="#1"
-       class="mx-icon mx-icon--chevron-right"
+       class="mx-link"
     >
       Page link #1
+      <span class="mx-icon mx-icon--chevron-right">
+      </span>
     </a>
   </li>
   <li>
     <a href="#2"
-       class="mx-icon mx-icon--chevron-right"
+       class="mx-link"
     >
       Page link #2
+      <span class="mx-icon mx-icon--chevron-right">
+      </span>
     </a>
   </li>
   <li>
     <a href="#3"
-       class="mx-icon mx-icon--chevron-right"
+       class="mx-link"
     >
       Page link #3
+      <span class="mx-icon mx-icon--chevron-right">
+      </span>
     </a>
   </li>
 </ul>

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

@@ -1,6 +1,7 @@
 {% set classes = ['mx-link-list'] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
+{{ title }}
 <ul{{ attributes }}>
   {% for item in items %}
     <li>{{ item }}</li>

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

@@ -0,0 +1,12 @@
+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>
+  )
+}
+
+export default ListItemContent

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

@@ -0,0 +1,20 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+type CardProps = PropsWithChildren & {
+  skeleton?: boolean
+}
+
+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>}
+      {children}
+    </figure>
+  )
+}
+
+export default ListItemMedia

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

@@ -1,30 +1,33 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./ListItem"
+import ListItemContent from "./Components/ListItemContent"
+import Text from "../../Atom/Text/Text"
+import Link from "../../Atom/Link/Link"
+import { TextStyles, TextTags } from "../../enums"
 
 const meta: Meta<typeof Component> = {
   title: "Elements/ListItem",
   component: Component,
-  argTypes: {
-    children: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   args: {
-    title: "Teaser title",
-    to: "http://example.com",
-    info: "18 May 2040",
     children: (
-      <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.
-      </p>
+      <ListItemContent>
+        <Text modifier={TextStyles.S} tag={TextTags.STRONG}>
+          label
+        </Text>
+        <div className="mx-heading--m">
+          <Link to="http://example.com">Teaser title</Link>
+        </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.
+        </p>
+      </ListItemContent>
     ),
   },
 }

package/src/Component/ListItem/ListItem.tsx

@@ -1,31 +1,15 @@
-import { JSX, PropsWithChildren, ReactNode } from "react"
+import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
-import Link from "../../Atom/Link/Link"
-import { TextStyles, TextTags } from "../../enums"
-import { HeadingTypes, AsTypes } from "@pnx-mixtape/ids-shape"
-import Text from "../../Atom/Text/Text"
+import { AsTypes } from "@pnx-mixtape/ids-shape"
 
 type TeaserProps = PropsWithChildren & {
-  title: string
-  to: string
-  label?: string
-  info?: string
-  infoBefore?: boolean
   className?: string
   as?: AsTypes
-  headingLevel?: HeadingTypes
-  image?: ReactNode
 }
 
 const ListItem = ({
   children,
-  title,
-  to,
-  label,
-  info,
-  infoBefore = false,
   className,
-  image,
   as = AsTypes.ARTICLE,
   ...props
 }: TeaserProps): JSX.Element => {
@@ -33,20 +17,7 @@ const ListItem = ({
   return (
     <div className="mx-container">
       <Tag className={classNames(["mx-list-item", className])} {...props}>
-        {image && <figure className="mx-list-item__media">{image}</figure>}
-        <div className="mx-list-item__content mx-vertical-flow">
-          {label && (
-            <Text modifier={TextStyles.S} tag={TextTags.STRONG}>
-              {info}
-            </Text>
-          )}
-          {info && infoBefore && <Text modifier={TextStyles.S}>{info}</Text>}
-          <div className="mx-heading--m">
-            <Link to={to}>{title}</Link>
-          </div>
-          {info && !infoBefore && <Text modifier={TextStyles.S}>{info}</Text>}
-          {children}
-        </div>
+        {children}
       </Tag>
     </div>
   )

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

@@ -4,6 +4,9 @@ exports[`Elements/ListItem ListItem smoke-test 1`] = `
 <div class="mx-container">
   <article class="mx-list-item">
     <div class="mx-list-item__content mx-vertical-flow">
+      <strong class="mx-text--s">
+        label
+      </strong>
       <div class="mx-heading--m">
         <a href="http://example.com"
            class="mx-link"

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

@@ -53,8 +53,14 @@ const PaginationProvider = ({
   // Calculate the "from a to b of x" values.
   const startVal = resultsPerPage * (currentPage - 1) + 1
   const endVal = resultsPerPage * currentPage
-  const pageStart = useRef<number>(currentPage > 1 ? startVal : 1)
-  const pageEnd = useRef<number>(total > endVal ? endVal : total)
+  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,
@@ -157,8 +163,8 @@ const PaginationProvider = ({
       visiblePages,
       showFirstEllipsis,
       showLastEllipsis,
-      pageStart: pageStart.current,
-      pageEnd: pageEnd.current,
+      pageStart,
+      pageEnd,
       onClick,
       onMouseOver,
     }),

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

@@ -31,16 +31,16 @@ const PaginationItem = ({
       </>
     )}
     {(as === "next" || as === "previous") && (
-      <button
-        type="button"
-        disabled={disabled}
-        data-page={number}
-        className={classNames("mx-icon", {
-          "mx-icon--arrow-left": as === "previous",
-          "mx-icon--arrow-right": as === "next",
-        })}
-      >
-        {as}
+      <button type="button" disabled={disabled} data-page={number}>
+        {as === "previous" && (
+          <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>
+        )}
       </button>
     )}
   </li>

package/src/Component/Pagination/Pagination.tsx

@@ -16,7 +16,9 @@ const Pagination = (): JSX.Element => {
 
   const handleClick: MouseEventHandler = e => {
     const target = e.target as HTMLElement
-    const page: string = target.getAttribute("data-page")
+    const page: string = target
+      .closest("[data-page]")
+      ?.getAttribute("data-page")
     if (!page) return
     onClick(parseInt(page))
     e.preventDefault()
@@ -25,7 +27,9 @@ const Pagination = (): JSX.Element => {
 
   const handleMouseOver: MouseEventHandler = e => {
     const target = e.target as HTMLElement
-    const page: string = target.getAttribute("data-page")
+    const page: string = target
+      .closest("[data-page]")
+      ?.getAttribute("data-page")
     if (page) onMouseOver(parseInt(page))
   }
 

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

@@ -10,9 +10,12 @@ exports[`Component/Pagination Pagination smoke-test 1`] = `
     >
       <button type="button"
               disabled
-              class="mx-icon mx-icon--arrow-left"
       >
-        previous
+        <span class="mx-icon mx-icon--arrow-left">
+        </span>
+        <span>
+          previous
+        </span>
       </button>
     </li>
     <li class="mx-pagination__item"
@@ -47,9 +50,12 @@ exports[`Component/Pagination Pagination smoke-test 1`] = `
     <li class="mx-pagination__next">
       <button type="button"
               data-page="2"
-              class="mx-icon mx-icon--arrow-right"
       >
-        next
+        <span>
+          next
+        </span>
+        <span class="mx-icon mx-icon--arrow-right">
+        </span>
       </button>
     </li>
   </ul>

package/src/Component/Pagination/pagination.css

@@ -11,6 +11,15 @@
       padding: unset;
       background: transparent;
       cursor: pointer;
+      border: none;
+      font-size: inherit;
+      text-transform: inherit;
+
+      &:has(.mx-icon) {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--spacing-xxs);
+      }
     }
 
     & :is(a, button, [aria-current="page"], [aria-current="step"]) {
@@ -35,12 +44,6 @@
       pointer-events: none;
     }
 
-    & .mx-icon:not(.mx-icon--only) {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-xxs);
-    }
-
     & .mx-pagination__items {
       display: flex;
       place-content: center;
@@ -54,20 +57,12 @@
       padding-inline: var(--spacing-xs);
     }
 
-    &
-      :is(.mx-pagination__previous, .mx-pagination__next)
-      .mx-icon:not(.mx-icon--only) {
-      font-weight: var(--font-weight-bold);
+    & :is(.mx-pagination__previous, .mx-pagination__next) {
       text-transform: capitalize;
 
-      @media (--small-down) {
-        overflow: hidden;
-        inline-size: var(--spacing-s);
-        position: relative;
-        text-indent: 100%;
-
-        &::before {
-          position: absolute;
+      & span:where(:not(.mx-icon)) {
+        @media (--small-down) {
+          display: none;
         }
       }
     }

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

@@ -4,7 +4,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-steps  mx-steps--counters">
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h2>
           Funk
         </h2>
@@ -14,7 +14,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h3>
           Soul
         </h3>
@@ -24,7 +24,7 @@ exports[`Component/Steps Counters smoke-test 1`] = `
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h4>
           Motown
         </h4>
@@ -41,17 +41,17 @@ exports[`Component/Steps Progress smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-steps mx-steps--supplementary ">
     <div class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
       </div>
     </div>
@@ -63,17 +63,17 @@ exports[`Component/Steps ProgressCounters smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-steps mx-steps--dark mx-steps--counters ">
     <div class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
       </div>
     </div>
     <div class="mx-steps__panel mx-steps--fill">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
       </div>
     </div>
@@ -85,7 +85,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
 <div class="mx-page default">
   <div class="mx-steps ">
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h2>
           Funk
         </h2>
@@ -95,7 +95,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h3>
           Soul
         </h3>
@@ -105,7 +105,7 @@ exports[`Component/Steps Steps smoke-test 1`] = `
       </div>
     </div>
     <div class="mx-steps__panel ">
-      <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+      <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
         <h4>
           Motown
         </h4>

package/src/Component/Steps/step-item.twig

@@ -5,7 +5,7 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <div{{ attributes }}>
-  <div class="mx-steps__panel-content mx-container mx-vertical-flow">
+  <div class="mx-steps__panel-content mx-container mx-vertical-flow rich-text">
   {{ content }}
   </div>
 </div>

package/src/Component/Steps/steps.css

@@ -70,8 +70,7 @@
       inline-size: var(--line-width, 2px);
       background-color: var(--line-colour, var(--colour-border));
       inset-inline-start: calc(
-        (var(--counter-size, var(--spacing-l)) / 2) -
-          (var(--line-width, 2px) / 2)
+        (var(--counter-size, 2rem) / 2) + (var(--line-width, 2px))
       );
       inset-block: 0;
       position: absolute;

package/src/Component/Tabs/Components/TabPanel.tsx

@@ -19,7 +19,7 @@ const TabPanel = ({
       id={id}
       className={classNames("mx-tabs__panel", "mx-vertical-flow", className)}
       // @ts-expect-error inert is allowed.
-      inert={!isActive ? "" : null}
+      inert={!isActive ? "true" : null}
       aria-labelledby={`${id}-button`}
       role="tabpanel"
       tabIndex={0}

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

@@ -93,6 +93,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
   </div>
   <div id="unique-5"
        class="mx-tabs__panel mx-vertical-flow mx-section--l"
+       inert
        aria-labelledby="unique-8"
        role="tabpanel"
        tabindex="0"
@@ -103,6 +104,7 @@ exports[`Component/Tabs Default smoke-test 1`] = `
   </div>
   <div id="unique-6"
        class="mx-tabs__panel mx-vertical-flow mx-section--l"
+       inert
        aria-labelledby="unique-9"
        role="tabpanel"
        tabindex="0"