@pnx-mixtape/mxds 0.0.4 → 0.0.6

package/src/Atom/Icon/Icon.mdx

@@ -18,7 +18,7 @@ Icons are available as a css image mask.
 <IconGallery>
   {Object.values(Icons).map(name => (
     <IconItem name={name} key={name}>
-      <span className={`icon icon--${name}`} />
+      <span className={`mx-icon mx-icon--${name}`} />
     </IconItem>
   ))}
 </IconGallery>

package/src/Atom/Icon/Icon.tsx

@@ -16,11 +16,11 @@ const Icon = ({
   size,
 }: IconProps): JSX.Element => (
   <span
-    className={classNames("icon", `icon--${icon}`, {
-      [`icon--color-${color}`]: color,
-      [`icon--${align}`]: align,
-      [`icon--${rotate}`]: rotate,
-      [`icon--size-${size}`]: size,
+    className={classNames("mx-icon", `mx-icon--${icon}`, {
+      [`mx-icon--color-${color}`]: color,
+      [`mx-icon--${align}`]: align,
+      [`mx-icon--${rotate}`]: rotate,
+      [`mx-icon--size-${size}`]: size,
     })}
   >
     {text}

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

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Icon Alignment smoke-test 1`] = `
-<span class="icon icon--arrow-left icon--end ">
+<span class="mx-icon mx-icon--arrow-left mx-icon--end ">
   Message with icon
 </span>
 `;
 
 exports[`Atom/Icon Icon smoke-test 1`] = `
-<span class="icon icon--arrow-right ">
+<span class="mx-icon mx-icon--arrow-right ">
 </span>
 `;
 
 exports[`Atom/Icon WithText smoke-test 1`] = `
-<span class="icon icon--arrow-right ">
+<span class="mx-icon mx-icon--arrow-right ">
   Message with icon
 </span>
 `;

package/src/Atom/Icon/_icon.css

@@ -5,7 +5,7 @@
  */
 
 @layer design-system.atoms {
-  .icon {
+  .mx-icon {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xxs);
@@ -23,7 +23,7 @@
     }
   }
 
-  .icon--only {
+  .mx-icon--only {
     inline-size: var(--icon-size, var(--spacing-s));
     block-size: var(--icon-size, var(--spacing-s));
     overflow: hidden;
@@ -65,7 +65,7 @@
   @mixin icon warning;
   @mixin icon youtube;
 
-  .icon--status::before {
+  .mx-icon--status::before {
     mask-image: svg-load("./images/info.svg");
   }
 }
@@ -75,27 +75,27 @@
  */
 
 @layer design-system.atoms {
-  .icon--color-info::before {
+  .mx-icon--color-info::before {
     color: var(--colour-info-foreground);
   }
 
-  .icon--color-error::before {
+  .mx-icon--color-error::before {
     color: var(--colour-error-foreground);
   }
 
-  .icon--color-warning::before {
+  .mx-icon--color-warning::before {
     color: var(--colour-warning-foreground);
   }
 
-  .icon--color-success::before {
+  .mx-icon--color-success::before {
     color: var(--colour-success-foreground);
   }
 
-  .icon--color-brand::before {
+  .mx-icon--color-brand::before {
     color: var(--colour-primary);
   }
 
-  .icon--color-accent::before {
+  .mx-icon--color-accent::before {
     color: var(--colour-accent);
   }
 }
@@ -105,7 +105,7 @@
  */
 
 @layer design-system.atoms {
-  .icon.icon--end::before {
+  .mx-icon--end::before {
     order: 2;
   }
 }
@@ -115,15 +115,15 @@
  */
 
 @layer design-system.atoms {
-  .icon.icon--rotate-90::before {
+  .mx-icon--rotate-90::before {
     rotate: 90deg;
   }
 
-  .icon.icon--rotate-180::before {
+  .mx-icon--rotate-180::before {
     rotate: 180deg;
   }
 
-  .icon.icon--rotate-270::before {
+  .mx-icon--rotate-270::before {
     rotate: 270deg;
   }
 }
@@ -133,19 +133,19 @@
  */
 
 @layer design-system.atoms {
-  .icon.icon--size-sm::before {
+  .mx-icon--size-sm::before {
     --icon-size: var(--spacing-s);
   }
 
-  .icon.icon--size-md::before {
+  .mx-icon--size-md::before {
     --icon-size: var(--spacing-m);
   }
 
-  .icon.icon--size-lg::before {
+  .mx-icon--size-lg::before {
     --icon-size: var(--spacing-l);
   }
 
-  .icon.icon--size-xl::before {
+  .mx-icon--size-xl::before {
     --icon-size: var(--spacing-xl);
   }
 }

package/src/Atom/Icon/_mixin-icon.css

@@ -1,5 +1,5 @@
 @define-mixin icon $name {
-  .icon--$(name)::before {
+  .mx-icon--$(name)::before {
     mask-image: svg-load("./images/$(name).svg");
   }
 }

package/src/Atom/Icon/icon.twig

@@ -1,4 +1,4 @@
-{% set baseClass = 'icon' %}
+{% set baseClass = 'mx-icon' %}
 {% set classes = [
   baseClass,
   baseClass~'--'~icon,

package/src/Atom/Link/Link.tsx

@@ -16,7 +16,7 @@ const Link = ({
   children,
   allyText,
   modifier,
-  className = "link",
+  className = "mx-link",
   ...props
 }: LinkProps): JSX.Element => {
   const LinkComponent = useLinkComponent()
@@ -25,7 +25,7 @@ const Link = ({
     <LinkComponent
       to={to}
       className={classNames(className, {
-        [`link--${modifier}`]: modifier,
+        [`mx-link--${modifier}`]: modifier,
       })}
       {...props}
     >

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

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

package/src/Atom/Link/_links.css

@@ -1,6 +1,6 @@
 @layer design-system.defaults {
-  a:where([href]):is(.link, .link--more, .link--external),
-  .rich-text a:where([href]:not([class])) {
+  :is(.mx-link, .mx-link--more, .mx-link--external),
+  .mx-rich-text a:where([href]:not([class])) {
     color: var(--link-colour, var(--colour-primary));
     transition: color 0.2s var(--ease);
 
@@ -9,7 +9,7 @@
     }
   }
 
-  a:where([href]).link--external {
+  .mx-link--external {
     margin-inline-end: var(--spacing-xxxs);
     display: inline-flex;
     gap: var(--spacing-xxxs);
@@ -31,10 +31,10 @@
     }
   }
 
-  a:where([href]).link--more {
+  .mx-link--more {
     font-weight: var(--font-weight-bold);
 
-    & .icon {
+    & .mx-icon {
       transition: transform 0.5s var(--ease);
     }
 
@@ -43,17 +43,17 @@
     }
   }
 
-  a:where([href]).link--download {
-    & .icon {
+  .mx-link--download {
+    & .mx-icon {
       transition: transform 0.5s var(--ease);
     }
 
-    &:hover .icon {
+    &:hover .mx-icon {
       transform: translateY(3px);
     }
   }
 
-  a:where([href]):has(.icon) {
+  a:where([href]):has(.mx-icon) {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-xxs);

package/src/Atom/Link/link.twig

@@ -1,4 +1,4 @@
-{% set baseClass = 'link' %}
+{% set baseClass = 'mx-link' %}
 {% set classes = [
   baseClass,
   more ? baseClass~'--more' : null,

package/src/Atom/Media/Media.tsx

@@ -28,7 +28,7 @@ const Media = ({
   return (
     <Figure
       className={classNames({
-        [`media--${align}`]: align,
+        [`mx-media--${align}`]: align,
         [className]: className,
       })}
       condition={!!align || !!caption || !!className}

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

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

package/src/Atom/Media/_media.css

@@ -1,5 +1,5 @@
 @layer design-system.atoms {
-  :is(.media--left, .media--right, .media--center) {
+  :is(.mx-media--left, .mx-media--right, .mx-media--center) {
     @media (--small-up) {
       display: table;
       max-inline-size: 50%;
@@ -20,18 +20,26 @@
     }
   }
 
-  .media--center {
+  .mx-media--center {
     margin-inline: auto;
   }
 
-  :is(.media--left, [dir="rtl"] .media--right, .translated-rtl .media--right) {
+  :is(
+      .mx-media--left,
+      [dir="rtl"] .mx-media--right,
+      .translated-rtl .mx-media--right
+    ) {
     @media (--small-up) {
       float: left;
       margin-inline: 0 var(--spacing-m);
     }
   }
 
-  :is(.media--right, [dir="rtl"] .media--left, .translated-rtl .media--left) {
+  :is(
+      .mx-media--right,
+      [dir="rtl"] .mx-media--left,
+      .translated-rtl .mx-media--left
+    ) {
     @media (--small-up) {
       float: right;
       margin-inline: var(--spacing-m) 0;

package/src/Atom/Media/media.twig

@@ -1,4 +1,4 @@
-{% set baseClass = 'media' %}
+{% set baseClass = 'mx-media' %}
 {% set classes = [
   baseClass,
   type ? baseClass~'--'~type : null,

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

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

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

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.atoms {
-  .nav--list {
+  .mx-nav--list {
     margin-block-end: var(--spacing-m);
 
     & ul {
@@ -16,14 +16,8 @@
     }
   }
 
-  .nav--list-2-col {
-    & ul {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  h2 + .nav--list,
-  h3 + .nav--list {
+  h2 + .mx-nav--list,
+  h3 + .mx-nav--list {
     margin-block-start: var(--spacing-m);
   }
 }

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

@@ -1,5 +1,5 @@
-<nav class="nav nav--list {{ modifier_class }}">
-  <h4 class="text--embellished-headline">{{ title|default('Jump To Section') }}</h4>
+<nav class="mx-nav mx-nav--list {{ modifier_class }}">
+  <h4 class="mx-text--embellished-headline">{{ title|default('Jump To Section') }}</h4>
   {% block list %}
   <ul>
     <li>

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

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

package/src/Atom/{_mixins.css → Spacing/_mixins.css}

@@ -1,22 +1,22 @@
 /* stylelint-disable custom-property-pattern */
 @define-mixin spacing $size {
-  .spacing--$(size) {
+  .mx-spacing--$(size) {
     padding: var(--spacing-$(size));
   }
 
-  .spacing--top-$(size) {
+  .mx-spacing--top-$(size) {
     padding-block-start: var(--spacing-$(size));
   }
 
-  .spacing--bottom-$(size) {
+  .mx-spacing--bottom-$(size) {
     padding-block-end: var(--spacing-$(size));
   }
 
-  .spacing--left-$(size) {
+  .mx-spacing--left-$(size) {
     padding-inline-start: var(--spacing-$(size));
   }
 
-  .spacing--right-$(size) {
+  .mx-spacing--right-$(size) {
     padding-inline-end: var(--spacing-$(size));
   }
 }

package/src/Atom/Spacing/_spacing.css

@@ -1,23 +1,23 @@
-@import "../_mixins.css";
+@import "./_mixins.css";
 
 @layer design-system.utilities {
-  .spacing--reset {
+  .mx-spacing--reset {
     padding: 0 !important;
   }
 
-  .spacing--top-reset {
+  .mx-spacing--top-reset {
     padding-block-start: 0 !important;
   }
 
-  .spacing--bottom-reset {
+  .mx-spacing--bottom-reset {
     padding-block-end: 0 !important;
   }
 
-  .spacing--left-reset {
+  .mx-spacing--left-reset {
     padding-inline-start: 0 !important;
   }
 
-  .spacing--right-reset {
+  .mx-spacing--right-reset {
     padding-inline-end: 0 !important;
   }
 

package/src/Atom/Spacing/spacing.twig

@@ -1,3 +1,3 @@
-<div class="spacing {{ modifier_class }}">
+<div class="mx-spacing {{ modifier_class }}">
   <p>{{ modifier_class }}</p>
 </div>

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

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

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

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

package/src/Atom/Table/_table.css

@@ -21,7 +21,7 @@
     }
   }
 
-  .table--flush {
+  .mx-table--flush {
     & :is(td, th) {
       &:first-child {
         padding-inline-start: 0;
@@ -33,14 +33,14 @@
     }
   }
 
-  .table--small {
+  .mx-table--small {
     & :is(td, th) {
       font-size: var(--font-size-s);
       line-height: var(--line-height-h);
     }
   }
 
-  .table--striped {
+  .mx-table--striped {
     & tbody tr {
       &:nth-child(even) {
         & :is(td, th) {
@@ -50,7 +50,7 @@
     }
   }
 
-  .table--responsive {
+  .mx-table--responsive {
     max-inline-size: 100%;
 
     @media (--medium-down) {

package/src/Atom/Table/table-responsive.twig

@@ -1,5 +1,5 @@
-<div class="table--responsive">
-  <table class="table">
+<div class="mx-table--responsive">
+  <table>
     <thead>
       <tr>
         <th>Type</th>

package/src/Atom/Table/table.twig

@@ -1,4 +1,4 @@
-<table class="{{ modifier_class }}{% if modifier %} table--{{ modifier }}{% endif %}">
+<table class="{{ modifier_class }}{% if modifier %} mx-table--{{ modifier }}{% endif %}">
   <thead>
     <tr>
       <th>Type</th>

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

@@ -2,55 +2,55 @@
 
 exports[`Atom/Typography/Text Sizes Example smoke-test 1`] = `
 <div class="vertical-flow">
-  <p class="text--embellished-headline">
+  <p class="mx-text--embellished-headline">
     Embelished headline: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--section-headline">
+  <p class="mx-text--section-headline">
     Section headline: Lorem ipsum dolor sit amet consectetur
   </p>
-  <h2 class="headline">
+  <h2 class="mx-headline">
     Headline: Lorem ipsum dolor sit amet consectetur
   </h2>
-  <p class="heading--xxl">
+  <p class="mx-heading--xxl">
     Heading xxl: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="heading--xl">
+  <p class="mx-heading--xl">
     Heading xl: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="heading--l">
+  <p class="mx-heading--l">
     Heading l: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="heading--m">
+  <p class="mx-heading--m">
     Heading m: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="heading--s">
+  <p class="mx-heading--s">
     Heading s: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="heading--xs">
+  <p class="mx-heading--xs">
     Heading xs: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--xxxl">
+  <p class="mx-text--xxxl">
     Text xxxl: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--xxl">
+  <p class="mx-text--xxl">
     Text xxl: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--xl">
+  <p class="mx-text--xl">
     Text xl: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--l">
+  <p class="mx-text--l">
     Text l: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--m">
+  <p class="mx-text--m">
     Text m: Lorem ipsum dolor sit amet consectetur
   </p>
   <p>
     Text: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--s">
+  <p class="mx-text--s">
     Text s: Lorem ipsum dolor sit amet consectetur
   </p>
-  <p class="text--xs">
+  <p class="mx-text--xs">
     Text xs: Lorem ipsum dolor sit amet consectetur
   </p>
 </div>