@pnx-mixtape/mxds 0.0.1

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

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Checkbox Checkboxes smoke-test 1`] = `
+<fieldset aria-describedby="unique-0"
+          class="fieldset--plain form__item"
+>
+  <legend>
+    A set of checkbox inputs
+  </legend>
+  <div class="form__checkbox ">
+    <input id="checkbox1"
+           type="checkbox"
+    >
+    <label for="checkbox1">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox ">
+    <input id="checkbox2"
+           type="checkbox"
+    >
+    <label for="checkbox2">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox ">
+    <input id="checkbox3"
+           type="checkbox"
+    >
+    <label for="checkbox3">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox ">
+    <input id="checkbox4"
+           type="checkbox"
+    >
+    <label for="checkbox4">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox ">
+    <input id="checkbox5"
+           type="checkbox"
+           disabled
+    >
+    <label for="checkbox5">
+      This is a disabled example
+    </label>
+  </div>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</fieldset>
+`;
+
+exports[`Form/Checkbox InlineCheckboxes smoke-test 1`] = `
+<fieldset aria-describedby="unique-0"
+          class="fieldset--plain form__item"
+>
+  <legend>
+    A set of checkbox inputs
+  </legend>
+  <div class="form__checkbox form__item--inline">
+    <input id="checkbox1"
+           type="checkbox"
+    >
+    <label for="checkbox1">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox form__item--inline">
+    <input id="checkbox2"
+           type="checkbox"
+    >
+    <label for="checkbox2">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox form__item--inline">
+    <input id="checkbox3"
+           type="checkbox"
+    >
+    <label for="checkbox3">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox form__item--inline">
+    <input id="checkbox4"
+           type="checkbox"
+    >
+    <label for="checkbox4">
+      This is an example
+    </label>
+  </div>
+  <div class="form__checkbox form__item--inline">
+    <input id="checkbox5"
+           type="checkbox"
+           disabled
+    >
+    <label for="checkbox5">
+      This is a disabled example
+    </label>
+  </div>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</fieldset>
+`;

package/src/Form/Checkbox/input-checkbox-single.twig

@@ -0,0 +1,6 @@
+<div class="form__item {{ modifier_class }}">
+  <div class="form__checkbox">
+    <input id="singleCheckbox{{ id }}" type="checkbox">
+    <label for="singleCheckbox{{ id }}">I agree to the terms and conditions</label>
+  </div>
+</div>

package/src/Form/Checkbox/input-checkbox.twig

@@ -0,0 +1,24 @@
+<fieldset aria-describedby="checkbox{{ id }}Help" class="fieldset--plain form__item">
+  <legend>A set of checkbox inputs</legend>
+  <div class="form__checkbox {{ modifier_class }}">
+    <input id="checkbox1{{ id }}" type="checkbox">
+    <label for="checkbox1{{ id }}">This is an example</label>
+  </div>
+  <div class="form__checkbox {{ modifier_class }}">
+    <input id="checkbox2{{ id }}" type="checkbox">
+    <label for="checkbox2{{ id }}">This is an example</label>
+  </div>
+  <div class="form__checkbox {{ modifier_class }}">
+    <input id="checkbox3{{ id }}" type="checkbox">
+    <label for="checkbox3{{ id }}">This is an example</label>
+  </div>
+  <div class="form__checkbox {{ modifier_class }}">
+    <input id="checkbox4{{ id }}" type="checkbox">
+    <label for="checkbox4{{ id }}">This is an example</label>
+  </div>
+  <div class="form__checkbox {{ modifier_class }}">
+    <input id="checkbox5{{ id }}" type="checkbox" disabled>
+    <label for="checkbox5{{ id }}">This is a disabled example</label>
+  </div>
+  <div class="form__description" id="checkbox{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
+</fieldset>

package/src/Form/Description/Description.stories.ts

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

package/src/Form/Description/ErrorMessage.stories.ts

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

package/src/Form/Description/FormDescription.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./FormDescription"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Description",
+  component: Component,
+  args: {
+    id: "mix-label",
+    children: "Some help text",
+  },
+}
+
+export default meta
+export const Description: StoryObj<typeof Component> = {}

package/src/Form/Description/FormDescription.tsx

@@ -0,0 +1,28 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+import { FormStatus } from "../../enums"
+
+type FormDescriptionProps = PropsWithChildren & {
+  id: string
+  status?: FormStatus
+}
+
+const FormDescription = ({
+  children,
+  id,
+  status = FormStatus.DEFAULT,
+}: FormDescriptionProps): JSX.Element => (
+  <div
+    id={`${id}-help`}
+    role="tooltip"
+    className={classNames({
+      form__description: status === FormStatus.DEFAULT,
+      "form__error-message": status === FormStatus.INVALID,
+      "form__success-message": status === FormStatus.VALID,
+    })}
+  >
+    {children}
+  </div>
+)
+
+export default FormDescription

package/src/Form/Description/__snapshots__/Description.stories.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Description Description smoke-test 1`] = `
+<label for="input-description">
+  Input text field
+</label>
+<input aria-describedby="unique-0"
+       id="input-description"
+       type="text"
+>
+<div class="form__description"
+     id="unique-0"
+     role="tooltip"
+>
+  Help text that provides additional information about the field.
+</div>
+`;

package/src/Form/Description/__snapshots__/ErrorMessage.stories.ts.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Error ErrorMessage smoke-test 1`] = `
+<div class="form__item">
+  <label for="input-error-">
+    Input text field
+  </label>
+  <input aria-describedby="unique-0"
+         class="error"
+         id="input-error-"
+         type="text"
+  >
+  <div class="form__error-message"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/Description/__snapshots__/FormDescription.stories.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Description Description smoke-test 1`] = `
+<div id="mix-label-help"
+     role="tooltip"
+     class="form__description"
+>
+  Some help text
+</div>
+`;

package/src/Form/Description/form-description.twig

@@ -0,0 +1,3 @@
+<label for="input-description{{ id }}">Input text field</label>
+<input aria-describedby="input-description-help{{ id }}" id="input-description{{ id }}" type="text">
+<div class="form__description" id="input-description-help{{ id }}" role="tooltip">Help text that provides additional information about the field.</div>

package/src/Form/Description/form-error.twig

@@ -0,0 +1,5 @@
+<div class="form__item">
+  <label for="input-error-{{ id }}">Input text field</label>
+  <input aria-describedby="input-error-{{ id }}Help" class="error" id="input-error-{{ id }}" type="text">
+  <div class="form__error-message" id="input-error-{{ id }}Help" role="tooltip">Help text that provides additional information about the field.</div>
+</div>

package/src/Form/Fieldset/Fieldset.stories.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./fieldset.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["fieldset--plain"]
+
+type FieldsetType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<FieldsetType> = {
+  title: "Form/Fieldset",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<FieldsetType>
+
+export const Fieldset: Story = {
+  args: {},
+}
+
+export const Plain: Story = {
+  args: {
+    modifier_class: "fieldset--plain",
+  },
+}

package/src/Form/Fieldset/__snapshots__/Fieldset.stories.ts.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Fieldset Fieldset smoke-test 1`] = `
+<fieldset class>
+  <legend>
+    Fieldset legend
+  </legend>
+  <p>
+    Content inside a fieldset
+  </p>
+</fieldset>
+`;
+
+exports[`Form/Fieldset Plain smoke-test 1`] = `
+<fieldset class="fieldset--plain">
+  <legend>
+    Fieldset legend
+  </legend>
+  <p>
+    Content inside a fieldset
+  </p>
+</fieldset>
+`;

package/src/Form/Fieldset/fieldset.twig

@@ -0,0 +1,4 @@
+<fieldset class="{{ modifier_class }}">
+  <legend>Fieldset legend</legend>
+  <p>Content inside a fieldset</p>
+</fieldset>

package/src/Form/Form/Form.stories.tsx

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Form"
+
+const meta: Meta<typeof Component> = {
+  title: "Form",
+  component: Component,
+}
+
+export default meta
+export const Form: StoryObj<typeof Component> = {}

package/src/Form/Form/Form.tsx

@@ -0,0 +1,9 @@
+import { JSX, ComponentPropsWithoutRef } from "react"
+
+type FormProps = ComponentPropsWithoutRef<"form">
+
+const Form = ({ children, ...props }: FormProps): JSX.Element => (
+  <form {...props}>{children}</form>
+)
+
+export default Form

package/src/Form/Form/FormTitle.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./FormTitle"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/FormTitle",
+  component: Component,
+}
+
+export default meta
+export const FormTitle: StoryObj<typeof Component> = {
+  args: {
+    children: "Create an account",
+  },
+}

package/src/Form/Form/FormTitle.tsx

@@ -0,0 +1,12 @@
+import { JSX, PropsWithChildren } from "react"
+import Heading, { HeadingProps } from "../../Atom/Heading/Heading"
+
+type FormTitleProps = PropsWithChildren & HeadingProps
+
+const FormTitle = ({ as, children, ...props }: FormTitleProps): JSX.Element => (
+  <Heading as={as} className="form__title" {...props}>
+    {children}
+  </Heading>
+)
+
+export default FormTitle

package/src/Form/Form/__snapshots__/Form.stories.tsx.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form Form smoke-test 1`] = `
+<form>
+</form>
+`;

package/src/Form/Form/__snapshots__/FormTitle.stories.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/FormTitle FormTitle smoke-test 1`] = `
+<h2 class="form__title"
+    id="create-an-account"
+>
+  Create an account
+</h2>
+`;

package/src/Form/Form/twig/form-example.twig

@@ -0,0 +1,13 @@
+<form class="vertical-flow" action="#">
+  {% include "@mixtape/form/src/input-text.twig" with { label: 'Name', placeholder: 'Jane Doe' } %}
+  {% include "@mixtape/form/src/input-text-icon.twig" with { label: 'Email', placeholder: 'me@example.com', type: 'email' } %}
+  {% include "@mixtape/form/src/input-radio.twig" %}
+  {% include "@mixtape/form/src/input-checkbox.twig" %}
+  {% include "@mixtape/form/src/select.twig" %}
+  {% include "@mixtape/form/src/textarea.twig" %}
+  {% include "@mixtape/form/src/form-error.twig" %}
+  <div class="form__actions">
+    <input type="submit" class="button button--primary" value="Submit">
+    <input type="submit" class="button" value="Save Draft">
+  </div>
+</form>

package/src/Form/Item/FormItem.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj, composeStories } from "@storybook/react"
+import Component from "./FormItem"
+import * as LabelStories from "../Label/FormLabel.stories"
+import * as InputStories from "../TextInput/FormText.stories"
+import * as DescriptionStories from "../Description/FormDescription.stories"
+import { FormStatus } from "../../enums"
+
+const { Label, Required } = composeStories(LabelStories)
+const { TextInput } = composeStories(InputStories)
+const { Description } = composeStories(DescriptionStories)
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Item",
+  component: Component,
+  args: {
+    children: (
+      <>
+        <Label id="form-item" />
+        <TextInput id="form-item" />
+        <Description id="form-item" />
+      </>
+    ),
+  },
+}
+
+export default meta
+export const FormItem: StoryObj<typeof Component> = {}
+
+export const Success: StoryObj<typeof Component> = {
+  args: {
+    children: (
+      <>
+        <Required id="form-item" />
+        <TextInput id="form-item" status={FormStatus.VALID} />
+        <Description id="form-item" status={FormStatus.VALID} />
+      </>
+    ),
+  },
+}
+
+export const Error: StoryObj<typeof Component> = {
+  args: {
+    children: (
+      <>
+        <Required id="form-item" />
+        <TextInput id="form-item" status={FormStatus.INVALID} />
+        <Description id="form-item" status={FormStatus.INVALID} />
+      </>
+    ),
+  },
+}
+
+export const Fieldset: StoryObj<typeof Component> = {
+  args: {
+    fieldset: true,
+    legend: "Fieldset",
+  },
+}

package/src/Form/Item/FormItem.tsx

@@ -0,0 +1,26 @@
+import { JSX, PropsWithChildren } from "react"
+import classNames from "classnames"
+
+type FormItemProps = PropsWithChildren & {
+  fieldset?: boolean
+  legend?: string
+  className?: string
+}
+
+const FormItem = ({
+  children,
+  fieldset = false,
+  legend = null,
+  className = null,
+  ...props
+}: FormItemProps): JSX.Element => {
+  const Wrapper = fieldset ? "fieldset" : "div"
+  return (
+    <Wrapper className={classNames("form__item", className)} {...props}>
+      {legend && <legend>{legend}</legend>}
+      {children}
+    </Wrapper>
+  )
+}
+
+export default FormItem

package/src/Form/Item/__snapshots__/FormItem.stories.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Item Error smoke-test 1`] = `
+<div class="form__item">
+  <label for="form-item">
+    Label
+    <span>
+      (required)
+    </span>
+  </label>
+  <input class="error"
+         id="form-item"
+         type="text"
+         aria-describedby="unique-0"
+         aria-invalid="true"
+         placeholder="Placeholder"
+         aria-label="Text input"
+         value
+  >
+  <div id="unique-0"
+       role="tooltip"
+       class="form__error-message"
+  >
+    Some help text
+  </div>
+</div>
+`;
+
+exports[`Form/Item Fieldset smoke-test 1`] = `
+<fieldset class="form__item">
+  <legend>
+    Fieldset
+  </legend>
+  <label for="form-item">
+    Label
+  </label>
+  <input class
+         id="form-item"
+         type="text"
+         aria-describedby="unique-0"
+         aria-invalid="false"
+         placeholder="Placeholder"
+         aria-label="Text input"
+         value
+  >
+  <div id="unique-0"
+       role="tooltip"
+       class="form__description"
+  >
+    Some help text
+  </div>
+</fieldset>
+`;
+
+exports[`Form/Item FormItem smoke-test 1`] = `
+<div class="form__item">
+  <label for="form-item">
+    Label
+  </label>
+  <input class
+         id="form-item"
+         type="text"
+         aria-describedby="unique-0"
+         aria-invalid="false"
+         placeholder="Placeholder"
+         aria-label="Text input"
+         value
+  >
+  <div id="unique-0"
+       role="tooltip"
+       class="form__description"
+  >
+    Some help text
+  </div>
+</div>
+`;
+
+exports[`Form/Item Success smoke-test 1`] = `
+<div class="form__item">
+  <label for="form-item">
+    Label
+    <span>
+      (required)
+    </span>
+  </label>
+  <input class="success"
+         id="form-item"
+         type="text"
+         aria-describedby="unique-0"
+         aria-invalid="false"
+         placeholder="Placeholder"
+         aria-label="Text input"
+         value
+  >
+  <div id="unique-0"
+       role="tooltip"
+       class="form__success-message"
+  >
+    Some help text
+  </div>
+</div>
+`;

package/src/Form/Label/FormLabel.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./FormLabel"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Label",
+  component: Component,
+  args: {
+    id: "mix-label",
+    text: "Label",
+  },
+}
+
+export default meta
+export const Label: StoryObj<typeof Component> = {}
+
+export const Required: StoryObj<typeof Component> = {
+  args: {
+    required: true,
+  },
+}

package/src/Form/Label/FormLabel.tsx

@@ -0,0 +1,19 @@
+import { JSX, ComponentPropsWithoutRef } from "react"
+
+type FormLabelProps = ComponentPropsWithoutRef<"label"> & {
+  text: string
+  required: boolean
+}
+
+const FormLabel = ({
+  text,
+  id,
+  required = false,
+}: FormLabelProps): JSX.Element => (
+  <label htmlFor={id}>
+    {text}
+    {required && <span> (required)</span>}
+  </label>
+)
+
+export default FormLabel