@pnx-mixtape/mxds 0.0.13 → 0.0.14

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

@@ -1,98 +1,100 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tabs Tabs smoke-test 1`] = `
-<mx-tabs class="mx-tabs mx-tabs--lined">
-  <mx-dropmenu closeonclick="true">
-    <button id="unique-0"
-            class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
-            popovertarget="tab-drop-menu"
-            hidden
-    >
-      Funk
-    </button>
-    <div class="mx-drop-menu"
-         id="tab-drop-menu"
-         aria-labelledby="unique-0"
-         anchor="tab-drop-menu-target"
-         popover
+<div class="mx-page default">
+  <mx-tabs class="mx-tabs mx-tabs--lined">
+    <mx-dropmenu closeonclick="true">
+      <button id="unique-0"
+              class="mx-drop-menu__trigger mx-button mx-icon mx-icon--chevron-down mx-icon--end"
+              popovertarget="tab-drop-menu"
+              hidden
+      >
+        Funk
+      </button>
+      <div class="mx-drop-menu"
+           id="tab-drop-menu"
+           aria-labelledby="unique-0"
+           anchor="tab-drop-menu-target"
+           popover
+           role="tablist"
+      >
+        <button type="button"
+                role="tab"
+                aria-controls="unique-1"
+                aria-selected="false"
+        >
+          Funk
+        </button>
+        <button type="button"
+                role="tab"
+                aria-controls="unique-2"
+                aria-selected="false"
+        >
+          Soul
+        </button>
+        <button type="button"
+                role="tab"
+                aria-controls="unique-3"
+                aria-selected="false"
+        >
+          Motown
+        </button>
+      </div>
+    </mx-dropmenu>
+    <div class="mx-tabs__list"
          role="tablist"
     >
       <button type="button"
               role="tab"
-              aria-controls="unique-1"
-              aria-selected="false"
+              aria-controls="unique-4"
+              aria-selected="true"
+              tab-index="0"
       >
         Funk
       </button>
       <button type="button"
               role="tab"
-              aria-controls="unique-2"
+              aria-controls="unique-5"
               aria-selected="false"
+              tab-index="-1"
       >
         Soul
       </button>
       <button type="button"
               role="tab"
-              aria-controls="unique-3"
+              aria-controls="unique-6"
               aria-selected="false"
+              tab-index="-1"
       >
         Motown
       </button>
     </div>
-  </mx-dropmenu>
-  <div class="mx-tabs__list"
-       role="tablist"
-  >
-    <button type="button"
-            role="tab"
-            aria-controls="unique-4"
-            aria-selected="true"
-            tab-index="0"
+    <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+         id="unique-1"
+         role="tabpanel"
+         tabindex="0"
+         aria-label="Funk"
     >
-      Funk
-    </button>
-    <button type="button"
-            role="tab"
-            aria-controls="unique-5"
-            aria-selected="false"
-            tab-index="-1"
+      Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+    <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+         id="unique-2"
+         role="tabpanel"
+         tabindex="0"
+         aria-label="Soul"
+         inert
     >
-      Soul
-    </button>
-    <button type="button"
-            role="tab"
-            aria-controls="unique-6"
-            aria-selected="false"
-            tab-index="-1"
+      Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
+    </div>
+    <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
+         id="unique-3"
+         role="tabpanel"
+         tabindex="0"
+         aria-label="Motown"
+         inert
     >
-      Motown
-    </button>
-  </div>
-  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
-       id="unique-1"
-       role="tabpanel"
-       tabindex="0"
-       aria-label="Funk"
-  >
-    Funk is the ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-  </div>
-  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
-       id="unique-2"
-       role="tabpanel"
-       tabindex="0"
-       aria-label="Soul"
-       inert
-  >
-    Soul music ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem.
-  </div>
-  <div class="mx-tabs__panel mx-vertical-flow mx-container mx-section--l"
-       id="unique-3"
-       role="tabpanel"
-       tabindex="0"
-       aria-label="Motown"
-       inert
-  >
-    Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
-  </div>
-</mx-tabs>
+      Motown lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at finibus velit. Curabitur consequat, dolor venenatis ullamcorper commodo, quam mi iaculis sem, non varius massa risus et enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus non mi lorem. Morbi semper sagittis euismod. Vestibulum non ornare orci.
+    </div>
+  </mx-tabs>
+</div>
 `;

package/src/Component/Tabs/tabs.css

@@ -11,12 +11,20 @@
 @layer design-system.components {
   .mx-tabs {
     position: relative;
+    display: grid;
+    grid-template-areas: "tabs" "panels";
 
     &:where(:not(:first-child)) {
       margin-block-start: var(--flow-gap, var(--gap));
     }
 
+    & mx-dropmenu {
+      grid-area: tabs;
+    }
+
     & .mx-tabs__list {
+      grid-area: tabs;
+
       @media (--medium-up) {
         display: flex;
         flex-wrap: wrap;
@@ -27,7 +35,6 @@
         border: 0;
         display: block;
         font-family: inherit;
-        outline-offset: var(--outline-offset);
         min-inline-size: var(--tab-min-width, 0);
         padding-block: var(--vertical-padding, var(--spacing-xxs));
         padding-inline: var(--horizontal-padding, var(--spacing-m));
@@ -51,14 +58,17 @@
     }
 
     & .mx-tabs__panel {
+      grid-area: panels;
       inline-size: 100%;
+      opacity: 1;
 
-      &:is(:focus-visible, :focus) {
-        outline-offset: var(--outline-offset);
+      @starting-style {
+        opacity: 0;
       }
 
       &[inert] {
-        display: none;
+        opacity: 0;
+        transition-duration: 0.4s;
       }
     }
 
@@ -85,22 +95,5 @@
         }
       }
     }
-
-    &.mx-tabs--same-height {
-      display: grid;
-
-      & .mx-tabs__panel {
-        grid-column-start: 1;
-        grid-row-start: 2;
-        z-index: 2;
-        transition: opacity 0.2s ease-in-out;
-
-        &[inert] {
-          display: block;
-          opacity: 0;
-          z-index: 1;
-        }
-      }
-    }
   }
 }

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./tags.twig"
 import "./tag.css"
 import { Tags as TagType, TagTypes } from "@pnx-mixtape/ids-shape"

package/src/Component/Tag/Tag.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Tag"
 import "./tag.css"
 

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

@@ -1,64 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Tag Checkbox smoke-test 1`] = `
-<ul class="mx-tags">
-  <li>
-    <div class="mx-tag">
-      <input type="checkbox"
-             id="music"
-             name="tag"
-             value="music"
+<div class="mx-page default">
+  <ul class="mx-tags">
+    <li>
+      <div class="mx-tag">
+        <input type="checkbox"
+               id="music"
+               name="tag"
+               value="music"
+        >
+        <label for="music">
+          Music
+        </label>
+      </div>
+    </li>
+    <li>
+      <div class="mx-tag">
+        <input type="checkbox"
+               id="news"
+               name="tag"
+               value="news"
+        >
+        <label for="news">
+          News
+        </label>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Component/Tag Link smoke-test 1`] = `
+<div class="mx-page default">
+  <ul class="mx-tags">
+    <li>
+      <a class="mx-tag"
+         href="#0"
       >
-      <label for="music">
         Music
-      </label>
-    </div>
-  </li>
-  <li>
-    <div class="mx-tag">
-      <input type="checkbox"
-             id="news"
-             name="tag"
-             value="news"
+      </a>
+    </li>
+    <li>
+      <a class="mx-tag"
+         href="#0"
       >
-      <label for="news">
         News
-      </label>
-    </div>
-  </li>
-</ul>
-`;
-
-exports[`Component/Tag Link smoke-test 1`] = `
-<ul class="mx-tags">
-  <li>
-    <a class="mx-tag"
-       href="#0"
-    >
-      Music
-    </a>
-  </li>
-  <li>
-    <a class="mx-tag"
-       href="#0"
-    >
-      News
-    </a>
-  </li>
-</ul>
+      </a>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Component/Tag Tag smoke-test 1`] = `
-<ul class="mx-tags">
-  <li>
-    <span class="mx-tag">
-      Music
-    </span>
-  </li>
-  <li>
-    <span class="mx-tag">
-      News
-    </span>
-  </li>
-</ul>
+<div class="mx-page default">
+  <ul class="mx-tags">
+    <li>
+      <span class="mx-tag">
+        Music
+      </span>
+    </li>
+    <li>
+      <span class="mx-tag">
+        News
+      </span>
+    </li>
+  </ul>
+</div>
 `;

package/src/Component/Tag/tag.css

@@ -4,7 +4,7 @@
 
 @layer design-system.components {
   .mx-tag {
-    display: inline-block;
+    display: inline-flex;
     inline-size: fit-content;
     padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
     background: var(
@@ -22,11 +22,9 @@
     overflow: hidden;
 
     &:has(input:focus) {
-      --outline-size: max(0.125rem, 0.15em);
-
-      outline: var(--outline-width, var(--outline-size))
-        var(--outline-style, solid) var(--outline-color, currentcolor);
-      outline-offset: var(--outline-offset, var(--outline-size));
+      outline: var(--outline-size, 2px) var(--outline-style, solid)
+        var(--outline-color, currentcolor);
+      outline-offset: var(--outline-size, 2px);
     }
 
     & input {
@@ -57,5 +55,7 @@
     flex-flow: row wrap;
     align-items: center;
     gap: var(--tags-gap, var(--spacing-s));
+    overflow: clip;
+    overflow-clip-margin: var(--spacing-xxxs);
   }
 }

package/src/Component/Tile/Tile.stories.ts

@@ -1,23 +1,49 @@
-import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/tiles.twig"
-import "./tiles.css"
-import { TileSizes } from "../../enums"
+import { Meta, StoryObj } from "@storybook/html-vite"
+import Component from "../Card/card.twig"
+import "../Card/card.css"
+import { MxCardType } from "../Card/Card.stories"
+import { HeadingTypes, ListItemModifiers } from "@pnx-mixtape/ids-shape"
+import { BackgroundStyles, Icons } from "../../enums"
 
-type TilesArgs = {
-  size?: TileSizes
-}
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
 
-const meta: Meta<TilesArgs> = {
+const meta: Meta<MxCardType> = {
   tags: ["autodocs"],
   component: Component,
+  args: {
+    title: Heading({
+      title: "Tile title",
+      as: HeadingTypes.THREE,
+    }),
+    link: Link({
+      href: "#",
+      title: "Find out more",
+      more: true,
+    }),
+    content: "<p>Tiles are just block cards without an image.</p>",
+    background: BackgroundStyles.BOX,
+    modifiers: [ListItemModifiers.BLOCK],
+  },
   argTypes: {
-    size: { options: Object.values(TileSizes), control: "radio" },
+    background: {
+      options: Object.values(BackgroundStyles),
+      control: "select",
+    },
   },
 }
 
 export default meta
-type Story = StoryObj<TilesArgs>
+type Story = StoryObj<MxCardType>
 
-export const Tile: Story = {
-  args: {},
+export const Tile: Story = {}
+
+export const WithIcon: Story = {
+  args: {
+    icon: Icon({
+      icon: Icons.HEART,
+    }),
+  },
 }

package/src/Component/Tile/Tile.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Tile"
-import "./tiles.css"
+import "../Card/card.css"
 import { AsTags, HeadingLevels, TileSizes } from "../../enums"
 
 const meta: Meta<typeof Component> = {

package/src/Component/Tile/Tile.tsx

@@ -1,38 +1,51 @@
-import { JSX, PropsWithChildren } from "react"
+import { JSX, ReactNode, PropsWithChildren } from "react"
 import classNames from "classnames"
 import Heading from "../../Atom/Heading/Heading"
-import Link from "../../Atom/Link/Link"
-import { AsTags, HeadingStyles, TileSizes } from "../../enums"
-import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles, BackgroundStyles } from "../../enums"
+import { HeadingTypes, AsTypes } from "@pnx-mixtape/ids-shape"
+import Icon, { IconProps } from "../../Atom/Icon/Icon"
 
 type TileProps = PropsWithChildren & {
   title: string
-  to?: string
-  linkText?: string
+  icon?: IconProps
+  intro?: ReactNode
   headingLevel?: HeadingTypes
-  size?: TileSizes
-  as?: AsTags
+  headingModifier?: HeadingStyles
+  as?: AsTypes
+  background?: BackgroundStyles
+  className?: string
 }
 
 const Tile = ({
   title,
-  to,
-  linkText,
-  headingLevel = HeadingTypes.THREE,
   children,
-  size = TileSizes.MEDIUM,
-  as = AsTags.DIV,
+  icon = null,
+  intro = null,
+  headingLevel = HeadingTypes.THREE,
+  headingModifier = null,
+  as = AsTypes.DIV,
+  className = null,
+  background = BackgroundStyles.BOX,
 }: TileProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return (
-    <Tag className={classNames("tile", `tile--${size}`, "stack")}>
-      <div className="tile__content vertical-flow-flex">
-        <Heading as={headingLevel} modifier={HeadingStyles.TEXT}>
+    <Tag
+      className={classNames("mx-card", "mx-card--block", className, {
+        [`mx-background--${background}`]: background,
+      })}
+    >
+      {icon && (
+        <div className="mx-card__icon">
+          <Icon {...icon} />
+        </div>
+      )}
+      <div className={classNames("mx-card__content", "mx-vertical-flow-flex")}>
+        {intro}
+        <Heading as={headingLevel} modifier={headingModifier}>
           {title}
         </Heading>
         {children}
       </div>
-      {to && <Link to={to}>{linkText}</Link>}
     </Tag>
   )
 }