@pnx-mixtape/mxds 0.0.2 → 0.0.4

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

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/story-global-alert.twig"
+import "./global-alert.css"
+import "./Elements/ClosableAlert"
+import {
+  GlobalAlert as GlobalAlertType,
+  GlobalAlertTypes,
+  HeadingTypes,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<GlobalAlertType> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    type: { options: Object.values(GlobalAlertTypes), control: "radio" },
+    id: {
+      control: "text",
+      description: "Set an id to get stable localStorage entry.",
+    },
+    dismissible: { control: "boolean" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+  args: {
+    title: {
+      title: "In page alert",
+      as: HeadingTypes.TWO,
+      modifiers: [HeadingTypes.FOUR],
+    },
+    content: "Something happened that requires your attention",
+    type: GlobalAlertTypes.LIGHT,
+    dismissible: true,
+  },
+}
+
+export default meta
+type Story = StoryObj<GlobalAlertType>
+
+export const GlobalAlert: Story = {}
+
+export const Critical: Story = {
+  args: {
+    dismissible: false,
+    type: GlobalAlertTypes.CRITICAL,
+  },
+}

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

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./GlobalAlert"
+import "./global-alert.css"
+import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: (
+      <p>
+        <b>Something happened.</b> And if you&apos;d like to know what,{" "}
+        <a href="#">Click here</a>.
+      </p>
+    ),
+    dismissible: true,
+  },
+  argTypes: {
+    type: { options: Object.values(GlobalAlertTypes), control: "radio" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const GlobalAlert: Story = {}
+
+export const Critical: Story = {
+  args: {
+    type: GlobalAlertTypes.CRITICAL,
+    dismissible: false,
+  },
+}

package/src/Component/GlobalAlert/GlobalAlert.tsx

@@ -0,0 +1,50 @@
+import { JSX, PropsWithChildren, useId } from "react"
+import classNames from "classnames"
+import useLocalStorage from "../../Utility/Hooks/useLocalStorage"
+import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"
+
+type GlobalAlertProps = PropsWithChildren & {
+  type?: GlobalAlertTypes
+  id?: string
+  dismissible?: boolean
+}
+
+const GlobalAlert = ({
+  children,
+  id,
+  type = GlobalAlertTypes.LIGHT,
+  dismissible,
+}: GlobalAlertProps): JSX.Element => {
+  const uniqueId: string = id || useId()
+  const [messageVisible, setMessageVisible] = useLocalStorage({
+    key: uniqueId,
+    initialValue: true,
+  })
+
+  return (
+    <>
+      {messageVisible && (
+        <div
+          id={uniqueId}
+          className={classNames("global-alert", {
+            [`global-alert--${type}`]: type,
+          })}
+        >
+          <div className="global-alert__inner">
+            <div className="global-alert__content">{children}</div>
+            {dismissible && (
+              <button
+                className={classNames("icon", "icon--close")}
+                onClick={() => setMessageVisible(false)}
+                aria-label={`Close ${type} message`}
+                type="button"
+              ></button>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default GlobalAlert

package/src/Component/GlobalAlert/README.md

@@ -0,0 +1,27 @@
+# Global Alert
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/src/Component/GlobalAlert/global-alert.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Component/GlobalAlert/global-alert.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+JSX components are available for use with React.
+
+- JSX import: `import { GlobalAlert } from '@pnx-mixtape/mxds/react';`
+
+**Custom Element**
+
+This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
+
+- ES6 import: `import '@pnx-mixtape/mxds/src/Component/GlobalAlert/Elements/ClosableAlert';`

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

@@ -0,0 +1,43 @@
+// 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"
+       data-container
+  >
+    <div class="global-alert__content">
+      <h2 class=" heading--m">
+        In page alert
+      </h2>
+      <p>
+        Something happened that requires your attention
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
+<mx-closable-alert class="global-alert page global-alert--light"
+                   id="unique-0"
+>
+  <div class="global-alert__inner"
+       data-container
+  >
+    <div class="global-alert__content">
+      <h2 class=" heading--m">
+        In page alert
+      </h2>
+      <p>
+        Something happened that requires your attention
+      </p>
+    </div>
+    <button class="icon icon--close"
+            aria-controls="unique-0"
+            aria-label="Close GlobalAlert"
+            type="button"
+    >
+    </button>
+  </div>
+</mx-closable-alert>
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Component/GlobalAlert Critical smoke-test 1`] = `
+<div id=":r1:"
+     class="global-alert global-alert--critical"
+>
+  <div class="global-alert__inner">
+    <div class="global-alert__content">
+      <p>
+        <b>
+          Something happened.
+        </b>
+        And if you'd like to know what,
+        <a href="#">
+          Click here
+        </a>
+        .
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
+<div id=":r0:"
+     class="global-alert global-alert--light"
+>
+  <div class="global-alert__inner">
+    <div class="global-alert__content">
+      <p>
+        <b>
+          Something happened.
+        </b>
+        And if you'd like to know what,
+        <a href="#">
+          Click here
+        </a>
+        .
+      </p>
+    </div>
+    <button class="icon icon--close"
+            aria-label="Close light message"
+            type="button"
+    >
+    </button>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,55 @@
+/**
+ * Messages
+ */
+
+@layer design-system.defaults {
+  mx-closable-alert {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  .global-alert {
+    background-color: var(--background, var(--colour-primary-light));
+    color: var(--foreground, var(--colour-foreground));
+
+    & .global-alert__inner {
+      display: grid;
+      gap: var(--gap-s);
+      padding-block: var(--spacing-xxs);
+      padding-inline: var(--spacing-s);
+
+      &:has(.icon--close) {
+        grid-template-columns: auto min-content;
+        grid-template-areas: "content close";
+
+        & .message__content {
+          grid-area: content;
+        }
+      }
+    }
+
+    & a {
+      color: inherit;
+    }
+
+    &.global-alert--critical {
+      --foreground: var(--colour-error-foreground);
+      --background: var(--colour-error-background);
+    }
+
+    & .icon--close {
+      --icon-size: 1rem;
+
+      grid-area: close;
+      appearance: none;
+      inline-size: var(--spacing-l);
+      block-size: var(--spacing-l);
+      padding: 0;
+      border: 0;
+      background-color: transparent;
+      justify-content: end;
+      color: inherit;
+    }
+  }
+}

package/src/Component/GlobalAlert/global-alert.entry.js

@@ -0,0 +1 @@
+import "./Elements/GlobalAlert"

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

@@ -0,0 +1,30 @@
+{% set baseClass = 'global-alert' %}
+{% set classes = [
+  baseClass,
+  'page',
+  type ? baseClass~'--'~type : null,
+] %}
+{% set attributes = (attributes|default(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">
+      {{ title }}
+      {{ content }}
+      {{ link }}
+    </div>
+  </div>
+</mx-closable-alert>
+{% else %}
+  <div {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
+    <div class="global-alert__inner" data-container>
+      <div class="global-alert__content">
+        {{ title }}
+        {{ content }}
+        {{ link }}
+      </div>
+    </div>
+  </div>
+{% endif %}
+

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

@@ -0,0 +1,14 @@
+{% extends "../global-alert.twig" %}
+{% if title %}
+  {% set title %}
+    {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: title.as, modifiers: title.modifiers } only %}
+  {% endset %}
+{% endif %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title } only %}
+  {% endset %}
+{% endif %}
+{% if content %}
+  {% set content %}<p>{{ content }}</p>{% endset %}
+{% endif %}

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

@@ -0,0 +1,74 @@
+// 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>
+          Hero banner title
+        </h1>
+        <div class="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 "
+           href="#"
+        >
+          <span>
+            Find out more
+          </span>
+        </a>
+      </div>
+      <div class="hero-banner__aside hero-banner__aside-image">
+        <picture>
+          <img src="https://picsum.photos/id/56/558/418?grayscale"
+               alt
+          >
+        </picture>
+      </div>
+    </div>
+  </div>
+</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>
+          Hero banner title
+        </h1>
+        <div class="text--lede">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </div>
+      </div>
+      <div class="hero-banner__aside">
+        <ul class="link-list">
+          <li>
+            <a href="#"
+               class="icon icon--chevron-right"
+            >
+              Link one
+            </a>
+          </li>
+          <li>
+            <a href="#"
+               class="icon icon--chevron-right"
+            >
+              Link two
+            </a>
+          </li>
+          <li>
+            <a href="#"
+               class="icon icon--chevron-right"
+            >
+              Link three
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Component/HeroBanner/__snapshots__/{PageTitle.stories.tsx.snap → HeroBanner.stories.tsx.snap}

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/HeroBanner/HeroBanner Hero smoke-test 1`] = `
+exports[`Component/HeroBanner Hero smoke-test 1`] = `
 <div class="page section--xl">
-  <div class="page-title vertical-flow page-title--hero">
+  <div class="hero-banner vertical-flow hero-banner--hero">
     <h1 class="headline"
         id="always-put-your-best-"
     >
@@ -20,9 +20,9 @@ exports[`Components/HeroBanner/HeroBanner Hero smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/HeroBanner/HeroBanner HeroBanner smoke-test 1`] = `
+exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
 <div class="page section--xl">
-  <div class="page-title vertical-flow">
+  <div class="hero-banner vertical-flow">
     <h1 class="headline"
         id="always-put-your-best-"
     >

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

@@ -2,7 +2,7 @@
  * Page Title
  */
 
-@layer components {
+@layer design-system.components {
   .hero-banner {
     position: relative;
     z-index: 1;

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

@@ -26,6 +26,7 @@
       {% if subtitle %}
         <div class="text--lede">{{ subtitle }}</div>
       {% endif %}
+      {{ content }}
       {{ link }}
     </div>
     {% if linkList %}

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

@@ -1,35 +1,33 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./in-page-alert.twig"
+import Component from "./twig/story-in-page-alert.twig"
 import "./in-page-alert.css"
-import "./Elements/InPageAlert"
-import { MessageTypes } from "../../enums"
+import {
+  HeadingTypes,
+  InPageAlert as InPageAlertType,
+  InPageAlertTypes,
+} from "@pnx-mixtape/ids-shape"
 
-type InPageAlertArgs = {
-  type?: MessageTypes
-  id?: string
-  closable?: boolean
-}
-
-const meta: Meta<InPageAlertArgs> = {
+const meta: Meta<InPageAlertType> = {
   tags: ["autodocs"],
   component: Component,
   argTypes: {
-    type: { options: Object.values(MessageTypes), control: "radio" },
-    id: {
-      control: "text",
-      description: "Set an id to get stable localStorage entry.",
+    type: { options: Object.values(InPageAlertTypes), control: "radio" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+  args: {
+    content: "Something happened that requires your attention",
+    link: {
+      title: "Click here",
+      href: "#",
     },
-    closable: { control: "boolean" },
   },
 }
 
 export default meta
-type Story = StoryObj<InPageAlertArgs>
+type Story = StoryObj<InPageAlertType>
 
 export const InPageAlert: Story = {}
-
-export const Closable: Story = {
-  args: {
-    closable: true,
-  },
-}

package/src/Component/InPageAlert/InPageAlert.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react"
 import Component from "./InPageAlert"
 import "./in-page-alert.css"
-import { MessageTypes } from "../../enums"
+import { InPageAlertTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
@@ -15,7 +15,7 @@ const meta: Meta<typeof Component> = {
     ),
   },
   argTypes: {
-    type: { options: Object.values(MessageTypes), control: "radio" },
+    type: { options: Object.values(InPageAlertTypes), control: "radio" },
   },
 }
 
@@ -26,18 +26,18 @@ export const InPageAlert: Story = {}
 
 export const Warning: Story = {
   args: {
-    type: MessageTypes.WARNING,
+    type: InPageAlertTypes.WARNING,
   },
 }
 
 export const Error: Story = {
   args: {
-    type: MessageTypes.ERROR,
+    type: InPageAlertTypes.ERROR,
   },
 }
 
 export const Success: Story = {
   args: {
-    type: MessageTypes.SUCCESS,
+    type: InPageAlertTypes.SUCCESS,
   },
 }

package/src/Component/InPageAlert/InPageAlert.tsx

@@ -1,50 +1,24 @@
-import { JSX, PropsWithChildren, useId } from "react"
+import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
-import useLocalStorage from "../../Utility/Hooks/useLocalStorage"
-import { MessageTypes } from "../../enums"
+import { InPageAlertTypes } from "@pnx-mixtape/ids-shape"
 
 type InPageAlertProps = PropsWithChildren & {
-  type?: MessageTypes
-  id?: string
-  closable?: boolean
+  type?: InPageAlertTypes
 }
 
 const InPageAlert = ({
   children,
-  id,
-  type = MessageTypes.INFO,
-  closable,
-}: InPageAlertProps): JSX.Element => {
-  const uniqueId: string = id || useId()
-  const [messageVisible, setMessageVisible] = useLocalStorage({
-    key: uniqueId,
-    initialValue: true,
-  })
-
-  return (
-    <>
-      {messageVisible && (
-        <div
-          id={uniqueId}
-          className={classNames("message", {
-            [`message--${type}`]: type,
-            icon: type,
-            [`icon--${type}`]: type,
-          })}
-        >
-          {children}
-          {closable && (
-            <button
-              className={classNames("icon", "icon--close")}
-              onClick={() => setMessageVisible(false)}
-              aria-label={`Close ${type} message`}
-              type="button"
-            ></button>
-          )}
-        </div>
-      )}
-    </>
-  )
-}
+  type = InPageAlertTypes.INFO,
+}: InPageAlertProps): JSX.Element => (
+  <div
+    className={classNames("message", {
+      [`message--${type}`]: type,
+      icon: type,
+      [`icon--${type}`]: type,
+    })}
+  >
+    <div className="message__content">{children}</div>
+  </div>
+)
 
 export default InPageAlert

package/src/Component/InPageAlert/README.md

@@ -4,13 +4,13 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/in-page-alert.css';`
+`@import '@pnx-mixtape/mxds/src/Component/InPageAlert/in-page-alert.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/Components/InPageAlert/in-page-alert.twig' %}`
+- Eg: `{% extends '@mixtape/Component/InPageAlert/in-page-alert.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
@@ -18,10 +18,10 @@ Alternatively copy/paste the file for more control.
 
 JSX components are available for use with React.
 
-- JSX import: `import { InPageAlert } from 'pnx-mixtape/InPageAlert';`
+- JSX import: `import { InPageAlert } from '@pnx-mixtape/mxds/react';`
 
 **Custom Element**
 
 This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.
 
-- ES6 import: `import '@pnx-mixtape/mxds/InPageAlert/Elements/InPageAlert';`
+- ES6 import: `import '@pnx-mixtape/mxds/src/Component/InPageAlert/Elements/InPageAlert';`