@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/FormItem DescriptionBefore smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-form-item ">
-    <label class="mx-label "
+  <div class="mx-form-item">
+    <label class="mx-label"
            for="form-item"
     >
       What's your favourite music?
@@ -14,7 +14,7 @@ exports[`Form/FormItem DescriptionBefore smoke-test 1`] = `
     >
       Help text that provides additional information about the field.
     </div>
-    <input class="mx-input__text "
+    <input class="mx-input__text"
            id="form-item"
            name="example-form-item"
            type="text"
@@ -28,13 +28,13 @@ exports[`Form/FormItem DescriptionBefore smoke-test 1`] = `
 
 exports[`Form/FormItem Error smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-form-item ">
-    <label class="mx-label "
+  <div class="mx-form-item">
+    <label class="mx-label"
            for="form-item"
     >
       What's your favourite music?
     </label>
-    <input class="mx-input__text error "
+    <input class="mx-input__text error"
            id="form-item"
            name="example-form-item"
            type="text"
@@ -49,7 +49,7 @@ exports[`Form/FormItem Error smoke-test 1`] = `
     >
       Help text that provides additional information about the field.
     </div>
-    <div class="mx-error-message "
+    <div class="mx-error-message"
          id="status-form-item"
          role="tooltip"
     >
@@ -61,11 +61,11 @@ exports[`Form/FormItem Error smoke-test 1`] = `
 
 exports[`Form/FormItem Fieldset smoke-test 1`] = `
 <div class="mx-page default">
-  <fieldset class="mx-form-item mx-fieldset ">
-    <legend class="mx-legend ">
+  <fieldset class="mx-form-item mx-fieldset">
+    <legend class="mx-legend">
       What's your favourite music?
     </legend>
-    <input class="mx-input__text "
+    <input class="mx-input__text"
            id="form-item"
            name="example-form-item"
            type="text"
@@ -86,13 +86,13 @@ exports[`Form/FormItem Fieldset smoke-test 1`] = `
 
 exports[`Form/FormItem FormItem smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-form-item ">
-    <label class="mx-label "
+  <div class="mx-form-item">
+    <label class="mx-label"
            for="form-item"
     >
       What's your favourite music?
     </label>
-    <input class="mx-input__text "
+    <input class="mx-input__text"
            id="form-item"
            name="example-form-item"
            type="text"
@@ -112,13 +112,13 @@ exports[`Form/FormItem FormItem smoke-test 1`] = `
 
 exports[`Form/FormItem Success smoke-test 1`] = `
 <div class="mx-page default">
-  <div class="mx-form-item ">
-    <label class="mx-label "
+  <div class="mx-form-item">
+    <label class="mx-label"
            for="form-item"
     >
       What's your favourite music?
     </label>
-    <input class="mx-input__text  success"
+    <input class="mx-input__text success"
            id="form-item"
            name="example-form-item"
            type="text"
@@ -132,7 +132,7 @@ exports[`Form/FormItem Success smoke-test 1`] = `
     >
       Help text that provides additional information about the field.
     </div>
-    <div class=" mx-success-message"
+    <div class="mx-success-message"
          id="status-form-item"
          role="tooltip"
     >

package/src/Form/FormItem/__snapshots__/FormItem.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Item Error smoke-test 1`] = `
 <div class="mx-form-item">

package/src/Form/Label/FormLabel.tsx

@@ -5,11 +5,7 @@ type FormLabelProps = ComponentPropsWithoutRef<"label"> & {
   required?: boolean
 }
 
-const FormLabel = ({
-  text,
-  id,
-  required = false,
-}: FormLabelProps): JSX.Element => (
+const FormLabel = ({ text, id, required = false }: FormLabelProps): JSX.Element => (
   <label className="mx-label" htmlFor={id}>
     {text}
     {required && <span> (required)</span>}

package/src/Form/Label/__snapshots__/FormLabel.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Label Label smoke-test 1`] = `
 <label class="mx-label"

package/src/Form/Label/__snapshots__/Label.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Label Inline smoke-test 1`] = `
 <div class="mx-page default">
@@ -12,7 +12,7 @@ exports[`Form/Label Inline smoke-test 1`] = `
 
 exports[`Form/Label Label smoke-test 1`] = `
 <div class="mx-page default">
-  <label class="mx-label "
+  <label class="mx-label"
          for="label"
   >
     A form label
@@ -22,7 +22,7 @@ exports[`Form/Label Label smoke-test 1`] = `
 
 exports[`Form/Label Legend smoke-test 1`] = `
 <div class="mx-page default">
-  <legend class="mx-legend "
+  <legend class="mx-legend"
           for="label"
   >
     A fieldset legend

package/src/Form/Radio/FormRadio.stories.tsx

@@ -21,9 +21,7 @@ const meta: Meta<typeof GroupRadio> = {
 
 export default meta
 export const Radios: StoryObj<typeof FormRadio> = {
-  render: ({ children, ...args }) => (
-    <FormRadio {...args}>{children}</FormRadio>
-  ),
+  render: ({ children, ...args }) => <FormRadio {...args}>{children}</FormRadio>,
   args: {
     label: "Radio group",
     children: (

package/src/Form/Radio/FormRadio.tsx

@@ -1,17 +1,5 @@
-import {
-  JSX,
-  PropsWithChildren,
-  useRef,
-  createContext,
-  use,
-  useId,
-} from "react"
-import {
-  useRadio,
-  useRadioGroup,
-  AriaRadioProps,
-  AriaRadioGroupProps,
-} from "react-aria"
+import { JSX, PropsWithChildren, useRef, createContext, use, useId } from "react"
+import { useRadio, useRadioGroup, AriaRadioProps, AriaRadioGroupProps } from "react-aria"
 import { useRadioGroupState, RadioGroupState } from "react-stately"
 import classNames from "classnames"
 import FormItem from "../FormItem/FormItem"
@@ -24,11 +12,7 @@ type FormRadioProps = PropsWithChildren &
     label: string
   }
 
-const FormRadio = ({
-  label,
-  children,
-  ...props
-}: FormRadioProps): JSX.Element => {
+const FormRadio = ({ label, children, ...props }: FormRadioProps): JSX.Element => {
   const state = useRadioGroupState(props)
   const { radioGroupProps, labelProps } = useRadioGroup(props, state)
 
@@ -65,12 +49,7 @@ const Radio = ({
 
   return (
     <div className={classes}>
-      <input
-        id={id}
-        {...inputProps}
-        ref={ref}
-        aria-invalid={status === FormStatus.INVALID}
-      />
+      <input id={id} {...inputProps} ref={ref} aria-invalid={status === FormStatus.INVALID} />
       <label htmlFor={id}>{children}</label>
     </div>
   )

package/src/Form/Radio/__snapshots__/Radio.stories.ts.snap

@@ -1,12 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Radio Checked smoke-test 1`] = `
 <div class="mx-page default">
-  <fieldset class="mx-form-item mx-fieldset ">
-    <legend class="mx-legend ">
+  <fieldset class="mx-form-item mx-fieldset">
+    <legend class="mx-legend">
       Do you like music?
     </legend>
-    <div class="mx-radio ">
+    <div class="mx-radio">
       <input id="radio-set-yes"
              type="radio"
              name="music"
@@ -17,7 +17,7 @@ exports[`Form/Radio Checked smoke-test 1`] = `
         Yes
       </label>
     </div>
-    <div class="mx-radio ">
+    <div class="mx-radio">
       <input id="radio-set-no"
              type="radio"
              name="music"
@@ -33,11 +33,11 @@ exports[`Form/Radio Checked smoke-test 1`] = `
 
 exports[`Form/Radio Radio smoke-test 1`] = `
 <div class="mx-page default">
-  <fieldset class="mx-form-item mx-fieldset ">
-    <legend class="mx-legend ">
+  <fieldset class="mx-form-item mx-fieldset">
+    <legend class="mx-legend">
       Do you like music?
     </legend>
-    <div class="mx-radio ">
+    <div class="mx-radio">
       <input id="radio-set-yes"
              type="radio"
              name="music"
@@ -47,7 +47,7 @@ exports[`Form/Radio Radio smoke-test 1`] = `
         Yes
       </label>
     </div>
-    <div class="mx-radio ">
+    <div class="mx-radio">
       <input id="radio-set-no"
              type="radio"
              name="music"

package/src/Form/Search/__snapshots__/Search.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Search Search smoke-test 1`] = `
 <div class="mx-page default">

package/src/Form/Select/FormSelect.tsx

@@ -1,9 +1,4 @@
-import {
-  JSX,
-  ComponentPropsWithoutRef,
-  useState,
-  ChangeEventHandler,
-} from "react"
+import { JSX, ComponentPropsWithoutRef, useState, ChangeEventHandler } from "react"
 import classNames from "classnames"
 import { FormStatus } from "../../enums"
 
@@ -34,9 +29,8 @@ const FormSelect = ({
   ...props
 }: FormSelectProps): JSX.Element => {
   const [inputValue, setInputValue] = useState<string>(selected)
-  const handleChange: ChangeEventHandler<HTMLSelectElement> = ({
-    currentTarget,
-  }) => setInputValue(currentTarget.value)
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = ({ currentTarget }) =>
+    setInputValue(currentTarget.value)
 
   const classes = classNames("mx-input__select", className, {
     error: status === FormStatus.INVALID,

package/src/Form/Select/__snapshots__/FormSelect.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Select Select smoke-test 1`] = `
 <select id="mix-select"

package/src/Form/Select/__snapshots__/Select.stories.ts.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Select Select smoke-test 1`] = `
 <div class="mx-page default">
-  <select class="mx-input__select "
+  <select class="mx-input__select"
           id="form-input-select"
           name="example-form-input"
           aria-label="Visually hidden label"

package/src/Form/TextInput/FormText.tsx

@@ -1,9 +1,4 @@
-import {
-  JSX,
-  ComponentPropsWithoutRef,
-  useState,
-  ChangeEventHandler,
-} from "react"
+import { JSX, ComponentPropsWithoutRef, useState, ChangeEventHandler } from "react"
 import classNames from "classnames"
 import { FormStatus } from "../../enums"
 
@@ -24,9 +19,8 @@ const FormText = ({
   ...props
 }: FormTextProps): JSX.Element => {
   const [inputValue, setInputValue] = useState<string>(value)
-  const handleChange: ChangeEventHandler<HTMLInputElement> = ({
-    currentTarget,
-  }) => setInputValue(currentTarget.value)
+  const handleChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) =>
+    setInputValue(currentTarget.value)
 
   const classes = classNames("mx-input__text", className, {
     error: status === FormStatus.INVALID,

package/src/Form/TextInput/TextInput.stories.ts

@@ -1,10 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-text.twig"
 import "../form.css"
-import {
-  FormText as FormTextType,
-  InputTypeTypes,
-} from "@pnx-mixtape/ids-shape"
+import { FormText as FormTextType, InputTypeTypes } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
 type FormTextIconType = FormTextType & {

package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/TextInput TextInput smoke-test 1`] = `
 <input class="mx-input__text"

package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Text Input/Divider InputDivider smoke-test 1`] = `
 <div class="mx-page default">

package/src/Form/TextInput/__snapshots__/TextInput.stories.ts.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/TextInput Icon smoke-test 1`] = `
 <div class="mx-page default">
   <span class="mx-input--icon mx-icon mx-icon--email">
-    <input class="mx-input__text "
+    <input class="mx-input__text"
            id="form-input-text"
            name="example-form-input"
            type="email"
@@ -17,7 +17,7 @@ exports[`Form/TextInput Icon smoke-test 1`] = `
 
 exports[`Form/TextInput TextInput smoke-test 1`] = `
 <div class="mx-page default">
-  <input class="mx-input__text "
+  <input class="mx-input__text"
          id="form-input-text"
          name="example-form-input"
          type="text"

package/src/Form/Textarea/FormTextarea.tsx

@@ -1,9 +1,4 @@
-import {
-  JSX,
-  ComponentPropsWithoutRef,
-  useState,
-  ChangeEventHandler,
-} from "react"
+import { JSX, ComponentPropsWithoutRef, useState, ChangeEventHandler } from "react"
 import classNames from "classnames"
 import { FormStatus } from "../../enums"
 
@@ -23,9 +18,8 @@ const FormTextarea = ({
   ...props
 }: FormTextareaProps): JSX.Element => {
   const [inputValue, setInputValue] = useState<string>(value)
-  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = ({
-    currentTarget,
-  }) => setInputValue(currentTarget.value)
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = ({ currentTarget }) =>
+    setInputValue(currentTarget.value)
 
   const classes = classNames("mx-input__textarea", className, {
     error: status === FormStatus.INVALID,

package/src/Form/Textarea/__snapshots__/FormTextarea.stories.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Textarea Textarea smoke-test 1`] = `
 <input class="mx-input__text"

package/src/Form/Textarea/__snapshots__/Textarea.stories.ts.snap

@@ -1,8 +1,8 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Form/Textarea TextArea smoke-test 1`] = `
 <div class="mx-page default">
-  <textarea class="mx-input__textarea "
+  <textarea class="mx-input__textarea"
             id="form-input-textarea"
             name="example-form-input"
             aria-label="Visually hidden label"

package/src/Form/form.css

@@ -37,9 +37,7 @@
     letter-spacing: inherit;
     word-spacing: inherit;
     max-inline-size: 100%;
-    padding-block: calc(
-      var(--form-spacing, var(--spacing-s)) - (var(--line-width, 2px) * 2)
-    );
+    padding-block: calc(var(--form-spacing, var(--spacing-s)) - (var(--line-width, 2px) * 2));
     padding-inline: var(--form-spacing, var(--spacing-s));
     border: var(--line-width, 2px) solid
       var(--line-colour, var(--line-colour, var(--colour-border)));
@@ -141,8 +139,7 @@
       var(--line-colour, var(--line-colour, var(--colour-border)));
 
     &:has(.mx-input__text:focus-visible) {
-      outline: 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);
     }
 
@@ -161,9 +158,7 @@
       flex-shrink: 0;
       border: 0;
       border-radius: 3px;
-      block-size: calc(
-        var(--form-element-height, var(--spacing-xxl)) - var(--spacing-xxxs)
-      );
+      block-size: calc(var(--form-element-height, var(--spacing-xxl)) - var(--spacing-xxxs));
     }
   }
 }
@@ -192,8 +187,7 @@
     inline-size: var(--control-size, var(--spacing-m));
     block-size: var(--control-size, var(--spacing-m));
     background-color: var(--background, var(--colour-background));
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-border));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: var(--border-radius);
 
     @media (pointer: coarse) {
@@ -249,8 +243,7 @@
     inline-size: var(--control-size, var(--spacing-m));
     block-size: var(--control-size, var(--spacing-m));
     background-color: var(--background, var(--colour-background));
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-border));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: 50%;
 
     @media (pointer: coarse) {
@@ -381,8 +374,7 @@
 
 @layer design-system.atoms {
   .mx-fieldset {
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-border));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: var(--border-radius);
     padding: var(--form-spacing, var(--spacing-s));
     min-inline-size: 0;

package/src/Introduction.mdx

@@ -5,8 +5,7 @@ import { Meta, Title, Subtitle } from "@storybook/addon-docs/blocks"
 <Title>Introduction</Title>
 
 <Subtitle>
-  Mixtape is a Design System built by
-  [PreviousNext](https://www.previousnext.com.au/).
+  Mixtape is a Design System built by [PreviousNext](https://www.previousnext.com.au/).
 </Subtitle>
 
 - Separate CSS/JS files for components to improve performance.

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

@@ -7,11 +7,7 @@ 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 { Footer as FooterType, IconSizeModifier, FooterModifier } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
 const meta: Meta<FooterType> = {

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

@@ -29,9 +29,8 @@ export const WithChildren: Story = {
   args: {
     children: (
       <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.
+        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

@@ -2,9 +2,7 @@
 import { JSX, PropsWithChildren } from "react"
 import classNames from "classnames"
 import Section from "../Section/Section"
-import Navigation, {
-  NavigationItem,
-} from "../../Component/Navigation/Navigation"
+import Navigation, { NavigationItem } from "../../Component/Navigation/Navigation"
 import { SectionStyles } from "../../enums"
 import { SectionTypes } from "@pnx-mixtape/ids-shape"
 
@@ -15,10 +13,7 @@ type FooterProps = PropsWithChildren & {
   className?: string
 }
 
-const defaultFooterSize: SectionStyles[] = [
-  SectionStyles.TOP_L,
-  SectionStyles.BOTTOM_M,
-]
+const defaultFooterSize: SectionStyles[] = [SectionStyles.TOP_L, SectionStyles.BOTTOM_M]
 
 const Footer = ({
   content,
@@ -28,11 +23,7 @@ const Footer = ({
   className = null,
 }: FooterProps): JSX.Element => {
   return (
-    <Section
-      as={SectionTypes.FOOTER}
-      sizes={size}
-      className={classNames("mx-footer", className)}
-    >
+    <Section as={SectionTypes.FOOTER} sizes={size} className={classNames("mx-footer", className)}>
       <div className="mx-footer__inner">
         {children}
         {content && (

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Footer Everything smoke-test 1`] = `
 <div class="mx-page default">
@@ -13,21 +13,21 @@ exports[`Layout/Footer Everything smoke-test 1`] = `
            aria-label="Social media links"
       >
         <a href="#">
-          <span class="mx-icon mx-icon--facebook  mx-icon--size-md">
+          <span class="mx-icon mx-icon--facebook mx-icon--size-md">
           </span>
           <span class="sr-only">
             Facebook
           </span>
         </a>
         <a href="#">
-          <span class="mx-icon mx-icon--instagram  mx-icon--size-md">
+          <span class="mx-icon mx-icon--instagram mx-icon--size-md">
           </span>
           <span class="sr-only">
             Instagram
           </span>
         </a>
         <a href="#">
-          <span class="mx-icon mx-icon--linkedin  mx-icon--size-md">
+          <span class="mx-icon mx-icon--linkedin mx-icon--size-md">
           </span>
           <span class="sr-only">
             LinkedIn

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout/Footer Default smoke-test 1`] = `
 <footer class="mx-footer mx-section--top-l mx-section--bottom-m">