@pnx-mixtape/mxds 0.0.1

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

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Card Card smoke-test 1`] = `
+<div class="container">
+  <article class="card">
+    <figure class="card__media stack">
+      <div class="skeleton skeleton--bg">
+      </div>
+      <img alt
+           src="https://picsum.photos/id/56/558/418?grayscale"
+      >
+    </figure>
+    <div class="card__content vertical-flow">
+      <h3 class
+          id="key-feature-or-sectio"
+      >
+        Key feature or Section Name
+      </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="link link--more"
+      >
+        Learn More
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card Linked smoke-test 1`] = `
+<div class="container">
+  <article class="card card--clickable">
+    <figure class="card__media stack">
+      <div class="skeleton skeleton--bg">
+      </div>
+      <img alt
+           src="https://picsum.photos/id/56/558/418?grayscale"
+      >
+    </figure>
+    <div class="card__content vertical-flow">
+      <h3 class
+          id="key-feature-or-sectio"
+      >
+        Key feature or Section Name
+      </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="link link--more"
+      >
+        Learn More
+      </a>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Components/Card Right smoke-test 1`] = `
+<div class="container">
+  <article class="card card--right">
+    <figure class="card__media stack">
+      <div class="skeleton skeleton--bg">
+      </div>
+      <img alt
+           src="https://picsum.photos/id/56/558/418?grayscale"
+      >
+    </figure>
+    <div class="card__content vertical-flow">
+      <h2 class
+          id="key-feature-or-sectio"
+      >
+        Key feature or Section Name
+      </h2>
+      <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="link link--more"
+      >
+        Learn More
+      </a>
+    </div>
+  </article>
+</div>
+`;

package/src/Component/Card/__snapshots__/CardGrid.stories.ts.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Card/CardGrid CardGrid smoke-test 1`] = `
+<section class="section section--l">
+  <div class="grid grid--md-3-cols">
+    <div class="container">
+      <article class="card">
+        <figure class="card__media stack">
+          <div class="skeleton skeleton--bg">
+          </div>
+          <img loading="lazy"
+               src="https://picsum.photos/id/56/558/418?grayscale"
+               width="558"
+               height="418"
+               alt
+          >
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          <h3>
+            Card Title
+          </h3>
+          <p class="text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <a href="#"
+             class="link--more"
+          >
+            Learn more
+          </a>
+        </div>
+      </article>
+    </div>
+    <div class="container">
+      <article class="card">
+        <figure class="card__media stack">
+          <div class="skeleton skeleton--bg">
+          </div>
+          <img loading="lazy"
+               src="https://picsum.photos/id/56/558/418?grayscale"
+               width="558"
+               height="418"
+               alt
+          >
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          <h3>
+            Card Title
+          </h3>
+          <p class="text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <a href="#"
+             class="link--more"
+          >
+            Learn more
+          </a>
+        </div>
+      </article>
+    </div>
+    <div class="container">
+      <article class="card">
+        <figure class="card__media stack">
+          <div class="skeleton skeleton--bg">
+          </div>
+          <img loading="lazy"
+               src="https://picsum.photos/id/56/558/418?grayscale"
+               width="558"
+               height="418"
+               alt
+          >
+        </figure>
+        <div class="card__content vertical-flow-flex">
+          <h3>
+            Card Title
+          </h3>
+          <p class="text--lede">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <a href="#"
+             class="link--more"
+          >
+            Learn more
+          </a>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+`;

package/src/Component/Card/card-grid.twig

@@ -0,0 +1,10 @@
+{% embed '@mixtape/Layout/Section/section.twig' with {
+  modifier_class: 'section--l',
+  layout_class: 'grid grid--md-3-cols'
+} %}
+  {% block content %}
+    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
+    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
+    {% include '@mixtape/Component/Card/twig/old-card.twig' %}
+  {% endblock %}
+{% endembed %}

package/src/Component/Card/card.css

@@ -0,0 +1,128 @@
+/**
+ * Content Card
+ */
+
+@layer components {
+  .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;
+
+      & .card__content {
+        justify-content: center;
+      }
+    }
+
+    @container (min-width: token("breakpoint.l")) {
+      --card-gap: 6rem;
+    }
+
+    &.card--right {
+      @container (min-width: token("breakpoint.contentCard")) {
+        grid-template-areas: "content media";
+      }
+    }
+
+    &[class*="background--"] {
+      border-radius: var(--border-radius);
+
+      & .card__content {
+        padding-inline: var(--spacing-s);
+        padding-block-end: var(--spacing-s);
+
+        @container (min-width: token("breakpoint.contentCard")) {
+          padding-block-start: var(--spacing-s);
+          padding-inline-start: 0;
+        }
+      }
+
+      &.card--right {
+        @container (min-width: token("breakpoint.contentCard")) {
+          padding-inline: var(--spacing-s) 0;
+        }
+      }
+    }
+
+    & .card__content {
+      grid-area: content;
+    }
+
+    & :is(.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;
+      }
+
+      & .skeleton--bg {
+        aspect-ratio: var(--ratio);
+      }
+    }
+
+    & .link-list {
+      inline-size: 100%;
+    }
+  }
+}
+
+/**
+ * Content Card Grid
+ */
+
+@layer components {
+  .grid:has(> *:nth-child(2):last-child) > :is(.card, .container:has(.card)) {
+    inline-size: 100%;
+    max-inline-size: var(--max-card-width, 37ch);
+    margin-inline: auto;
+  }
+}
+
+/**
+ * Content Card Linked
+ */
+
+@layer components {
+  a[href].card {
+    &:hover {
+      color: inherit;
+    }
+  }
+
+  .card--clickable {
+    position: relative;
+
+    &:focus-within {
+      border-radius: var(--border-radius);
+      outline: var(--outline-width) var(--outline-style) var(--outline-color);
+      outline-offset: 2px;
+    }
+
+    & :is(a[href], button) {
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    & a::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  }
+}

package/src/Component/Card/card.twig

@@ -0,0 +1,45 @@
+{% set baseClass = 'card' %}
+{% 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' %}
+  {% endif %}
+{% endfor %}
+{% set classes = [
+  baseClass,
+  background ? background : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<div class="container">
+<article{{ attributes }}>
+  {% if image %}
+  <figure class="card__media">
+    {{ image }}
+  </figure>
+  {% endif %}
+  {% if icon %}
+    <div class="card__icon">
+      {{ icon }}
+    </div>
+  {% endif %}
+  <div class="card__content vertical-flow-flex">
+    {% if date %}
+      <div class="text--small">{{ date }}</div>
+    {% endif %}
+    {{ title }}
+    {{ tags }}
+    {% if content %}
+      <div class="text--lede">{{ content }}</div>
+    {% endif %}
+    {{ linkList }}
+    {{ link }}
+  </div>
+</article>
+</div>

package/src/Component/Card/twig/old-card.twig

@@ -0,0 +1,17 @@
+<div class="container">
+  <article class="card{% if clickable %} card--clickable{% endif %}{% if right %} card--right{% endif %}">
+    <figure class="card__media stack">
+      <div class="skeleton skeleton--bg"></div>
+      {% block media %}
+        <img loading="lazy" src="{{ image|default('https://picsum.photos/id/56/558/418?grayscale')}}" width="{{ image_width|default('558') }}" height="{{ image_height|default('418') }}" alt="{{ image_alt }}">
+      {% endblock %}
+    </figure>
+    <div class="card__content vertical-flow-flex">
+      {% block content %}
+      <{{ heading_level|default('h3') }}>{{ title|default('Card Title')}}</{{ heading_level|default('h3') }}>
+      <p class="text--lede">{{ content|default('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}}</p>
+      <a href="{{ link|default('#') }}" class="link--more">{{ link_text|default('Learn more')}}</a>
+      {% endblock %}
+    </div>
+  </article>
+</div>

package/src/Component/Card/twig/story-card.twig

@@ -0,0 +1,29 @@
+{% extends "../card.twig" %}
+{% set title %}
+  {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: title.as } only %}
+{% endset %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title, more: true } only %}
+  {% endset %}
+{% endif %}
+{% if linkList %}
+  {% set linkList %}
+    {% include '@mixtape/Component/LinkList/link-list.twig' with { items: linkList.items } only %}
+  {% endset %}
+{% endif %}
+{% if tags %}
+  {% set tags %}
+    {% include '@mixtape/Component/Tag/tags.twig' with { items: tags.items } only %}
+  {% endset %}
+{% endif %}
+{% if image %}
+  {% set image %}
+    {% include '@mixtape/Atom/Image/image.twig' with { src: image.src } only %}
+  {% endset %}
+{% endif %}
+{% if icon %}
+  {% set icon %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: icon.icon } only %}
+  {% endset %}
+{% endif %}

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/content-block-example.twig"
+import "./content-block.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const ContentBlock: Story = {
+  args: {},
+}

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

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./ContentBlock"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import Button from "../../Atom/Button/Button"
+import "./content-block.css"
+import { TextStyles } from "../../enums"
+import { HeadingTypes, ButtonModifiers } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    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>
+      </>
+    ),
+    actions: <Button modifiers={[ButtonModifiers.DARK]}>Button</Button>,
+  },
+}
+export default meta
+type Story = StoryObj<typeof Component>
+
+export const ContentBlock: Story = {}

package/src/Component/ContentBlock/ContentBlock.tsx

@@ -0,0 +1,37 @@
+import { JSX, PropsWithChildren, ReactNode } from "react"
+import classNames from "classnames"
+import { AsTags } from "../../enums"
+
+type ContentBlockProps = PropsWithChildren & {
+  actions?: ReactNode
+  as?: AsTags
+}
+
+const ContentBlock = ({
+  children,
+  actions = 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>
+  )
+}
+
+export default ContentBlock

package/src/Component/ContentBlock/README.md

@@ -0,0 +1,21 @@
+# Content block
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/content-block.css';`
+
+**HTML**
+
+```html
+<div class="content-block">
+  <h2>Title</h2>
+  <p>Body content</p>
+  <div class="content-block__actions">
+    <a href="#" class="button button--large button--primary"
+      >Let's get started</a
+    >
+  </div>
+</div>
+```

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/ContentBlock ContentBlock smoke-test 1`] = `
+<section class="section section--l section--narrow">
+  <div class="content-block vertical-flow-flex">
+    <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>
+    <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>
+    </div>
+  </div>
+</section>
+`;

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/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"
+    >
+      Button
+    </button>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,21 @@
+/**
+ * Content block
+ */
+
+@layer components {
+  .content-block {
+    inline-size: 100%;
+    margin-inline: auto;
+    text-align: center;
+
+    & .content-block__actions {
+      padding-block-start: var(--spacing-m);
+    }
+  }
+}
+
+@layer utilities {
+  .vertical-flow-flex.content-block {
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,12 @@
+<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>
+  </div>
+  {% endblock %}
+</div>

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

@@ -0,0 +1,7 @@
+{% embed '@mixtape/Layout/Section/section.twig' with {
+  modifier_class: 'section--l section--narrow',
+} %}
+  {% block content %}
+    {% include '@mixtape/Component/ContentBlock/content-block.twig' %}
+  {% endblock %}
+{% endembed %}

package/src/Component/Dialog/Dialog.stories.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./dialog.twig"
+import "./dialog.css"
+
+type DialogType = {
+  fullscreen?: boolean
+}
+
+const meta: Meta<DialogType> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    fullscreen: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<DialogType>
+
+export const Dialog: Story = {
+  args: {},
+}
+
+export const Fullscreen: Story = {
+  args: {
+    fullscreen: true,
+  },
+}

package/src/Component/Dialog/Dialog.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Dialog"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import "./dialog.css"
+import { DialogStyles, HeadingLevels } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    open: true,
+    children: (
+      <>
+        <Heading level={HeadingLevels.THREE}>
+          Thanks, you're almost done!
+        </Heading>
+        <Text>
+          To finish the process, you will need to upload a few more documents.
+          Please have your confirmation email ready before starting. Are you
+          ready?
+        </Text>
+      </>
+    ),
+    actions: (
+      <form>
+        <div className="form__actions">
+          <button className="button button--primary" type="button">
+            Let's get started
+          </button>
+          <button className="button" formMethod="dialog" type="button">
+            Cancel
+          </button>
+        </div>
+      </form>
+    ),
+  },
+  argTypes: {
+    modifier: { options: Object.values(DialogStyles), control: "radio" },
+  },
+}
+
+export default meta
+
+export const Dialog: StoryObj<typeof Component> = {}