@nypl/design-system-react-components 0.25.9 → 0.25.12

package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap

@@ -433,17 +433,21 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
+      className="css-fjhuh4"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
         }
-      }
-      data-isinvalid={false}
-      id="invalid-helper-text"
-    />
+        data-isinvalid={false}
+        id="invalid-helper-text"
+      />
+    </div>
   </fieldset>
 </div>
 `;
@@ -545,17 +549,21 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
+      className="css-fjhuh4"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
         }
-      }
-      data-isinvalid={false}
-      id="disabled-helper-text"
-    />
+        data-isinvalid={false}
+        id="disabled-helper-text"
+      />
+    </div>
   </fieldset>
 </div>
 `;

package/src/components/Fieldset/Fieldset.stories.mdx

@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.3`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Fieldset} />
 

package/src/components/Fieldset/Fieldset.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 interface FieldsetProps {
-  /** Children to render. Typically form-related components are used. */
-  children: React.ReactNode;
   /** Additional class name to add. */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -24,7 +22,7 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-const Fieldset: React.FC<FieldsetProps> = ({
+const Fieldset = ({
   children,
   className,
   id,
@@ -32,7 +30,7 @@ const Fieldset: React.FC<FieldsetProps> = ({
   isRequired = false,
   legendText,
   optReqFlag = true,
-}) => {
+}: React.PropsWithChildren<FieldsetProps>) => {
   const styles = useMultiStyleConfig("Fieldset", { isLegendHidden });
   return (
     <Box as="fieldset" id={id} __css={styles} className={className}>

package/src/components/Form/Form.stories.mdx

@@ -14,7 +14,7 @@ import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import DatePicker from "../DatePicker/DatePicker";
 import { DatePickerTypes } from "../DatePicker/DatePickerTypes";
 import Form, { FormRow, FormField } from "./Form";
-import { FormSpacing } from "./FormTypes";
+import { FormGaps } from "./FormTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
@@ -27,7 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
+export const enumValues = getStorybookEnumValues(FormGaps, "FormGaps");
 
 <Meta
   title={getCategory("Form")}
@@ -47,9 +47,9 @@ export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
       control: { type: "radio" },
       options: ["get", "post"],
     },
-    spacing: {
+    gap: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "FormSpacing.Large" } },
+      table: { defaultValue: { summary: "FormGaps.Large" } },
       options: enumValues.options,
     },
   }}
@@ -60,15 +60,31 @@ export const enumValues = getStorybookEnumValues(FormSpacing, "FormSpacing");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Form} />
 
-The `Form` component renders a standard `<form>` element and should be used to handle layout and spacing for child input fields. `FormRow` and `FormField` components should be used to build the `<form>` struture and to arrange input fields as needed.
+The `Form` component renders a standard `<form>` element and should be used to
+handle layout and spacing for child input fields. `FormRow` and `FormField`
+components should be used to build the `<form>` structure and to arrange input
+fields as needed.
 
-`FormField` should be used as a parent for all input components from the DS (`Button`, `Select`, `TextInput`, etc.).
+```jsx
+<Form>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+  <FormRow>
+    <FormField>{/* ... */}</FormField>
+  </FormRow>
+</Form>
+```
+
+`FormField` should be used as a parent for all input components from the DS
+(`Button`, `Select`, `TextInput`, etc.).
 
-`FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
+`FormRow` should be used as a parent of multiple `FormField` components when you
+need to render multiple input components in a horizontal row.
 
 <Canvas withToolbar>
   <Story
@@ -78,11 +94,11 @@ The `Form` component renders a standard `<form>` element and should be used to h
       className: undefined,
       id: "form-id",
       method: "get",
-      spacing: "FormSpacing.Large",
+      gap: "FormGaps.Large",
     }}
   >
     {(args) => (
-      <Form {...args} spacing={enumValues.getValue(args.spacing)}>
+      <Form {...args} gap={enumValues.getValue(args.gap)}>
         <FormRow>
           <FormField>
             <TextInput
@@ -205,7 +221,7 @@ export const formRow = (nameString, size) => {
   return (
     <li key={size}>
       <Heading level={HeadingLevels.Three}>{labelText}</Heading>
-      <Form spacing={size}>
+      <Form gap={size}>
         <FormRow>
           <FormField>
             <Select
@@ -250,16 +266,18 @@ export const formRow = (nameString, size) => {
   );
 };
 export const sizes = [];
-for (const formSpacing in FormSpacing) {
-  sizes.push(formRow(`FormSpacing.${formSpacing}`, FormSpacing[formSpacing]));
+for (const FormGaps in FormGaps) {
+  sizes.push(formRow(`FormGaps.${FormGaps}`, FormGaps[FormGaps]));
 }
 export const getForms = (list) => <ul style={{ listStyle: "none" }}>{list}</ul>;
 
-By default, the `Form` component will handle the NYPL spacing around form input elements. The default spacing value is `large`, which corresponds to the CSS variable `--nypl-space-l` (2rem / 32px).
+By default, the `Form` component will handle the NYPL spacing around form input
+elements. The default spacing value is `large`, which corresponds to the CSS
+variable `--nypl-space-l` (2rem / 32px).
 
 **IMPORTANT:** The default spacing should not be overwritten without a very good reason.
 
-Below are the spacing variants available with the `FormSpacing` enum.
+Below are the spacing variants available with the `FormGaps` enum.
 
 <Canvas>
   <Story
@@ -277,7 +295,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
 <Story name="Example Code" />
 
 ```jsx
-<Form action="/end/point" method="get" spacing={FormSpacing.Large}>
+<Form action="/end/point" method="get" gap={FormGaps.Large}>
   <FormField>
     <TextInput
       labelText="Username"

package/src/components/Form/Form.test.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Form, { FormRow, FormField } from "./Form";
-// import { FormSpacing } from "./FormTypes";
+// import { FormGaps } from "./FormTypes";
 import TextInput from "../TextInput/TextInput";
 
 describe("Form Accessibility", () => {
@@ -12,6 +12,19 @@ describe("Form Accessibility", () => {
     const { container } = render(<Form />);
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for the full hierachy", async () => {
+    const { container } = render(
+      <Form>
+        <FormRow>
+          <FormField>Form Field 1</FormField>
+          <FormField>Form Field 2</FormField>
+          <FormField>Form Field 3</FormField>
+        </FormRow>
+      </Form>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Form Snapshot", () => {
@@ -101,11 +114,87 @@ describe("Form", () => {
     expect(form).toHaveAttribute("method", "get");
   });
 
+  it("passes down the `Form`'s id down to its children", () => {
+    const { container } = render(
+      <Form id="formId">
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+
+    expect(container.querySelector("#formId")).toBeInTheDocument();
+    // The first `FormRow` adds "child0" to its id
+    expect(container.querySelector("#formId-child0")).toBeInTheDocument();
+    // The first `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild0")
+    ).toBeInTheDocument();
+    // The first `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child0-grandchild1")
+    ).toBeInTheDocument();
+    // The second `FormRow` adds "child1" to its id
+    expect(container.querySelector("#formId-child1")).toBeInTheDocument();
+    // The second `FormRow`'s first `FormField` adds "grandchild0" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild0")
+    ).toBeInTheDocument();
+    // The second `FormRow`'s second `FormField` adds "grandchild1" to its id
+    expect(
+      container.querySelector("#formId-child1-grandchild1")
+    ).toBeInTheDocument();
+  });
+
+  it("logs a warning if a child of `FormRow` is not a `FormField`", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(
+      <Form>
+        <FormRow>
+          <div>Not a FormField</div>
+        </FormRow>
+      </Form>
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "FormRow children must be `FormField` components."
+    );
+  });
+
+  it("calls the onSubmit function", () => {
+    const onSubmit = jest.fn();
+    render(
+      <Form onSubmit={onSubmit}>
+        <FormRow>
+          <FormField>
+            <TextInput labelText="Input Field" />
+          </FormField>
+        </FormRow>
+      </Form>
+    );
+    const form = screen.getByRole("form");
+    expect(onSubmit).toHaveBeenCalledTimes(0);
+    fireEvent.submit(form);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
   // TO DO: There's somethign weird about checking for the "grid-gap" style.
   // Other styles can be validated, but "grid-gap" is being ellusive.
   // it("Renders a <form> element with spacing variant applied", () => {
   //   render(
-  //     <Form spacing={FormSpacing.ExtraSmall}>
+  //     <Form gap={FormGaps.ExtraSmall}>
   //       <FormRow />
   //     </Form>
   //   );

package/src/components/Form/Form.tsx

@@ -1,30 +1,29 @@
-import { Box } from "@chakra-ui/react";
 import * as React from "react";
 
-import { FormSpacing } from "./FormTypes";
+import { FormGaps } from "./FormTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import generateUUID from "../../helpers/generateUUID";
 
-export interface FormChildProps {
-  /** className to be applied to FormRow */
+interface FormBaseProps {
+  /** className to be applied to FormRow, FormField, and Form */
   className?: string;
-  /** Spacing size (internal use) */
-  gap?: FormSpacing;
+  /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
+   * spacing will be used; ```IMPORTANT: for general form layout, this prop
+   * should not be used``` */
+  gap?: FormGaps;
   /** ID that other components can cross reference (internal use) */
   id?: string;
 }
 
-export interface FormProps {
+export interface FormChildProps extends FormBaseProps {}
+
+export interface FormProps extends FormBaseProps {
   /** Optional form `action` attribute */
   action?: string;
-  /** Optional className you can add in addition to `form` */
-  className?: string;
-  /** Optional ID that other components can cross reference */
-  id?: string;
   /** Optional form `method` attribute */
   method?: "get" | "post";
-  /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
-  spacing?: FormSpacing;
+  /** Function to call for the `onSubmit` form event. */
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 /** FormRow child-component */
@@ -35,7 +34,11 @@ export function FormRow(props: React.PropsWithChildren<FormChildProps>) {
     children,
     (child: React.ReactElement, i) => {
       if (!child) return null;
-      return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      if (child.type === FormField || child.props.mdxType === "FormField") {
+        return React.cloneElement(child, { id: `${id}-grandchild${i}` });
+      }
+      console.warn("FormRow children must be `FormField` components.");
+      return null;
     }
   );
   return (
@@ -61,9 +64,10 @@ export default function Form(props: React.PropsWithChildren<FormProps>) {
     action,
     children,
     className,
+    gap = FormGaps.Large,
     id = generateUUID(),
     method,
-    spacing = FormSpacing.Large,
+    onSubmit,
   } = props;
 
   let attributes = {};
@@ -76,21 +80,21 @@ export default function Form(props: React.PropsWithChildren<FormProps>) {
   const alteredChildren = React.Children.map(
     children,
     (child: React.ReactElement, i) => {
-      return React.cloneElement(child, { gap: spacing, id: `${id}-child${i}` });
+      return React.cloneElement(child, { gap, id: `${id}-child${i}` });
     }
   );
 
   return (
-    <Box
-      as="form"
+    <form
       aria-label="form"
+      className={className}
       id={id}
+      onSubmit={onSubmit}
       {...attributes}
-      className={className}
     >
-      <SimpleGrid columns={1} gap={spacing} id={id + "-parent"}>
+      <SimpleGrid columns={1} gap={gap} id={`${id}-parent`}>
         {alteredChildren}
       </SimpleGrid>
-    </Box>
+    </form>
   );
 }

package/src/components/Form/FormTypes.tsx

@@ -1,3 +1,3 @@
-import { GridGaps as FormSpacing } from "../Grid/GridTypes";
+import { GridGaps as FormGaps } from "../Grid/GridTypes";
 
-export { FormSpacing };
+export { FormGaps };

package/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Form Snapshot Renders the UI snapshot correctly 1`] = `
 <form
   aria-label="form"
-  className="css-0"
   id="snapshot-form"
 >
   <div

package/src/components/HelperErrorText/HelperErrorText.stories.mdx

@@ -47,7 +47,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={HelperErrorText} />
 

package/src/components/Hero/Hero.stories.mdx

@@ -26,7 +26,7 @@ export const enumValues = getStorybookEnumValues(HeroTypes, "HeroTypes");
   parameters={{
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10968%3A5314",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36817%3A23704",
     },
     jest: ["Hero.test.tsx"],
   }}

package/src/components/HorizontalRule/HorizontalRule.stories.mdx

@@ -9,6 +9,7 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import HorizontalRule from "./HorizontalRule";
+import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -25,7 +26,7 @@ import { getCategory } from "../../utils/componentCategories";
   argTypes={{
     className: { control: false },
     height: { table: { defaultValue: { summary: "2px" } } },
-    width: { table: { defaultValue: { summary: "auto" } } },
+    width: { table: { defaultValue: { summary: "100%" } } },
   }}
 />
 
@@ -34,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.0`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.10`  |
 
 <Description of={HorizontalRule} />
 

package/src/components/HorizontalRule/HorizontalRule.tsx

@@ -16,12 +16,12 @@ export interface HorizontalRuleProps {
   height?: string;
   /** Optional width value. This value should be entered with the same
    * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-   * omitted, the horizontal rule will have a default width of "auto". */
+   * omitted, the horizontal rule will have a default width of "100%". */
   width?: string;
 }
 
 export default function HorizontalRule(props: HorizontalRuleProps) {
-  const { align, className, height = "2px", width = "auto" } = props;
+  const { align, className, height = "2px", width = "100%" } = props;
   const styles = useStyleConfig("HorizontalRule", { align });
   let finalHeight = height;
 

package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`HorizontalRule renders the UI snapshot correctly 1`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 2`] = `
 <hr
-  className="css-1pwp4fu"
+  className="css-154goob"
 />
 `;
 
@@ -20,12 +20,12 @@ exports[`HorizontalRule renders the UI snapshot correctly 3`] = `
 
 exports[`HorizontalRule renders the UI snapshot correctly 4`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;
 
 exports[`HorizontalRule renders the UI snapshot correctly 5`] = `
 <hr
-  className="css-ili6fu"
+  className="css-1bhbd2a"
 />
 `;

package/src/components/Icons/Icon.stories.mdx

@@ -89,7 +89,7 @@ export const rotationEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Icon} />
 

package/src/components/Icons/Icon.test.tsx

@@ -35,7 +35,7 @@ describe("Icon", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Icon />);
     expect(warn).toHaveBeenCalledWith(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
   });
 

package/src/components/Icons/Icon.tsx

@@ -82,7 +82,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     return null;
   } else if (!name && !children) {
     console.warn(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
     return null;
   }

package/src/components/Icons/IconTypes.tsx

@@ -22,19 +22,21 @@ export enum IconColors {
   UiWhite = "ui.white",
   BrandPrimary = "brand.primary",
   BrandSecondary = "brand.secondary",
-  SectionWhatsOnPrimary = "section.whats-on.primary",
-  SectionWhatsOnSecondary = "section.whats-on.secondary",
+  SectionBlogsPrimary = "section.blogs.primary",
+  SectionBlogsSecondary = "section.blogs.secondary",
   SectionBooksAndMorePrimary = "section.books-and-more.primary",
   SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
-  SectionResearchPrimary = "section.research.primary",
-  SectionResearchSecondary = "section.research.secondary",
+  SectionEducationPrimary = "section.education.primary",
+  SectionEducationSecondary = "section.education.secondary",
   SectionLocationsPrimary = "section.locations.primary",
   SectionLocationsSecondary = "section.locations.secondary",
-  SectionBlogsPrimary = "section.blogs.primary",
-  SectionBlogsSecondary = "section.blogs.secondary",
+  SectionResearchPrimary = "section.research.primary",
+  SectionResearchSecondary = "section.research.secondary",
   SectionResearchLibraryLpa = "section.research-library.lpa",
   SectionResearchLibrarySchomburg = "section.research-library.schomburg",
   SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
+  SectionWhatsOnPrimary = "section.whats-on.primary",
+  SectionWhatsOnSecondary = "section.whats-on.secondary",
 }
 
 export enum IconSizes {

package/src/components/List/List.stories.mdx

@@ -51,7 +51,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.12`  |
 
 <Description of={List} />
 
@@ -63,8 +63,15 @@ export const animalCrossingDefinitions = [
   },
   {
     term: "Golden trout",
-    definition:
-      "The golden trout is a beautifully colored fish that can only live in very clean waters. They are difficult to come across since they are found only in high mountain streams. As a side note, I find it much easier to appreciate fish that aren't such prima donnas about everything.",
+    definition: (
+      <p>
+        The golden trout is a <b>beautifully</b> colored fish that can only live
+        in very clean waters. They are difficult to come across since they are
+        found only in high mountain streams. As a side note, I find it much
+        easier to appreciate fish that aren't such prima donnas about
+        everything.
+      </p>
+    ),
   },
   {
     term: "Rainbowfish",
@@ -73,8 +80,20 @@ export const animalCrossingDefinitions = [
   },
   {
     term: "Suckerfish",
-    definition:
-      "The suckerfish is a curious fish that likes to attach itself with its sucker mouth to larger marine animals. The benefit to the suckerfish is that it gets to eat smaller parasites and dead skin off the host's body. Amusingly, some people have used suckerfish on cords to catch large turtles with the fish's own suction! I imagine this practice is the cause of some awkward conversations between fish and turtle, eh wot?",
+    definition: (
+      <p>
+        The{" "}
+        <Link href="https://animalcrossing.fandom.com/wiki/Suckerfish">
+          suckerfish
+        </Link>{" "}
+        is a curious fish that likes to attach itself with its sucker mouth to
+        larger marine animals. The benefit to the suckerfish is that it gets to
+        eat smaller parasites and dead skin off the host's body. Amusingly, some
+        people have used suckerfish on cords to catch large turtles with the
+        fish's own suction! I imagine this practice is the cause of some awkward
+        conversations between fish and turtle, eh wot?
+      </p>
+    ),
   },
 ];
 export const itemGroups = [