@pnx-mixtape/mxds 0.0.1

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Textarea Textarea smoke-test 1`] = `
+<input class
+       id="mix-textarea"
+       type="text"
+       aria-describedby="unique-0"
+       aria-invalid="false"
+       aria-label="Textarea"
+       value
+>
+`;

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Textarea Textarea smoke-test 1`] = `
+<div class="form__item">
+  <label for="textarea">
+    A textarea
+  </label>
+  <textarea aria-describedby="unique-0"
+            id="textarea"
+  >
+  </textarea>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/Textarea/textarea.twig

@@ -0,0 +1,5 @@
+<div class="form__item">
+  <label for="textarea{{ id }}">A textarea</label>
+  <textarea aria-describedby="textarea{{ id }}Help" id="textarea{{ id }}"></textarea>
+  <div class="form__description" id="textarea{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
+</div>

package/src/Form/form.css

@@ -0,0 +1,479 @@
+/**
+ * Form
+ */
+
+@layer elements {
+  .form__item {
+    max-inline-size: var(--container-max-width);
+
+    &.form__item--inline {
+      display: flex;
+      align-items: flex-start;
+    }
+  }
+}
+
+/**
+ * Text Input
+ */
+
+@layer elements {
+  :is(
+      .input__text,
+      [type="text"],
+      [type="search"],
+      [type="tel"],
+      [type="url"],
+      [type="email"],
+      [type="password"],
+      [type="date"],
+      [type="time"],
+      [type="number"],
+      select,
+      textarea
+    ) {
+    box-shadow: none;
+    font: inherit;
+    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-inline: var(--form-spacing, var(--spacing-s));
+    border: var(--line-width, 2px) solid
+      var(--line-colour, var(--line-colour, var(--colour-border)));
+    border-radius: var(--border-radius);
+    background-color: var(--colour-background);
+    color: var(--form-colour, var(--foreground, var(--colour-foreground)));
+    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;
+    }
+
+    &[disabled] {
+      opacity: var(--disabled-opacity, 0.6);
+      cursor: not-allowed;
+    }
+
+    &.error {
+      border-color: var(--error-foreground, var(--colour-error-foreground));
+    }
+
+    &.success {
+      border-color: var(--success-foreground, var(--colour-success-foreground));
+    }
+  }
+
+  :is(.input--small, .select--small) {
+    min-inline-size: 0;
+    border-width: 1px;
+  }
+
+  :is(.input--wide, .select--wide) {
+    inline-size: 100%;
+  }
+}
+
+/**
+ * Input Divider
+ */
+
+@layer elements {
+  .input__divider {
+    padding: var(--form-spacing, var(--spacing-s));
+    line-height: var(--line-height-ui);
+  }
+}
+
+/**
+ * Text Input with Icon
+ */
+
+@layer elements {
+  .input__text--icon {
+    display: inline-block;
+    max-inline-size: 100%;
+    min-inline-size: 100%;
+    border-radius: var(--border-radius);
+    background-color: var(--background, var(--colour-background));
+    position: relative;
+
+    &::before {
+      position: absolute;
+      block-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: var(--form-spacing, var(--spacing-s));
+    }
+
+    & input {
+      inline-size: 100%;
+      padding-inline-start: calc(var(--form-spacing, var(--spacing-s)) * 2.5);
+      background-color: transparent;
+    }
+
+    &:has(.error)::before {
+      background-color: var(--error-foreground, var(--colour-error-foreground));
+    }
+
+    &:has(.success)::before {
+      background-color: var(
+        --success-foreground,
+        var(--colour-success-foreground)
+      );
+    }
+  }
+}
+
+/**
+ * Text Input with Inline Button
+ */
+
+@layer elements {
+  .input__text--inline {
+    position: relative;
+    display: inline-block;
+    max-inline-size: 100%;
+    min-inline-size: 100%;
+    border-radius: var(--border-radius);
+    background-color: var(--background, var(--colour-background));
+
+    & [type="text"] {
+      inline-size: 100%;
+      padding-inline-end: 7rem;
+      background-color: transparent;
+    }
+
+    & [type="submit"] {
+      position: absolute;
+      inset-block-start: var(--spacing-xxxxs);
+      inset-inline-end: var(--spacing-xxxxs);
+      border: 0;
+      border-radius: 3px;
+      block-size: calc(
+        var(--form-element-height, var(--spacing-xxl)) - var(--spacing-xxxs)
+      );
+    }
+  }
+}
+
+/**
+ * Label
+ */
+
+@layer elements {
+  :is(label, 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 {
+      display: inline-block;
+      margin-block-end: 0;
+      margin-inline-end: var(--spacing-xxs);
+    }
+  }
+
+  [type="checkbox"] {
+    box-shadow: none;
+    appearance: none;
+    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-radius: var(--border-radius);
+
+    @media (pointer: coarse) {
+      --control-size: 2rem;
+    }
+
+    &:checked {
+      background-image: svg-load("./images/checkmark.svg");
+      background-size: 0.75rem;
+      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);
+        cursor: not-allowed;
+        content: "";
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        border-radius: var(--border-radius);
+      }
+
+      & + label {
+        opacity: var(--disabled-opacity, 0.6);
+        cursor: not-allowed;
+      }
+    }
+
+    &.error {
+      border-color: var(--error-foreground, var(--colour-error-foreground));
+    }
+
+    &.success {
+      border-color: var(--success-foreground, var(--colour-success-foreground));
+    }
+  }
+}
+
+/**
+ * Checkboxes
+ */
+
+/**
+ * Radios
+ */
+
+@layer elements {
+  [type="radio"] {
+    box-shadow: none;
+    appearance: none;
+    display: flex;
+    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-radius: 50%;
+
+    @media (pointer: coarse) {
+      --control-size: 2rem;
+    }
+
+    &:checked {
+      &::after {
+        content: "";
+        display: block;
+        inline-size: 0.5rem;
+        block-size: 0.5rem;
+        margin: auto;
+        border-radius: 50%;
+        background-color: var(--radio-colour, var(--colour-primary));
+      }
+    }
+
+    &:focus-visible {
+      outline: var(--line-width, 2px) auto var(--outline-color);
+      outline-offset: 0;
+    }
+
+    &[disabled] {
+      &::after {
+        opacity: var(--disabled-opacity, 0.6);
+        cursor: not-allowed;
+        content: "";
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        border-radius: 50%;
+      }
+
+      & + label {
+        opacity: var(--disabled-opacity, 0.6);
+        cursor: not-allowed;
+      }
+    }
+
+    &.error {
+      border-color: var(--error-foreground, var(--colour-error-foreground));
+    }
+
+    &.success {
+      border-color: var(--success-foreground, var(--colour-success-foreground));
+    }
+  }
+
+  :is(.form__radio, .form__checkbox) {
+    margin-block-end: var(--spacing-xxxs);
+    display: flex;
+    align-items: center;
+    gap: var(--control-gap, var(--spacing-xxs));
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+
+    & label {
+      cursor: pointer;
+      margin: 0;
+    }
+
+    & input {
+      flex-shrink: 0;
+    }
+
+    &.form__item--inline {
+      display: inline-flex;
+      margin-inline-end: var(--control-gap, var(--spacing-xxs));
+    }
+  }
+}
+
+/**
+ * Textarea
+ */
+
+@layer elements {
+  textarea {
+    block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
+    inline-size: 100%;
+  }
+}
+
+/**
+ * Fieldset
+ */
+
+@layer elements {
+  :is(.fieldset, fieldset) {
+    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;
+
+    & legend {
+      padding-block: 0;
+      padding-inline: var(--form-spacing, var(--spacing-s));
+    }
+  }
+
+  .fieldset--plain {
+    border: 0;
+    padding: 0;
+
+    & legend {
+      padding: 0;
+    }
+  }
+
+  .fieldset--inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-xxs);
+
+    & :is(.form__item, .form__item--inline) {
+      margin: 0;
+    }
+  }
+}
+
+/**
+ * Description
+ */
+
+@layer elements {
+  .form__description {
+    margin-block: var(--form-spacing, var(--spacing-s));
+    margin-inline: 0;
+    font-size: var(--font-size-xs);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+/**
+ * Error message
+ */
+
+@layer elements {
+  :is(.form__success-message, .form__error-message) {
+    margin-block: var(--form-spacing, var(--spacing-s));
+    margin-inline: 0;
+    font-size: var(--font-size-s);
+    color: var(--foreground, var(--colour-foreground));
+    display: flex;
+    gap: var(--spacing-xxs);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      inline-size: var(--spacing-m);
+      block-size: var(--spacing-m);
+      mask-position: center;
+      mask-repeat: no-repeat;
+      flex-shrink: 0;
+    }
+  }
+
+  .form__error-message::before {
+    mask-image: svg-load("./images/form-error.svg");
+    background-color: var(--error-foreground, var(--colour-error-foreground));
+  }
+
+  .form__success-message::before {
+    mask-image: svg-load("./images/form-success.svg");
+    background-color: var(
+      --success-foreground,
+      var(--colour-success-foreground)
+    );
+  }
+}
+
+/**
+ * Select
+ */
+
+@layer elements {
+  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/Form/images/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z" /></svg>

package/src/Form/images/form-chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 11.4L2.6 6 4 4.6l4 4 4-4L13.4 6z" /></svg>

package/src/Form/images/form-error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" /></svg>

package/src/Form/images/form-success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" /></svg>

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./footer.twig"
+import "./footer.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Footer: Story = {
+  args: {},
+}

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

@@ -0,0 +1,42 @@
+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,
+  args: {
+    content: "&copy; 2022 Company Name",
+    links: [
+      {
+        id: "1",
+        title: "Sitemap",
+        to: "http://example.com",
+      },
+      {
+        id: "2",
+        title: "Privacy & Terms",
+        to: "http://example.com",
+      },
+    ],
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+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>
+    ),
+  },
+}

package/src/Layout/Footer/Footer.tsx

@@ -0,0 +1,55 @@
+/* eslint-disable @eslint-react/dom/no-dangerously-set-innerhtml */
+import { JSX, PropsWithChildren } from "react"
+import Section from "../Section/Section"
+import Grid from "../Grid/Grid"
+import Navigation, {
+  NavigationItem,
+} from "../../Component/Navigation/Navigation"
+import { GridWidths, SectionStyles, SectionTags } from "../../enums"
+
+type FooterProps = PropsWithChildren & {
+  content?: string
+  links?: NavigationItem[]
+  size?: SectionStyles | SectionStyles[]
+  className?: string
+}
+
+const defaultFooterSize: SectionStyles[] = [
+  SectionStyles.TOP_L,
+  SectionStyles.BOTTOM_M,
+]
+
+const Footer = ({
+  content,
+  links,
+  size = defaultFooterSize,
+  children = null,
+  className = null,
+}: FooterProps): JSX.Element => {
+  return (
+    <Section
+      as={SectionTags.FOOTER}
+      sizes={size}
+      className={className}
+      containing
+    >
+      <Grid wrapper>
+        {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>
+    </Section>
+  )
+}
+
+export default Footer

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./footer-menu.twig"
+import "./footer-menu.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Footer: Story = {
+  args: {},
+}