@pnx-mixtape/mxds 0.0.1

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

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

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Tag Tag smoke-test 1`] = `
+<div class="tag">
+  Tag name
+</div>
+`;

package/src/Component/Tag/tag.css

@@ -0,0 +1,57 @@
+/**
+ * Tag
+ */
+
+@layer elements {
+  .tag {
+    display: inline-block;
+    inline-size: fit-content;
+    padding-inline: var(--horizontal-padding, var(--spacing-xxxs));
+    background: var(
+      --tag-background,
+      var(--background, var(--colour-background))
+    );
+    color: var(--tag-foreground, var(--foreground, var(--colour-foreground)));
+    text-transform: uppercase;
+    font-weight: var(--font-weight, var(--font-weight-bold));
+    font-size: var(--tag-font-size, var(--font-size-xs));
+    line-height: var(--line-height, 2);
+    border-radius: var(--border-radius);
+    border: var(--line-width, 1px) solid var(--line-colour, currentcolor);
+    text-decoration: none;
+    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));
+    }
+
+    & input {
+      position: absolute;
+      inset-block-start: -100px;
+      inset-inline-start: -100px;
+    }
+
+    & label {
+      font-size: inherit;
+      color: inherit;
+      margin: 0;
+    }
+
+    &:is(a:hover, :has(input:checked)) {
+      --tag-foreground: var(--link-colour, var(--colour-primary));
+    }
+  }
+
+  .tags {
+    padding-inline: 0;
+    list-style: none;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: var(--tags-gap, var(--spacing-s));
+  }
+}

package/src/Component/Tag/tags.twig

@@ -0,0 +1,23 @@
+{% set classes = ['tag'] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<ul class="tags">
+  {% for item in items %}
+    <li>
+        {% if type == "link" %}
+            <a{{ attributes}} href="{{ item.href }}">{{ item.title }}</a>
+        {% elseif type == "checkbox" %}
+          <div {{ attributes }}>
+            <input type="checkbox"
+                   id="{{ item.id }}"
+                   name="{{ item.name }}"
+                   value="{{ item.value }}"
+                {% if item.checked %} checked{% endif %}>
+            <label for="{{ item.id }}">{{ item.label }}</label>
+          </div>
+        {% else %}
+            <span{{ attributes }}>{{ item }}</span>
+        {% endif %}
+    </li>
+  {% endfor %}
+</ul>

package/src/Component/Tile/README.md

@@ -0,0 +1,3 @@
+# Tiles [deprecated]
+
+@todo merge with card.

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

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/tiles.twig"
+import "./tiles.css"
+import { TileSizes } from "../../enums"
+
+type TilesArgs = {
+  size?: TileSizes
+}
+
+const meta: Meta<TilesArgs> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    size: { options: Object.values(TileSizes), control: "radio" },
+  },
+}
+
+export default meta
+type Story = StoryObj<TilesArgs>
+
+export const Tile: Story = {
+  args: {},
+}

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

@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Tile"
+import "./tiles.css"
+import { AsTags, HeadingLevels, TileSizes } from "../../enums"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    size: { options: Object.values(TileSizes), control: "radio" },
+    headingLevel: { options: Object.values(HeadingLevels), control: "select" },
+    as: { options: Object.values(AsTags), control: "select" },
+  },
+  args: {
+    title: "Tile title",
+    to: "http://example.com",
+    linkText: "Tile link",
+    size: TileSizes.SMALL,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Tile: Story = {}
+export const WithContent: Story = {
+  args: {
+    children: <p>Tile with some content</p>,
+  },
+}

package/src/Component/Tile/Tile.tsx

@@ -0,0 +1,40 @@
+import { JSX, 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"
+
+type TileProps = PropsWithChildren & {
+  title: string
+  to?: string
+  linkText?: string
+  headingLevel?: HeadingTypes
+  size?: TileSizes
+  as?: AsTags
+}
+
+const Tile = ({
+  title,
+  to,
+  linkText,
+  headingLevel = HeadingTypes.THREE,
+  children,
+  size = TileSizes.MEDIUM,
+  as = AsTags.DIV,
+}: 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}>
+          {title}
+        </Heading>
+        {children}
+      </div>
+      {to && <Link to={to}>{linkText}</Link>}
+    </Tag>
+  )
+}
+
+export default Tile

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Tile Tile smoke-test 1`] = `
+<div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+</div>
+<div class="grid grid--md-3-cols">
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+    </div>
+    <a href="#">
+      Tile link
+    </a>
+  </div>
+  <div class="tile stack ">
+    <div class="tile__content vertical-flow-flex">
+      <h3 class="text--m">
+        Tile title
+      </h3>
+      <p>
+        Tile with some content
+      </p>
+      <a href="#"
+         class="link align--bottom"
+      >
+        read more
+      </a>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Tile Tile smoke-test 1`] = `
+<div class="tile tile--small stack">
+  <div class="tile__content vertical-flow-flex">
+    <h3 class="text--l"
+        id="tile-title"
+    >
+      Tile title
+    </h3>
+  </div>
+  <a href="http://example.com"
+     class="link"
+  >
+    Tile link
+  </a>
+</div>
+`;
+
+exports[`Components/Tile WithContent smoke-test 1`] = `
+<div class="tile tile--small stack">
+  <div class="tile__content vertical-flow-flex">
+    <h3 class="text--l"
+        id="tile-title"
+    >
+      Tile title
+    </h3>
+    <p>
+      Tile with some content
+    </p>
+  </div>
+  <a href="http://example.com"
+     class="link"
+  >
+    Tile link
+  </a>
+</div>
+`;

package/src/Component/Tile/tile.twig

@@ -0,0 +1,10 @@
+<div class="tile stack {{ modifier_class }}{% if size %} tile--{{ size }}{% endif %}">
+  <div class="tile__content vertical-flow-flex">
+    {% block content %}
+    <h3 class="text--m">{{ title | default('Tile title') }}</h3>
+    {% endblock %}
+  </div>
+  {% block link %}
+    <a href="#">{{ link | default('Tile link') }}</a>
+  {% endblock %}
+</div>

package/src/Component/Tile/tiles.css

@@ -0,0 +1,58 @@
+/**
+ * Tiles
+ */
+@layer components {
+  .tile {
+    --outline-offset: -2px;
+    --gap: var(--gap-s);
+
+    overflow: hidden;
+    position: relative;
+    border-radius: var(--border-radius);
+    background: var(--tile-background, var(--colour-background-alt));
+    color: var(--tile-foreground var(--colour-foreground));
+    min-block-size: var(--height, 160px);
+    transition:
+      0.2s background-color,
+      0.2s background-image,
+      0.2s color,
+      0.2s border-color;
+
+    &:is(.tile--has-link, :has(> a[href])) {
+      cursor: pointer;
+    }
+
+    & > a[href] {
+      display: block;
+      text-indent: -10000%;
+      block-size: 100%;
+    }
+
+    & .tile__content {
+      padding: var(--spacing-m);
+      position: relative;
+    }
+  }
+
+  &.tile--medium {
+    --height: 240px;
+  }
+
+  &.tile--large {
+    --height: 433px;
+  }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .tile {
+    display: block;
+    background-color: transparent;
+    background-image: none;
+    color: var(--colour-foreground);
+    min-block-size: 0;
+  }
+}

package/src/Component/Tile/twig/tiles.twig

@@ -0,0 +1,18 @@
+<div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
+  {% include "@mixtape/Component/Tile/tile.twig" %}
+  {% include "@mixtape/Component/Tile/tile.twig" %}
+  {% include "@mixtape/Component/Tile/tile.twig" %}
+  {% include "@mixtape/Component/Tile/tile.twig" %}
+</div>
+<div class="grid grid--md-3-cols">
+  {% include "@mixtape/Component/Tile/tile.twig" with { size: size } %}
+  {% include "@mixtape/Component/Tile/tile.twig" with { size: size } %}
+  {% embed "@mixtape/Component/Tile/tile.twig" with { size: size } %}
+    {% block content %}
+      <h3 class="text--m">{{ title | default('Tile title') }}</h3>
+      <p>Tile with some content</p>
+      <a href="#" class="link align--bottom">{{ link | default('read more') }}</a>
+    {% endblock %}
+    {% block link %}{% endblock %}
+  {% endembed %}
+</div>

package/src/Form/Checkbox/Checkboxes.stories.ts

@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./input-checkbox.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["form__item--inline"]
+
+type CheckboxesType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<CheckboxesType> = {
+  title: "Form/Checkbox",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<CheckboxesType>
+
+export const Checkboxes: Story = {
+  args: {},
+}
+
+export const InlineCheckboxes: Story = {
+  args: {
+    modifier_class: "form__item--inline",
+  },
+}

package/src/Form/Checkbox/FormCheckbox.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react"
+import FormCheckbox, { Checkbox, SingleCheckbox } from "./FormCheckbox"
+
+const meta: Meta<typeof SingleCheckbox> = {
+  title: "Form/Checkboxes",
+  tags: ["no-snapshot"],
+  component: SingleCheckbox,
+}
+
+export default meta
+export const Single: StoryObj<typeof SingleCheckbox> = {
+  args: {
+    children: "Check me out",
+    value: "option",
+  },
+}
+
+export const CheckboxGroup: StoryObj<typeof FormCheckbox> = {
+  render: ({ children, ...args }) => (
+    <FormCheckbox {...args}>{children}</FormCheckbox>
+  ),
+  args: {
+    label: "Checkbox group",
+    children: (
+      <>
+        <Checkbox value="1">Option #1</Checkbox>
+        <Checkbox value="2">Option #2</Checkbox>
+        <Checkbox value="3">Option #3</Checkbox>
+      </>
+    ),
+  },
+}

package/src/Form/Checkbox/FormCheckbox.tsx

@@ -0,0 +1,124 @@
+import {
+  createContext,
+  JSX,
+  PropsWithChildren,
+  useContext,
+  useId,
+  useRef,
+} from "react"
+import {
+  AriaCheckboxGroupItemProps,
+  AriaCheckboxProps,
+  useCheckbox,
+  useCheckboxGroup,
+  useCheckboxGroupItem,
+} from "react-aria"
+import {
+  CheckboxGroupProps,
+  CheckboxGroupState,
+  useCheckboxGroupState,
+  useToggleState,
+} from "react-stately"
+import classNames from "classnames"
+import FormItem from "../Item/FormItem"
+import { FormStatus } from "../../enums"
+
+const CheckboxContext = createContext<CheckboxGroupState>(null)
+
+type FormCheckboxProps = CheckboxGroupProps &
+  PropsWithChildren & {
+    label: string
+  }
+
+const FormCheckbox = ({
+  label,
+  children,
+  ...props
+}: FormCheckboxProps): JSX.Element => {
+  const state = useCheckboxGroupState(props)
+  const { groupProps, labelProps } = useCheckboxGroup(props, state)
+
+  return (
+    <FormItem fieldset {...groupProps}>
+      <legend {...labelProps}>{label}</legend>
+      <CheckboxContext.Provider value={state}>
+        {children}
+      </CheckboxContext.Provider>
+    </FormItem>
+  )
+}
+
+type CheckboxProps = AriaCheckboxGroupItemProps &
+  PropsWithChildren & {
+    status?: FormStatus
+    className?: string
+  }
+
+const Checkbox = ({
+  children,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: CheckboxProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>()
+  const state = useContext(CheckboxContext)
+  const { inputProps } = useCheckboxGroupItem(props, state, ref)
+
+  const classes = classNames("form__checkbox", {
+    className,
+    error: status === FormStatus.INVALID,
+    success: status === FormStatus.VALID,
+  })
+
+  return (
+    <div className={classes}>
+      <input
+        id={id}
+        ref={ref}
+        aria-invalid={status === FormStatus.INVALID}
+        {...inputProps}
+      />
+      <label htmlFor={id}>{children}</label>
+    </div>
+  )
+}
+
+type SingleCheckboxProps = AriaCheckboxProps &
+  PropsWithChildren & {
+    status?: FormStatus
+    className?: string
+  }
+
+const SingleCheckbox = ({
+  children,
+  status = FormStatus.DEFAULT,
+  className = "",
+  ...props
+}: SingleCheckboxProps): JSX.Element => {
+  const id = useId()
+  const ref = useRef<HTMLInputElement>()
+  const state = useToggleState(props)
+  const { inputProps } = useCheckbox(props, state, ref)
+
+  const classes = classNames("form__checkbox", {
+    className,
+    error: status === FormStatus.INVALID,
+    success: status === FormStatus.VALID,
+  })
+
+  return (
+    <div className={classes}>
+      <input
+        id={id}
+        ref={ref}
+        aria-invalid={status === FormStatus.INVALID}
+        {...inputProps}
+      />
+      <label htmlFor={id}>{children}</label>
+    </div>
+  )
+}
+
+export default FormCheckbox
+export { Checkbox, SingleCheckbox }