@pnx-mixtape/mxds 0.0.5 → 0.0.6

package/src/Component/HeroBanner/hero-banner.css

@@ -3,11 +3,11 @@
  */
 
 @layer design-system.components {
-  .hero-banner {
+  .mx-hero-banner {
     position: relative;
     z-index: 1;
 
-    &.hero-banner--hero {
+    &.mx-hero-banner--hero {
       min-block-size: var(--hero-height, 400px);
       place-content: center;
     }
@@ -18,7 +18,7 @@
     }
   }
 
-  .hero-banner__inner {
+  .mx-hero-banner__inner {
     display: grid;
     grid-template-areas: "content" "aside";
 
@@ -28,14 +28,14 @@
     }
   }
 
-  .hero-banner__content {
+  .mx-hero-banner__content {
     align-content: center;
   }
 
-  .hero-banner__aside {
+  .mx-hero-banner__aside {
     align-content: center;
 
-    &.hero-banner__aside-image {
+    &.mx-hero-banner__aside-image {
       overflow: hidden;
       position: relative;
       border-radius: var(--hero-image-radius, var(--border-radius));

package/src/Component/HeroBanner/hero-banner.twig

@@ -1,4 +1,4 @@
-{% set baseClass = 'hero-banner' %}
+{% set baseClass = 'mx-hero-banner' %}
 {% set background = null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
@@ -13,28 +13,28 @@
 {% endfor %}
 {% set classes = [
   baseClass,
-  'page',
+  'mx-page',
   highlight ? baseClass~'--hero' : null,
   background ? background : null,
 ] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 
 <div{{ attributes }}>
-  <div class="hero-banner__inner">
-    <div class="hero-banner__content vertical-flow section--xl">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
       {{ title }}
       {% if subtitle %}
-        <div class="text--lede">{{ subtitle }}</div>
+        <div class="mx-text--lede">{{ subtitle }}</div>
       {% endif %}
       {{ content }}
       {{ link }}
     </div>
     {% if linkList %}
-      <div class="hero-banner__aside">
+      <div class="mx-hero-banner__aside">
         {{ linkList }}
       </div>
     {% elseif image %}
-      <div class="hero-banner__aside hero-banner__aside-image">
+      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         {{ image }}
       </div>
     {% endif %}

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

@@ -4,7 +4,7 @@ exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
 <div class="message ">
   <div class="message__content">
     Something happened that requires your attention
-    <a class="link "
+    <a class="mx-link "
        href="#"
     >
       <span>

package/src/Component/InPageAlert/in-page-alert.css

@@ -19,12 +19,12 @@
     color: var(--foreground, var(--colour-foreground));
     border-radius: var(--border-radius);
 
-    &:has(.icon--close) {
+    &:has(.mx-icon--close) {
       grid-template-columns: auto min-content;
       grid-template-areas: "content close";
     }
 
-    &:is(.icon, :has(.icon--close)) {
+    &:is(.mx-icon, :has(.mx-icon--close)) {
       --icon-size: 1.25rem;
 
       & .message__content {
@@ -32,7 +32,7 @@
       }
     }
 
-    &.icon {
+    &.mx-icon {
       grid-template-columns: min-content auto;
       grid-template-areas: "icon content";
 
@@ -41,7 +41,7 @@
         background-size: contain;
       }
 
-      &:has(.icon--close) {
+      &:has(.mx-icon--close) {
         grid-template-columns: min-content auto min-content;
         grid-template-areas: "icon content close";
       }
@@ -72,7 +72,7 @@
       --background: var(--colour-warning-background);
     }
 
-    & .icon--close {
+    & .mx-icon--close {
       --icon-size: 1rem;
 
       grid-area: close;

package/src/Component/InPageAlert/in-page-alert.twig

@@ -2,7 +2,7 @@
 {% set classes = [
   baseClass,
   type ? baseClass~'--'~type : null,
-  type ? 'icon icon--'~type : null,
+  type ? 'mx-icon mx-icon--'~type : null,
 ] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 

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

@@ -2,7 +2,7 @@
 
 exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
 "
-< class="section ">
+< class="mx-section ">
           
   
 "

package/src/Component/LinkList/LinkList.tsx

@@ -6,14 +6,14 @@ import { Icons } from "../../enums"
 type LinkListProps = PropsWithChildren & {
   divided?: boolean
 }
-
+// @todo no divided
 const LinkList = ({
   divided = false,
   children,
 }: LinkListProps): JSX.Element => (
   <ul
-    className={classNames("link-list", {
-      "link-list--divided": divided,
+    className={classNames("mx-link-list", {
+      "mx-link-list--divided": divided,
     })}
   >
     {children}
@@ -33,7 +33,7 @@ const LinkListItem = ({
   className,
 }: LinkListItemProps): JSX.Element => (
   <li className={className}>
-    <Link className={classNames("icon", `icon--${icon}`)} to={to}>
+    <Link className={classNames("mx-icon", `mx-icon--${icon}`)} to={to}>
       {children}
     </Link>
   </li>

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

@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/LinkList LinkList smoke-test 1`] = `
-<ul class="link-list">
+<ul class="mx-link-list">
   <li>
     <a href="#"
-       class="icon icon--chevron-right"
+       class="mx-icon mx-icon--chevron-right"
     >
       Music
     </a>
   </li>
   <li>
     <a href="#"
-       class="icon icon--chevron-right"
+       class="mx-icon mx-icon--chevron-right"
     >
       Performances
     </a>
   </li>
   <li>
     <a href="#"
-       class="icon icon--chevron-right"
+       class="mx-icon mx-icon--chevron-right"
     >
       Get involved
     </a>

package/src/Component/LinkList/link-list.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.components {
-  .link-list {
+  .mx-link-list {
     list-style-type: none;
     padding-inline-start: 0;
 
@@ -27,7 +27,7 @@
       }
     }
 
-    & .icon {
+    & .mx-icon {
       position: relative;
       display: flex;
       align-items: center;
@@ -41,7 +41,7 @@
       }
     }
 
-    &:where(:not(.link-list--reverse)) .icon {
+    &:where(:not(.mx-link-list--reverse)) .mx-icon {
       justify-content: space-between;
 
       &::before {
@@ -51,18 +51,18 @@
     }
   }
 
-  [dir="rtl"] .link-list,
-  .translated-rtl .link-list {
-    & .icon::before {
+  [dir="rtl"] .mx-link-list,
+  .translated-rtl .mx-link-list {
+    & .mx-icon::before {
       mask-position: left center;
     }
 
-    &.link-list--reverse .icon::before {
+    &.mx-link-list--reverse .mx-icon::before {
       mask-position: right center;
     }
   }
 
-  * + .link-list {
+  * + .mx-link-list {
     margin-block-start: var(--spacing-m);
   }
 }

package/src/Component/LinkList/link-list.twig

@@ -1,12 +1,12 @@
-{% set classes = ['link-list'] %}
+{% set classes = ['mx-link-list'] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 
 <ul{{ attributes }}>
   {% for item in items %}
     {% if item.href %}
-      <li><a href="{{ item.href }}" class="icon icon--chevron-right">{{ item.title }}</a></li>
+      <li><a href="{{ item.href }}" class="mx-icon mx-icon--chevron-right">{{ item.title }}</a></li>
     {% else %}
-      <li class="icon icon--chevron-right">{{ item.title }}</li>
+      <li class="mx-icon mx-icon--chevron-right">{{ item.title }}</li>
     {% endif %}
   {% endfor %}
 </ul>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Navigation Navigation smoke-test 1`] = `
-<nav class="nav "
+<nav class="mx-nav "
      aria-label="Navigation"
 >
   <ul>

package/src/Component/Navigation/_navigation.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.components {
-  .nav {
+  .mx-nav {
     & ul {
       display: flex;
       flex-direction: column;
@@ -22,7 +22,7 @@
     }
   }
 
-  .nav--inline {
+  .mx-nav--inline {
     & > ul {
       flex-flow: row wrap;
       align-items: center;
@@ -30,7 +30,7 @@
     }
   }
 
-  .nav__toggle {
+  .mx-nav__toggle {
     background: unset;
     padding: 0;
     border: 0;
@@ -47,8 +47,8 @@
     cursor: pointer;
   }
 
-  .nav--open {
-    & > .nav__toggle::before {
+  .mx-nav--open {
+    & > .mx-nav__toggle::before {
       transform: rotate(180deg);
     }
   }

package/src/Component/Navigation/navigation.twig

@@ -1,4 +1,4 @@
-<nav class="nav {{ modifier_class }}" aria-label="Navigation">
+<nav class="mx-nav {{ modifier_class }}" aria-label="Navigation">
   {% block menu %}
   <ul>
     <li><a href="#">Secondary Title</a></li>

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

@@ -6,7 +6,7 @@ exports[`Component/Sticky Sticky smoke-test 1`] = `
 </mx-sticky>
 
 
-&lt; class="section "&gt;
+&lt; class="mx-section "&gt;
           
   
 "

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

@@ -84,14 +84,14 @@ exports[`Component/Tabs Tabs smoke-test 1`] = `
        role="tabpanel"
        tab-index="0"
   >
-    <div class="container">
-      <article class="card ">
-        <figure class="card__media">
+    <div class="mx-container">
+      <article class="mx-card ">
+        <figure class="mx-card__media">
           https://picsum.photos/id/56/558/418?grayscale
         </figure>
-        <div class="card__content vertical-flow-flex">
+        <div class="mx-card__content mx-vertical-flow-flex">
           Lorem ipsum
-          <div class="text--lede">
+          <div class="mx-text--lede">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </div>
         </div>
@@ -105,14 +105,14 @@ exports[`Component/Tabs Tabs smoke-test 1`] = `
        role="tabpanel"
        tab-index="0"
   >
-    <div class="container">
-      <article class="card ">
-        <figure class="card__media">
+    <div class="mx-container">
+      <article class="mx-card ">
+        <figure class="mx-card__media">
           https://picsum.photos/id/56/558/418?grayscale
         </figure>
-        <div class="card__content vertical-flow-flex">
+        <div class="mx-card__content mx-vertical-flow-flex">
           Ut enim
-          <div class="text--lede">
+          <div class="mx-text--lede">
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           </div>
         </div>
@@ -126,14 +126,14 @@ exports[`Component/Tabs Tabs smoke-test 1`] = `
        role="tabpanel"
        tab-index="0"
   >
-    <div class="container">
-      <article class="card ">
-        <figure class="card__media">
+    <div class="mx-container">
+      <article class="mx-card ">
+        <figure class="mx-card__media">
           https://picsum.photos/id/56/558/418?grayscale
         </figure>
-        <div class="card__content vertical-flow-flex">
+        <div class="mx-card__content mx-vertical-flow-flex">
           Excepteur sint
-          <div class="text--lede">
+          <div class="mx-text--lede">
             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           </div>
         </div>

package/src/Component/Tag/Tag.tsx

@@ -13,7 +13,7 @@ const Tag = ({
   as = AsTags.DIV,
 }: TagProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
-  return <Tag className={classNames("tag", className)}>{children}</Tag>
+  return <Tag className={classNames("mx-tag", className)}>{children}</Tag>
 }
 
 export default Tag

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tag Checkbox smoke-test 1`] = `
-<ul class="tags">
+<ul class="mx-tags">
   <li>
-    <div class="tag">
+    <div class="mx-tag">
       <input type="checkbox"
              id="music"
              name="tag"
@@ -15,7 +15,7 @@ exports[`Component/Tag Checkbox smoke-test 1`] = `
     </div>
   </li>
   <li>
-    <div class="tag">
+    <div class="mx-tag">
       <input type="checkbox"
              id="news"
              name="tag"
@@ -30,16 +30,16 @@ exports[`Component/Tag Checkbox smoke-test 1`] = `
 `;
 
 exports[`Component/Tag Link smoke-test 1`] = `
-<ul class="tags">
+<ul class="mx-tags">
   <li>
-    <a class="tag"
+    <a class="mx-tag"
        href="#0"
     >
       Music
     </a>
   </li>
   <li>
-    <a class="tag"
+    <a class="mx-tag"
        href="#0"
     >
       News
@@ -49,14 +49,14 @@ exports[`Component/Tag Link smoke-test 1`] = `
 `;
 
 exports[`Component/Tag Tag smoke-test 1`] = `
-<ul class="tags">
+<ul class="mx-tags">
   <li>
-    <span class="tag">
+    <span class="mx-tag">
       Music
     </span>
   </li>
   <li>
-    <span class="tag">
+    <span class="mx-tag">
       News
     </span>
   </li>

package/src/Component/Tag/tag.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.components {
-  .tag {
+  .mx-tag {
     display: inline-block;
     inline-size: fit-content;
     padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
@@ -46,7 +46,7 @@
     }
   }
 
-  .tags {
+  .mx-tags {
     padding-inline: 0;
     list-style: none;
     display: flex;

package/src/Component/Tag/tags.twig

@@ -1,7 +1,7 @@
-{% set classes = ['tag'] %}
+{% set classes = ['mx-tag'] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 
-<ul class="tags">
+<ul class="mx-tags">
   {% for item in items %}
     <li>
         {% if type == "link" %}

package/src/Layout/Grid/Grid.tsx

@@ -10,7 +10,7 @@ type GridProps = PropsWithChildren & {
   className?: string
   as?: AsTags | SectionTags
 }
-
+// @todo update grid classes and add span support
 const Grid = ({
   children,
   wrapper = false,
@@ -26,8 +26,8 @@ const Grid = ({
   const colClasses = useMemo<string[]>(() => {
     if (!cols) return []
     if (Array.isArray(cols))
-      return cols.map((col: GridColumns) => `grid--${col}`)
-    return [`grid--${cols}`]
+      return cols.map((col: GridColumns) => `mx-grid--${col}`)
+    return [`mx-grid--${cols}`]
   }, [cols])
 
   return (
@@ -37,7 +37,7 @@ const Grid = ({
           grid: wrapper,
           container: container,
           [colClasses.join(" ")]: cols && wrapper,
-          [`grid--${width}-col`]: width,
+          [`mx-grid--${width}-col`]: width,
         },
         className,
       )}

package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Grid Grid smoke-test 1`] = `
-<div class="grid grid--cols-sm-2 grid--cols-lg-4">
+<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-lg-4">
   <div class>
     item 1
   </div>
@@ -24,7 +24,7 @@ exports[`Layout/Grid Grid smoke-test 1`] = `
 `;
 
 exports[`Layout/Grid List smoke-test 1`] = `
-<ul class="grid grid--cols-sm-2">
+<ul class="mx-grid mx-grid--cols-sm-2">
   <li class>
     list item 1
   </li>
@@ -35,11 +35,11 @@ exports[`Layout/Grid List smoke-test 1`] = `
 `;
 
 exports[`Layout/Grid Span smoke-test 1`] = `
-<div class="grid grid--cols-sm-2 grid--cols-md-3">
+<div class="mx-grid mx-grid--cols-sm-2 mx-grid--cols-md-3">
   <div class>
     item 1
   </div>
-  <div class="grid-item__span-md-2">
+  <div class="mx-grid-item__span-md-2">
     item 2, span 2
   </div>
 </div>

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

@@ -1,5 +1,6 @@
 /**
  * Container Grid
+ * @todo update classes
  */
 @layer design-system.layouts {
   .grid.container {

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

@@ -1,12 +1,12 @@
 {% set classes = [] %}
 {% for modifier in modifiers %}
-  {% set classes = classes|merge(["grid-item__span-"~modifier]) %}
+  {% set classes = classes|merge(["mx-grid-item__span-"~modifier]) %}
 {% endfor %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 {% set as = as|default("div") %}
 
 {% if container %}
-  <{{ as }}{{ attributes.addClass("container") }}>
+  <{{ as }}{{ attributes.addClass("mx-container") }}>
   {{ item }}
   </{{ as }}>
 {% else %}