@pnx-mixtape/mxds 0.0.1

package/src/Atom/Table/table.twig

@@ -0,0 +1,30 @@
+<table class="{{ modifier_class }}{% if modifier %} table--{{ modifier }}{% endif %}">
+  <thead>
+    <tr>
+      <th>Type</th>
+      <th>Desktop</th>
+      <th>Tablet</th>
+      <th>Mobile</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>Columns</th>
+      <td>12</td>
+      <td>12</td>
+      <td>4</td>
+    </tr>
+    <tr>
+      <th>Gutter</th>
+      <td>32px</td>
+      <td>16px</td>
+      <td>16px</td>
+    </tr>
+    <tr>
+      <th>Max-width</th>
+      <td>1180px</td>
+      <td>1024px</td>
+      <td>~500px</td>
+    </tr>
+  </tbody>
+</table>

package/src/Atom/Text/Text.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Text"
+import { TextStyles, TextTags } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Typography/Text",
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    tag: TextTags.P,
+    children: "Text",
+  },
+  argTypes: {
+    modifier: { options: Object.values(TextStyles) },
+    tag: { options: Object.values(TextTags) },
+  },
+}
+
+export default meta
+export const Text: StoryObj<typeof meta> = {}

package/src/Atom/Text/Text.tsx

@@ -0,0 +1,26 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { TextStyles, TextTags } from "../../enums"
+
+type TextProps = PropsWithChildren & {
+  tag?: TextTags
+  modifier?: TextStyles
+  className?: string
+}
+
+const Text = ({
+  children,
+  tag = TextTags.P,
+  modifier = null,
+  className = null,
+  ...props
+}: TextProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${tag}` as unknown as JSX.ElementType
+  return (
+    <Tag className={classNames(modifier, className)} {...props}>
+      {children}
+    </Tag>
+  )
+}
+
+export default Text

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./text-style.twig"
+import ExampleComponent from "./text-styles-example.twig"
+import "../_base.css"
+import { TextStyles } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Typography/Text Sizes",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier: { options: Object.values(TextStyles), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TextSizes: Story = {
+  args: {},
+}
+
+export const Example: Story = {
+  render: args => `${ExampleComponent(args)}`,
+}

package/src/Atom/Text/__snapshots__/Text.stories.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Typography/Text Text smoke-test 1`] = `
+<p class>
+  Text
+</p>
+`;

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

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Typography/Text Sizes Example smoke-test 1`] = `
+<div class="vertical-flow">
+  <p class="text--embellished-headline">
+    Embelished headline: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--section-headline">
+    Section headline: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <h2 class="headline">
+    Headline: Lorem ipsum dolor sit amet consectetur
+  </h2>
+  <p class="heading--xxl">
+    Heading xxl: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="heading--xl">
+    Heading xl: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="heading--l">
+    Heading l: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="heading--m">
+    Heading m: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="heading--s">
+    Heading s: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="heading--xs">
+    Heading xs: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--xxxl">
+    Text xxxl: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--xxl">
+    Text xxl: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--xl">
+    Text xl: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--l">
+    Text l: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--m">
+    Text m: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p>
+    Text: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--s">
+    Text s: Lorem ipsum dolor sit amet consectetur
+  </p>
+  <p class="text--xs">
+    Text xs: Lorem ipsum dolor sit amet consectetur
+  </p>
+</div>
+`;
+
+exports[`Base/Typography/Text Sizes TextSizes smoke-test 1`] = `
+<p class>
+  In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
+</p>
+`;

package/src/Atom/Text/_text-align.css

@@ -0,0 +1,13 @@
+@layer utlities {
+  .text--left {
+    text-align: start;
+  }
+
+  .text--right {
+    text-align: end;
+  }
+
+  .text--center {
+    text-align: center;
+  }
+}

package/src/Atom/Text/_text-sizes.css

@@ -0,0 +1,117 @@
+@layer utlities {
+  :is(
+      .text--section-headline,
+      .text--embellished-headline,
+      .text--lede,
+      .text--xs,
+      .text--s,
+      .text--m,
+      .text--l,
+      .text--xl,
+      .text--xxl,
+      .text--xxxl,
+      .text--fluid
+    ) {
+    font-size: var(--font-size);
+  }
+
+  @supports (font-size: 1cqi) {
+    :is(
+        .text--section-headline,
+        .text--lede,
+        .text--m,
+        .text--l,
+        .text--xl,
+        .text--xxl,
+        .text--xxxl,
+        .text--fluid
+      ) {
+      --font-min: calc(
+        var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3)
+      );
+
+      font-size: clamp(
+        max(var(--base-font-size), var(--font-min)),
+        var(--font-min) + 1cqi,
+        var(--font-size)
+      );
+    }
+  }
+
+  .text--section-headline {
+    --font-size: var(--font-size-m);
+
+    font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    font-family: var(--heading-font-family, var(--font-family));
+    line-height: var(--line-height-h);
+    color: var(--foreground, var(--colour-foreground-alt));
+    margin-block-start: 0;
+    text-wrap: balance;
+
+    & + :is(h2, h3) {
+      margin-block-start: var(--spacing-xxxxs) !important;
+    }
+  }
+
+  .text--embellished-headline {
+    --font-size: var(--font-size-s);
+
+    text-transform: uppercase;
+    position: relative;
+    font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    font-family: var(--heading-font-family, var(--font-family));
+    line-height: var(--line-height-h);
+    margin-block: 0 var(--spacing-l);
+    text-wrap: balance;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      inline-size: var(--spacing-xxxl);
+      block-size: 3px;
+      background-color: var(--colour-primary);
+      inset-block-start: var(--gap);
+    }
+  }
+
+  .text--lede {
+    --font-size: var(--font-size-sm);
+  }
+
+  .text--xxxl {
+    --font-size: var(--font-size-xxxl);
+
+    line-height: var(--line-height-h);
+  }
+
+  .text--xxl {
+    --font-size: var(--font-size-xxl);
+
+    line-height: var(--line-height-h);
+  }
+
+  .text--xl {
+    --font-size: var(--font-size-xl);
+
+    line-height: var(--line-height-h);
+  }
+
+  .text--l {
+    --font-size: var(--font-size-l);
+
+    line-height: var(--line-height-h);
+  }
+
+  .text--m {
+    --font-size: var(--font-size-m);
+  }
+
+  .text--s {
+    --font-size: var(--font-size-s);
+  }
+
+  .text--xs {
+    --font-size: var(--font-size-xs);
+  }
+}

package/src/Atom/Text/text-alignment.twig

@@ -0,0 +1,5 @@
+<p class="text--left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam ex, ultricies vel commodo nec, porta vitae eros. Ut lacinia nunc augue. Duis eu scelerisque sapien.</p>
+
+<p class="text--right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam ex, ultricies vel commodo nec, porta vitae eros. Ut lacinia nunc augue. Duis eu scelerisque sapien.</p>
+
+<p class="text--center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam ex, ultricies vel commodo nec, porta vitae eros. Ut lacinia nunc augue. Duis eu scelerisque sapien.</p>

package/src/Atom/Text/text-style.twig

@@ -0,0 +1 @@
+<p class="{{ modifier }}">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content (also called greeking). Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>

package/src/Atom/Text/text-styles-example.twig

@@ -0,0 +1,35 @@
+<div class="vertical-flow">
+<p class="text--embellished-headline">Embelished headline: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--section-headline">Section headline: Lorem ipsum dolor sit amet consectetur</p>
+
+<h2 class="headline">Headline: Lorem ipsum dolor sit amet consectetur</h2>
+
+<p class="heading--xxl">Heading xxl: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="heading--xl">Heading xl: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="heading--l">Heading l: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="heading--m">Heading m: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="heading--s">Heading s: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="heading--xs">Heading xs: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--xxxl">Text xxxl: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--xxl">Text xxl: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--xl">Text xl: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--l">Text l: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--m">Text m: Lorem ipsum dolor sit amet consectetur</p>
+
+<p>Text: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--s">Text s: Lorem ipsum dolor sit amet consectetur</p>
+
+<p class="text--xs">Text xs: Lorem ipsum dolor sit amet consectetur</p>
+</div>

package/src/Atom/Video/Video.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./video.twig"
+import "../_base.css"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Video",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Video: Story = {
+  args: {},
+}

package/src/Atom/Video/Video.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable @eslint-react/dom/no-missing-iframe-sandbox */
+import { JSX, ComponentPropsWithoutRef } from "react"
+import classNames from "classnames"
+
+type VideoProps = ComponentPropsWithoutRef<"iframe">
+
+const Video = ({
+  title,
+  className = null,
+  ...props
+}: VideoProps): JSX.Element => (
+  <figure className={classNames("video", className)}>
+    <iframe title={title} {...props} />
+  </figure>
+)
+
+export default Video

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Video Video smoke-test 1`] = `
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</p>
+<figure class="video">
+  <iframe title="Some video"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/NpEaa2P7qZI"
+          frameborder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+  >
+  </iframe>
+</figure>
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</p>
+`;

package/src/Atom/Video/_video.css

@@ -0,0 +1,10 @@
+@layer defaults {
+  .video {
+    &,
+    & :is(embed, object, iframe) {
+      aspect-ratio: 16 / 9;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+  }
+}

package/src/Atom/Video/video.twig

@@ -0,0 +1,5 @@
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+<figure class="video">
+  <iframe title="Some video" width="560" height="315" src="https://www.youtube.com/embed/NpEaa2P7qZI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</figure>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

package/src/Atom/_animated.css

@@ -0,0 +1,65 @@
+@layer utilities {
+  .animated--fade-in {
+    animation: fade-in 0.5s var(--ease);
+  }
+
+  .animated--fade-out {
+    animation: fade-out 0.5s var(--ease);
+  }
+
+  .animated--spin::before {
+    animation: spin 2s linear infinite;
+  }
+
+  .animated--scale-up {
+    animation: scale-up 0.5s var(--ease);
+  }
+
+  .animated--scale-down {
+    animation: scale-down 0.5s var(--ease);
+  }
+}
+
+@keyframes fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes scale-up {
+  to {
+    transform: scale(1.25);
+  }
+}
+
+@keyframes scale-down {
+  to {
+    transform: scale(0.75);
+  }
+}
+
+@media (--reduce-motion) {
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
+}

package/src/Atom/_base.css

@@ -0,0 +1,62 @@
+/**
+ * Atom
+ */
+
+@import "_generic.css";
+@import "_flow.css";
+
+/**
+ * Typography
+ */
+
+@import "./Heading/_headings.css";
+@import "./Blockquote/_blockquote.css";
+@import "_hr.css";
+
+/**
+ * Links
+ */
+
+@import "./Link/_links.css";
+
+/**
+ * Text Sizes
+ */
+
+@import "./Text/_text-sizes.css";
+@import "./Text/_text-align.css";
+
+/**
+ * Spacing
+ */
+
+@import "./Spacing/_spacing.css";
+
+/**
+ * Images
+ */
+
+@import "./Image/_image.css";
+@import "./Media/_media.css";
+
+/**
+ * Video
+ */
+
+@import "./Video/_video.css";
+
+/**
+ * Table
+ */
+
+/**
+ * Table Responsive
+ */
+
+@import "./Table/_table.css";
+
+/**
+ * Print Stylesheet
+ */
+
+@import "_print.css";

package/src/Atom/_flow-legacy.css

@@ -0,0 +1,48 @@
+@layer defaults {
+  * + h1 {
+    margin-block-start: var(--spacing-m);
+  }
+
+  * + h2 {
+    margin-block-start: var(--spacing-xl);
+  }
+
+  * + h3 {
+    margin-block-start: var(--spacing-l);
+  }
+
+  * + h4 {
+    margin-block-start: var(--spacing-l);
+  }
+
+  * + p {
+    margin-block-start: var(--spacing-m);
+
+    & + a {
+      margin-block-start: var(--spacing-s);
+    }
+
+    & + img {
+      margin-block-start: var(--spacing-m);
+    }
+  }
+
+  * + h5,
+  * + h6,
+  * + hr,
+  * + blockquote,
+  * + figure,
+  * + table,
+  * + .video {
+    margin-block-start: var(--spacing-m);
+  }
+
+  * + ul,
+  * + ol {
+    margin-block-start: var(--spacing-m);
+
+    & + a {
+      margin-block-start: var(--spacing-s);
+    }
+  }
+}

package/src/Atom/_flow.css

@@ -0,0 +1,53 @@
+@layer utilities {
+  .vertical-flow {
+    /* Default vertical flow. */
+
+    & > :where(:not(:first-child)) {
+      margin-block-start: var(--flow-gap, var(--gap));
+    }
+
+    & > .vertical-flow__collapse {
+      margin-block-start: 0;
+    }
+
+    /* Rich text vertical flow is enhanced */
+    &.rich-text > .text--lede {
+      --flow-gap: var(--gap-xl);
+    }
+  }
+
+  .vertical-flow-flex {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--flow-gap, var(--gap));
+
+    & > * {
+      margin: 0;
+
+      &.container {
+        inline-size: 100%;
+      }
+    }
+
+    &:is(ul, ol) {
+      padding-inline-start: unset;
+      list-style: none;
+    }
+  }
+
+  .horizontal-flow-flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--flow-gap, var(--gap));
+
+    & > * {
+      margin: 0;
+    }
+
+    &:is(ul, ol) {
+      padding-inline-start: unset;
+      list-style: none;
+    }
+  }
+}