@pnx-mixtape/mxds 0.0.2 → 0.0.4

package/src/Atom/Link/__snapshots__/Link.stories.ts.snap

@@ -1,17 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Link IconLink smoke-test 1`] = `
-<a class=" icon icon--arrow-right"
+exports[`Atom/Link Download smoke-test 1`] = `
+<a class="link  link--download"
    href="#"
 >
-  Hyperlink
+  <span class="icon icon--download ">
+  </span>
+  <span>
+    Download (PDF 12kb)
+  </span>
 </a>
 `;
 
-exports[`Base/Link Link smoke-test 1`] = `
-<a class
+exports[`Atom/Link External smoke-test 1`] = `
+<a class="link  link--external"
    href="#"
 >
-  Hyperlink
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link IconLink smoke-test 1`] = `
+<a class="link "
+   href="#"
+>
+  <span class="icon icon--link ">
+  </span>
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link Link smoke-test 1`] = `
+<a class="link "
+   href="#"
+>
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link More smoke-test 1`] = `
+<a class="link link--more "
+   href="#"
+>
+  <span>
+    Hyperlink
+  </span>
+  <span class="icon icon--arrow-right ">
+  </span>
 </a>
 `;

package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Link External smoke-test 1`] = `
+exports[`Atom/Link External smoke-test 1`] = `
 <a href="http://example.com"
    class="link link--external"
 >
@@ -8,7 +8,7 @@ exports[`Base/Link External smoke-test 1`] = `
 </a>
 `;
 
-exports[`Base/Link Link smoke-test 1`] = `
+exports[`Atom/Link Link smoke-test 1`] = `
 <a href="http://example.com"
    class="link"
 >
@@ -16,7 +16,7 @@ exports[`Base/Link Link smoke-test 1`] = `
 </a>
 `;
 
-exports[`Base/Link More smoke-test 1`] = `
+exports[`Atom/Link More smoke-test 1`] = `
 <a href="http://example.com"
    class="link link--more"
 >

package/src/Atom/Link/_links.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   a:where([href]):is(.link, .link--more, .link--external),
   .rich-text a:where([href]:not([class])) {
     color: var(--link-colour, var(--colour-primary));
@@ -33,7 +33,29 @@
 
   a:where([href]).link--more {
     font-weight: var(--font-weight-bold);
+
+    & .icon {
+      transition: transform 0.5s var(--ease);
+    }
+
+    &:hover .icon {
+      transform: translateX(3px);
+    }
+  }
+
+  a:where([href]).link--download {
+    & .icon {
+      transition: transform 0.5s var(--ease);
+    }
+
+    &:hover .icon {
+      transform: translateY(3px);
+    }
+  }
+
+  a:where([href]):has(.icon) {
     display: inline-flex;
-    gap: var(--spacing-s);
+    align-items: center;
+    gap: var(--spacing-xxs);
   }
 }

package/src/Atom/Link/link.twig

@@ -1,12 +1,14 @@
+{% set baseClass = 'link' %}
 {% set classes = [
-  more ? 'link--more' : null,
-  external ? 'link--external' : null,
-  download ? 'icon icon--download' : null,
-  icon ? 'icon icon--'~icon.icon : null,
-  icon.align ? 'icon--'~icon.align : null,
+  baseClass,
+  more ? baseClass~'--more' : null,
+  external ? baseClass~'--external' : null,
+  download ? baseClass~'--download' : null,
 ] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 
 <a{{ attributes }} href="{{ href }}"{% if current %} aria-current="page"{% endif %}>
-  {{ title }}
+  {{ iconStart }}
+  <span>{{ title }}</span>
+  {{ iconEnd }}
 </a>

package/src/Atom/Link/twig/story-link.twig

@@ -0,0 +1,11 @@
+{% extends "../link.twig" %}
+{% if iconStart %}
+  {% set iconStart %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconStart.icon } only %}
+  {% endset %}
+{% endif %}
+{% if iconEnd %}
+  {% set iconEnd %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconEnd.icon } only %}
+  {% endset %}
+{% endif %}

package/src/Atom/Media/Media.stories.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./media.twig"
+import Component from "./twig/story-media.twig"
 import "../_base.css"
 import { Media as MediaType, MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
 
@@ -12,9 +12,14 @@ const meta: Meta<MediaType> = {
       alt: "Some blurry bubble image",
     },
     caption: "A picsum image",
+    type: "image",
   },
   argTypes: {
     align: { options: Object.values(MediaAlignmentTypes), control: "select" },
+    // @ts-expect-error The controls follow the shape
+    "item.src": { control: "text" },
+    "item.alt": { control: "text" },
+    "item.title": { control: "text" },
   },
 }
 
@@ -24,3 +29,14 @@ type Story = StoryObj<MediaType>
 export const Media: Story = {
   args: {},
 }
+
+export const Video: Story = {
+  args: {
+    type: "video",
+    caption: "A remote video",
+    item: {
+      src: "https://www.youtube.com/embed/NpEaa2P7qZI",
+      title: "Something from youtube",
+    },
+  },
+}

package/src/Atom/Media/__snapshots__/Media.stories.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Media Media smoke-test 1`] = `
-<figure class="media ">
+exports[`Atom/Media Media smoke-test 1`] = `
+<figure class="media media--image ">
   <picture>
     <img src="https://picsum.photos/id/56/558/418?grayscale"
          alt="Some blurry bubble image"
@@ -12,3 +12,18 @@ exports[`Base/Media Media smoke-test 1`] = `
   </figcaption>
 </figure>
 `;
+
+exports[`Atom/Media Video smoke-test 1`] = `
+<figure class="media media--video ">
+  <figure class="video">
+    <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
+            title="Something from youtube"
+            allowfullscreen
+    >
+    </iframe>
+  </figure>
+  <figcaption>
+    A remote video
+  </figcaption>
+</figure>
+`;

package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Image Caption smoke-test 1`] = `
+exports[`Atom/Image Caption smoke-test 1`] = `
 <figure class="media--left">
   <img alt="Example image"
        src="https://picsum.photos/id/56/558/418?grayscale"
@@ -11,7 +11,7 @@ exports[`Base/Image Caption smoke-test 1`] = `
 </figure>
 `;
 
-exports[`Base/Image Image smoke-test 1`] = `
+exports[`Atom/Image Image smoke-test 1`] = `
 <img alt="Example image"
      src="https://picsum.photos/id/56/558/418?grayscale"
 >

package/src/Atom/Media/_media.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.atoms {
   :is(.media--left, .media--right, .media--center) {
     @media (--small-up) {
       display: table;

package/src/Atom/Media/media.twig

@@ -7,11 +7,7 @@
 {% set attributes = attributes|default(create_attribute()).addClass(classes) %}
 
 <figure{{ attributes }}>
-  {% if type == "video" %}
-    {% include '@mixtape/Atom/Video/video.twig' with ( item ) only %}
-  {% else %}
-    {% include '@mixtape/Atom/Image/image.twig' with ( item ) only %}
-  {% endif %}
+  {{ item }}
   {% if caption %}
   <figcaption>{{ caption }}</figcaption>
   {% endif %}

package/src/Atom/Media/twig/story-media.twig

@@ -0,0 +1,11 @@
+{% extends "../media.twig" %}
+{% if type == "image" %}
+  {% set item %}
+    {% include "@mixtape/Atom/Image/image.twig" with { src: item.src, alt: item.alt } only %}
+  {% endset %}
+{% endif %}
+{% if type == "video" %}
+  {% set item %}
+    {% include "@mixtape/Atom/Video/video.twig" with { src: item.src, title: item.title } only %}
+  {% endset %}
+{% endif %}

package/src/Atom/NavList/__snapshots__/NavList.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Atom/NavList/NavList List smoke-test 1`] = `
+exports[`Atom/NavList List smoke-test 1`] = `
 <nav class="nav nav--list ">
   <h4 class="text--embellished-headline">
     Jump To Section

package/src/Atom/NavList/nav-list.css

@@ -2,7 +2,7 @@
  * List Navigation
  */
 
-@layer components {
+@layer design-system.atoms {
   .nav--list {
     margin-block-end: var(--spacing-m);
 

package/src/Atom/README.md

@@ -2,4 +2,4 @@
 
 ### How to use
 
-`@import '@pnx-mixtape/mxds/base.css';`
+`@import '@pnx-mixtape/mxds/src/Atom/base.css';`

package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Spacing Spacing smoke-test 1`] = `
+exports[`Atom/Spacing Spacing smoke-test 1`] = `
 <div class="spacing ">
   <p>
   </p>

package/src/Atom/Spacing/_spacing.css

@@ -1,6 +1,6 @@
 @import "../_mixins.css";
 
-@layer utlities {
+@layer design-system.utilities {
   .spacing--reset {
     padding: 0 !important;
   }

package/src/Atom/Table/__snapshots__/Table.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Table Flush smoke-test 1`] = `
+exports[`Atom/Table Flush smoke-test 1`] = `
 <table class=" table--flush">
   <thead>
     <tr>
@@ -65,7 +65,7 @@ exports[`Base/Table Flush smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Small smoke-test 1`] = `
+exports[`Atom/Table Small smoke-test 1`] = `
 <table class=" table--small">
   <thead>
     <tr>
@@ -130,7 +130,7 @@ exports[`Base/Table Small smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Table smoke-test 1`] = `
+exports[`Atom/Table Table smoke-test 1`] = `
 <table class>
   <thead>
     <tr>
@@ -195,7 +195,7 @@ exports[`Base/Table Table smoke-test 1`] = `
 </table>
 `;
 
-exports[`Base/Table Zebra smoke-test 1`] = `
+exports[`Atom/Table Zebra smoke-test 1`] = `
 <table class=" table--striped">
   <thead>
     <tr>

package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Table/Responsive TableResponsive smoke-test 1`] = `
+exports[`Atom/Table/Responsive TableResponsive smoke-test 1`] = `
 <div class="table--responsive">
   <table class="table">
     <thead>

package/src/Atom/Table/_table.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   table {
     inline-size: 100%;
     border-collapse: collapse;

package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Text Text smoke-test 1`] = `
+exports[`Atom/Typography/Text Text smoke-test 1`] = `
 <p class>
   Text
 </p>

package/src/Atom/Text/__snapshots__/TextSizes.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Text Sizes Example smoke-test 1`] = `
+exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
 <div class="vertical-flow">
   <p class="text--embellished-headline">
     Embelished headline: Lorem ipsum dolor sit amet consectetur
@@ -56,7 +56,7 @@ exports[`Base/Typography/Text Sizes Example smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Typography/Text Sizes TextSizes smoke-test 1`] = `
+exports[`Atom/Typography/Text Sizes TextSizes smoke-test 1`] = `
 <p class>
   In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
 </p>

package/src/Atom/Text/_text-align.css

@@ -1,4 +1,4 @@
-@layer utlities {
+@layer design-system.utilities {
   .text--left {
     text-align: start;
   }

package/src/Atom/Text/_text-sizes.css

@@ -1,4 +1,4 @@
-@layer utlities {
+@layer design-system.atoms {
   :is(
       .text--section-headline,
       .text--embellished-headline,

package/src/Atom/Video/Video.stories.ts

@@ -6,11 +6,13 @@ const meta: Meta<typeof Component> = {
   title: "Atom/Video",
   tags: ["autodocs"],
   component: Component,
+  args: {
+    src: "https://www.youtube.com/embed/NpEaa2P7qZI",
+    title: "Something from youtube",
+  },
 }
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Video: Story = {
-  args: {},
-}
+export const Video: Story = {}

package/src/Atom/Video/__snapshots__/Video.stories.ts.snap

@@ -1,21 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Video Video smoke-test 1`] = `
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-</p>
+exports[`Atom/Video Video smoke-test 1`] = `
 <figure class="video">
-  <iframe title="Some video"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/NpEaa2P7qZI"
-          frameborder="0"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
+          title="Something from youtube"
           allowfullscreen
   >
   </iframe>
 </figure>
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-</p>
 `;

package/src/Atom/Video/_video.css

@@ -1,10 +1,15 @@
-@layer defaults {
+@layer design-system.defaults {
   .video {
     &,
     & :is(embed, object, iframe) {
       aspect-ratio: 16 / 9;
       block-size: 100%;
       inline-size: 100%;
+      border: 0;
     }
   }
+
+  .media--video {
+    inline-size: 100%;
+  }
 }

package/src/Atom/Video/video.twig

@@ -1,5 +1,11 @@
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-<figure class="video">
-  <iframe title="Some video" width="560" height="315" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+{% set attributes = attributes|default(create_attribute()).addClass("video") %}
+<figure{{ attributes }}>
+  <iframe
+      src="{{ src }}"
+      {% if title %} title="{{ title }}"{% endif %}
+      {% if loading %} loading="{{ loading }}"{% endif %}
+      {% if height %} height="{{ height }}"{% endif %}
+      {% if width %} width="{{ width }}"{% endif %}
+      allowfullscreen
+  ></iframe>
 </figure>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

package/src/Atom/_animated.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .animated--fade-in {
     animation: fade-in 0.5s var(--ease);
   }

package/src/Atom/_flow-legacy.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   * + h1 {
     margin-block-start: var(--spacing-m);
   }

package/src/Atom/_flow.css

@@ -1,4 +1,4 @@
-@layer utilities {
+@layer design-system.utilities {
   .vertical-flow {
     /* Default vertical flow. */
 

package/src/Atom/_generic.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   *,
   *::before,
   *::after {

package/src/Atom/_hr.css

@@ -1,4 +1,4 @@
-@layer defaults {
+@layer design-system.defaults {
   hr {
     display: block;
     block-size: 0;

package/src/Atom/base.css

@@ -1,5 +1,5 @@
-@layer popover-polyfill, defaults, layout, elements, components, utilities;
+@layer popover-polyfill, design-system.defaults, design-system.atoms, design-system.layouts, design-system.components, design-system.utilities;
 
-@import "Background/_background.css";
+@import "./Background/_background.css";
 @import "_animated.css";
 @import "_base.css";

package/src/Component/Accordion/README.md

@@ -4,13 +4,13 @@
 
 **CSS**
 
-`@import '@pnx-mixtape/mxds/accordion.css';`
+`@import '@pnx-mixtape/mxds/src/Component/Accordion/accordion.css';`
 
 **Twig**
 
 You can setup a twig namespace in your project if you wish to use the twig files directly.
 
-- Eg: `{% extends '@mixtape/accordion/twig/accordion.twig' %}`
+- Eg: `{% extends '@mixtape/Component/Accordion/accordion.twig' %}`
 
 Alternatively copy/paste the file for more control.
 
@@ -18,7 +18,7 @@ Alternatively copy/paste the file for more control.
 
 JSX components are available for use with React.
 
-- JSX import: `import { Accordion } from '@pnx-mixtape/mxds/react';`
+- JSX import: `import { Accordion } from '@pnx-mixtape/mxds/src/react';`
 
 **JS Custom Element**
 
@@ -27,19 +27,9 @@ These do not use the Shadow DOM and are not typical Web Components.
 External CSS applies.
 No Polyfills or frameworks are required.
 
-- AccordionBase import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/Accordion';` and be sure to include `<mx-accordion>` around the `<details />` tag.
-- AccordionMobile import: `import '@pnx-mixtape/mxds/Components/Accordion/Elements/AccordionMobile';` and be sure to include `<mx-accordionmobile>` around the `<details />` tag.
-- AccordionDiv import: `import '@nx-mixtape/Components/Accordion/Elements/AccordionDiv';` and be sure to include `<mx-accordiondiv class="accordion">` instead of the `<details />` tag.
-
-```html
-<mx-accordion>
-  <details class="accordion">
-    <summary class="accordion__toggle">Title</summary>
-    <div class="accordion__content">
-      <p>Body content</p>
-    </div>
-  </details>
-</mx-accordion>
-```
+- AccordionBase import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/Accordion';` and be sure to include `<mx-accordion>` around the `<details />` tag.
+- AccordionMobile import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/AccordionMobile';` and be sure to include `<mx-accordionmobile>` around the `<details />` tag.
+- AccordionDiv import: `import '@nx-mixtape/Component/Accordion/Elements/AccordionDiv';` and be sure to include `<mx-accordiondiv class="accordion">` instead of the `<details />` tag.
+- AccordionGroup import: `import '@pnx-mixtape/mxds/src/Component/Accordion/Elements/AccordionGroup';` and be sure to include `<mx-accordion-group>` around the `<details />` tags.
 
 See twig files for all HTML examples.

package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Accordion Accordion smoke-test 1`] = `
+exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="accordions">
   <div class="accordion__title">
-    <h2 class=" ">
+    <h2 class>
       Accordion group
     </h2>
   </div>
@@ -38,11 +38,11 @@ exports[`Components/Accordion Accordion smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Accordion ToggleAll smoke-test 1`] = `
+exports[`Component/Accordion ToggleAll smoke-test 1`] = `
 <div class="accordions">
   <mx-accordion-group>
     <div class="accordion__title">
-      <h2 class=" ">
+      <h2 class>
         Accordion group
       </h2>
       <div class="accordions__toggle-all">

package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Accordion Accordion smoke-test 1`] = `
+exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="accordion accordion--divided"
      data-open="false"
 >

package/src/Component/Accordion/accordion.css

@@ -2,7 +2,7 @@
  * Accordion
  */
 
-@layer defaults {
+@layer design-system.defaults {
   details {
     & summary {
       list-style-type: none;
@@ -34,7 +34,7 @@
   }
 }
 
-@layer components {
+@layer design-system.components {
   .accordion__title {
     margin-block-end: var(--spacing-m);
     display: flex;

package/src/Component/Accordion/accordion.entry.js

@@ -0,0 +1,2 @@
+import "./Elements/Accordion"
+import "./Elements/AccordionGroup"