@pnx-mixtape/mxds 0.0.5 → 0.0.7

package/src/Form/form.css

@@ -3,13 +3,23 @@
  */
 
 @layer design-system.atoms {
-  .form__item {
+  .mx-form-item {
     max-inline-size: var(--container-max-width);
+  }
 
-    &.form__item--inline {
-      display: flex;
-      align-items: flex-start;
-    }
+  .mx-form-item--inline {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  /**
+   * Form actions.
+   */
+  .mx-form-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-s);
   }
 }
 
@@ -18,20 +28,7 @@
  */
 
 @layer design-system.atoms {
-  :is(
-      .input__text,
-      [type="text"],
-      [type="search"],
-      [type="tel"],
-      [type="url"],
-      [type="email"],
-      [type="password"],
-      [type="date"],
-      [type="time"],
-      [type="number"],
-      select,
-      textarea
-    ) {
+  :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
     box-shadow: none;
     font: inherit;
     letter-spacing: inherit;
@@ -72,12 +69,12 @@
     }
   }
 
-  :is(.input--small, .select--small) {
+  .mx-input--small {
     min-inline-size: 0;
     border-width: 1px;
   }
 
-  :is(.input--wide, .select--wide) {
+  .mx-input--wide {
     inline-size: 100%;
   }
 }
@@ -87,7 +84,7 @@
  */
 
 @layer design-system.atoms {
-  .input__divider {
+  .mx-input__divider {
     padding: var(--form-spacing, var(--spacing-s));
     line-height: var(--line-height-ui);
   }
@@ -98,7 +95,7 @@
  */
 
 @layer design-system.atoms {
-  .input__text--icon {
+  .mx-input--icon {
     display: inline-block;
     max-inline-size: 100%;
     min-inline-size: 100%;
@@ -113,7 +110,7 @@
       inset-inline-start: var(--form-spacing, var(--spacing-s));
     }
 
-    & input {
+    & .mx-input__text {
       inline-size: 100%;
       padding-inline-start: calc(var(--form-spacing, var(--spacing-s)) * 2.5);
       background-color: transparent;
@@ -137,24 +134,37 @@
  */
 
 @layer design-system.atoms {
-  .input__text--inline {
+  .mx-form--inline-button {
     position: relative;
-    display: inline-block;
+    display: flex;
     max-inline-size: 100%;
     min-inline-size: 100%;
     border-radius: var(--border-radius);
     background-color: var(--background, var(--colour-background));
+    border: var(--line-width, 2px) solid
+      var(--line-colour, var(--line-colour, var(--colour-border)));
 
-    & [type="text"] {
-      inline-size: 100%;
-      padding-inline-end: 7rem;
+    &: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-offset: calc(var(--line-width, 2px) * -1);
+    }
+
+    & .mx-input__text {
       background-color: transparent;
+      border: 0;
+      flex-grow: 1;
+
+      &:focus-visible {
+        outline: none;
+      }
     }
 
-    & [type="submit"] {
-      position: absolute;
-      inset-block-start: var(--spacing-xxxxs);
-      inset-inline-end: var(--spacing-xxxxs);
+    & .mx-button {
+      margin: var(--spacing-xxxxs);
+      flex-shrink: 0;
       border: 0;
       border-radius: 3px;
       block-size: calc(
@@ -169,20 +179,20 @@
  */
 
 @layer design-system.atoms {
-  :is(label, legend) {
+  :is(.mx-label, .mx-legend) {
     display: block;
     margin-block-end: var(--spacing-xxxs);
     font-size: var(--font-size);
     color: var(--label-foreground, var(--foreground, var(--colour-foreground)));
 
-    &.label--inline {
+    &.mx-label--inline {
       display: inline-block;
       margin-block-end: 0;
       margin-inline-end: var(--spacing-xxs);
     }
   }
 
-  [type="checkbox"] {
+  .mx-checkbox [type="checkbox"] {
     box-shadow: none;
     appearance: none;
     inline-size: var(--control-size, var(--spacing-m));
@@ -243,7 +253,7 @@
  */
 
 @layer design-system.atoms {
-  [type="radio"] {
+  .mx-radio [type="radio"] {
     box-shadow: none;
     appearance: none;
     display: flex;
@@ -301,7 +311,7 @@
     }
   }
 
-  :is(.form__radio, .form__checkbox) {
+  :is(.mx-radio, .mx-checkbox) {
     margin-block-end: var(--spacing-xxxs);
     display: flex;
     align-items: center;
@@ -320,19 +330,53 @@
       flex-shrink: 0;
     }
 
-    &.form__item--inline {
+    &.mx-form-item--inline {
       display: inline-flex;
       margin-inline-end: var(--control-gap, var(--spacing-xxs));
     }
   }
 }
 
+/**
+ * Select
+ */
+
+@layer design-system.atoms {
+  .mx-input__select {
+    appearance: none;
+    cursor: pointer;
+    background-color: var(--background, var(--colour-background));
+    background-image: svg-load("./images/form-chevron-down.svg");
+    background-position: right var(--form-spacing, var(--spacing-s)) center;
+    padding-block: 0;
+    padding-inline-end: var(--spacing-xl);
+
+    &[multiple] {
+      block-size: auto;
+      background-image: none;
+    }
+
+    &.mx-input--small {
+      padding-inline-end: var(--spacing-m);
+      background-position: right var(--spacing-xs) center;
+    }
+  }
+
+  :is(.translated-rtl .mx-input__select, [dir="rtl"] .mx-input__select) {
+    background-position: left var(--spacing-s) center;
+
+    &.mx-input--small {
+      background-position: left var(--spacing-xs) center;
+    }
+  }
+}
+
 /**
  * Textarea
  */
 
 @layer design-system.atoms {
-  textarea {
+  .mx-input__textarea {
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
   }
@@ -343,7 +387,7 @@
  */
 
 @layer design-system.atoms {
-  :is(.fieldset, fieldset) {
+  .mx-fieldset {
     border: var(--line-width, 2px) solid
       var(--line-colour, var(--colour-border));
     border-radius: var(--border-radius);
@@ -354,24 +398,24 @@
       padding-block: 0;
       padding-inline: var(--form-spacing, var(--spacing-s));
     }
-  }
 
-  .fieldset--plain {
-    border: 0;
-    padding: 0;
-
-    & legend {
+    &:is(.mx-fieldset--plain, :has(.mx-checkbox, .mx-radio)) {
+      border: 0;
       padding: 0;
+
+      & legend {
+        padding: 0;
+      }
     }
-  }
 
-  .fieldset--inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-xxs);
+    &.mx-fieldset--inline {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-xxs);
 
-    & :is(.form__item, .form__item--inline) {
-      margin: 0;
+      & :is(.form__item, .form__item--inline) {
+        margin: 0;
+      }
     }
   }
 }
@@ -381,7 +425,7 @@
  */
 
 @layer design-system.atoms {
-  .form__description {
+  .mx-description {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
     font-size: var(--font-size-xs);
@@ -393,11 +437,11 @@
 }
 
 /**
- * Error message
+ * Messages
  */
 
 @layer design-system.atoms {
-  :is(.form__success-message, .form__error-message) {
+  :is(.mx-success-message, .mx-error-message) {
     margin-block: var(--form-spacing, var(--spacing-s));
     margin-inline: 0;
     font-size: var(--font-size-s);
@@ -420,12 +464,12 @@
     }
   }
 
-  .form__error-message::before {
+  .mx-error-message::before {
     mask-image: svg-load("./images/form-error.svg");
     background-color: var(--error-foreground, var(--colour-error-foreground));
   }
 
-  .form__success-message::before {
+  .mx-success-message::before {
     mask-image: svg-load("./images/form-success.svg");
     background-color: var(
       --success-foreground,
@@ -433,47 +477,3 @@
     );
   }
 }
-
-/**
- * Select
- */
-
-@layer design-system.atoms {
-  select {
-    appearance: none;
-    cursor: pointer;
-    background-color: var(--background, var(--colour-background));
-    background-image: svg-load("./images/form-chevron-down.svg");
-    background-position: right var(--form-spacing, var(--spacing-s)) center;
-    padding-block: 0;
-    padding-inline-end: var(--spacing-xl);
-
-    &[multiple] {
-      block-size: auto;
-      background-image: none;
-    }
-
-    &.input--small {
-      padding-inline-end: var(--spacing-m);
-      background-position: right var(--spacing-xs) center;
-    }
-  }
-
-  :is(.translated-rtl select, [dir="rtl"] select) {
-    background-position: left var(--spacing-s) center;
-
-    &.input--small {
-      background-position: left var(--spacing-xs) center;
-    }
-  }
-
-  /**
-   * Form actions.
-   */
-  .form__actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-}

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

@@ -1,15 +1,207 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./footer.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import Logo from "../Header/twig/logo.twig"
+import Navigation from "../../Component/Navigation/navigation.twig"
+import SocialLinks from "../../Component/SocialLinks/social-links.twig"
 import "./footer.css"
+import "../../Component/SocialLinks/social-links.css"
+import {
+  Footer as FooterType,
+  IconSizeModifier,
+  FooterModifier,
+} from "@pnx-mixtape/ids-shape"
+import { Page } from "../../../.storybook/decorators"
+import { Icons } from "../../enums"
 
-const meta: Meta<typeof Component> = {
+const meta: Meta<FooterType> = {
   tags: ["autodocs"],
   component: Component,
+  args: {
+    logo: Logo({
+      href: "#",
+      src: "./mixtape-logo.png",
+      alt: "Mixtape",
+      width: "120",
+    }),
+    navigation: Navigation({
+      id: "footer-story",
+      type: "footer",
+      title: "Footer navigation",
+      items: [
+        {
+          link: {
+            title: "News",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "About us",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "Contact",
+            href: "#",
+          },
+        },
+        {
+          link: {
+            title: "Resources",
+            href: "#",
+          },
+        },
+      ],
+    }),
+    links: [
+      Link({
+        title: "Accessibility",
+        href: "#",
+      }),
+      Link({
+        title: "Terms & Conditions",
+        href: "#",
+      }),
+    ],
+    copyright: "&copy; 2025 Company Name",
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  decorators: [Page],
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<FooterType>
 
-export const Footer: Story = {
-  args: {},
+export const Footer: Story = {}
+
+export const Light: Story = {
+  args: {
+    background: FooterModifier.LIGHT,
+  },
+}
+
+export const WithAcknowledgment: Story = {
+  args: {
+    aoc: "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.",
+  },
+}
+
+export const NoMenu: Story = {
+  args: {
+    navigation: null,
+  },
+}
+
+export const Everything: Story = {
+  args: {
+    socials: SocialLinks({
+      items: [
+        Link({
+          title: "Facebook",
+          href: "#",
+          iconOnly: true,
+          iconStart: Icon({
+            icon: Icons.FACEBOOK,
+            size: IconSizeModifier.MEDIUM,
+          }),
+        }),
+        Link({
+          title: "Instagram",
+          href: "#",
+          iconOnly: true,
+          iconStart: Icon({
+            icon: Icons.INSTAGRAM,
+            size: IconSizeModifier.MEDIUM,
+          }),
+        }),
+        Link({
+          title: "LinkedIn",
+          href: "#",
+          iconOnly: true,
+          iconStart: Icon({
+            icon: Icons.LINKEDIN,
+            size: IconSizeModifier.MEDIUM,
+          }),
+        }),
+      ],
+    }),
+    navigation: Navigation({
+      id: "footer-story",
+      type: "footer",
+      title: "Footer navigation",
+      items: [
+        {
+          link: {
+            title: "News",
+            href: "#",
+          },
+          items: [
+            {
+              link: {
+                title: "Events",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "Media Releases",
+                href: "#",
+              },
+            },
+          ],
+        },
+        {
+          link: {
+            title: "About us",
+            href: "#",
+          },
+          items: [
+            {
+              link: {
+                title: "Resources",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "Who we are",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "Join us",
+                href: "#",
+              },
+            },
+          ],
+        },
+        {
+          link: {
+            title: "Contact",
+            href: "#",
+          },
+          items: [
+            {
+              link: {
+                title: "Enquiry form",
+                href: "#",
+              },
+            },
+            {
+              link: {
+                title: "Careers",
+                href: "#",
+              },
+            },
+          ],
+        },
+      ],
+    }),
+  },
 }

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

@@ -1,8 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react"
 import Component from "./Footer"
-import Grid from "../Grid/Grid"
 import "./footer.css"
-import { GridWidths } from "../../enums"
 
 const meta: Meta<typeof Component> = {
   component: Component,
@@ -30,13 +28,11 @@ export const Default: Story = {}
 export const WithChildren: Story = {
   args: {
     children: (
-      <Grid width={GridWidths.TWELVE}>
-        <p>
-          Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum
-          dictumst netus felis semper elit adipiscing cum montes varius
-          condimentum scelerisque condimentum diam a.
-        </p>
-      </Grid>
+      <div className="mx-footer__aoc mx-text--s">
+        Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum
+        dictumst netus felis semper elit adipiscing cum montes varius
+        condimentum scelerisque condimentum diam a.
+      </div>
     ),
   },
 }

package/src/Layout/Footer/Footer.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @eslint-react/dom/no-dangerously-set-innerhtml */
 import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
 import Section from "../Section/Section"
-import Grid from "../Grid/Grid"
 import Navigation, {
   NavigationItem,
 } from "../../Component/Navigation/Navigation"
-import { GridWidths, SectionStyles, SectionTags } from "../../enums"
+import { SectionStyles } from "../../enums"
+import { SectionTypes } from "@pnx-mixtape/ids-shape"
 
 type FooterProps = PropsWithChildren & {
   content?: string
@@ -28,26 +29,27 @@ const Footer = ({
 }: FooterProps): JSX.Element => {
   return (
     <Section
-      as={SectionTags.FOOTER}
+      as={SectionTypes.FOOTER}
       sizes={size}
-      className={className}
-      containing
+      className={classNames("mx-footer", className)}
     >
-      <Grid wrapper>
+      <div className="mx-footer__inner">
         {children}
-        <Grid width={GridWidths.TWELVE} className="footer__meta">
-          {content && (
-            <span dangerouslySetInnerHTML={{ __html: content }}></span>
-          )}
-          {links && (
-            <Navigation
-              title="Footer navigation"
-              inline
-              items={links}
-            ></Navigation>
-          )}
-        </Grid>
-      </Grid>
+        {content && (
+          <span
+            className="mx-footer__copyright mx-text--s"
+            dangerouslySetInnerHTML={{ __html: content }}
+          ></span>
+        )}
+        {links && (
+          <Navigation
+            title="Footer subsidiary links"
+            className="mx-footer__links mx-text--s"
+            inline
+            items={links}
+          ></Navigation>
+        )}
+      </div>
     </Section>
   )
 }