@pnx-mixtape/mxds 0.0.13 → 0.0.15

package/src/Form/form.css

@@ -29,6 +29,9 @@
 
 @layer design-system.atoms {
   :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     box-shadow: none;
     font: inherit;
     letter-spacing: inherit;
@@ -46,10 +49,6 @@
     line-height: var(--line-height-ui);
     block-size: var(--form-element-height, var(--spacing-xxl));
 
-    &:focus-visible {
-      outline-offset: calc(var(--line-width, 2px) * -1);
-    }
-
     &::placeholder {
       color: var(--placeholder-colour, var(--colour-foreground-alt));
       opacity: 1;
@@ -61,11 +60,11 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 
@@ -117,14 +116,11 @@
     }
 
     &:has(.error)::before {
-      background-color: var(--error-foreground, var(--colour-error-foreground));
+      background-color: var(--error-foreground, var(--colour-error));
     }
 
     &:has(.success)::before {
-      background-color: var(
-        --success-foreground,
-        var(--colour-success-foreground)
-      );
+      background-color: var(--success-foreground, var(--colour-success));
     }
   }
 }
@@ -145,10 +141,8 @@
       var(--line-colour, var(--line-colour, var(--colour-border)));
 
     &:has(.mx-input__text:focus-visible) {
-      --outline-size: max(0.125rem, 0.15em);
-
-      outline: var(--outline-width, var(--outline-size))
-        var(--outline-style, solid) var(--outline-color, currentcolor);
+      outline: var(--outline-size) var(--outline-style, solid)
+        var(--outline-color, currentcolor);
       outline-offset: calc(var(--line-width, 2px) * -1);
     }
 
@@ -212,11 +206,6 @@
       background-position: center;
     }
 
-    &:focus-visible {
-      outline: var(--line-width, 2px) auto var(--outline-color);
-      outline-offset: 0;
-    }
-
     &[disabled] {
       &::after {
         opacity: var(--disabled-opacity, 0.6);
@@ -235,11 +224,11 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 }
@@ -280,11 +269,6 @@
       }
     }
 
-    &:focus-visible {
-      outline: var(--line-width, 2px) auto var(--outline-color);
-      outline-offset: 0;
-    }
-
     &[disabled] {
       &::after {
         opacity: var(--disabled-opacity, 0.6);
@@ -303,15 +287,18 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 
   :is(.mx-radio, .mx-checkbox) {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     margin-block-end: var(--spacing-xxxs);
     display: flex;
     align-items: center;
@@ -343,6 +330,9 @@
 
 @layer design-system.atoms {
   .mx-input__select {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     appearance: none;
     cursor: pointer;
     background-color: var(--background, var(--colour-background));
@@ -377,6 +367,9 @@
 
 @layer design-system.atoms {
   .mx-input__textarea {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
   }
@@ -466,14 +459,11 @@
 
   .mx-error-message::before {
     mask-image: svg-load("./images/form-error.svg");
-    background-color: var(--error-foreground, var(--colour-error-foreground));
+    background-color: var(--error-foreground, var(--colour-error));
   }
 
   .mx-success-message::before {
     mask-image: svg-load("./images/form-success.svg");
-    background-color: var(
-      --success-foreground,
-      var(--colour-success-foreground)
-    );
+    background-color: var(--success-foreground, var(--colour-success));
   }
 }

package/src/Introduction.mdx

@@ -0,0 +1,40 @@
+import { Meta, Title, Subtitle } from "@storybook/addon-docs/blocks"
+
+<Meta title="Introduction" />
+
+<Title>Introduction</Title>
+
+<Subtitle>
+  Mixtape is a Design System built by
+  [PreviousNext](https://www.previousnext.com.au/).
+</Subtitle>
+
+- Separate CSS/JS files for components to improve performance.
+- Outputs normal CSS files that can be used in a PostCSS setup, no Sass.
+- Wraps all CSS in Cascade Layers
+- Javascript is available in both React and Web Component formats.
+- Provides Twig templates for each component
+- Supports PINTO and Experience Builder integration.
+- Is tested against WCAG 2.0 AA to ensure accessibility standards.
+- Follows PreviousNext's high standards.
+- Provide integration Documentation.
+
+## Installation
+
+```bash
+npm install @pnx-mixtape/mxds --save
+```
+
+### Dependencies
+
+This package uses Design Tokens to override much of the CSS Custom Properties.
+
+```bash
+npm install postcss-design-tokens --save-dev
+```
+
+Pass the tokens in directly, or create a custom tokens file that imports and overrides them.
+
+```js
+import tokens from "@pnx-mixtape/mxds/tokens"
+```

package/src/Layout/Footer/Footer.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./footer.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
@@ -12,7 +12,6 @@ import {
   IconSizeModifier,
   FooterModifier,
 } from "@pnx-mixtape/ids-shape"
-import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
 const meta: Meta<FooterType> = {
@@ -67,10 +66,6 @@ const meta: Meta<FooterType> = {
     ],
     copyright: "&copy; 2025 Company Name",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
-  decorators: [Page],
 }
 
 export default meta

package/src/Layout/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Footer"
 import "./footer.css"
 

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Footer Everything smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -129,8 +129,8 @@ exports[`Layout/Footer Everything smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer Footer smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -187,8 +187,8 @@ exports[`Layout/Footer Footer smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer Light smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--alt">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--alt">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -245,8 +245,8 @@ exports[`Layout/Footer Light smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer NoMenu smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -276,8 +276,8 @@ exports[`Layout/Footer NoMenu smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer WithAcknowledgment smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <div class="mx-footer__aoc mx-text--s">
         We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.

package/src/Layout/Footer/footer.css

@@ -33,6 +33,8 @@
     & .mx-social-links {
       grid-area: social;
       align-self: end;
+      display: flex;
+      gap: var(--spacing-xxxs);
     }
 
     & .mx-footer__copyright {
@@ -41,15 +43,11 @@
 
       &:not(:first-child) {
         padding-block-start: var(--spacing-s);
-        border-block-start: var(--line-width, 1px) solid
-          var(--line-colour, var(--colour-border));
         margin-block-start: var(--gap);
 
         & + .mx-footer__links {
           @media (--medium-up) {
             padding-block-start: var(--spacing-s);
-            border-block-start: var(--line-width, 1px) solid
-              var(--line-colour, var(--colour-border));
           }
         }
       }
@@ -72,8 +70,6 @@
   .mx-footer__aoc {
     grid-area: aoc;
     padding-block-end: var(--footer-row-gap, var(--spacing-xxl));
-    border-block-end: var(--line-width, 1px) solid
-      var(--line-colour, var(--colour-border));
     margin-block-end: var(--gap);
     text-align: center;
   }

package/src/Layout/Footer/footer.twig

@@ -1,7 +1,6 @@
 {% set baseClass = 'mx-footer' %}
 {% set classes = [
   baseClass,
-  'mx-section',
   'mx-section--top-l',
   'mx-section--bottom-m',
   background == "light" ? 'mx-background--alt' : 'mx-background--reverse',

package/src/Layout/Grid/Grid.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./grid.twig"
 import GridItem from "./grid-item.twig"
 import "./grid.css"
@@ -14,12 +14,12 @@ const meta: Meta<GridType> = {
   component: Component,
   args: {
     items: [
-      GridItem({ item: "item 1" }),
-      GridItem({ item: "item 2" }),
-      GridItem({ item: "item 3" }),
-      GridItem({ item: "item 4" }),
-      GridItem({ item: "item 5" }),
-      GridItem({ item: "item 6" }),
+      GridItem({ item: "<span>item 1</span>" }),
+      GridItem({ item: "<span>item 2</span>" }),
+      GridItem({ item: "<span>item 3</span>" }),
+      GridItem({ item: "<span>item 4</span>" }),
+      GridItem({ item: "<span>item 5</span>" }),
+      GridItem({ item: "<span>item 6</span>" }),
     ],
     as: SectionTypes.DIV,
     modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
@@ -59,7 +59,7 @@ export const Span: Story = {
   args: {
     modifiers: [GridModifiers.SM_2, GridModifiers.MD_3],
     items: [
-      GridItem({ item: "item 1" }),
+      GridItem({ item: "<span>item 1</span>" }),
       GridItem({
         item: "item 2, span 2",
         modifiers: [GridModifiers.MD_2],

package/src/Layout/Grid/Grid.stories.tsx

@@ -1,5 +1,5 @@
-/* eslint-disable @eslint-react/no-array-index-key, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
-import { Meta, StoryObj } from "@storybook/react"
+/* eslint-disable @eslint-react/no-array-index-key */
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Grid"
 import { AsTypes, GridModifiers, SectionTypes } from "@pnx-mixtape/ids-shape"
 

package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap

@@ -1,46 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Grid Grid smoke-test 1`] = `
-<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
-  <div class>
-    item 1
-  </div>
-  <div class>
-    item 2
-  </div>
-  <div class>
-    item 3
-  </div>
-  <div class>
-    item 4
-  </div>
-  <div class>
-    item 5
-  </div>
-  <div class>
-    item 6
+<div class="mx-page default">
+  <div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
+    <span>
+      item 1
+    </span>
+    <span>
+      item 2
+    </span>
+    <span>
+      item 3
+    </span>
+    <span>
+      item 4
+    </span>
+    <span>
+      item 5
+    </span>
+    <span>
+      item 6
+    </span>
   </div>
 </div>
 `;
 
 exports[`Layout/Grid List smoke-test 1`] = `
-<ul class="mx-grid mx-grid--cols-sm-2">
-  <li class>
-    list item 1
-  </li>
-  <li class>
-    list item 2
-  </li>
-</ul>
+<div class="mx-page default">
+  <ul class="mx-grid mx-grid--cols-sm-2">
+    <li class>
+      list item 1
+    </li>
+    <li class>
+      list item 2
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Layout/Grid Span smoke-test 1`] = `
-<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-md-3">
-  <div class>
-    item 1
-  </div>
-  <div class="mx-grid-item__span-md-2">
-    item 2, span 2
+<div class="mx-page default">
+  <div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-md-3">
+    <span>
+      item 1
+    </span>
+    <div class="mx-grid-item__span-md-2">
+      item 2, span 2
+    </div>
   </div>
 </div>
 `;

package/src/Layout/Grid/container-grid.css

@@ -7,7 +7,7 @@
     --container-name: grid-item;
 
     @container grid-item (min-width: token("breakpoint.l")) {
-      --grid-gap: var(--gap-l);
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
     }
 
     &
@@ -128,15 +128,15 @@
     }
 
     &:is(
-        .grid--xs-2-cols,
-        .grid--sm-2-cols,
-        .grid--md-2-cols,
-        .grid--md-3-cols,
-        .grid--lg-3-cols,
-        .grid--md-4-cols,
-        .grid--lg-4-cols,
-        .grid--xl-4-cols
-      ) {
+      .grid--xs-2-cols,
+      .grid--sm-2-cols,
+      .grid--md-2-cols,
+      .grid--md-3-cols,
+      .grid--lg-3-cols,
+      .grid--md-4-cols,
+      .grid--lg-4-cols,
+      .grid--xl-4-cols
+    ) {
       --grid-repeat: 1;
     }
 

package/src/Layout/Grid/grid-item.twig

@@ -9,8 +9,10 @@
   <{{ as }}{{ attributes.addClass("mx-container") }}>
   {{ item }}
   </{{ as }}>
-{% else %}
+{% elseif classes is not empty or as != "div" %}
   <{{ as }}{{ attributes }}>
   {{ item }}
   </{{ as }}>
+{% else %}
+  {{ item }}
 {% endif %}

package/src/Layout/Grid/grid.css

@@ -16,7 +16,7 @@
     gap: var(--grid-gap, var(--gap));
 
     @media (--large-up) {
-      --grid-gap: var(--gap-l);
+      --grid-gap: var(--large-grid-gap, var(--gap-l));
     }
 
     &:is(ul, ol) {
@@ -100,11 +100,11 @@
   }
 
   .mx-grid--collapse-cols {
-    grid-column-gap: 0;
+    column-gap: 0;
   }
 
   .mx-grid--collapse-rows {
-    grid-row-gap: 0;
+    row-gap: 0;
   }
 }
 

package/src/Layout/Header/Header.stories.ts

@@ -1,10 +1,9 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./header.twig"
 import "./_header.css"
 import "./_toggles.css"
 import "./Elements/GlobalToggle"
 import { ButtonTypes, Header as HeaderType } from "@pnx-mixtape/ids-shape"
-import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
 // Deps.
@@ -63,9 +62,6 @@ const meta: Meta<MxHeaderType> = {
       ],
     }),
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
   argTypes: {
     stacked: { control: "boolean" },
     title: { control: "text" },
@@ -75,7 +71,6 @@ const meta: Meta<MxHeaderType> = {
     "logo.image.src": { control: "text" },
     "logo.image.alt": { control: "text" },
   },
-  decorators: [Page],
 }
 
 export default meta

package/src/Layout/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Header"
 import { mixtapeLogo, navigationItems } from "../../../mockups/constants"
 import "./header.css"

package/src/Layout/Header/__snapshots__/Header.stories.ts.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Header Controls smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -76,8 +76,8 @@ exports[`Layout/Header Controls smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Header smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -142,8 +142,8 @@ exports[`Layout/Header Header smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Search smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -243,8 +243,8 @@ exports[`Layout/Header Search smoke-test 1`] = `
 `;
 
 exports[`Layout/Header Stacked smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
@@ -306,7 +306,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
     </div>
   </header>
   <div id="unique-1"
-       class="mx-header__nav mx-section__full mx-page"
+       class="mx-header__nav mx-page"
        aria-label="Primary navigation"
        role="region"
   >
@@ -451,8 +451,8 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
 `;
 
 exports[`Layout/Header WithTitle smoke-test 1`] = `
-<div class="mx-page">
-  <header class="mx-header mx-section__full mx-page mx-section--s">
+<div class="mx-page default">
+  <header class="mx-header mx-page mx-section--s">
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"

package/src/Layout/Header/__snapshots__/Header.stories.tsx.snap

@@ -8,18 +8,18 @@ exports[`Layout/Header PrimaryHeader smoke-test 1`] = `
          class="mx-logo"
       >
         <img alt="Mixtape"
-             src="https://mixtape.pnx.io/images/mixtape-logo.png"
              loading="eager"
+             src="https://mixtape.pnx.io/images/mixtape-logo.png"
         >
       </a>
     </div>
     <div class="mx-header__main">
-      <div id=":r0:"
+      <div id="«r0»"
            class="mx-header__nav"
       >
         <nav class="mx-nav mx-nav--dropdown"
              aria-label="Primary Navigation"
-             id=":r0:"
+             id="«r0»"
         >
           <ul class="mx-nav__level-1">
             <li class="mx-nav__has-subnav">