@pnx-mixtape/mxds 0.0.1

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

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Select Select smoke-test 1`] = `
+<div class="form__item">
+  <label for="select">
+    A select drop down
+  </label>
+  <select id="select"
+          class
+          aria-describedby="unique-0"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+    <option value="4">
+      Option 4
+    </option>
+    <option value="5">
+      Option 5
+    </option>
+    <option value="6">
+      Option 6
+    </option>
+    <option value="7">
+      Option 7
+    </option>
+    <option value="8">
+      Option 8
+    </option>
+    <option value="9">
+      Option 9
+    </option>
+    <option value="10">
+      Option 10
+    </option>
+  </select>
+  <div role="tooltip"
+       id="unique-0"
+       class="form__description"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Select Small smoke-test 1`] = `
+<div class="form__item">
+  <label for="select">
+    A select drop down
+  </label>
+  <select id="select"
+          class="input--small"
+          aria-describedby="unique-0"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+    <option value="4">
+      Option 4
+    </option>
+    <option value="5">
+      Option 5
+    </option>
+    <option value="6">
+      Option 6
+    </option>
+    <option value="7">
+      Option 7
+    </option>
+    <option value="8">
+      Option 8
+    </option>
+    <option value="9">
+      Option 9
+    </option>
+    <option value="10">
+      Option 10
+    </option>
+  </select>
+  <div role="tooltip"
+       id="unique-0"
+       class="form__description"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Select Wide smoke-test 1`] = `
+<div class="form__item">
+  <label for="select">
+    A select drop down
+  </label>
+  <select id="select"
+          class="input--wide"
+          aria-describedby="unique-0"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+    <option value="4">
+      Option 4
+    </option>
+    <option value="5">
+      Option 5
+    </option>
+    <option value="6">
+      Option 6
+    </option>
+    <option value="7">
+      Option 7
+    </option>
+    <option value="8">
+      Option 8
+    </option>
+    <option value="9">
+      Option 9
+    </option>
+    <option value="10">
+      Option 10
+    </option>
+  </select>
+  <div role="tooltip"
+       id="unique-0"
+       class="form__description"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/Select/select.twig

@@ -0,0 +1,16 @@
+<div class="form__item">
+  <label for="select{{ id }}">A select drop down</label>
+  <select id="select{{ id }}" class="{{ modifier_class }}" aria-describedby="selectHelp{{ id }}">
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+    <option value="4">Option 4</option>
+    <option value="5">Option 5</option>
+    <option value="6">Option 6</option>
+    <option value="7">Option 7</option>
+    <option value="8">Option 8</option>
+    <option value="9">Option 9</option>
+    <option value="10">Option 10</option>
+  </select>
+  <div role="tooltip" id="selectHelp{{ id }}" class="form__description">Help text that provides additional information about the field.</div>
+</div>

package/src/Form/TextInput/FormText.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./FormText"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/TextInput",
+  component: Component,
+  args: {
+    id: "mix-text",
+    placeholder: "Placeholder",
+    "aria-label": "Text input",
+  },
+}
+
+export default meta
+export const TextInput: StoryObj<typeof Component> = {}

package/src/Form/TextInput/FormText.tsx

@@ -0,0 +1,55 @@
+import {
+  JSX,
+  ComponentPropsWithoutRef,
+  useState,
+  ChangeEventHandler,
+} from "react"
+import classNames from "classnames"
+import { FormStatus } from "../../enums"
+
+type FormTextProps = ComponentPropsWithoutRef<"input"> & {
+  value?: string
+  className?: string
+  status?: FormStatus
+}
+
+const FormText = ({
+  id,
+  required = false,
+  value = "",
+  status = FormStatus.DEFAULT,
+  type = "text",
+  name = null,
+  className = "",
+  ...props
+}: FormTextProps): JSX.Element => {
+  const [inputValue, setInputValue] = useState<string>(value)
+  const handleChange: ChangeEventHandler<HTMLInputElement> = ({
+    currentTarget,
+  }) => setInputValue(currentTarget.value)
+
+  const classes = classNames(
+    { className },
+    {
+      error: status === FormStatus.INVALID,
+      success: status === FormStatus.VALID,
+    },
+  )
+
+  return (
+    <input
+      className={classes}
+      onChange={handleChange}
+      id={id}
+      type={type}
+      name={name}
+      value={inputValue}
+      required={required}
+      aria-describedby={`${id}-help`}
+      aria-invalid={status === FormStatus.INVALID}
+      {...props}
+    />
+  )
+}
+
+export default FormText

package/src/Form/TextInput/InputDivider.stories.ts

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

package/src/Form/TextInput/TextInput.stories.ts

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./input-text.twig"
+import "../form.css"
+
+const modifierOptions: string[] = [
+  "error",
+  "success",
+  "input--wide",
+  "input--small",
+]
+
+type TextInputType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<TextInputType> = {
+  title: "Form/Text Input",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<TextInputType>
+
+export const TextInput: Story = {
+  args: {},
+}
+
+export const Error: Story = {
+  args: {
+    modifier_class: "error",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    modifier_class: "success",
+  },
+}
+
+export const Wide: Story = {
+  args: {
+    modifier_class: "input--wide",
+  },
+}
+
+export const Small: Story = {
+  args: {
+    modifier_class: "input--small",
+  },
+}

package/src/Form/TextInput/TextInputWithIcon.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./input-text-icon.twig"
+import "../form.css"
+
+const modifierOptions: string[] = ["error", "success"]
+
+type TextInputWithIconType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<TextInputWithIconType> = {
+  title: "Form/Text Input/Icon",
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    modifier_class: {
+      options: modifierOptions,
+      control: { type: "select" },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<TextInputWithIconType>
+
+export const Icon: Story = {
+  args: {},
+}
+
+export const Error: Story = {
+  args: {
+    modifier_class: "error",
+  },
+}
+
+export const Success: Story = {
+  args: {
+    modifier_class: "success",
+  },
+}

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/TextInput TextInput smoke-test 1`] = `
+<input class
+       id="mix-text"
+       type="text"
+       aria-describedby="unique-0"
+       aria-invalid="false"
+       placeholder="Placeholder"
+       aria-label="Text input"
+       value
+>
+`;

package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Text Input/Divider InputDivider smoke-test 1`] = `
+<div class="form__item form__item--inline">
+  <div class="form__item">
+    <label class="label--inline"
+           for="input1"
+    >
+      Input field
+    </label>
+    <input type="text"
+           id="input1"
+           class
+    >
+  </div>
+  <div class="input__divider">
+    OR
+  </div>
+  <div class="form__item">
+    <label class="visually-hidden"
+           for="input2"
+    >
+      Other input field
+    </label>
+    <input type="text"
+           id="input2"
+           class
+           placeholder="Other input"
+    >
+  </div>
+</div>
+`;

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

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Text Input Error smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <input type="text"
+         id="input"
+         aria-describedby="unique-0"
+         class="error"
+         placeholder
+  >
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input Small smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <input type="text"
+         id="input"
+         aria-describedby="unique-0"
+         class="input--small"
+         placeholder
+  >
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input Success smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <input type="text"
+         id="input"
+         aria-describedby="unique-0"
+         class="success"
+         placeholder
+  >
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input TextInput smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <input type="text"
+         id="input"
+         aria-describedby="unique-0"
+         class
+         placeholder
+  >
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input Wide smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <input type="text"
+         id="input"
+         aria-describedby="unique-0"
+         class="input--wide"
+         placeholder
+  >
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/TextInput/__snapshots__/TextInputWithIcon.stories.ts.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Form/Text Input/Icon Error smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <span class="input__text--icon icon icon--email">
+    <input type="text"
+           id="input"
+           aria-describedby="unique-0"
+           class="error"
+           placeholder
+    >
+  </span>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input/Icon Icon smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <span class="input__text--icon icon icon--email">
+    <input type="text"
+           id="input"
+           aria-describedby="unique-0"
+           class
+           placeholder
+    >
+  </span>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;
+
+exports[`Form/Text Input/Icon Success smoke-test 1`] = `
+<div class="form__item">
+  <label for="input">
+    Input text field
+  </label>
+  <span class="input__text--icon icon icon--email">
+    <input type="text"
+           id="input"
+           aria-describedby="unique-0"
+           class="success"
+           placeholder
+    >
+  </span>
+  <div class="form__description"
+       id="unique-0"
+       role="tooltip"
+  >
+    Help text that provides additional information about the field.
+  </div>
+</div>
+`;

package/src/Form/TextInput/input-divider.twig

@@ -0,0 +1,11 @@
+<div class="form__item form__item--inline">
+  <div class="form__item">
+    <label class="label--inline" for="input1{{ id }}">Input field</label>
+    <input type="text" id="input1{{ id }}"  class="{{ modifier_class }}">
+  </div>
+  <div class="input__divider">OR</div>
+  <div class="form__item">
+    <label class="visually-hidden" for="input2{{ id }}">Other input field</label>
+    <input type="text" id="input2{{ id }}" class="{{ modifier_class }}" placeholder="Other input">
+  </div>
+</div>

package/src/Form/TextInput/input-text-icon.twig

@@ -0,0 +1,7 @@
+<div class="form__item">
+  <label for="input{{ id }}">{{ label|default('Input text field') }}</label>
+  <span class="input__text--icon icon icon--{{ icon|default('email') }}">
+    <input type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}" placeholder="{{ placeholder }}">
+  </span>
+  <div class="form__description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
+</div>

package/src/Form/TextInput/input-text.twig

@@ -0,0 +1,5 @@
+<div class="form__item">
+  <label for="input{{ id }}">{{ label|default('Input text field') }}</label>
+  <input type="{{ type|default('text') }}" id="input{{ id }}" aria-describedby="input{{ id }}Help" class="{{ modifier_class }}" placeholder="{{ placeholder }}">
+  <div class="form__description" id="input{{ id }}Help" role="tooltip">{{ description|default('Help text that provides additional information about the field.') }}</div>
+</div>

package/src/Form/Textarea/FormTextarea.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "../TextInput/FormText"
+
+const meta: Meta<typeof Component> = {
+  title: "Form/Textarea",
+  component: Component,
+  args: {
+    id: "mix-textarea",
+    "aria-label": "Textarea",
+  },
+}
+
+export default meta
+export const Textarea: StoryObj<typeof Component> = {}

package/src/Form/Textarea/FormTextarea.tsx

@@ -0,0 +1,53 @@
+import {
+  JSX,
+  ComponentPropsWithoutRef,
+  useState,
+  ChangeEventHandler,
+} from "react"
+import classNames from "classnames"
+import { FormStatus } from "../../enums"
+
+type FormTextareaProps = ComponentPropsWithoutRef<"textarea"> & {
+  value?: string
+  className?: string
+  status?: FormStatus
+}
+
+const FormTextarea = ({
+  id,
+  required = false,
+  value = "",
+  status = FormStatus.DEFAULT,
+  name = null,
+  className = "",
+  ...props
+}: FormTextareaProps): JSX.Element => {
+  const [inputValue, setInputValue] = useState<string>(value)
+  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = ({
+    currentTarget,
+  }) => setInputValue(currentTarget.value)
+
+  const classes = classNames(
+    { className },
+    {
+      error: status === FormStatus.INVALID,
+      success: status === FormStatus.VALID,
+    },
+  )
+
+  return (
+    <textarea
+      className={classes}
+      onChange={handleChange}
+      id={id}
+      name={name}
+      value={inputValue}
+      required={required}
+      aria-describedby={`${id}-help`}
+      aria-invalid={status === FormStatus.INVALID}
+      {...props}
+    />
+  )
+}
+
+export default FormTextarea

package/src/Form/Textarea/Textarea.stories.ts

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