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

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

package/src/Form/FeedbackForm/README.md

@@ -0,0 +1,233 @@
+# FeedbackForm
+
+A yes/no "was this page useful?" control that reveals a free-text comment field once a rating
+is chosen.
+
+**This component never submits anywhere itself.** Progressive enhancement, native `<form
+action>` submission still works — but the Web Component dispatches a cancelable
+`mx-feedback-form-submit` event (and React calls an `onSubmit` prop) before the form submits, so
+any backend can be wired up by the consumer: a Drupal webform AJAX endpoint, a REST call,
+whatever. This keeps the component usable whether you're posting to a classic HTML form action
+or handling submission entirely in JS.
+
+---
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Form/FeedbackForm/feedback-form.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Form/FeedbackForm/feedback-form.twig' with {
+  id: 'feedback',
+  secondaryText: 'If you need a response, ',
+  secondaryLinkText: 'contact us',
+  secondaryLinkHref: '/contact',
+} %}
+```
+
+**feedback-form.twig props:**
+
+| Prop                   | Type        | Default                                    | Description                                                                                               |
+| ---------------------- | ----------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`    | `feedback-form`                            | Root id, used to derive the rating/comment field ids                                                      |
+| `name`                 | `string`    | `rating`                                   | `name` on the two rating radios                                                                           |
+| `question`             | `string`    | `Was the information on this page useful?` | Rating fieldset `<legend>` text                                                                           |
+| `yesLabel` / `noLabel` | `string`    | `Yes` / `No`                               | Rating radio labels                                                                                       |
+| `secondaryText`        | `string`    | —                                          | Optional copy shown below the rating (e.g. pointing to another contact channel)                           |
+| `secondaryLinkText`    | `string`    | —                                          | Optional link text — only rendered together with `secondaryLinkHref`                                      |
+| `secondaryLinkHref`    | `string`    | —                                          | Optional link destination                                                                                 |
+| `commentLabel`         | `string`    | `How can we make it better?`               | Label for the revealed comment field                                                                      |
+| `commentName`          | `string`    | `comment`                                  | `name` on the comment `<textarea>`                                                                        |
+| `commentPlaceholder`   | `string`    | —                                          | Comment `<textarea>` placeholder                                                                          |
+| `commentRequired`      | `boolean`   | `false`                                    | Adds `required` to the comment field, and enables the required-field error message                        |
+| `requiredErrorMessage` | `string`    | `This field is required.`                  | Message shown when `commentRequired` is set and the comment is submitted empty                            |
+| `submitLabel`          | `string`    | `Submit`                                   | Submit button text                                                                                        |
+| `action`               | `string`    | —                                          | `<form action>` — progressive-enhancement fallback target                                                 |
+| `method`               | `string`    | `post`                                     | `<form method>`                                                                                           |
+| `errorMessage`         | `string`    | —                                          | Consumer-supplied top-level notice (e.g. after a failed async submit), rendered as a `role="alert"` block |
+| `attributes`           | `Attribute` | —                                          | Optional Drupal-style attributes object — `mx-feedback-form` is always merged on top                      |
+
+Registers as `<mx-feedback-form>`. Import the element to activate its behaviour:
+
+```js
+import "@pnx-mixtape/mxds/src/Form/FeedbackForm/Elements/FeedbackForm"
+```
+
+---
+
+## HTML + Web Component
+
+```html
+<mx-feedback-form class="mx-feedback-form">
+  <form method="post">
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-yes" name="rating" value="yes" />
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes">
+          <span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-no" name="rating" value="no" />
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-no">
+          <span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+    <div class="mx-feedback-form__reveal">
+      <!-- FormItem-wrapped comment textarea, error status, submit button -->
+    </div>
+  </form>
+</mx-feedback-form>
+```
+
+**Reveal behaviour:** the comment field and submit button are always visible and submittable in
+the static/no-JS markup. Once the `<mx-feedback-form>` element connects, it adds an
+`is-enhanced` class to itself — only then does CSS hide the reveal block until a rating radio is
+checked (`:has()`-driven). This means a blocked or failed script load can never leave the form's
+only submit path permanently hidden — see [Accessibility](#accessibility).
+
+**Validation:** when `commentRequired` is set and the comment is empty on submit, the Web
+Component prevents the native submit, marks the textarea `aria-invalid="true"`, reveals the
+pre-rendered `role="alert"` status message, and moves focus to the comment field — rather than
+relying on the browser's native validation bubble (`novalidate` is set on the form).
+
+**Submit contract:** on a valid submit, the Web Component dispatches a cancelable
+`mx-feedback-form-submit` `CustomEvent` with `detail: { rating, comment, form }` _before_ the
+form actually submits. If a listener calls `preventDefault()` on that event, the native
+submission is also cancelled — full consumer ownership of the request. If nothing cancels it,
+the browser proceeds with the form's `action`/`method` as normal.
+
+```js
+const root = document.querySelector("mx-feedback-form")
+
+root.addEventListener("mx-feedback-form-submit", async event => {
+  event.preventDefault() // take over submission ourselves
+  const { rating, comment } = event.detail
+  await fetch("/api/feedback", {
+    method: "POST",
+    body: JSON.stringify({ rating, comment }),
+  })
+})
+```
+
+**Pending state:** while your own async submit is in flight, reflect it with the `pending`
+attribute:
+
+```js
+root.setAttribute("pending", "")
+// ... await your request ...
+root.removeAttribute("pending")
+```
+
+This adds mxds's standard `pending` custom state (`internals_.states`, so `:state(pending)` is
+selectable in CSS) and disables/`aria-busy`s the submit button.
+
+---
+
+## React
+
+```tsx
+import { FeedbackForm } from "@pnx-mixtape/mxds/react"
+
+const Example = () => {
+  const [pending, setPending] = useState(false)
+
+  const handleSubmit = async ({ rating, comment }) => {
+    setPending(true)
+    await fetch("/api/feedback", { method: "POST", body: JSON.stringify({ rating, comment }) })
+    setPending(false)
+  }
+
+  return (
+    <FeedbackForm
+      id="feedback"
+      secondaryText="If you need a response, "
+      secondaryLinkText="contact us"
+      secondaryLinkHref="/contact"
+      pending={pending}
+      onSubmit={handleSubmit}
+    />
+  )
+}
+```
+
+**`FeedbackForm` props:** same set as the Twig props above (camelCase, no `attributes`), plus:
+
+| Prop        | Type                                          | Default | Description                                                                     |
+| ----------- | --------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `pending`   | `boolean`                                     | `false` | Reflected as `aria-busy`/`disabled` on the submit button                        |
+| `onSubmit`  | `(detail: { rating, comment, form }) => void` | —       | Called on a valid submit — see [React ⇄ Twig parity](#react--twig-parity) below |
+| `className` | `string`                                      | —       | Extra class on the root                                                         |
+
+---
+
+### React ⇄ Twig parity
+
+- **Submit ownership differs by design.** In Twig/Web Component, `mx-feedback-form-submit` is a
+  _cancelable_ event — the native form submission proceeds unless a listener calls
+  `preventDefault()`. In React, supplying `onSubmit` always prevents the native submission (a
+  React app wiring up `onSubmit` expects full control, not an opt-in interception) — there's no
+  React equivalent of "let it submit natively AND notify me."
+- `pending` has no Twig prop — it's a runtime-only concept. The Twig/Web-Component equivalent is
+  the `pending` HTML _attribute_, toggled by your own JS after render (see above), not a
+  template-render-time prop.
+- `yesIcon`, `noIcon`, `commentItem`, and `submitButton` in `feedback-form.twig` are internal
+  `{% set x %}...{% endset %}` template locals used to pre-render nested `Icon`/`FormItem`/
+  `Button` markup for composition — not props, and not present in React (which composes the
+  equivalent components directly in JSX). `pnpm audit-parity`'s static extractor doesn't
+  recognize the `{% set x %}...{% endset %}` capture-block form (only the inline `{% set x = … %}`
+  form), so it misreports these as Twig-only props — a known tool limitation, not a real
+  divergence.
+- `commentPlaceholder` and `commentRequired` genuinely are used in Twig — passed through to
+  `Form/Textarea/input-textarea.twig` inside a nested `{% include ... with {...} %}` call. The
+  audit tool's extractor doesn't scan inside `with {}` object literals, so it misreports these as
+  unused — also a known tool limitation.
+
+---
+
+## Modifiers
+
+No BEM modifier classes. `mx-feedback-form--l`-style breakpoint modifiers don't apply here —
+this component isn't visibility/breakpoint-gated the way `BackToTop`/`Sticky` are.
+
+---
+
+## Accessibility
+
+- The rating group uses a real `<fieldset>`/`<legend>` — no `role="radiogroup"` needed, this is
+  the native equivalent.
+- Each rating option is a real, focusable `<input type="radio">` paired with a `<label>` styled
+  as a button (reusing the `Button` atom's own classes/custom properties — `mx-button
+  mx-button--dark mx-button--outline`, with `:has(input:checked)` undoing the outline to show
+  the selected state). The input itself is visually hidden with `.sr-only` (clip, not
+  `display:none`) so it stays in the tab order and the accessibility tree — only its default
+  circular appearance is hidden, keyboard operation (Tab to focus, arrow keys to move within the
+  native radio group, Space/click to select) is unaffected. The visible label still carries icon
+  - text, not icon-only/visually-hidden text.
+- **The comment field and submit button are reachable without JavaScript.** The reveal-on-rating
+  behaviour is only switched on once JS is confirmed running (`is-enhanced`, added by the Web
+  Component's `connectedCallback`; always present in React) — a blocked or failed script load
+  never leaves the form's only path to submit permanently hidden.
+- The required-field error is a `role="alert"` region, programmatically associated with the
+  comment field via `aria-describedby`, and focus moves to the field when validation fails.
+- The top-level `errorMessage` notice is also `role="alert"`.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-feedback-form {
+  --feedback-form-icon-size: var(--spacing-m); /* size of the thumb icons */
+}
+```

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

@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Feedback Form 1`] = `
+"
+
+<mx-feedback-form class="mx-feedback-form is-enhanced">
+  <form action="" method="post" novalidate="">
+    
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-yes" name="rating" value="yes">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes">
+          
+<span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-no" name="rating" value="no">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-no">
+          
+<span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+
+          <p class="mx-feedback-form__secondary">
+        Your rating will help us improve the website.
+      </p>
+    
+    <div class="mx-feedback-form__reveal">
+        
+<div class="mx-form-item">
+      
+<label class="mx-label" for="feedback-comment">
+  How can we make it better?
+  </label>
+
+  
+      
+<textarea aria-describedby="unique-0" class="mx-input__textarea" id="feedback-comment" name="unique-0"></textarea>
+
+  
+  
+</div>
+
+      <div class="mx-error-message" id="unique-0" role="alert" hidden="">This field is required.</div>
+      <div class="mx-form-actions">
+            
+  <button class="mx-button mx-button--dark" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+
+      </div>
+    </div>
+  </form>
+</mx-feedback-form>
+"
+`;
+
+exports[`Required Comment 1`] = `
+"
+
+<mx-feedback-form class="mx-feedback-form is-enhanced">
+  <form action="" method="post" novalidate="">
+    
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-required-yes" name="rating" value="yes">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-yes">
+          
+<span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-required-no" name="rating" value="no">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-no">
+          
+<span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+
+          <p class="mx-feedback-form__secondary">
+        Your rating will help us improve the website.
+      </p>
+    
+    <div class="mx-feedback-form__reveal">
+        
+<div class="mx-form-item">
+      
+<label class="mx-label" for="feedback-required-comment">
+  How can we make it better?
+  </label>
+
+  
+      
+<textarea aria-describedby="unique-0" class="mx-input__textarea" id="feedback-required-comment" name="unique-0" required="" aria-invalid="true"></textarea>
+
+  
+  
+</div>
+
+      <div class="mx-error-message" id="unique-0" role="alert">This field is required.</div>
+      <div class="mx-form-actions">
+            
+  <button class="mx-button mx-button--dark" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+
+      </div>
+    </div>
+  </form>
+</mx-feedback-form>
+"
+`;

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

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Feedback Form 1`] = `"<div class="mx-feedback-form is-enhanced"><form method="post" novalidate=""><fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating"><legend class="mx-legend">Was the information on this page useful?</legend><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-yes" type="radio" value="yes" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes"><span class="mx-icon mx-icon--thumb"></span><span>Yes</span></label></div><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-no" type="radio" value="no" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-no"><span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span><span>No</span></label></div></fieldset><p class="mx-feedback-form__secondary">If you need a response, <a href="#contact" class="mx-link">contact us</a></p><div class="mx-feedback-form__reveal"><div class="mx-form-item"><label class="mx-label" for="feedback-comment">How can we make it better?</label><textarea class="mx-input__textarea" id="feedback-comment" name="comment" aria-describedby="status-feedback-comment"></textarea></div><div class="mx-error-message" id="status-feedback-comment" role="alert" hidden="">This field is required.</div><div class="mx-form-actions"><button class="mx-button mx-button--dark" type="submit" data-pending="false" aria-busy="false"><span>Submit</span></button></div></div></form></div>"`;
+
+exports[`Required Comment 1`] = `"<div class="mx-feedback-form is-enhanced"><form method="post" novalidate=""><fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating"><legend class="mx-legend">Was the information on this page useful?</legend><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-required-yes" type="radio" value="yes" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-yes"><span class="mx-icon mx-icon--thumb"></span><span>Yes</span></label></div><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-required-no" type="radio" value="no" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-no"><span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span><span>No</span></label></div></fieldset><p class="mx-feedback-form__secondary">If you need a response, <a href="#contact" class="mx-link">contact us</a></p><div class="mx-feedback-form__reveal"><div class="mx-form-item"><label class="mx-label" for="feedback-required-comment">How can we make it better?</label><textarea class="mx-input__textarea" id="feedback-required-comment" name="comment" required="" aria-describedby="status-feedback-required-comment"></textarea></div><div class="mx-error-message" id="status-feedback-required-comment" role="alert">This field is required.</div><div class="mx-form-actions"><button class="mx-button mx-button--dark" type="submit" data-pending="false" aria-busy="false"><span>Submit</span></button></div></div></form></div>"`;