@pnx-mixtape/mxds 0.0.6 → 0.0.8

package/src/Component/Card/card.css

@@ -5,70 +5,84 @@
 @layer design-system.components {
   .mx-card {
     display: grid;
-    grid-template: "media" auto "content" 1fr / 1fr;
     gap: var(--card-gap, var(--gap));
 
-    @container (min-width: token("breakpoint.contentCard")) {
-      --card-gap: var(--gap-l);
-
-      grid-template: "media content" 1fr / 1fr 1fr;
-      align-items: center;
+    &[class*="mx-background--"] {
+      border-radius: var(--border-radius);
 
       & .mx-card__content {
-        justify-content: center;
+        padding-inline: var(--content-min-spacing, var(--spacing-s));
+        padding-block-end: var(--content-min-spacing, var(--spacing-s));
+
+        @container (min-width: token("breakpoint.contentCard")) {
+          --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
+        }
       }
     }
 
-    @container (min-width: token("breakpoint.l")) {
-      --card-gap: 6rem;
-    }
+    &:has(.mx-card__media) {
+      grid-template: "media" "content" 1fr / 1fr;
 
-    &.mx-card--right {
       @container (min-width: token("breakpoint.contentCard")) {
-        grid-template-areas: "content media";
-      }
-    }
+        --card-gap: var(--gap-l);
 
-    &[class*="mx-background--"] {
-      border-radius: var(--border-radius);
+        grid-template: "media content" 1fr / 1fr 1fr;
+        align-items: center;
 
-      & .mx-card__content {
-        padding-inline: var(--spacing-s);
-        padding-block-end: var(--spacing-s);
+        &.mx-card--reversed {
+          grid-template-areas: "content media";
+        }
 
-        @container (min-width: token("breakpoint.contentCard")) {
-          padding-block-start: var(--spacing-s);
-          padding-inline-start: 0;
+        & .mx-card__content {
+          justify-content: center;
         }
       }
 
-      &.mx-card--right {
+      @container (min-width: token("breakpoint.l")) {
+        --card-gap: 6rem;
+      }
+
+      &[class*="mx-background--"] {
         @container (min-width: token("breakpoint.contentCard")) {
-          padding-inline: var(--spacing-s) 0;
+          & .mx-card__content {
+            padding-block-start: var(--content-min-spacing, var(--spacing-s));
+          }
+
+          &:where(:not(.mx-card--reversed)) .mx-card__content {
+            padding-inline-start: 0;
+          }
+
+          &.mx-card--reversed .mx-card__content {
+            padding-inline-end: 0;
+          }
         }
       }
-    }
 
-    & .mx-card__content {
-      grid-area: content;
-    }
+      & .mx-card__content {
+        grid-area: content;
+      }
 
-    & :is(.mx-card__media, figure) {
-      grid-area: media;
-      display: grid;
-      margin: auto;
-      position: relative;
-      inline-size: 100%;
+      & :is(.mx-card__media, figure) {
+        grid-area: media;
+        display: grid;
+        margin: auto;
+        position: relative;
+        inline-size: 100%;
+
+        & img {
+          aspect-ratio: var(--ratio);
+          border-radius: var(--border-radius);
+          object-fit: cover;
+          display: block;
+        }
 
-      & img {
-        aspect-ratio: var(--ratio);
-        border-radius: var(--border-radius);
-        object-fit: cover;
-        display: block;
+        & .mx-skeleton--bg {
+          aspect-ratio: var(--ratio);
+        }
       }
 
-      & .mx-skeleton--bg {
-        aspect-ratio: var(--ratio);
+      & .mx-card__icon {
+        grid-area: media;
       }
     }
 
@@ -84,7 +98,7 @@
 
 @layer design-system.components {
   .mx-grid:has(> *:nth-child(2):last-child)
-    > :is(.mx-card, .container:has(.mx-card)) {
+    > :is(.mx-card, .mx-container:has(.mx-card)) {
     inline-size: 100%;
     max-inline-size: var(--max-card-width, 37ch);
     margin-inline: auto;
@@ -102,7 +116,7 @@
     }
   }
 
-  .mx-card--clickable {
+  .mx-card--block {
     position: relative;
 
     &:focus-within {

package/src/Component/Card/card.twig

@@ -1,21 +1,21 @@
 {% set baseClass = 'mx-card' %}
+{% set classes = [baseClass] %}
 {% set background = null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
-    {% set background = 'background--reverse' %}
-  {% endif %}
-  {% if modifier == "light" %}
-    {% set background = 'background--alt' %}
-  {% endif %}
-  {% if modifier == "supplementary" %}
-    {% set background = 'background--primary' %}
+    {% set background = 'mx-background--reverse' %}
+  {% elseif modifier == "light" %}
+    {% set background = 'mx-background--alt' %}
+  {% elseif modifier == "supplementary" %}
+    {% set background = 'mx-background--primary' %}
+  {% else %}
+    {% set classes = classes|merge([baseClass~"--"~modifier]) %}
   {% endif %}
 {% endfor %}
-{% set classes = [
-  baseClass,
-  background ? background : null,
-] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% if background %}
+  {% set classes = classes|merge([background]) %}
+{% endif %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <div class="mx-container">
 <article{{ attributes }}>
@@ -31,7 +31,7 @@
   {% endif %}
   <div class="mx-card__content mx-vertical-flow-flex">
     {% if date %}
-      <div class="mx-text--small">{{ date }}</div>
+      <div class="mx-text--s">{{ date }}</div>
     {% endif %}
     {{ title }}
     {{ tags }}

package/src/Component/ContentBlock/ContentBlock.stories.ts

@@ -1,15 +1,82 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/content-block-example.twig"
+import Component from "./content-block.twig"
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Image from "../../Atom/Image/image.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
 import "./content-block.css"
+import "../LinkList/link-list.css"
+import {
+  ContentBlock as ContentBlockType,
+  HeadingTypes,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
 
-const meta: Meta<typeof Component> = {
-  tags: ["autodocs"],
+const meta: Meta<ContentBlockType> = {
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
+  args: {
+    title: Heading({
+      title: "Content block title",
+      as: HeadingTypes.THREE,
+    }),
+    link: Link({
+      href: "#",
+      title: "Find out more",
+      more: true,
+    }),
+    content:
+      "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    linkList: LinkList({
+      items: [
+        {
+          title: "Link one",
+          href: "#",
+        },
+        {
+          title: "Link two",
+          href: "#",
+        },
+        {
+          title: "Link three",
+          href: "#",
+        },
+      ],
+    }),
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    // @ts-expect-error The controls follow the shape
+    "image.src": { control: "text" },
+    "image.alt": { control: "text" },
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<ContentBlockType>
 
-export const ContentBlock: Story = {
-  args: {},
+export const ContentBlock: Story = {}
+
+export const WithIcon: Story = {
+  args: {
+    icon: Icon({
+      icon: Icons.HEART,
+    }),
+  },
+}
+
+export const WithImage: Story = {
+  args: {
+    image: Image({
+      src: "https://picsum.photos/id/56/558/418?grayscale",
+      alt: "Blurry bubbles",
+    }),
+  },
 }

package/src/Component/ContentBlock/ContentBlock.stories.tsx

@@ -1,27 +1,36 @@
 import { Meta, StoryObj } from "@storybook/react"
 import Component from "./ContentBlock"
-import Heading from "../../Atom/Heading/Heading"
+import Link from "../../Atom/Link/Link"
 import Text from "../../Atom/Text/Text"
-import Button from "../../Atom/Button/Button"
+import Media from "../../Atom/Media/Media"
 import "./content-block.css"
-import { TextStyles } from "../../enums"
-import { HeadingTypes, ButtonModifiers } from "@pnx-mixtape/ids-shape"
+import { HeadingStyles, LinkStyles } from "../../enums"
+import { AsTypes, HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  argTypes: {
+    children: { table: { disable: true } },
+    image: { table: { disable: true } },
+    headingLevel: { options: Object.values(HeadingTypes) },
+    headingModifier: { options: Object.values(HeadingStyles) },
+    as: { options: Object.values(AsTypes) },
+  },
   args: {
+    title: "Content block",
     children: (
       <>
-        <Heading as={HeadingTypes.TWO}>
-          Submit your documents in less than 5 minutes. Seriously.
-        </Heading>
-        <Text modifier={TextStyles.L}>
-          Please make sure you have your account details ready.
+        <Text>
+          A short description to help explain enough about the subject matter to
+          encourage visitors to learn more.
         </Text>
+        <Link modifier={LinkStyles.MORE} to="http://example.com">
+          Learn More
+        </Link>
       </>
     ),
-    actions: <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>,
+    image: <Media src="https://picsum.photos/id/56/558/418?grayscale" alt="" />,
   },
 }
 export default meta

package/src/Component/ContentBlock/ContentBlock.tsx

@@ -1,35 +1,43 @@
 import { JSX, PropsWithChildren, ReactNode } from "react"
 import classNames from "classnames"
-import { AsTags } from "../../enums"
+import { AsTags, HeadingStyles } from "../../enums"
+import Heading from "../../Atom/Heading/Heading"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
 
 type ContentBlockProps = PropsWithChildren & {
-  actions?: ReactNode
+  title: string
+  image?: ReactNode
+  headingLevel?: HeadingTypes
+  headingModifier?: HeadingStyles
   as?: AsTags
 }
 
 const ContentBlock = ({
+  title,
   children,
-  actions = null,
+  image = null,
+  headingLevel = HeadingTypes.THREE,
+  headingModifier = null,
   as = AsTags.DIV,
   ...props
 }: ContentBlockProps): JSX.Element => {
   const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
   return (
-    <Tag
-      className={classNames("content-block", "vertical-flow-flex")}
-      {...props}
-    >
-      {children}
-      {actions && (
-        <div
-          className={classNames(
-            "content-block__actions",
-            "horizontal-flow-flex",
-          )}
-        >
-          {actions}
-        </div>
+    <Tag className={classNames("mx-content-block")} {...props}>
+      {image && (
+        <figure className={classNames("mx-content-block__media", "stack")}>
+          <div className="mx-skeleton mx-skeleton--bg"></div>
+          {image}
+        </figure>
       )}
+      <div
+        className={classNames("mx-content-block__content", "mx-vertical-flow")}
+      >
+        <Heading as={headingLevel} modifier={headingModifier}>
+          {title}
+        </Heading>
+        {children}
+      </div>
     </Tag>
   )
 }

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

@@ -1,9 +1,141 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
-"
-< class="mx-section ">
-          
-  
-"
+<article class="mx-content-block">
+  <div class="mx-content-block__content mx-vertical-flow-flex">
+    <h3>
+      Content block title
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <ul class="mx-link-list">
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link one
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link two
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link three
+        </a>
+      </li>
+    </ul>
+    <a class="mx-link--more"
+       href="#"
+    >
+      <span>
+        Find out more
+      </span>
+    </a>
+  </div>
+</article>
+`;
+
+exports[`Component/ContentBlock WithIcon smoke-test 1`] = `
+<article class="mx-content-block">
+  <div class="mx-content-block__icon">
+    <span class="mx-icon mx-icon--heart-selected ">
+    </span>
+  </div>
+  <div class="mx-content-block__content mx-vertical-flow-flex">
+    <h3>
+      Content block title
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <ul class="mx-link-list">
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link one
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link two
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link three
+        </a>
+      </li>
+    </ul>
+    <a class="mx-link--more"
+       href="#"
+    >
+      <span>
+        Find out more
+      </span>
+    </a>
+  </div>
+</article>
+`;
+
+exports[`Component/ContentBlock WithImage smoke-test 1`] = `
+<article class="mx-content-block">
+  <figure class="mx-content-block__media">
+    <picture>
+      <img src="https://picsum.photos/id/56/558/418?grayscale"
+           alt="Blurry bubbles"
+      >
+    </picture>
+  </figure>
+  <div class="mx-content-block__content mx-vertical-flow-flex">
+    <h3>
+      Content block title
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <ul class="mx-link-list">
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link one
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link two
+        </a>
+      </li>
+      <li>
+        <a href="#"
+           class="mx-icon mx-icon--chevron-right"
+        >
+          Link three
+        </a>
+      </li>
+    </ul>
+    <a class="mx-link--more"
+       href="#"
+    >
+      <span>
+        Find out more
+      </span>
+    </a>
+  </div>
+</article>
 `;

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

@@ -1,21 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
-<div class="content-block vertical-flow-flex">
-  <h2 class
-      id="submit-your-documents"
-  >
-    Submit your documents in less than 5 minutes. Seriously.
-  </h2>
-  <p class="text--l">
-    Please make sure you have your account details ready.
-  </p>
-  <div class="content-block__actions horizontal-flow-flex">
-    <button class="button button--dark"
-            type="button"
+<div class="mx-content-block">
+  <figure class="mx-content-block__media stack">
+    <div class="mx-skeleton mx-skeleton--bg">
+    </div>
+    <img alt
+         src="https://picsum.photos/id/56/558/418?grayscale"
     >
-      Button
-    </button>
+  </figure>
+  <div class="mx-content-block__content mx-vertical-flow">
+    <h3 class
+        id="content-block"
+    >
+      Content block
+    </h3>
+    <p class>
+      A short description to help explain enough about the subject matter to encourage visitors to learn more.
+    </p>
+    <a href="http://example.com"
+       class="mx-link mx-link--more"
+    >
+      Learn More
+    </a>
   </div>
 </div>
 `;

package/src/Component/ContentBlock/content-block.css

@@ -3,19 +3,30 @@
  */
 
 @layer design-system.components {
-  .content-block {
-    inline-size: 100%;
-    margin-inline: auto;
-    text-align: center;
+  .mx-content-block {
+    display: grid;
+    gap: var(--content-block-gap, var(--gap));
 
-    & .content-block__actions {
-      padding-block-start: var(--spacing-m);
+    & .mx-link-list {
+      inline-size: 100%;
     }
   }
-}
 
-@layer design-system.utilities {
-  .vertical-flow-flex.content-block {
-    align-items: center;
+  .mx-content-block__media {
+    display: grid;
+    margin: auto;
+    position: relative;
+    inline-size: 100%;
+
+    & img {
+      aspect-ratio: var(--ratio);
+      border-radius: var(--border-radius);
+      object-fit: cover;
+      display: block;
+    }
+
+    & .mx-skeleton--bg {
+      aspect-ratio: var(--ratio);
+    }
   }
 }

package/src/Component/ContentBlock/content-block.twig

@@ -1,12 +1,22 @@
-<div class="content-block vertical-flow-flex">
-  {% block content %}
-  <h2>Submit your documents in less than 5 minutes. Seriously.</h2>
-  <p class="text--m">Please make sure you have your account details ready.</p>
-  {% endblock %}
-  {% block actions %}
-  <div class="content-block__actions flex">
-    <a href="#" class="button button--large button--primary">Let's get started</a>
-    <a href="#" class="button button--large button--text">Find out more</a>
+{% set classes = ['mx-content-block'] %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+
+<article{{ attributes }}>
+  {% if image %}
+    <figure class="mx-content-block__media">
+      {{ image }}
+    </figure>
+  {% endif %}
+  {% if icon %}
+    <div class="mx-content-block__icon">
+      {{ icon }}
+    </div>
+  {% endif %}
+  <div class="mx-content-block__content mx-vertical-flow-flex">
+    {{ title }}
+    {{ content }}
+    {{ linkList }}
+    {{ link }}
   </div>
-  {% endblock %}
-</div>
+</article>
+

package/src/Component/DropMenu/Components/DropMenuItem.tsx

@@ -4,7 +4,7 @@ import { useDropMenuContext } from "./DropMenuContext"
 export type DropMenuItemProps = ComponentPropsWithoutRef<"button"> & {
   label: string
   id: string
-  role?: "menuitemradio" | "menuitemcheckbox"
+  role?: "menuitemradio" | "menuitemcheckbox" | "tab"
   selected?: boolean
 }
 

package/src/Component/DropMenu/DropMenu.stories.ts

@@ -16,7 +16,7 @@ type DropMenuType = {
 }
 
 const meta: Meta<DropMenuType> = {
-  tags: ["autodocs"],
+  tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
     label: "Categories",