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

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
+import { Flex, Spacer } from "@chakra-ui/react";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
+import * as React from "react";
 import renderer from "react-test-renderer";
 
-// import * as generateUUID from "../../helpers/generateUUID";
 import RadioGroup from "./RadioGroup";
 import Radio from "../Radio/Radio";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
-import userEvent from "@testing-library/user-event";
+import { LayoutTypes } from "../../helpers/enums";
 
 describe("Radio Accessibility", () => {
-  it("passes axe accessibility", async () => {
+  it("passes axe accessibility with string labels", async () => {
     const { container } = render(
       <RadioGroup labelText="RadioGroup example" name="a11y-test">
         <Radio value="2" labelText="Radio 2" />
@@ -21,6 +21,36 @@ describe("Radio Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility with jsx labels", async () => {
+    const { container } = render(
+      <RadioGroup labelText="RadioGroup example" name="a11y-test" isFullWidth>
+        <Radio
+          id="arts"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+        <Radio
+          id="English"
+          labelText={
+            <Flex>
+              <span>English</span>
+              <Spacer />
+              <span>23</span>
+            </Flex>
+          }
+          value="English"
+        />
+      </RadioGroup>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Radio Button", () => {
@@ -233,7 +263,7 @@ describe("Radio Button", () => {
           labelText="row"
           name="row"
           id="row"
-          layout={RadioGroupLayoutTypes.Row}
+          layout={LayoutTypes.Row}
         >
           <Radio value="2" labelText="Radio 2" id="radio-2" />
           <Radio value="3" labelText="Radio 3" id="radio-3" />
@@ -326,6 +356,39 @@ describe("Radio Button", () => {
         </RadioGroup>
       )
       .toJSON();
+    const withJSXRadioLabels = renderer
+      .create(
+        <RadioGroup
+          id="jsxLabels"
+          isFullWidth
+          labelText="RadioGroup example"
+          name="a11y-test"
+        >
+          <Radio
+            id="arts"
+            labelText={
+              <Flex>
+                <span>Arts</span>
+                <Spacer />
+                <span>4</span>
+              </Flex>
+            }
+            value="arts"
+          />
+          <Radio
+            id="English"
+            labelText={
+              <Flex>
+                <span>English</span>
+                <Spacer />
+                <span>23</span>
+              </Flex>
+            }
+            value="English"
+          />
+        </RadioGroup>
+      )
+      .toJSON();
 
     expect(column).toMatchSnapshot();
     expect(row).toMatchSnapshot();
@@ -336,6 +399,7 @@ describe("Radio Button", () => {
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(withJSXRadioLabels).toMatchSnapshot();
   });
 
   it("should throw warning when a non-Radio component is used as a child", () => {
@@ -346,7 +410,8 @@ describe("Radio Button", () => {
       </RadioGroup>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Only `Radio` components are allowed inside the `RadioGroup` component."
+      "NYPL Reservoir RadioGroup: Only `Radio` components are allowed inside " +
+        "the `RadioGroup` component."
     );
   });
 });

package/src/components/RadioGroup/RadioGroup.tsx

@@ -12,7 +12,7 @@ import HelperErrorText, {
 } from "../HelperErrorText/HelperErrorText";
 import { spacing } from "../../theme/foundations/spacing";
 import Radio from "../Radio/Radio";
-import { RadioGroupLayoutTypes } from "./RadioGroupLayoutTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface RadioGroupProps {
@@ -28,6 +28,8 @@ export interface RadioGroupProps {
   invalidText?: HelperErrorTextType;
   /** Adds the 'disabled' prop to the input when true. */
   isDisabled?: boolean;
+  /** Set's the `Radio`s' wrapper to be full width. */
+  isFullWidth?: boolean;
   /** Adds the 'aria-invalid' attribute to the input and
    * sets the error state when true. */
   isInvalid?: boolean;
@@ -37,7 +39,7 @@ export interface RadioGroupProps {
    * true, or an "aria-label" if `showLabel` is false. */
   labelText: string;
   /** Renders the Radio buttons in a row or column (default). */
-  layout?: RadioGroupLayoutTypes;
+  layout?: LayoutTypes;
   /** The `name` prop indicates the form group for all the Radio children. */
   name: string;
   /** The action to perform on the `<input>`'s onChange function  */
@@ -68,10 +70,11 @@ const RadioGroup = React.forwardRef<
     id = generateUUID(),
     invalidText,
     isDisabled = false,
+    isFullWidth = false,
     isInvalid = false,
     isRequired = false,
     labelText,
-    layout = RadioGroupLayoutTypes.Column,
+    layout = LayoutTypes.Column,
     name,
     onChange = onChangeDefault,
     optReqFlag = true,
@@ -79,8 +82,7 @@ const RadioGroup = React.forwardRef<
     showLabel = true,
   } = props;
   const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
-  const spacingProp =
-    layout === RadioGroupLayoutTypes.Column ? spacing.s : spacing.l;
+  const spacingProp = layout === LayoutTypes.Column ? spacing.s : spacing.l;
   const newChildren = [];
 
   // Use Chakra's RadioGroup hook to set and get the proper props
@@ -100,7 +102,8 @@ const RadioGroup = React.forwardRef<
         noop();
       } else {
         console.warn(
-          "Only `Radio` components are allowed inside the `RadioGroup` component."
+          "NYPL Reservoir RadioGroup: Only `Radio` components are allowed " +
+            "inside the `RadioGroup` component."
         );
       }
     }
@@ -121,7 +124,7 @@ const RadioGroup = React.forwardRef<
   });
 
   // Get the Chakra-based styles for the custom elements in this component.
-  const styles = useMultiStyleConfig("RadioGroup", {});
+  const styles = useMultiStyleConfig("RadioGroup", { isFullWidth });
 
   return (
     <Fieldset

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

@@ -1072,3 +1072,143 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
   </div>
 </fieldset>
 `;
+
+exports[`Radio Button renders the UI snapshot correctly 10`] = `
+<fieldset
+  className=" css-0"
+  id="radio-group-jsxLabels"
+>
+  <legend>
+    RadioGroup example
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <div
+    aria-label={null}
+    className="chakra-stack css-1wdv1uh"
+    role="radiogroup"
+  >
+    <label
+      className="chakra-radio css-13p0l12"
+    >
+      <input
+        checked={false}
+        className="chakra-radio__input"
+        disabled={false}
+        id="arts"
+        name="a11y-test"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        required={false}
+        style={
+          Object {
+            "border": "0px",
+            "clip": "rect(0px, 0px, 0px, 0px)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": "0px",
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+        type="radio"
+        value="arts"
+      />
+      <span
+        aria-hidden={true}
+        className="css-ssalds"
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+      />
+      <span
+        className="chakra-radio__label css-1y8kf23"
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+      >
+        <div
+          className="css-k008qs"
+        >
+          <span>
+            Arts
+          </span>
+          <div
+            className="css-17xejub"
+          />
+          <span>
+            4
+          </span>
+        </div>
+      </span>
+    </label>
+    <label
+      className="chakra-radio css-13p0l12"
+    >
+      <input
+        checked={false}
+        className="chakra-radio__input"
+        disabled={false}
+        id="English"
+        name="a11y-test"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        required={false}
+        style={
+          Object {
+            "border": "0px",
+            "clip": "rect(0px, 0px, 0px, 0px)",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": "0px",
+            "position": "absolute",
+            "whiteSpace": "nowrap",
+            "width": "1px",
+          }
+        }
+        type="radio"
+        value="English"
+      />
+      <span
+        aria-hidden={true}
+        className="css-ssalds"
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+      />
+      <span
+        className="chakra-radio__label css-1y8kf23"
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+      >
+        <div
+          className="css-k008qs"
+        >
+          <span>
+            English
+          </span>
+          <div
+            className="css-17xejub"
+          />
+          <span>
+            23
+          </span>
+        </div>
+      </span>
+    </label>
+  </div>
+</fieldset>
+`;

package/src/components/SearchBar/SearchBar.stories.mdx

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

package/src/components/SearchBar/SearchBar.tsx

@@ -129,7 +129,7 @@ export default function SearchBar(props: SearchBarProps) {
       labelText={selectProps?.labelText}
       name={selectProps?.name}
       onChange={selectProps?.onChange}
-      type={SelectTypes.SearchBar}
+      selectType={SelectTypes.SearchBar}
       {...stateProps}
     >
       {selectProps?.optionsData.map((option) => (
@@ -147,12 +147,12 @@ export default function SearchBar(props: SearchBarProps) {
       name={textInputProps?.name}
       onChange={textInputProps?.onChange}
       placeholder={textInputPlaceholder}
-      type={TextInputTypes.text}
-      variantType={
+      textInputType={
         selectElem
           ? TextInputVariants.SearchBarSelect
           : TextInputVariants.SearchBar
       }
+      type={TextInputTypes.text}
       value={textInputProps?.value}
       {...stateProps}
     />

package/src/components/Select/Select.stories.mdx

@@ -54,7 +54,7 @@ export const enumValues = getStorybookEnumValues(SelectTypes, "SelectTypes");
     showOptReqLabel: {
       table: { defaultValue: { summary: true } },
     },
-    type: {
+    selectType: {
       control: false,
       table: { defaultValue: { summary: "SelectTypes.Default" } },
     },
@@ -67,7 +67,7 @@ export const enumValues = getStorybookEnumValues(SelectTypes, "SelectTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Select} />
 
@@ -77,19 +77,6 @@ prop, regardless of the label visibility. Additionally, while the `id` prop is
 optional, a unique `id` attribute is necessary for accessibility. If the prop
 is left blank, a value will be generated for you.
 
-The `Select` component renders all the necessary wrapping and associated text
-elements, but the select options _need_ to be child `<option>` HTML elements.
-
-```jsx
-<Select labelText="What is your favorite color?" name="color">
-  <option value="red">Red</option>
-  <option value="green">Green</option>
-  <option value="blue">Blue</option>
-  <option value="black">Black</option>
-  <option value="white">White</option>
-</Select>
-```
-
 <Canvas withToolbar>
   <Story
     name="Select with Controls"
@@ -107,7 +94,7 @@ elements, but the select options _need_ to be child `<option>` HTML elements.
       showHelperInvalidText: undefined,
       showLabel: true,
       showOptReqLabel: true,
-      type: SelectTypes.Default,
+      selectType: SelectTypes.Default,
       value: undefined,
     }}
   >
@@ -125,6 +112,29 @@ elements, but the select options _need_ to be child `<option>` HTML elements.
 
 <ArgsTable story="Select with Controls" />
 
+## Option Elements
+
+The `Select` component renders all the necessary wrapping and associated text
+elements, but the select options _need_ to be child `<option>` HTML elements.
+
+```jsx
+<Select labelText="What is your favorite color?" name="color">
+  <option value="red">Red</option>
+  <option value="green">Green</option>
+  <option value="blue">Blue</option>
+  <option value="black">Black</option>
+  <option value="white">White</option>
+</Select>
+```
+
+There are two NYPL best practices to consider when using the `Select` component
+and `option` HTML elements:
+
+- Use no more than 10 options. If more than 10 options are needed, an
+  auto-complete text input is a good alternative.
+- Use at least four options. If fewer than three options are needed, a radio
+  button group is a good alternative.
+
 ## Labelling Variations
 
 A Select can be rendered with or without a visible label. When `showLabel` is

package/src/components/Select/Select.test.tsx

@@ -6,8 +6,8 @@ import renderer from "react-test-renderer";
 import Select from "./Select";
 
 const baseProps = {
-  labelText: "What is your favorite color?",
   helperText: "This is the helper text.",
+  labelText: "What is your favorite color?",
   name: "color",
 };
 const baseOptions = (
@@ -222,41 +222,6 @@ describe("Select", () => {
     expect(value).toEqual("white");
   });
 
-  it("should throw warning when fewer than 4 options", () => {
-    const warn = jest.spyOn(console, "warn");
-    render(
-      <Select {...baseProps}>
-        <option value="red">Red</option>
-      </Select>
-    );
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options."
-    );
-  });
-
-  it("should throw warning when there are more than 10 options", () => {
-    const warn = jest.spyOn(console, "warn");
-    render(
-      <Select {...baseProps}>
-        <option aria-selected={false}>test1</option>
-        <option aria-selected={false}>test2</option>
-        <option aria-selected={false}>test3</option>
-        <option aria-selected={false}>test4</option>
-        <option aria-selected={false}>test5</option>
-        <option aria-selected={false}>test6</option>
-        <option aria-selected={false}>test7</option>
-        <option aria-selected={false}>test8</option>
-        <option aria-selected={false}>test9</option>
-        <option aria-selected={false}>test10</option>
-        <option aria-selected={false}>test11</option>
-      </Select>
-    );
-
-    expect(warn).toHaveBeenCalledWith(
-      "NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options."
-    );
-  });
-
   it("Renders the UI snapshot correctly", () => {
     const siblings = ["Kendall", "Shiv", "Connor", "Roman", "Tom"];
 

package/src/components/Select/Select.tsx

@@ -44,6 +44,8 @@ export interface SelectProps {
   onChange?: (event: React.FormEvent) => void;
   /** Placeholder text in the select element. */
   placeholder?: string;
+  /** The variant to display. */
+  selectType?: SelectTypes;
   /** Offers the ability to hide the helper/invalid text. */
   showHelperInvalidText?: boolean;
   /** Offers the ability to show the select's label onscreen or hide it. Refer
@@ -51,8 +53,6 @@ export interface SelectProps {
   showLabel?: boolean;
   /** Whether or not to display the "Required"/"Optional" text in the label text. */
   showOptReqLabel?: boolean;
-  /** The variant to display. */
-  type?: SelectTypes;
   /** The value of the selected option.
    * Should be passed along with `onChange` for controlled components. */
   value?: string;
@@ -83,12 +83,12 @@ const Select = React.forwardRef<
     showHelperInvalidText = true,
     showLabel = true,
     showOptReqLabel = true,
-    type = SelectTypes.Default,
+    selectType = SelectTypes.Default,
     value = "",
   } = props;
   const ariaAttributes = {};
   const optReqFlag = isRequired ? "Required" : "Optional";
-  const styles = useMultiStyleConfig("CustomSelect", { variant: type });
+  const styles = useMultiStyleConfig("CustomSelect", { variant: selectType });
   const finalInvalidText = invalidText
     ? invalidText
     : "There is an error related to this field.";
@@ -106,18 +106,6 @@ const Select = React.forwardRef<
     ariaAttributes["aria-describedby"] = `${id}-helperText`;
   }
 
-  if (React.Children.count(children) > 10) {
-    console.warn(
-      "NYPL DS recommends that <select> fields have no more than 10 options; an auto-complete text input is a good alternative for 11 or more options."
-    );
-  }
-
-  if (React.Children.count(children) < 4) {
-    console.warn(
-      "NYPL DS recommends that <select> fields have at least 4 options; a radio button group is a good alternative for 3 or fewer options."
-    );
-  }
-
   return (
     <Box className={className} __css={{ ...styles, ...additionalStyles }}>
       {showLabel && (

package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx

@@ -10,10 +10,8 @@ import { withDesign } from "storybook-addon-designs";
 
 import SimpleGrid from "../Grid/SimpleGrid";
 import SkeletonLoader from "./SkeletonLoader";
-import {
-  SkeletonLoaderImageRatios,
-  SkeletonLoaderLayouts,
-} from "./SkeletonLoaderTypes";
+import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import { getStorybookEnumValues } from "../../utils/utils";
 
@@ -22,8 +20,8 @@ export const imageRatiosEnumValues = getStorybookEnumValues(
   "SkeletonLoaderImageRatios"
 );
 export const layoutsEnumValues = getStorybookEnumValues(
-  SkeletonLoaderLayouts,
-  "SkeletonLoaderLayouts"
+  LayoutTypes,
+  "LayoutTypes"
 );
 
 <Meta
@@ -49,7 +47,7 @@ export const layoutsEnumValues = getStorybookEnumValues(
       options: imageRatiosEnumValues.options,
     },
     layout: {
-      table: { defaultValue: { summary: "SkeletonLoaderLayouts.Column" } },
+      table: { defaultValue: { summary: "LayoutTypes.Column" } },
       options: layoutsEnumValues.options,
     },
     showButton: { table: { defaultValue: { summary: "false" } } },
@@ -64,7 +62,7 @@ export const layoutsEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.13`  |
 
 <Description of={SkeletonLoader} />
 
@@ -83,7 +81,7 @@ to better view the example. The default value is `100%`.
       contentSize: 3,
       headingSize: 1,
       imageAspectRatio: "SkeletonLoaderImageRatios.Square",
-      layout: "SkeletonLoaderLayouts.Column",
+      layout: "LayoutTypes.Column",
       showButton: false,
       showContent: true,
       showHeading: true,
@@ -141,11 +139,11 @@ to better view the example. The default value is `100%`.
 <Canvas>
   <Story name="Placeholders in a List">
     <SimpleGrid columns={1}>
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Row} showImage={false} />
+      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
+      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
+      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
+      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
+      <SkeletonLoader layout={LayoutTypes.Row} showImage={false} />
     </SimpleGrid>
   </Story>
 </Canvas>

package/src/components/SkeletonLoader/SkeletonLoader.test.tsx

@@ -4,10 +4,8 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import SkeletonLoader from "./SkeletonLoader";
-import {
-  SkeletonLoaderImageRatios,
-  SkeletonLoaderLayouts,
-} from "./SkeletonLoaderTypes";
+import { SkeletonLoaderImageRatios } from "./SkeletonLoaderTypes";
+import { LayoutTypes } from "../../helpers/enums";
 
 describe("SkeletonLoader Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -27,12 +25,12 @@ describe("SkeletonLoader", () => {
 
   it("renders in the column or row layout", () => {
     const { container, rerender } = render(
-      <SkeletonLoader layout={SkeletonLoaderLayouts.Column} />
+      <SkeletonLoader layout={LayoutTypes.Column} />
     );
 
     expect(container.querySelector(".column")).toBeInTheDocument();
 
-    rerender(<SkeletonLoader layout={SkeletonLoaderLayouts.Row} />);
+    rerender(<SkeletonLoader layout={LayoutTypes.Row} />);
     expect(container.querySelector(".row")).toBeInTheDocument();
   });
 
@@ -75,10 +73,10 @@ describe("SkeletonLoader", () => {
   it("renders the UI snapshot correctly", () => {
     const basic = renderer.create(<SkeletonLoader />).toJSON();
     const rowLayout = renderer
-      .create(<SkeletonLoader layout={SkeletonLoaderLayouts.Row} />)
+      .create(<SkeletonLoader layout={LayoutTypes.Row} />)
       .toJSON();
     const columnLayout = renderer
-      .create(<SkeletonLoader layout={SkeletonLoaderLayouts.Column} />)
+      .create(<SkeletonLoader layout={LayoutTypes.Column} />)
       .toJSON();
     const noImage = renderer
       .create(<SkeletonLoader showImage={false} />)