@pnx-mixtape/mxds 0.0.5 → 0.0.7

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div class="global-alert page global-alert--critical">
-  <div class="global-alert__inner"
+<div class="mx-global-alert mx-page mx-global-alert--critical">
+  <div class="mx-global-alert__inner"
        data-container
   >
-    <div class="global-alert__content">
-      <h2 class=" heading--m">
+    <div class="mx-global-alert__content">
+      <h2 class=" mx-heading--m">
         In page alert
       </h2>
       <p>
@@ -18,21 +18,21 @@ exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 `;
 
 exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<mx-closable-alert class="global-alert page global-alert--light"
+<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light"
                    id="unique-0"
 >
-  <div class="global-alert__inner"
+  <div class="mx-global-alert__inner"
        data-container
   >
-    <div class="global-alert__content">
-      <h2 class=" heading--m">
+    <div class="mx-global-alert__content">
+      <h2 class=" mx-heading--m">
         In page alert
       </h2>
       <p>
         Something happened that requires your attention
       </p>
     </div>
-    <button class="icon icon--close"
+    <button class="mx-icon mx-icon--close"
             aria-controls="unique-0"
             aria-label="Close GlobalAlert"
             type="button"

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

@@ -2,10 +2,10 @@
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 <div id=":r1:"
-     class="global-alert global-alert--critical"
+     class="mx-global-alert mx-global-alert--critical"
 >
-  <div class="global-alert__inner">
-    <div class="global-alert__content">
+  <div class="mx-global-alert__inner">
+    <div class="mx-global-alert__content">
       <p>
         <b>
           Something happened.
@@ -23,10 +23,10 @@ exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 
 exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
 <div id=":r0:"
-     class="global-alert global-alert--light"
+     class="mx-global-alert mx-global-alert--light"
 >
-  <div class="global-alert__inner">
-    <div class="global-alert__content">
+  <div class="mx-global-alert__inner">
+    <div class="mx-global-alert__content">
       <p>
         <b>
           Something happened.
@@ -38,7 +38,7 @@ exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
         .
       </p>
     </div>
-    <button class="icon icon--close"
+    <button class="mx-icon mx-icon--close"
             aria-label="Close light message"
             type="button"
     >

package/src/Component/GlobalAlert/global-alert.css

@@ -9,17 +9,17 @@
 }
 
 @layer design-system.components {
-  .global-alert {
+  .mx-global-alert {
     background-color: var(--background, var(--colour-primary-light));
     color: var(--foreground, var(--colour-foreground));
 
-    & .global-alert__inner {
+    & .mx-global-alert__inner {
       display: grid;
       gap: var(--gap-s);
       padding-block: var(--spacing-xxs);
       padding-inline: var(--spacing-s);
 
-      &:has(.icon--close) {
+      &:has(.mx-icon--close) {
         grid-template-columns: auto min-content;
         grid-template-areas: "content close";
 
@@ -33,12 +33,12 @@
       color: inherit;
     }
 
-    &.global-alert--critical {
+    &.mx-global-alert--critical {
       --foreground: var(--colour-error-foreground);
       --background: var(--colour-error-background);
     }
 
-    & .icon--close {
+    & .mx-icon--close {
       --icon-size: 1rem;
 
       grid-area: close;

package/src/Component/GlobalAlert/global-alert.twig

@@ -1,15 +1,15 @@
-{% set baseClass = 'global-alert' %}
+{% set baseClass = 'mx-global-alert' %}
 {% set classes = [
   baseClass,
-  'page',
+  'mx-page',
   type ? baseClass~'--'~type : null,
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 {% if dismissible %}
 <mx-closable-alert {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
-  <div class="global-alert__inner" data-container>
-    <div class="global-alert__content">
+  <div class="mx-global-alert__inner" data-container>
+    <div class="mx-global-alert__content">
       {{ title }}
       {{ content }}
       {{ link }}
@@ -18,8 +18,8 @@
 </mx-closable-alert>
 {% else %}
   <div {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
-    <div class="global-alert__inner" data-container>
-      <div class="global-alert__content">
+    <div class="mx-global-alert__inner" data-container>
+      <div class="mx-global-alert__content">
         {{ title }}
         {{ content }}
         {{ link }}

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from "@storybook/html"
 import { Page } from "../../../.storybook/decorators"
-import Component from "./twig/hero-banner-story.twig"
+import Component from "./hero-banner.twig"
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Image from "../../Atom/Image/image.twig"
+import LinkList from "../LinkList/link-list.twig"
 import "./hero-banner.css"
 import "../LinkList/link-list.css"
 import {
@@ -13,20 +17,21 @@ const meta: Meta<HeroBannerType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
-    image: {
+    subtitle:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    image: Image({
       src: "https://picsum.photos/id/56/558/418?grayscale",
       alt: "Blurry bubbles",
-    },
-    title: {
+    }),
+    title: Heading({
       title: "Hero banner title",
       as: HeadingTypes.ONE,
-    },
-    link: {
+    }),
+    link: Link({
       href: "#",
       title: "Find out more",
-    },
-    subtitle:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      more: true,
+    }),
   },
   parameters: {
     deepControls: { enabled: true },
@@ -52,10 +57,10 @@ type Story = StoryObj<HeroBannerType>
 
 export const HeroBanner: Story = {}
 
-export const LinkList: Story = {
+export const WithLinkList: Story = {
   args: {
     link: null,
-    linkList: {
+    linkList: LinkList({
       items: [
         {
           title: "Link one",
@@ -70,6 +75,6 @@ export const LinkList: Story = {
           href: "#",
         },
       ],
-    },
+    }),
   },
 }

package/src/Component/HeroBanner/HeroBanner.tsx

@@ -19,7 +19,7 @@ type HeroBannerProps = PropsWithChildren &
     center?: boolean
     headingLevel?: HeadingTypes
   }
-
+// @todo expand to have new features
 const HeroBanner = ({
   title,
   hero = false,
@@ -32,9 +32,9 @@ const HeroBanner = ({
 }: HeroBannerProps): JSX.Element => (
   <Section sizes={SectionStyles.XL} className={className} containing>
     <div
-      className={classNames("hero-banner", "vertical-flow", {
-        "hero-banner--hero": hero,
-        "text--center": center,
+      className={classNames("mx-hero-banner", "mx-vertical-flow", {
+        "mx-hero-banner--hero": hero,
+        "mx-text--center": center,
       })}
       {...props}
     >

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

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
-<div class="page">
-  <div class="hero-banner page ">
-    <div class="hero-banner__inner">
-      <div class="hero-banner__content vertical-flow section--xl">
-        <h1 class>
+<div class="mx-page">
+  <div class="mx-hero-banner mx-page ">
+    <div class="mx-hero-banner__inner">
+      <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+        <h1>
           Hero banner title
         </h1>
-        <div class="text--lede">
+        <p class="mx-text--lede">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </div>
-        <a class="link link--more "
+        </p>
+        <a class="mx-link--more"
            href="#"
         >
           <span>
@@ -19,10 +19,10 @@ exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
           </span>
         </a>
       </div>
-      <div class="hero-banner__aside hero-banner__aside-image">
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         <picture>
           <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt
+               alt="Blurry bubbles"
           >
         </picture>
       </div>
@@ -31,37 +31,37 @@ exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/HeroBanner LinkList smoke-test 1`] = `
-<div class="page">
-  <div class="hero-banner page ">
-    <div class="hero-banner__inner">
-      <div class="hero-banner__content vertical-flow section--xl">
-        <h1 class>
+exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
+<div class="mx-page">
+  <div class="mx-hero-banner mx-page ">
+    <div class="mx-hero-banner__inner">
+      <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
+        <h1>
           Hero banner title
         </h1>
-        <div class="text--lede">
+        <p class="mx-text--lede">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </div>
+        </p>
       </div>
-      <div class="hero-banner__aside">
-        <ul class="link-list">
+      <div class="mx-hero-banner__aside">
+        <ul class="mx-link-list">
           <li>
             <a href="#"
-               class="icon icon--chevron-right"
+               class="mx-icon mx-icon--chevron-right"
             >
               Link one
             </a>
           </li>
           <li>
             <a href="#"
-               class="icon icon--chevron-right"
+               class="mx-icon mx-icon--chevron-right"
             >
               Link two
             </a>
           </li>
           <li>
             <a href="#"
-               class="icon icon--chevron-right"
+               class="mx-icon mx-icon--chevron-right"
             >
               Link three
             </a>

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

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/HeroBanner Hero smoke-test 1`] = `
-<div class="page section--xl">
-  <div class="hero-banner vertical-flow hero-banner--hero">
-    <h1 class="headline"
+<div class="mx-page mx-section--xl">
+  <div class="mx-hero-banner mx-vertical-flow mx-hero-banner--hero">
+    <h1 class="mx-headline"
         id="always-put-your-best-"
     >
       Always put your best foot forward.
     </h1>
-    <p class="text--xl">
+    <p class="mx-text--xl">
       Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
     </p>
-    <button class="button button--dark"
+    <button class="mx-button mx-button--dark"
             type="button"
     >
       Button
@@ -21,14 +21,14 @@ exports[`Component/HeroBanner Hero smoke-test 1`] = `
 `;
 
 exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
-<div class="page section--xl">
-  <div class="hero-banner vertical-flow">
-    <h1 class="headline"
+<div class="mx-page mx-section--xl">
+  <div class="mx-hero-banner mx-vertical-flow">
+    <h1 class="mx-headline"
         id="always-put-your-best-"
     >
       Always put your best foot forward.
     </h1>
-    <p class="text--xl">
+    <p class="mx-text--xl">
       Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
     </p>
   </div>

package/src/Component/HeroBanner/hero-banner.css

@@ -3,11 +3,11 @@
  */
 
 @layer design-system.components {
-  .hero-banner {
+  .mx-hero-banner {
     position: relative;
     z-index: 1;
 
-    &.hero-banner--hero {
+    &.mx-hero-banner--hero {
       min-block-size: var(--hero-height, 400px);
       place-content: center;
     }
@@ -18,7 +18,7 @@
     }
   }
 
-  .hero-banner__inner {
+  .mx-hero-banner__inner {
     display: grid;
     grid-template-areas: "content" "aside";
 
@@ -28,14 +28,14 @@
     }
   }
 
-  .hero-banner__content {
+  .mx-hero-banner__content {
     align-content: center;
   }
 
-  .hero-banner__aside {
+  .mx-hero-banner__aside {
     align-content: center;
 
-    &.hero-banner__aside-image {
+    &.mx-hero-banner__aside-image {
       overflow: hidden;
       position: relative;
       border-radius: var(--hero-image-radius, var(--border-radius));

package/src/Component/HeroBanner/hero-banner.twig

@@ -1,4 +1,4 @@
-{% set baseClass = 'hero-banner' %}
+{% set baseClass = 'mx-hero-banner' %}
 {% set background = null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
@@ -13,28 +13,28 @@
 {% endfor %}
 {% set classes = [
   baseClass,
-  'page',
+  'mx-page',
   highlight ? baseClass~'--hero' : null,
   background ? background : null,
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <div{{ attributes }}>
-  <div class="hero-banner__inner">
-    <div class="hero-banner__content vertical-flow section--xl">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
       {{ title }}
       {% if subtitle %}
-        <div class="text--lede">{{ subtitle }}</div>
+        <p class="mx-text--lede">{{ subtitle }}</p>
       {% endif %}
       {{ content }}
       {{ link }}
     </div>
     {% if linkList %}
-      <div class="hero-banner__aside">
+      <div class="mx-hero-banner__aside">
         {{ linkList }}
       </div>
     {% elseif image %}
-      <div class="hero-banner__aside hero-banner__aside-image">
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         {{ image }}
       </div>
     {% endif %}

package/src/Component/InPageAlert/InPageAlert.stories.ts

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/story-in-page-alert.twig"
+import Component from "./in-page-alert.twig"
+import Link from "../../Atom/Link/link.twig"
 import "./in-page-alert.css"
 import {
   HeadingTypes,
@@ -20,10 +21,10 @@ const meta: Meta<InPageAlertType> = {
   },
   args: {
     content: "Something happened that requires your attention",
-    link: {
+    link: Link({
       title: "Click here",
       href: "#",
-    },
+    }),
   },
 }
 

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

@@ -4,9 +4,7 @@ exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
 <div class="message ">
   <div class="message__content">
     Something happened that requires your attention
-    <a class="link "
-       href="#"
-    >
+    <a href="#">
       <span>
         Click here
       </span>

package/src/Component/InPageAlert/in-page-alert.css

@@ -19,12 +19,12 @@
     color: var(--foreground, var(--colour-foreground));
     border-radius: var(--border-radius);
 
-    &:has(.icon--close) {
+    &:has(.mx-icon--close) {
       grid-template-columns: auto min-content;
       grid-template-areas: "content close";
     }
 
-    &:is(.icon, :has(.icon--close)) {
+    &:is(.mx-icon, :has(.mx-icon--close)) {
       --icon-size: 1.25rem;
 
       & .message__content {
@@ -32,7 +32,7 @@
       }
     }
 
-    &.icon {
+    &.mx-icon {
       grid-template-columns: min-content auto;
       grid-template-areas: "icon content";
 
@@ -41,7 +41,7 @@
         background-size: contain;
       }
 
-      &:has(.icon--close) {
+      &:has(.mx-icon--close) {
         grid-template-columns: min-content auto min-content;
         grid-template-areas: "icon content close";
       }
@@ -72,7 +72,7 @@
       --background: var(--colour-warning-background);
     }
 
-    & .icon--close {
+    & .mx-icon--close {
       --icon-size: 1rem;
 
       grid-area: close;

package/src/Component/InPageAlert/in-page-alert.twig

@@ -2,9 +2,9 @@
 {% set classes = [
   baseClass,
   type ? baseClass~'--'~type : null,
-  type ? 'icon icon--'~type : null,
+  type ? 'mx-icon mx-icon--'~type : null,
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <div {{ attributes }}>
   <div class="message__content">

package/src/Component/InPageNavigation/Elements/InPageNavigation.ts

@@ -100,7 +100,7 @@ export default class InPageNavigation extends HTMLElement {
     const targetID: string = id || this.generatedId(heading)
     if (!id) heading.id = targetID
     const item: Element = createElement(
-      `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`,
+      `<a href="#${targetID}" class="mx-icon mx-icon--chevron-right">${linkText}</a>`,
     )
 
     return item as HTMLAnchorElement
@@ -109,7 +109,7 @@ export default class InPageNavigation extends HTMLElement {
   generateListItem(heading: HTMLHeadingElement): HTMLLIElement {
     const { tagName } = heading
     const item: Element = createElement(
-      `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`,
+      `<li class="mx-in-page-navigation__level--${tagName.toLowerCase()}"></li>`,
     )
 
     return item as HTMLLIElement

package/src/Component/InPageNavigation/InPageNavigation.stories.ts

@@ -1,16 +1,39 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./in-page-navigation.twig"
+import Component from "./twig/in-page-navigation-story.twig"
+import Heading from "../../Atom/Heading/heading.twig"
 import "./in-page-navigation.css"
 import "./Elements/InPageNavigation"
+import {
+  HeadingTypes,
+  InPageNavigation as InPageNavigationType,
+} from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
-  tags: ["autodocs"],
+const meta: Meta<InPageNavigationType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    title: Heading({
+      title: "On this page",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    }),
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    levels: { options: Object.values(HeadingTypes), control: "multi-select" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "title.modifiers": {
+      options: Object.values(HeadingTypes),
+      control: "multi-select",
+    },
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<InPageNavigationType>
 
-export const InPageNavigation: Story = {
-  args: {},
-}
+export const InPageNavigation: Story = {}

package/src/Component/InPageNavigation/InPageNavigation.tsx

@@ -12,20 +12,20 @@ type InPageNavigationProps = {
 }
 
 const InPageNavigation = ({
-  title = "Jump to content",
+  title = "On this page",
   containerRef,
   levels,
 }: InPageNavigationProps): JSX.Element => {
   const { headings } = useInPageNavigation({ ref: containerRef, levels })
   return (
-    <nav className={"in-page-navigation nav nav--list"}>
+    <nav className={"mx-in-page-navigation mx-nav mx-nav--list"}>
       <Heading as={HeadingTypes.TWO} modifier={HeadingStyles.EMBELLISHED}>
         {title}
       </Heading>
       <ul>
         {headings.map(({ level, id, text }) => (
-          <li className={`in-page-navigation__level--${level}`} key={id}>
-            <Link to={`#${id}`} className="icon icon--chevron-right">
+          <li className={`mx-in-page-navigation__level--${level}`} key={id}>
+            <Link to={`#${id}`} className="mx-icon mx-icon--chevron-right">
               {text}
             </Link>
           </li>