@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap

@@ -1,123 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Component/Navigation/Collapsible Collapsible smoke-test 1`] = `
-<mx-nav>
-  <nav class="nav nav--collapsible">
-    <ul class="nav__level-1">
-      <li class="nav__has-subnav">
-        <a href="#"
-           aria-current="page"
-           id="unique-0"
-        >
-          1.1 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-0"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-1"
-            aria-labelledby="unique-1"
-        >
-          <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="/"
-           id="unique-2"
-        >
-          1.2 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-2"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-3"
-            aria-labelledby="unique-3"
-        >
-          <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="/"
-           id="unique-4"
-        >
-          1.3 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-4"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-5"
-            aria-labelledby="unique-5"
-        >
-          <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>
-</mx-nav>
-`;

package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap

@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
-<mx-nav flyout>
-  <nav class="nav nav--dropdown "
-       aria-label="Primary menu"
-  >
-    <ul class="nav__level-1">
-      <li class="nav__has-subnav">
-        <a href="#"
-           aria-current="page"
-           id="unique-0"
-        >
-          1.1 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-0"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-1"
-            aria-labelledby="unique-1"
-        >
-          <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="/"
-           id="unique-2"
-        >
-          1.2 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-2"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-3"
-            aria-labelledby="unique-3"
-        >
-          <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="/"
-           id="unique-4"
-        >
-          1.3 Level 1 Title
-        </a>
-        <button class="nav__toggle icon icon--chevron-down icon--only"
-                aria-expanded="false"
-                aria-controls="unique-4"
-        >
-          Sub-navigation
-        </button>
-        <ul class="nav__level-2"
-            inert
-            id="unique-5"
-            aria-labelledby="unique-5"
-        >
-          <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>
-</mx-nav>
-`;

package/src/Component/Navigation/navigation-collapsible.twig

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

package/src/Component/Navigation/navigation-dropdown.twig

@@ -1,7 +0,0 @@
-<mx-nav flyout>
-  <nav class="nav nav--dropdown {{ modifier_class }}" aria-label="Primary menu">
-    {% block menu %}
-      {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' %}
-    {% endblock %}
-  </nav>
-</mx-nav>

package/src/Component/Navigation/navigation-mega-nav.twig

@@ -1,7 +0,0 @@
-<mx-nav flyout edgeCheck>
-  <nav class="nav nav--dropdown nav--mega-nav {{ modifier_class }}">
-    {% block menu %}
-      {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' with { 'mega' : true } %}
-    {% endblock %}
-  </nav>
-</mx-nav>

package/src/Component/Navigation/twig/navigation-subnav-list.twig

@@ -1,108 +0,0 @@
-<ul class="nav__level-1">
-  <li class="nav__has-subnav">
-    <a href="#" aria-current="page">{{ '1.1 ' ~ title|default('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 ' ~ l2_title|default('Level 2 Title') }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.1.1.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.2 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.4 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.5 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.1.6 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.7 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.1.8 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.1.9 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      <li class="nav__has-subnav">
-        <a href="/">{{ '1.1.2 ' ~ l2_title|default('Level 2 Title') }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.1.2.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.2.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.2.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      <li class="nav__has-subnav">
-        <a href="/">{{ '1.1.3 ' ~ l2_title|default('Level 2 Title') ~ ' Longer' }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.1.3.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.3.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.3.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      <li class="nav__has-subnav">
-        <a href="/">{{ '1.1.4 ' ~ l2_title|default('Level 2 Title') }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.1.4.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.4.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.4.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      <li class="nav__has-subnav">
-        <a href="/">{{ '1.1.5 ' ~ l2_title|default('Level 2 Title') }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.1.5.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.1.5.2 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.1.5.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      {% if mega %}
-        <li class="nav__separator">
-          <a href="/">{{ '1.1.6 ' ~ l2_title|default('Level 2 Title') ~ ' Separator' }}</a>
-        </li>
-      {% endif %}
-    </ul>
-  </li>
-  <li class="nav__has-subnav">
-    <a href="/">{{ '1.2 ' ~ title|default('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 ' ~ l2_title|default('Level 2 Title') }}</a></li>
-      <li><a href="/">{{ '1.2.2 ' ~ l2_title|default('Level 2 Title') ~ ' Longer' }}</a></li>
-      <li><a href="/">{{ '1.2.1 ' ~ l2_title|default('Level 2 Title') }}</a></li>
-    </ul>
-  </li>
-  <li class="nav__has-subnav{% if mega %} nav--reverse{% endif %}">
-    <a href="/">{{ '1.3 ' ~ title|default('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 ' ~ l2_title|default('Level 2 Title') }}</a>
-        {% if mega %}
-          <button class="nav__toggle icon icon--chevron-down icon--only">Sub-navigation</button>
-          <ul class="nav__level-3">
-            <li><a href="/">{{ '1.3.1.1 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.2 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.3 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.4 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.5 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.3.1.6 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.7 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-            <li><a href="/">{{ '1.3.1.8 ' ~ l3_title|default('Level 3 Title') ~ ' Longer' }}</a></li>
-            <li><a href="/">{{ '1.3.1.9 ' ~ l3_title|default('Level 3 Title') }}</a></li>
-          </ul>
-        {% endif %}
-      </li>
-      <li><a href="/">{{ '1.3.2 ' ~ l2_title|default('Level 2 Title') }}</a></li>
-      <li><a href="/">{{ '1.3.3 ' ~ l2_title|default('Level 2 Title') }}</a></li>
-    </ul>
-  </li>
-</ul>

package/src/Component/Sticky/twig/sticky-example.twig

@@ -1,4 +0,0 @@
-<mx-sticky class="sticky--l vertical-flow">
-  <h4>{{ title|default('Sticky sidebar') }}</h4>
-  <p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to <a href="#anchor-test">demonstrate</a> the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
-</mx-sticky>

package/src/Component/Tabs/twig/panel.twig

@@ -1,5 +0,0 @@
-<div id="{{ tab.id }}" class="tab__panel vertical-flow container {{ section_class|default('section--l') }}" inert>
-  {% block content %}
-    {{ tab.content }}
-  {% endblock %}
-</div>

package/src/Component/Tabs/twig/tab-list.twig

@@ -1,26 +0,0 @@
-<mx-dropmenu closeonclick class="mobile-only">
-  {% set id = id|default('tab-menu') %}
-  {% set name = id ~ '-target' %}
-  <button
-      id="{{ name }}"
-      class="drop-menu__trigger button icon icon--chevron-down icon--end"
-      popovertarget="{{ id }}"
-  ></button>
-  <div
-      class="drop-menu"
-      id="{{ id }}"
-      aria-labelledby="{{ name }}"
-      anchor="{{ name }}"
-      popover
-      role="menu"
-  >
-    {% for tab in tabs %}
-      <button type="button" aria-controls="{{ tab.id }}" class="{{ modifier_class }}" role="menuitemradio" aria-checked="false">{{ tab.title }}</button>
-    {% endfor %}
-  </div>
-</mx-dropmenu>
-<div class="tab__list desktop-only" role="tablist">
-  {% for tab in tabs %}
-    <button class="button" type="button" aria-controls="{{ tab.id }}" class="{{ modifier_class }}">{{ tab.title }}</button>
-  {% endfor %}
-</div>

package/src/Form/Checkbox/Checkboxes.stories.ts

@@ -1,47 +0,0 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./input-checkbox.twig"
-import "../form.css"
-
-const modifierOptions: string[] = ["form__item--inline"]
-
-type CheckboxesType = {
-  modifier_class?: (typeof modifierOptions)[number]
-}
-
-const meta: Meta<CheckboxesType> = {
-  title: "Form/Checkbox",
-  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<CheckboxesType>
-
-export const Checkboxes: Story = {
-  args: {},
-}
-
-export const InlineCheckboxes: Story = {
-  args: {
-    modifier_class: "form__item--inline",
-  },
-}

package/src/Form/Checkbox/__snapshots__/Checkboxes.stories.ts.snap

@@ -1,115 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Checkbox Checkboxes smoke-test 1`] = `
-<fieldset aria-describedby="unique-0"
-          class="fieldset--plain form__item"
->
-  <legend>
-    A set of checkbox inputs
-  </legend>
-  <div class="form__checkbox ">
-    <input id="checkbox1"
-           type="checkbox"
-    >
-    <label for="checkbox1">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox ">
-    <input id="checkbox2"
-           type="checkbox"
-    >
-    <label for="checkbox2">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox ">
-    <input id="checkbox3"
-           type="checkbox"
-    >
-    <label for="checkbox3">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox ">
-    <input id="checkbox4"
-           type="checkbox"
-    >
-    <label for="checkbox4">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox ">
-    <input id="checkbox5"
-           type="checkbox"
-           disabled
-    >
-    <label for="checkbox5">
-      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/Checkbox InlineCheckboxes smoke-test 1`] = `
-<fieldset aria-describedby="unique-0"
-          class="fieldset--plain form__item"
->
-  <legend>
-    A set of checkbox inputs
-  </legend>
-  <div class="form__checkbox form__item--inline">
-    <input id="checkbox1"
-           type="checkbox"
-    >
-    <label for="checkbox1">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox form__item--inline">
-    <input id="checkbox2"
-           type="checkbox"
-    >
-    <label for="checkbox2">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox form__item--inline">
-    <input id="checkbox3"
-           type="checkbox"
-    >
-    <label for="checkbox3">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox form__item--inline">
-    <input id="checkbox4"
-           type="checkbox"
-    >
-    <label for="checkbox4">
-      This is an example
-    </label>
-  </div>
-  <div class="form__checkbox form__item--inline">
-    <input id="checkbox5"
-           type="checkbox"
-           disabled
-    >
-    <label for="checkbox5">
-      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/Checkbox/input-checkbox-single.twig

@@ -1,6 +0,0 @@
-<div class="form__item {{ modifier_class }}">
-  <div class="form__checkbox">
-    <input id="singleCheckbox{{ id }}" type="checkbox">
-    <label for="singleCheckbox{{ id }}">I agree to the terms and conditions</label>
-  </div>
-</div>

package/src/Form/Description/ErrorMessage.stories.ts

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

package/src/Form/Description/__snapshots__/ErrorMessage.stories.ts.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form/Error ErrorMessage smoke-test 1`] = `
-<div class="form__item">
-  <label for="input-error-">
-    Input text field
-  </label>
-  <input aria-describedby="unique-0"
-         class="error"
-         id="input-error-"
-         type="text"
-  >
-  <div class="form__error-message"
-       id="unique-0"
-       role="tooltip"
-  >
-    Help text that provides additional information about the field.
-  </div>
-</div>
-`;

package/src/Form/Description/form-error.twig

@@ -1,5 +0,0 @@
-<div class="form__item">
-  <label for="input-error-{{ id }}">Input text field</label>
-  <input aria-describedby="input-error-{{ id }}Help" class="error" id="input-error-{{ id }}" type="text">
-  <div class="form__error-message" id="input-error-{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
-</div>

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

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./fieldset.twig"
-import "../form.css"
-
-const modifierOptions: string[] = ["fieldset--plain"]
-
-type FieldsetType = {
-  modifier_class?: (typeof modifierOptions)[number]
-}
-
-const meta: Meta<FieldsetType> = {
-  title: "Form/Fieldset",
-  tags: ["autodocs"],
-  component: Component,
-  argTypes: {
-    modifier_class: {
-      options: modifierOptions,
-      control: { type: "select" },
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<FieldsetType>
-
-export const Fieldset: Story = {
-  args: {},
-}
-
-export const Plain: Story = {
-  args: {
-    modifier_class: "fieldset--plain",
-  },
-}