@pnx-mixtape/mxds 0.0.1

package/src/Atom/Blockquote/_blockquote.css

@@ -0,0 +1,7 @@
+@layer defaults {
+  blockquote {
+    padding-inline-start: var(--line-gap, var(--gap));
+    border-inline-start: var(--line-width, 6px) solid
+      var(--line-colour, var(--colour-border));
+  }
+}

package/src/Atom/Button/Button.stories.ts

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./button.twig"
+import "./button.css"
+import {
+  AlignmentTypes,
+  Button as ButtonType,
+  ButtonModifiers,
+  ButtonTypes,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+const meta: Meta<ButtonType> = {
+  title: "Atom/Button",
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: "Button",
+    as: ButtonTypes.BUTTON,
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(ButtonModifiers),
+      control: "multi-select",
+    },
+    as: { options: Object.values(ButtonTypes), control: "select" },
+    title: { control: "text" },
+    href: { control: "text" },
+    disabled: { control: "boolean" },
+    // @ts-expect-error The controls follow the shape
+    "icon.icon": { options: Object.values(Icons), control: "select" },
+    "icon.align": { options: Object.values(AlignmentTypes), control: "select" },
+    iconOnly: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<ButtonType>
+
+export const Button: Story = {
+  args: {},
+}
+
+export const Primary: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DARK],
+  },
+}
+
+export const Text: Story = {
+  args: {
+    modifiers: [ButtonModifiers.LIGHT],
+  },
+}
+
+export const Link: Story = {
+  args: {
+    href: "#",
+  },
+}
+
+export const IconButton: Story = {
+  args: {
+    icon: {
+      icon: Icons.ARROW_RIGHT,
+      align: AlignmentTypes.END,
+    },
+  },
+}

package/src/Atom/Button/Button.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Button"
+import { ButtonModifiers } from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    children: "Button",
+    modifiers: [],
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(ButtonModifiers),
+      control: "multi-select",
+    },
+    icon: { options: Object.values(Icons), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Component>
+
+export const Button: Story = {}
+
+export const Primary: Story = {
+  args: {
+    modifiers: [ButtonModifiers.DARK],
+  },
+}

package/src/Atom/Button/Button.tsx

@@ -0,0 +1,70 @@
+import { JSX, PropsWithChildren, ComponentPropsWithoutRef } from "react"
+import classNames from "classnames"
+import Link from "../Link/Link"
+import { ButtonModifiers } from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+export type ButtonProps = PropsWithChildren & {
+  modifiers?: ButtonModifiers[]
+  icon?: Icons
+  iconOnly?: boolean
+  className?: string
+}
+
+export type ButtonType = ComponentPropsWithoutRef<"button"> & ButtonProps
+export type ButtonLinkType = ComponentPropsWithoutRef<"a"> &
+  ButtonProps & {
+    to: string
+  }
+
+const Button = ({
+  children,
+  modifiers,
+  icon,
+  iconOnly,
+  className,
+  type = "button",
+  ...props
+}: ButtonType): JSX.Element => {
+  const classes = ["button", className]
+  const buttonMods = [...modifiers].map(modifier => `button--${modifier}`)
+  return (
+    <button
+      className={classNames([...classes, ...buttonMods], {
+        ["button--icon-only"]: iconOnly,
+        [`icon icon--${icon}`]: icon,
+      })}
+      type={type}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export const ButtonLink = ({
+  to,
+  children,
+  modifiers,
+  icon,
+  iconOnly,
+  className,
+  ...props
+}: ButtonLinkType): JSX.Element => {
+  const classes = ["button", className]
+  const buttonMods = [...modifiers].map(modifier => `button--${modifier}`)
+  return (
+    <Link
+      className={classNames([...classes, ...buttonMods], {
+        ["button--icon-only"]: iconOnly,
+        [`icon icon--${icon}`]: icon,
+      })}
+      to={to}
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
+
+export default Button

package/src/Atom/Button/README.md

@@ -0,0 +1,30 @@
+# Buttons
+
+### How to use
+
+**CSS**
+
+For everything;
+
+`@import '@pnx-mixtape/mxds/button.css';`
+
+For specifics;
+
+```css
+@import "@pnx-mixtape/mxds/src/Atom/_buttons.css";
+@import "@pnx-mixtape/mxds/src/Atom/_buttons-styles.css";
+
+.button--primary {
+  --border-radius: 0;
+
+  @media (--medium-up) {
+    border-width: 6px;
+  }
+}
+```
+
+**HTML**
+
+```html
+<a class="button button--dark" href="#">Primary button</a>
+```

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Button Button smoke-test 1`] = `
+<button class="button "
+        type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Base/Button IconButton smoke-test 1`] = `
+<button class="button icon icon--arrow-right  icon--end"
+        type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Base/Button Link smoke-test 1`] = `
+<a class="button "
+   href="#"
+>
+  Button
+</a>
+`;
+
+exports[`Base/Button Primary smoke-test 1`] = `
+<button class="button  button--dark"
+        type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Base/Button Text smoke-test 1`] = `
+<button class="button  button--light"
+        type="button"
+>
+  Button
+</button>
+`;

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Button Button smoke-test 1`] = `
+<button class="button"
+        type="button"
+>
+  Button
+</button>
+`;
+
+exports[`Base/Button Primary smoke-test 1`] = `
+<button class="button button--dark"
+        type="button"
+>
+  Button
+</button>
+`;

package/src/Atom/Button/_buttons-styles.css

@@ -0,0 +1,48 @@
+/**
+ * Buttons
+ */
+
+@layer elements {
+  .button--dark {
+    --button-line-colour: var(--colour-primary);
+    --background: var(--colour-primary);
+    --foreground: var(--colour-foreground-reverse);
+
+    &.button--outline {
+      --background: transparent;
+      --foreground: var(--colour-primary);
+    }
+  }
+
+  .button--light {
+    border: transparent;
+    color: var(--link-colour, var(--colour-primary));
+    text-decoration-line: underline;
+
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  .button--destructive {
+    --button-line-colour: var(--colour-error-foreground);
+    --background: var(--colour-error-foreground);
+    --foreground: var(--colour-foreground-reverse);
+
+    &.button--outline {
+      --background: transparent;
+      --foreground: var(--colour-error-foreground);
+    }
+  }
+
+  .button--white {
+    --button-line-colour: var(--colour-foreground-reverse);
+    --background: var(--colour-foreground-reverse);
+    --foreground: var(--colour-foreground);
+
+    &.button--outline {
+      --background: transparent;
+      --foreground: var(--colour-foreground-reverse);
+    }
+  }
+}

package/src/Atom/Button/_buttons.css

@@ -0,0 +1,71 @@
+/**
+ * Buttons
+ */
+
+@layer elements {
+  .button {
+    --outline-offset: 1px;
+    --outline-width: 4px;
+
+    display: inline-flex;
+    inline-size: fit-content;
+    gap: var(--button-gap, var(--spacing-s));
+    font-size: var(--button-font-size, var(--font-size));
+    font-weight: var(--font-weight-bold);
+    font-family: var(--font-family);
+    line-height: var(--line-height-ui);
+    border: var(--line-width, 2px) solid
+      var(--button-line-colour, var(--colour-border));
+    border-radius: var(--radius, var(--border-radius-l));
+    padding-block: var(--vertical-padding, var(--spacing-xxs));
+    padding-inline: var(--horizontal-padding, var(--spacing-m));
+    background-color: var(--background, var(--colour-background));
+    color: var(--foreground, var(--colour-foreground));
+    text-decoration-line: none;
+    transition:
+      0.2s color,
+      0.2s background-color,
+      0.2s border-color;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration-line: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  }
+
+  .button--full-width {
+    inline-size: 100%;
+    justify-content: center;
+  }
+
+  .button--large {
+    --vertical-padding: var(--spacing-s);
+    --horizontal-padding: var(--spacing-l);
+  }
+
+  .button--small {
+    --button-font-size: var(--font-size-s);
+    --vertical-padding: var(--spacing-xxxs);
+    --horizontal-padding: var(--spacing-s);
+  }
+
+  .button--icon-only {
+    inline-size: var(--spacing-xl);
+    block-size: var(--spacing-xl);
+    padding: 0;
+    border-radius: var(--border-radius-round);
+    overflow: hidden;
+    flex-wrap: wrap;
+
+    &::before {
+      inline-size: 100%;
+      block-size: 100%;
+      mask-size: var(--spacing-s);
+    }
+  }
+}

package/src/Atom/Button/button.css

@@ -0,0 +1,2 @@
+@import "_buttons.css";
+@import "_buttons-styles.css";

package/src/Atom/Button/button.twig

@@ -0,0 +1,23 @@
+{% set baseClass = 'button' %}
+{% set classes = [
+  baseClass,
+  icon ? "icon icon--"~icon.icon : null,
+  iconOnly ? baseClass~"--icon-only" : null,
+  icon.align ? "icon--"~icon.align : null
+] %}
+{% for modifier in modifiers %}
+  {% set classes = classes|merge([baseClass~"--"~modifier]) %}
+{% endfor %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+{% if href %}
+  <a{{ attributes}} href="{{ href }}">
+   {{ title }}
+  </a>
+{% elseif as == 'input' %}
+  <input{{ attributes}} type="button" value="{{ title }}"{% if disabled %} disabled{% endif %}>
+{% else %}
+  <button{{ attributes}} type="{{ as|default("button") }}"{% if disabled %} disabled{% endif %}>
+    {{ title }}
+  </button>
+{% endif %}

package/src/Atom/DefinitionList/DefinitionList.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component, { DefinitionListItem } from "./DefinitionList"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Definition List",
+  component: Component,
+  args: {
+    children: (
+      <>
+        <DefinitionListItem title="Item #1">
+          Data for item #1
+        </DefinitionListItem>
+        <DefinitionListItem title="Item #2">
+          Data for item #2
+        </DefinitionListItem>
+        <DefinitionListItem title="Item #3">
+          Data for item #3
+        </DefinitionListItem>
+      </>
+    ),
+  },
+}
+
+export default meta
+export const DefinitionList: StoryObj<typeof Component> = {}

package/src/Atom/DefinitionList/DefinitionList.tsx

@@ -0,0 +1,27 @@
+import { JSX, ComponentPropsWithoutRef, PropsWithChildren } from "react"
+
+type DefinitionListProps = ComponentPropsWithoutRef<"dl"> & PropsWithChildren
+
+const DefinitionList = ({
+  children,
+  ...props
+}: DefinitionListProps): JSX.Element => <dl {...props}>{children}</dl>
+
+type DefinitionListItemProps = ComponentPropsWithoutRef<"div"> &
+  PropsWithChildren & {
+    title: string
+  }
+
+const DefinitionListItem = ({
+  title,
+  children,
+  ...props
+}: DefinitionListItemProps): JSX.Element => (
+  <div {...props}>
+    <dt>{title}</dt>
+    <dd>{children}</dd>
+  </div>
+)
+
+export default DefinitionList
+export { DefinitionListItem }

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Definition List DefinitionList smoke-test 1`] = `
+<dl>
+  <div>
+    <dt>
+      Item #1
+    </dt>
+    <dd>
+      Data for item #1
+    </dd>
+  </div>
+  <div>
+    <dt>
+      Item #2
+    </dt>
+    <dd>
+      Data for item #2
+    </dd>
+  </div>
+  <div>
+    <dt>
+      Item #3
+    </dt>
+    <dd>
+      Data for item #3
+    </dd>
+  </div>
+</dl>
+`;

package/src/Atom/Heading/Heading.stories.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./heading.twig"
+import "../_base.css"
+import { HeadingStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    title: "Heading",
+  },
+  argTypes: {
+    as: { options: Object.values(HeadingTypes), control: "select" },
+    modifier: { options: Object.values(HeadingStyles), control: "select" },
+    title: { control: "text" },
+    excluded: { control: "boolean" },
+    srOnly: { control: "boolean" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Headings: Story = {}

package/src/Atom/Heading/Heading.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Heading"
+import { HeadingLevels, HeadingStyles } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Typography/Heading",
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    as: HeadingLevels.TWO,
+    children: "Heading",
+  },
+  argTypes: {
+    as: { options: Object.values(HeadingLevels) },
+    modifier: { options: Object.values(HeadingStyles) },
+  },
+}
+export default meta
+export const Heading: StoryObj<typeof Component> = {}

package/src/Atom/Heading/Heading.tsx

@@ -0,0 +1,44 @@
+import { PropsWithChildren, JSX, useRef, useState, useEffect } from "react"
+import classNames from "classnames"
+import { makeAnchor } from "../../Utility/utilities"
+import { HeadingStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+export type HeadingProps = PropsWithChildren & {
+  as?: HeadingTypes
+  modifier?: HeadingStyles
+  className?: string
+  id?: string
+}
+
+const Heading = ({
+  children,
+  as = HeadingTypes.TWO,
+  modifier,
+  className,
+  id,
+  ...props
+}: HeadingProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+  const ref = useRef<HTMLHeadingElement>(null)
+  const [anchor, setAnchor] = useState(id)
+
+  useEffect(() => {
+    if (anchor || !ref.current) return
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    setAnchor(makeAnchor(ref.current?.textContent))
+  }, [anchor, ref])
+
+  return (
+    <Tag
+      className={classNames(modifier, className)}
+      id={anchor}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+export default Heading

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

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

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Typography/Heading Heading smoke-test 1`] = `
+<h2 class
+    id="heading"
+>
+  Heading
+</h2>
+`;