@pnx-mixtape/mxds 0.1.0-rc.4 → 0.1.0-rc.6

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

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Translate 1`] = `
+"
+<mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true" data-notice-content="Our website uses an automatic service to translate content. These translations should be used as a guide only.">
+  <button id="unique-0" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language: English, EN">
+    
+<span class="mx-icon mx-icon--globe"></span>
+    <span class="mx-translate__code">EN</span>
+  </button>
+  <div class="mx-popover mx-translate__menu notranslate" id="translate" aria-describedby="unique-0" aria-labelledby="unique-0" style="position-anchor: --translate" data-placement="bottom-start" popover="" role="menu">
+          <a class="mx-translate__item" href="?hl=en" lang="en" hreflang="en" role="menuitem" data-language="en" aria-current="true">English</a>
+          <a class="mx-translate__item" href="?hl=fr" lang="fr" hreflang="fr" role="menuitem" data-language="fr">Français</a>
+          <a class="mx-translate__item" href="?hl=es" lang="es" hreflang="es" role="menuitem" data-language="es">Español</a>
+      </div>
+</mx-translate>
+"
+`;

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Translate 1`] = `"<div class="mx-translate"><button type="button" id="translate-target" class="mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" data-label="Language" aria-label="Language: English, EN" style="anchor-name: --translate;"><span class="mx-icon mx-icon--globe"></span><span class="mx-translate__code">EN</span></button><div id="translate" class="mx-popover mx-translate__menu notranslate" aria-describedby="translate-target" aria-labelledby="translate-target" data-placement="bottom-start" popover="" role="menu" style="position-anchor: --translate;"><span data-focus-scope-start="true" hidden=""></span><a class="mx-translate__item" href="?hl=en" lang="en" hreflang="en" role="menuitem" data-language="en" aria-current="true">English</a><a class="mx-translate__item" href="?hl=fr" lang="fr" hreflang="fr" role="menuitem" data-language="fr">Français</a><a class="mx-translate__item" href="?hl=es" lang="es" hreflang="es" role="menuitem" data-language="es">Español</a><span data-focus-scope-end="true" hidden=""></span></div></div>"`;

package/src/Component/Translate/languages.ts

@@ -0,0 +1,39 @@
+export type TranslateLanguage = {
+  code: string
+  label: string
+}
+
+/**
+ * A representative set of languages Google's Website Translator supports, in each language's
+ * own name. Not bundled into `Translate` by default — import and pass this explicitly (or your
+ * own list) via the `languages` prop.
+ */
+export const DEFAULT_LANGUAGES: TranslateLanguage[] = [
+  { code: "en", label: "English" },
+  { code: "ar", label: "العربية" },
+  { code: "zh-CN", label: "中文 (简体)" },
+  { code: "zh-TW", label: "中文 (繁體)" },
+  { code: "nl", label: "Nederlands" },
+  { code: "fr", label: "Français" },
+  { code: "de", label: "Deutsch" },
+  { code: "el", label: "Ελληνικά" },
+  { code: "hi", label: "हिन्दी" },
+  { code: "id", label: "Bahasa Indonesia" },
+  { code: "it", label: "Italiano" },
+  { code: "ja", label: "日本語" },
+  { code: "ko", label: "한국어" },
+  { code: "ms", label: "Bahasa Melayu" },
+  { code: "fa", label: "فارسی" },
+  { code: "pl", label: "Polski" },
+  { code: "pt", label: "Português" },
+  { code: "ru", label: "Русский" },
+  { code: "es", label: "Español" },
+  { code: "sw", label: "Kiswahili" },
+  { code: "sv", label: "Svenska" },
+  { code: "tl", label: "Tagalog" },
+  { code: "th", label: "ไทย" },
+  { code: "tr", label: "Türkçe" },
+  { code: "uk", label: "Українська" },
+  { code: "ur", label: "اردو" },
+  { code: "vi", label: "Tiếng Việt" },
+]

package/src/Component/Translate/translate.css

@@ -0,0 +1,62 @@
+/**
+ * Translate
+ *
+ * Composes DropMenu/Popover — import their CSS alongside this file.
+ */
+
+@layer design-system.defaults {
+  mx-translate {
+    display: inline-block;
+  }
+}
+
+@layer design-system.components {
+  .mx-translate {
+    position: relative;
+  }
+
+  .mx-translate__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xxs);
+  }
+
+  .mx-translate__code {
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+  }
+
+  /* @public --translate-menu-max-block-size, --translate-popover-padding */
+  .mx-translate__menu {
+    --popover-padding: var(--translate-popover-padding, 0px);
+
+    max-block-size: var(--translate-menu-max-block-size, 60vh);
+    overflow-y: auto;
+  }
+
+  .mx-translate__item {
+    display: block;
+    padding-block: var(--vertical-padding, var(--spacing-xxs));
+    padding-inline: var(--horizontal-padding, var(--spacing-m));
+    text-decoration: none;
+
+    &[aria-current="true"] {
+      font-weight: var(--font-weight-bold);
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Stop Google giving us top padding */
+body {
+  inset-block-start: 0 !important;
+  min-block-size: 0 !important;
+}
+
+/* Hide Google elements */
+/* stylelint-disable selector-id-pattern */
+.skiptranslate,
+#googleTranslateElement,
+#goog-gt-tt {
+  display: none !important;
+}

package/src/Component/Translate/translate.entry.js

@@ -0,0 +1 @@
+import "./Elements/Translate"

package/src/Component/Translate/translate.twig

@@ -0,0 +1,44 @@
+{% set attributes = (attributes ?? create_attribute()).addClass('mx-translate') %}
+{% set id = id|default('translate') %}
+{% set label = label|default('Language') %}
+{% set defaultLanguage = defaultLanguage|default('en') %}
+{% set updateTriggerLabel = updateTriggerLabel|default(true) %}
+
+<mx-translate{{ attributes }} closeonclick
+    data-default-language="{{ defaultLanguage }}"
+    {%- if blockedPaths %} data-blocked-paths="{{ blockedPaths|join(',') }}"{% endif -%}
+    {%- if scriptUrl %} data-script-url="{{ scriptUrl }}"{% endif -%}
+    {%- if storageKey %} data-storage-key="{{ storageKey }}"{% endif -%}
+    data-update-trigger-label="{{ updateTriggerLabel ? 'true' : 'false' }}"
+    {%- if noticeContent %} data-notice-content="{{ noticeContent }}"{% endif -%}
+    {%- if noticeBlockedContent %} data-notice-blocked-content="{{ noticeBlockedContent }}"{% endif -%}
+    {%- if noticeAnchor %} data-notice-anchor="{{ noticeAnchor }}"{% endif -%}
+    {%- if noticePosition %} data-notice-position="{{ noticePosition }}"{% endif -%}
+>
+  <button
+      id="{{ id }}-target"
+      type="button"
+      class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate"
+      popovertarget="{{ id }}"
+      style="anchor-name: --{{ id }}"
+      data-label="{{ label }}"
+      aria-label="{{ label }}, {{ defaultLanguage|upper }}"
+  >
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'globe' } only %}
+    <span class="mx-translate__code">{{ defaultLanguage|upper }}</span>
+  </button>
+  <div
+      class="mx-popover mx-translate__menu notranslate"
+      id="{{ id }}"
+      aria-describedby="{{ id }}-target"
+      aria-labelledby="{{ id }}-target"
+      style="position-anchor: --{{ id }}"
+      data-placement="{{ placement|default('bottom-start') }}"
+      popover
+      role="menu"
+  >
+    {% for language in languages %}
+      <a class="mx-translate__item" href="?hl={{ language.code }}" lang="{{ language.code }}" hreflang="{{ language.code }}" role="menuitem" data-language="{{ language.code }}">{{ language.label }}</a>
+    {% endfor %}
+  </div>
+</mx-translate>

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

@@ -204,7 +204,7 @@ export const Pending: StoryObj<typeof meta> = {
  * `docs/Testing.md`'s Automated Screen Reader Testing section.
  */
 export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
-  play: async ({ canvas, userEvent }) => {
+  play: async ({ canvas, canvasElement, userEvent }) => {
     const input = canvas.getByRole("combobox", { name: "Choose a fruit" })
 
     // "lu" matches exactly two fruits: Blueberry, then Plum.
@@ -229,5 +229,6 @@ export const ScreenReaderAnnouncements: StoryObj<typeof meta> = {
 
     await userEvent.clear(input)
     await expect(input).toHaveAttribute("aria-expanded", "false")
+    await userEvent.click(canvasElement)
   },
 }

package/src/Form/FeedbackForm/Elements/FeedbackForm.ts

@@ -0,0 +1,122 @@
+/**
+ * FeedbackForm
+ * @file Reveals a comment field once a rating is chosen, and dispatches a
+ * cancelable `mx-feedback-form-submit` event on submit so any backend can be
+ * wired up by the consumer — this component never performs a fetch/AJAX call
+ * itself. If the consuming app calls `preventDefault()` on that event, the
+ * native form submission is also cancelled, handing full control to the
+ * consumer; otherwise the browser submits normally via the form's
+ * `action`/`method`.
+ */
+
+import { validators } from "../../../Utility/utilities"
+
+export type FeedbackFormSubmitEvent = CustomEvent<{
+  rating: string | null
+  comment: string
+  form: HTMLFormElement
+}>
+
+export default class FeedbackForm extends HTMLElement {
+  internals_: ElementInternals
+  controller: AbortController
+  revealed: boolean
+
+  constructor() {
+    super()
+    this.internals_ = this.attachInternals()
+    this.controller = new AbortController()
+    this.revealed = false
+  }
+
+  static get observedAttributes(): string[] {
+    return ["pending"]
+  }
+
+  connectedCallback(): void {
+    const { signal } = this.controller
+
+    // Only gate the reveal behind a checked rating once JS is confirmed
+    // running — see feedback-form.css.
+    this.classList.add("is-enhanced")
+
+    // Validation is driven by this component's own status message instead of
+    // the browser's native validation bubble.
+    this.form?.setAttribute("novalidate", "")
+
+    this.querySelectorAll('input[type="radio"]').forEach(radio => {
+      radio.addEventListener("change", this.handleRatingChange, { signal })
+    })
+
+    this.form?.addEventListener("submit", this.handleSubmit, { signal })
+  }
+
+  disconnectedCallback(): void {
+    this.controller.abort()
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name !== "pending") return
+    const isPending = this.hasAttribute("pending")
+    this.internals_.states[isPending ? "add" : "delete"]("pending")
+    this.submitButton?.toggleAttribute("disabled", isPending)
+    this.submitButton?.setAttribute("aria-busy", String(isPending))
+  }
+
+  handleRatingChange = (): void => {
+    if (this.revealed) return
+    this.revealed = true
+    this.comment?.focus()
+  }
+
+  handleSubmit = (event: SubmitEvent): void => {
+    const comment = this.comment
+
+    if (comment?.required && !validators.notEmpty(comment.value)) {
+      event.preventDefault()
+      comment.setAttribute("aria-invalid", "true")
+      this.status?.removeAttribute("hidden")
+      comment.focus()
+      return
+    }
+
+    comment?.removeAttribute("aria-invalid")
+    this.status?.setAttribute("hidden", "")
+
+    const rating =
+      this.querySelector<HTMLInputElement>('input[type="radio"]:checked')?.value ?? null
+    const submitEvent: FeedbackFormSubmitEvent = new CustomEvent("mx-feedback-form-submit", {
+      bubbles: true,
+      cancelable: true,
+      detail: { rating, comment: comment?.value ?? "", form: this.form as HTMLFormElement },
+    })
+    const shouldProceed = this.dispatchEvent(submitEvent)
+    if (!shouldProceed) event.preventDefault()
+  }
+
+  get form(): HTMLFormElement | null {
+    return this.querySelector("form")
+  }
+
+  get comment(): HTMLTextAreaElement | null {
+    return this.querySelector(".mx-feedback-form__reveal textarea")
+  }
+
+  get status(): HTMLElement | null {
+    return this.querySelector('.mx-feedback-form__reveal [role="alert"]')
+  }
+
+  get submitButton(): HTMLButtonElement | null {
+    return this.querySelector(".mx-form-actions button")
+  }
+}
+
+if (!customElements.get("mx-feedback-form")) {
+  customElements.define("mx-feedback-form", FeedbackForm)
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mx-feedback-form": FeedbackForm
+  }
+}

package/src/Form/FeedbackForm/FeedbackForm.stories.ts

@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import { expect, waitFor } from "storybook/test"
+import Component from "./feedback-form.twig"
+import "./feedback-form.css"
+import "./Elements/FeedbackForm"
+
+type FeedbackFormArgs = {
+  id?: string
+  name?: string
+  question?: string
+  yesLabel?: string
+  noLabel?: string
+  secondaryText?: string
+  secondaryLinkText?: string
+  secondaryLinkHref?: string
+  commentLabel?: string
+  commentName?: string
+  commentPlaceholder?: string
+  commentRequired?: boolean
+  requiredErrorMessage?: string
+  submitLabel?: string
+  action?: string
+  method?: string
+  errorMessage?: string
+}
+
+/**
+ * A yes/no "was this page useful?" control that reveals a free-text comment field once a
+ * rating is chosen. It requires the `FeedbackForm` custom element javascript.
+ *
+ * This component never submits anywhere itself — it dispatches a cancelable
+ * `mx-feedback-form-submit` event with the chosen rating/comment before the form submits, so any
+ * backend can be wired up by the consumer.
+ */
+const meta: Meta<FeedbackFormArgs> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    id: "feedback",
+    secondaryText: "Your rating will help us improve the website.",
+  },
+}
+
+export default meta
+type Story = StoryObj<FeedbackFormArgs>
+
+export const FeedbackForm: Story = {
+  play: async ({ canvasElement, canvas, userEvent, step }) => {
+    const wrapper = canvasElement.querySelector("mx-feedback-form") as HTMLElement
+    const comment = canvas.getByLabelText("How can we make it better?") as HTMLTextAreaElement
+
+    await step("Comment field is hidden until a rating is chosen", async () => {
+      await expect(comment).not.toBeVisible()
+    })
+
+    await step("Choosing a rating reveals and focuses the comment field", async () => {
+      await userEvent.click(canvas.getByRole("radio", { name: "Yes" }))
+      await waitFor(() => expect(comment).toBeVisible())
+      await expect(comment).toHaveFocus()
+    })
+
+    await step(
+      "Submitting dispatches mx-feedback-form-submit with the rating and comment",
+      async () => {
+        let detail: { rating: string | null; comment: string } | undefined
+        wrapper.addEventListener("mx-feedback-form-submit", (event: Event) => {
+          event.preventDefault()
+          detail = (event as CustomEvent<typeof detail>).detail
+        })
+        await userEvent.type(comment, "More examples would help.")
+        await userEvent.click(canvas.getByRole("button", { name: "Submit" }))
+        await waitFor(() =>
+          expect(detail).toEqual(
+            expect.objectContaining({ rating: "yes", comment: "More examples would help." }),
+          ),
+        )
+      },
+    )
+  },
+}
+
+/** With `commentRequired`, an empty comment blocks submission and shows an inline error. */
+export const RequiredComment: Story = {
+  args: {
+    id: "feedback-required",
+    commentRequired: true,
+  },
+  play: async ({ canvas, userEvent, step }) => {
+    await step("Reveal the comment field", async () => {
+      await userEvent.click(canvas.getByRole("radio", { name: "No" }))
+      await waitFor(() => expect(canvas.getByLabelText("How can we make it better?")).toBeVisible())
+    })
+
+    await step("Submitting an empty required comment shows the error", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Submit" }))
+      await waitFor(() => expect(canvas.getByRole("alert")).toBeVisible())
+    })
+  },
+}

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

@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from "@storybook/react-vite"
+import { expect, fn, waitFor } from "storybook/test"
+import Component from "./FeedbackForm"
+import "./feedback-form.css"
+import { Page } from "../../../.storybook-react/decorators"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+  args: {
+    id: "feedback",
+    secondaryText: "If you need a response, ",
+    secondaryLinkText: "contact us",
+    secondaryLinkHref: "#contact",
+    onSubmit: fn(),
+  },
+}
+
+export default meta
+
+export const FeedbackForm: StoryObj<typeof meta> = {
+  play: async ({ canvasElement, canvas, userEvent, step, args }) => {
+    const wrapper = canvasElement.querySelector(".mx-feedback-form") as HTMLElement
+    const comment = canvas.getByLabelText("How can we make it better?") as HTMLTextAreaElement
+
+    await step("Comment field is hidden until a rating is chosen", async () => {
+      await expect(comment).not.toBeVisible()
+    })
+
+    await step("Choosing a rating reveals and focuses the comment field", async () => {
+      await userEvent.click(canvas.getByRole("radio", { name: "Yes" }))
+      await waitFor(() => expect(comment).toBeVisible())
+      await expect(comment).toHaveFocus()
+    })
+
+    await step("Submitting calls onSubmit with the chosen rating and comment", async () => {
+      await userEvent.type(comment, "More examples would help.")
+      await userEvent.click(canvas.getByRole("button", { name: "Submit" }))
+      await waitFor(() =>
+        expect(args.onSubmit).toHaveBeenCalledWith(
+          expect.objectContaining({ rating: "yes", comment: "More examples would help." }),
+        ),
+      )
+    })
+
+    await expect(wrapper).toBeInTheDocument()
+  },
+}
+
+/** With `commentRequired`, an empty comment blocks submission and shows an inline error. */
+export const RequiredComment: StoryObj<typeof meta> = {
+  args: {
+    id: "feedback-required",
+    commentRequired: true,
+    onSubmit: fn(),
+  },
+  play: async ({ canvas, userEvent, step, args }) => {
+    await step("Reveal the comment field", async () => {
+      await userEvent.click(canvas.getByRole("radio", { name: "No" }))
+      await waitFor(() => expect(canvas.getByLabelText("How can we make it better?")).toBeVisible())
+    })
+
+    await step(
+      "Submitting an empty required comment shows the error and blocks onSubmit",
+      async () => {
+        await userEvent.click(canvas.getByRole("button", { name: "Submit" }))
+        await waitFor(() => expect(canvas.getByRole("alert")).toBeVisible())
+        await expect(args.onSubmit).not.toHaveBeenCalled()
+      },
+    )
+  },
+}

package/src/Form/FeedbackForm/FeedbackForm.tsx

@@ -0,0 +1,196 @@
+import { JSX, FormEventHandler, ChangeEventHandler, useId, useRef, useState } from "react"
+import classNames from "classnames"
+import { ButtonModifiers, IconRotateModifier } from "@pnx-mixtape/ids-shape"
+import Button from "../../Atom/Button/Button"
+import Icon from "../../Atom/Icon/Icon"
+import Link from "../../Atom/Link/Link"
+import FormItem from "../FormItem/FormItem"
+import FormLabel from "../Label/FormLabel"
+import { Icons } from "../../enums"
+import { validators } from "../../Utility/utilities"
+
+const SUBMIT_MODIFIERS = [ButtonModifiers.DARK]
+
+export type FeedbackFormSubmitDetail = {
+  rating: string | null
+  comment: string
+  form: HTMLFormElement
+}
+
+type FeedbackFormProps = {
+  id?: string
+  name?: string
+  question?: string
+  yesLabel?: string
+  noLabel?: string
+  /** Optional secondary copy, e.g. pointing readers to an alternative contact channel. */
+  secondaryText?: string
+  secondaryLinkText?: string
+  secondaryLinkHref?: string
+  commentLabel?: string
+  commentName?: string
+  commentPlaceholder?: string
+  commentRequired?: boolean
+  requiredErrorMessage?: string
+  submitLabel?: string
+  /** Progressive-enhancement form target — the consumer's `onSubmit` can still take over. */
+  action?: string
+  method?: string
+  /** Consumer-supplied top-level notice, e.g. after a failed async submit. */
+  errorMessage?: string
+  /** Reflected as `aria-busy`/`disabled` on the submit button while the consumer's own submit handling is in flight. */
+  pending?: boolean
+  className?: string
+  /** Called with the form's values on a valid submit — this component never fetches/submits over the network itself. */
+  onSubmit?: (detail: FeedbackFormSubmitDetail) => void
+}
+
+const FeedbackForm = ({
+  id,
+  name = "rating",
+  question = "Was the information on this page useful?",
+  yesLabel = "Yes",
+  noLabel = "No",
+  secondaryText,
+  secondaryLinkText,
+  secondaryLinkHref,
+  commentLabel = "How can we make it better?",
+  commentName = "comment",
+  commentPlaceholder,
+  commentRequired = false,
+  requiredErrorMessage = "This field is required.",
+  submitLabel = "Submit",
+  action,
+  method = "post",
+  errorMessage,
+  pending = false,
+  className,
+  onSubmit,
+}: FeedbackFormProps): JSX.Element => {
+  const generatedId = useId()
+  const rootId = id ?? generatedId
+  const commentId = `${rootId}-comment`
+  const commentRef = useRef<HTMLTextAreaElement>(null)
+  const revealedRef = useRef(false)
+  const [showError, setShowError] = useState(false)
+
+  const handleRatingChange: ChangeEventHandler<HTMLInputElement> = () => {
+    if (revealedRef.current) return
+    revealedRef.current = true
+    commentRef.current?.focus()
+  }
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = event => {
+    const comment = commentRef.current
+
+    if (commentRequired && comment && !validators.notEmpty(comment.value)) {
+      event.preventDefault()
+      setShowError(true)
+      comment.focus()
+      return
+    }
+
+    setShowError(false)
+    if (!onSubmit) return
+    // Hand full control to the consumer — this component never submits over
+    // the network itself, so the native POST must not also fire.
+    event.preventDefault()
+    const rating = new FormData(event.currentTarget).get(name) as string | null
+    onSubmit({ rating, comment: comment?.value ?? "", form: event.currentTarget })
+  }
+
+  return (
+    <div className={classNames("mx-feedback-form", "is-enhanced", className)}>
+      <form action={action} method={method} noValidate onSubmit={handleSubmit}>
+        {errorMessage && (
+          <div className="mx-feedback-form__error" role="alert">
+            {errorMessage}
+          </div>
+        )}
+
+        <fieldset className="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+          <legend className="mx-legend">{question}</legend>
+          <div className="mx-feedback-form__option">
+            <input
+              type="radio"
+              className="sr-only"
+              id={`${rootId}-yes`}
+              name={name}
+              value="yes"
+              onChange={handleRatingChange}
+            />
+            <label
+              className="mx-button mx-button--dark mx-button--outline"
+              htmlFor={`${rootId}-yes`}
+            >
+              <Icon icon={Icons.THUMB} />
+              <span>{yesLabel}</span>
+            </label>
+          </div>
+          <div className="mx-feedback-form__option">
+            <input
+              type="radio"
+              className="sr-only"
+              id={`${rootId}-no`}
+              name={name}
+              value="no"
+              onChange={handleRatingChange}
+            />
+            <label
+              className="mx-button mx-button--dark mx-button--outline"
+              htmlFor={`${rootId}-no`}
+            >
+              <Icon icon={Icons.THUMB} rotate={IconRotateModifier.ONEEIGHTY} />
+              <span>{noLabel}</span>
+            </label>
+          </div>
+        </fieldset>
+
+        {(secondaryText || secondaryLinkText) && (
+          <p className="mx-feedback-form__secondary">
+            {secondaryText}
+            {secondaryLinkText && secondaryLinkHref && (
+              <Link to={secondaryLinkHref}>{secondaryLinkText}</Link>
+            )}
+          </p>
+        )}
+
+        <div className="mx-feedback-form__reveal">
+          <FormItem>
+            <FormLabel id={commentId} text={commentLabel} />
+            <textarea
+              ref={commentRef}
+              className="mx-input__textarea"
+              id={commentId}
+              name={commentName}
+              placeholder={commentPlaceholder}
+              required={commentRequired}
+              aria-describedby={`status-${commentId}`}
+            />
+          </FormItem>
+          <div
+            className="mx-error-message"
+            id={`status-${commentId}`}
+            role="alert"
+            hidden={!showError}
+          >
+            {requiredErrorMessage}
+          </div>
+          <div className="mx-form-actions">
+            <Button
+              type="submit"
+              modifiers={SUBMIT_MODIFIERS}
+              disabled={pending}
+              data-pending={pending}
+              aria-busy={pending}
+            >
+              {submitLabel}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default FeedbackForm