@pnx-mixtape/mxds 0.0.6 → 0.0.8

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

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Fieldset Fieldset smoke-test 1`] = `
-<fieldset class>
-  <legend>
-    Fieldset legend
-  </legend>
-  <p>
-    Content inside a fieldset
-  </p>
-</fieldset>
-`;
-
-exports[`Form/Fieldset Plain smoke-test 1`] = `
-<fieldset class="fieldset--plain">
-  <legend>
-    Fieldset legend
-  </legend>
-  <p>
-    Content inside a fieldset
-  </p>
-</fieldset>
-`;

package/src/Form/Fieldset/fieldset.twig

@@ -1,4 +0,0 @@
-<fieldset class="{{ modifier_class }}">
-  <legend>Fieldset legend</legend>
-  <p>Content inside a fieldset</p>
-</fieldset>

package/src/Form/Radio/Radios.stories.ts

@@ -1,47 +0,0 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./input-radio.twig"
-import "../form.css"
-
-const modifierOptions: string[] = ["form__item--inline"]
-
-type RadiosType = {
-  modifier_class?: (typeof modifierOptions)[number]
-}
-
-const meta: Meta<RadiosType> = {
-  title: "Form/Radios",
-  tags: ["autodocs"],
-  component: Component,
-  argTypes: {
-    modifier_class: {
-      options: modifierOptions,
-      control: { type: "select" },
-    },
-  },
-  parameters: {
-    a11y: {
-      config: {
-        rules: [
-          {
-            // ID's are not unique due to test-runner.
-            id: "label",
-            enabled: false,
-          },
-        ],
-      },
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<RadiosType>
-
-export const Radios: Story = {
-  args: {},
-}
-
-export const Inline: Story = {
-  args: {
-    modifier_class: "form__item--inline",
-  },
-}

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

@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Radios Inline smoke-test 1`] = `
-<fieldset aria-describedby="unique-0"
-          class="fieldset--plain form__item"
->
-  <legend>
-    A set of radio inputs
-  </legend>
-  <div class="form__radio form__item--inline">
-    <input id="radio1"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio1">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio form__item--inline">
-    <input id="radio2"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio2">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio form__item--inline">
-    <input id="radio3"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio3">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio form__item--inline">
-    <input id="radio4"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio4">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio form__item--inline">
-    <input id="radio5"
-           name="radio"
-           type="radio"
-           disabled
-    >
-    <label for="radio5">
-      This is a disabled example
-    </label>
-  </div>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</fieldset>
-`;
-
-exports[`Form/Radios Radios smoke-test 1`] = `
-<fieldset aria-describedby="unique-0"
-          class="fieldset--plain form__item"
->
-  <legend>
-    A set of radio inputs
-  </legend>
-  <div class="form__radio ">
-    <input id="radio1"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio1">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio ">
-    <input id="radio2"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio2">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio ">
-    <input id="radio3"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio3">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio ">
-    <input id="radio4"
-           name="radio"
-           type="radio"
-    >
-    <label for="radio4">
-      This is an example
-    </label>
-  </div>
-  <div class="form__radio ">
-    <input id="radio5"
-           name="radio"
-           type="radio"
-           disabled
-    >
-    <label for="radio5">
-      This is a disabled example
-    </label>
-  </div>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</fieldset>
-`;

package/src/Form/Search/TextInputWithInlineButton.stories.ts

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./input-text-inline-submit.twig"
-import "../form.css"
-
-const meta: Meta<typeof Component> = {
-  title: "Form/Text Input/InlineSubmit",
-  tags: ["autodocs"],
-  component: Component,
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const InlineSubmit: Story = {
-  args: {},
-}

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

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Text Input/InlineSubmit InlineSubmit smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <span class="input__text--inline">
-    <input type="text"
-           id="input"
-           aria-describedby="unique-0"
-           class
-    >
-    <input class="button button--primary"
-           type="submit"
-           value="Search"
-    >
-  </span>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;

package/src/Form/Search/input-text-inline-submit.twig

@@ -1,8 +0,0 @@
-<div class="form__item">
-  <label for="input{{ id }}">Input text field</label>
-  <span class="input__text--inline">
-    <input type="text" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}">
-    <input class="button button--primary" type="submit" value="Search"/>
-  </span>
-  <div class="form__description" id="input{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
-</div>

package/src/Form/Select/select.twig

@@ -1,16 +0,0 @@
-<div class="form__item">
-  <label for="select{{ id }}">A select drop down</label>
-  <select id="select{{ id }}" class="{{ modifier_class }}" aria-describedby="selectHelp{{ id }}">
-    <option value="1">Option 1</option>
-    <option value="2">Option 2</option>
-    <option value="3">Option 3</option>
-    <option value="4">Option 4</option>
-    <option value="5">Option 5</option>
-    <option value="6">Option 6</option>
-    <option value="7">Option 7</option>
-    <option value="8">Option 8</option>
-    <option value="9">Option 9</option>
-    <option value="10">Option 10</option>
-  </select>
-  <div role="tooltip" id="selectHelp{{ id }}" class="form__description">Help text that provides additional information about the field.</div>
-</div>

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

@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./input-text-icon.twig"
-import "../form.css"
-
-const modifierOptions: string[] = ["error", "success"]
-
-type TextInputWithIconType = {
-  modifier_class?: (typeof modifierOptions)[number]
-}
-
-const meta: Meta<TextInputWithIconType> = {
-  title: "Form/Text Input/Icon",
-  tags: ["autodocs"],
-  component: Component,
-  argTypes: {
-    modifier_class: {
-      options: modifierOptions,
-      control: { type: "select" },
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<TextInputWithIconType>
-
-export const Icon: Story = {
-  args: {},
-}
-
-export const Error: Story = {
-  args: {
-    modifier_class: "error",
-  },
-}
-
-export const Success: Story = {
-  args: {
-    modifier_class: "success",
-  },
-}

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

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Text Input/Icon Error smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <span class="input__text--icon icon icon--email">
-    <input type="text"
-           id="input"
-           aria-describedby="unique-0"
-           class="error"
-           placeholder
-    >
-  </span>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;
-
-exports[`Form/Text Input/Icon Icon smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <span class="input__text--icon icon icon--email">
-    <input type="text"
-           id="input"
-           aria-describedby="unique-0"
-           class
-           placeholder
-    >
-  </span>
-  <div class="form__description"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;
-
-exports[`Form/Text Input/Icon Success smoke-test 1`] = `
-<div class="form__item">
-  <label for="input">
-    Input text field
-  </label>
-  <span class="input__text--icon icon icon--email">
-    <input type="text"
-           id="input"
-           aria-describedby="unique-0"
-           class="success"
-           placeholder
-    >
-  </span>
-  <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

@@ -1,5 +0,0 @@
-<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/Layout/Footer/FooterMenu/FooterMenu.stories.ts

@@ -1,15 +0,0 @@
-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: {},
-}

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

@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Layout/Footer/FooterMenu Footer smoke-test 1`] = `
-<nav class="nav nav--footer ">
-  <ul class="nav__level-1">
-    <li class="nav__has-subnav">
-      <a href="#"
-         aria-current="page"
-      >
-        1.1 Level 1 Title
-      </a>
-      <button class="nav__toggle icon icon--chevron-down icon--only">
-        Sub-navigation
-      </button>
-      <ul class="nav__level-2"
-          inert
-      >
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.1.1 Level 2 Title
-          </a>
-        </li>
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.1.2 Level 2 Title
-          </a>
-        </li>
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.1.3 Level 2 Title Longer
-          </a>
-        </li>
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.1.4 Level 2 Title
-          </a>
-        </li>
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.1.5 Level 2 Title
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li class="nav__has-subnav">
-      <a href="/">
-        1.2 Level 1 Title
-      </a>
-      <button class="nav__toggle icon icon--chevron-down icon--only">
-        Sub-navigation
-      </button>
-      <ul class="nav__level-2"
-          inert
-      >
-        <li>
-          <a href="/">
-            1.2.1 Level 2 Title
-          </a>
-        </li>
-        <li>
-          <a href="/">
-            1.2.2 Level 2 Title Longer
-          </a>
-        </li>
-        <li>
-          <a href="/">
-            1.2.1 Level 2 Title
-          </a>
-        </li>
-      </ul>
-    </li>
-    <li class="nav__has-subnav">
-      <a href="/">
-        1.3 Level 1 Title
-      </a>
-      <button class="nav__toggle icon icon--chevron-down icon--only">
-        Sub-navigation
-      </button>
-      <ul class="nav__level-2"
-          inert
-      >
-        <li class="nav__has-subnav">
-          <a href="/">
-            1.3.1 Level 2 Title
-          </a>
-        </li>
-        <li>
-          <a href="/">
-            1.3.2 Level 2 Title
-          </a>
-        </li>
-        <li>
-          <a href="/">
-            1.3.3 Level 2 Title
-          </a>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</nav>
-`;

package/src/Layout/Footer/FooterMenu/footer-menu.css

@@ -1,29 +0,0 @@
-/**
- * Footer Navigation
- */
-@layer design-system.components {
-  .nav--footer {
-    & ul {
-      display: grid;
-    }
-
-    & .nav__level-1 {
-      gap: var(--spacing-l) var(--spacing-xxxl);
-      grid-template-columns: 1fr 1fr;
-
-      @media (--medium-up) {
-        grid-template-columns: 1fr 1fr 1fr;
-      }
-
-      & > li > a {
-        display: inline-block;
-        margin-block-end: var(--spacing-l);
-        font-weight: var(--font-weight-bold);
-      }
-    }
-
-    & .nav__level-2 {
-      gap: var(--spacing-s);
-    }
-  }
-}

package/src/Layout/Footer/FooterMenu/footer-menu.twig

@@ -1,5 +0,0 @@
-<nav class="nav nav--footer {{ modifier_class }}">
-  {% block menu %}
-    {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' %}
-  {% endblock %}
-</nav>

package/src/Layout/Grid/twig/container-grid-dynamic.twig

@@ -1,47 +0,0 @@
-<div class="grid container grid--xs-2-cols">
-  <div>1</div>
-  <div>2</div>
-</div>
-
-<div class="grid container grid--sm-2-cols">
-  <div>1</div>
-  <div>2</div>
-</div>
-
-<div class="grid container grid--md-2-cols">
-  <div>1</div>
-  <div>2</div>
-</div>
-
-<div class="grid container grid--md-3-cols">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-</div>
-
-<div class="grid container grid--lg-3-cols">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-</div>
-
-<div class="grid container grid--sm-2-cols grid--md-4-cols">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-</div>
-
-<div class="grid container grid--md-2-cols grid--lg-4-cols">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-</div>
-
-<div class="grid container grid--xs-2-cols grid--xl-4-cols">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-</div>

package/src/Layout/Grid/twig/container-grid.twig

@@ -1,46 +0,0 @@
-<div class="grid container">
-  <div class="grid--12-col">12</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--11-col">11</div>
-  <div class="grid--1-col">1</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--10-col">10</div>
-  <div class="grid--2-col">2</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--9-col">9</div>
-  <div class="grid--3-col">3</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--8-col">8</div>
-  <div class="grid--4-col">4</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--7-col">7</div>
-  <div class="grid--5-col">5</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--6-col">6</div>
-  <div class="grid--6-col">6</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--4-col">4</div>
-  <div class="grid--4-col">4</div>
-  <div class="grid--4-col">4</div>
-</div>
-
-<div class="grid container">
-  <div class="grid--3-col">3</div>
-  <div class="grid--3-col">3</div>
-  <div class="grid--3-col">3</div>
-  <div class="grid--3-col">3</div>
-</div>

package/src/Layout/Grid/twig/grid-story.twig

@@ -1,6 +0,0 @@
-{% extends "../grid.twig" %}
-{% set items %}
-  {% for item in items %}
-    {% include "../grid-item" with { item: item.item, container: item.container, as: item.as, modifiers: item.modifiers } only %}
-  {% endfor %}
-{% endset %}