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

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

@@ -411,3 +411,79 @@ exports[`Checkbox Renders the UI snapshot correctly 6`] = `
   </span>
 </label>
 `;
+
+exports[`Checkbox Renders the UI snapshot correctly 7`] = `
+<label
+  className="chakra-checkbox css-g8du1g"
+  onClick={[Function]}
+>
+  <input
+    aria-disabled={false}
+    aria-invalid={false}
+    checked={false}
+    className="chakra-checkbox__input"
+    disabled={false}
+    id="jsxLabel"
+    name="default"
+    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="checkbox"
+    value="arts"
+  />
+  <span
+    aria-hidden={true}
+    className="chakra-checkbox__control css-dnty2r"
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+  >
+    <svg
+      className="chakra-icon css-1vfv7ic"
+      focusable={false}
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+  <span
+    className="chakra-checkbox__label css-1oeb2oe"
+    onMouseDown={[Function]}
+    onTouchStart={[Function]}
+  >
+    <div
+      className="css-k008qs"
+    >
+      <span>
+        Arts
+      </span>
+      <div
+        className="css-17xejub"
+      />
+      <span>
+        4
+      </span>
+    </div>
+  </span>
+</label>
+`;

package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -1,3 +1,4 @@
+import { Flex, Spacer } from "@chakra-ui/react";
 import {
   ArgsTable,
   Canvas,
@@ -9,15 +10,12 @@ import { withDesign } from "storybook-addon-designs";
 
 import Checkbox from "../Checkbox/Checkbox";
 import CheckboxGroup from "./CheckboxGroup";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
+import { LayoutTypes } from "../../helpers/enums";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
 
-export const enumValues = getStorybookEnumValues(
-  CheckboxGroupLayoutTypes,
-  "CheckboxGroupLayoutTypes"
-);
+export const enumValues = getStorybookEnumValues(LayoutTypes, "LayoutTypes");
 
 <Meta
   title={getCategory("CheckboxGroup")}
@@ -37,6 +35,9 @@ export const enumValues = getStorybookEnumValues(
     isDisabled: {
       table: { defaultValue: { summary: false } },
     },
+    isFullWidth: {
+      table: { defaultValue: { summary: true } },
+    },
     isInvalid: {
       table: { defaultValue: { summary: false } },
     },
@@ -46,7 +47,7 @@ export const enumValues = getStorybookEnumValues(
     key: { table: { disable: true } },
     layout: {
       control: { type: "select" },
-      table: { defaultValue: { summary: "CheckboxGroupLayoutTypes.Column" } },
+      table: { defaultValue: { summary: "LayoutTypes.Column" } },
       options: enumValues.options,
     },
     name: { control: false },
@@ -69,7 +70,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.13`  |
 
 <Description of={CheckboxGroup} />
 
@@ -82,10 +83,11 @@ export const enumValues = getStorybookEnumValues(
       id: "checkboxGroup-id",
       invalidText: "This is the error text :(",
       isDisabled: false,
+      isFullWidth: false,
       isInvalid: false,
       isRequired: false,
       labelText: "Standard Checkbox Group",
-      layout: "CheckboxGroupLayoutTypes.Column",
+      layout: "LayoutTypes.Column",
       name: "checkbox-story",
       onChange: undefined,
       optReqFlag: true,
@@ -127,7 +129,7 @@ a row.
     <CheckboxGroup
       labelText="Row"
       name="row-example"
-      layout={CheckboxGroupLayoutTypes.Row}
+      layout={LayoutTypes.Row}
       optReqFlag={false}
     >
       <Checkbox value="2" labelText="Checkbox 2" />
@@ -176,6 +178,68 @@ a row.
   </DSProvider>
 </Canvas>
 
+## With JSX Element labels
+
+React elements can be passed to the `labelText` prop of the `Checkbox` component.
+This is useful if you need to pass information as part of the label. For example,
+if a `Checkbox` label needs to display how many items that option has, it can be
+displayed with the help of the `Flex` and `Spacer` components.
+
+Note: the width of `CheckboxGroup` is _not_ set to full width by default. In
+order to make this work, pass in the `isFullWidth` prop.
+
+<Canvas>
+  <DSProvider>
+    <CheckboxGroup
+      labelText="Checkbox Group"
+      name="checkbox-example"
+      optReqFlag={false}
+      isFullWidth
+    >
+      <Checkbox
+        labelText={
+          <Flex>
+            <span>Arts</span>
+            <Spacer />
+            <span>4</span>
+          </Flex>
+        }
+        value="arts"
+      />
+      <Checkbox
+        labelText={
+          <Flex>
+            <span>English</span>
+            <Spacer />
+            <span>23</span>
+          </Flex>
+        }
+        value="English"
+      />
+      <Checkbox
+        labelText={
+          <Flex>
+            <span>Science</span>
+            <Spacer />
+            <span>10</span>
+          </Flex>
+        }
+        value="Science"
+      />
+      <Checkbox
+        labelText={
+          <Flex>
+            <span>Math</span>
+            <Spacer />
+            <span>3</span>
+          </Flex>
+        }
+        value="Math"
+      />
+    </CheckboxGroup>
+  </DSProvider>
+</Canvas>
+
 ## Indeterminate Example
 
 The "indeterminate" state can be used when a group of checkboxes are not all

package/src/components/CheckboxGroup/CheckboxGroup.test.tsx

@@ -1,16 +1,17 @@
-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 CheckboxGroup from "./CheckboxGroup";
 import Checkbox from "../Checkbox/Checkbox";
-import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
-import userEvent from "@testing-library/user-event";
+import { LayoutTypes } from "../../helpers/enums";
 
-describe("Checkbox Accessibility", () => {
-  it("passes axe accessibility", async () => {
+describe("CheckboxGroup Accessibility", () => {
+  it("passes axe accessibility with string labels ", async () => {
     const { container } = render(
       <CheckboxGroup labelText="CheckboxGroup example" name="a11y-test">
         <Checkbox value="2" labelText="Checkbox 2" />
@@ -21,6 +22,40 @@ describe("Checkbox Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+  it("passes axe accessibility with jsx labels", async () => {
+    const { container } = render(
+      <CheckboxGroup
+        labelText="jsxLabels"
+        name="jsxLabels"
+        id="jsxLabels"
+        isFullWidth
+      >
+        <Checkbox
+          id="arts"
+          labelText={
+            <Flex>
+              <span>Arts</span>
+              <Spacer />
+              <span>4</span>
+            </Flex>
+          }
+          value="arts"
+        />
+        <Checkbox
+          id="English"
+          labelText={
+            <Flex>
+              <span>English</span>
+              <Spacer />
+              <span>23</span>
+            </Flex>
+          }
+          value="English"
+        />
+      </CheckboxGroup>
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Checkbox", () => {
@@ -119,8 +154,8 @@ describe("Checkbox", () => {
   });
 
   it("sets the next value through the onChange function", () => {
-    let newValue = [];
-    const onChange = (value) => {
+    let newValue: string[] = [];
+    const onChange = (value: string[]) => {
       newValue = value;
     };
     render(
@@ -248,7 +283,7 @@ describe("Checkbox", () => {
           labelText="row"
           name="row"
           id="row"
-          layout={CheckboxGroupLayoutTypes.Row}
+          layout={LayoutTypes.Row}
         >
           <Checkbox value="2" labelText="Checkbox 2" />
           <Checkbox value="3" labelText="Checkbox 3" />
@@ -346,6 +381,39 @@ describe("Checkbox", () => {
         </CheckboxGroup>
       )
       .toJSON();
+    const withJSXCheckboxLabels = renderer
+      .create(
+        <CheckboxGroup
+          id="jsxLabels"
+          isFullWidth
+          labelText="jsxLabels"
+          name="jsxLabels"
+        >
+          <Checkbox
+            id="arts"
+            labelText={
+              <Flex>
+                <span>Arts</span>
+                <Spacer />
+                <span>4</span>
+              </Flex>
+            }
+            value="arts"
+          />
+          <Checkbox
+            id="English"
+            labelText={
+              <Flex>
+                <span>English</span>
+                <Spacer />
+                <span>23</span>
+              </Flex>
+            }
+            value="English"
+          />
+        </CheckboxGroup>
+      )
+      .toJSON();
 
     expect(column).toMatchSnapshot();
     expect(row).toMatchSnapshot();
@@ -356,6 +424,7 @@ describe("Checkbox", () => {
     expect(isRequired).toMatchSnapshot();
     expect(isInvalid).toMatchSnapshot();
     expect(isDisabled).toMatchSnapshot();
+    expect(withJSXCheckboxLabels).toMatchSnapshot();
   });
 
   it("should throw warning when a non-Checkbox component is used as a child", () => {
@@ -366,7 +435,8 @@ describe("Checkbox", () => {
       </CheckboxGroup>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Only `Checkbox` components are allowed inside the `CheckboxGroup` component."
+      "NYPL Reservoir CheckboxGroup: Only `Checkbox` components are " +
+        "allowed as children."
     );
   });
 });

package/src/components/CheckboxGroup/CheckboxGroup.tsx

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

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

@@ -1327,3 +1327,172 @@ exports[`Checkbox renders the UI snapshot correctly 9`] = `
   </div>
 </fieldset>
 `;
+
+exports[`Checkbox renders the UI snapshot correctly 10`] = `
+<fieldset
+  className="css-0"
+  id="jsxLabels-checkbox-group"
+>
+  <legend>
+    jsxLabels
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </legend>
+  <div
+    aria-label={null}
+    className="chakra-stack css-1wdv1uh"
+    data-testid="checkbox-group"
+    id="jsxLabels"
+  >
+    <label
+      className="chakra-checkbox css-g8du1g"
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        checked={false}
+        className="chakra-checkbox__input"
+        disabled={false}
+        id="jsxLabels-0"
+        name="jsxLabels"
+        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="checkbox"
+        value="arts"
+      />
+      <span
+        aria-hidden={true}
+        className="chakra-checkbox__control css-dnty2r"
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+      >
+        <svg
+          className="chakra-icon css-1vfv7ic"
+          focusable={false}
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <span
+        className="chakra-checkbox__label css-1oeb2oe"
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
+      >
+        <div
+          className="css-k008qs"
+        >
+          <span>
+            Arts
+          </span>
+          <div
+            className="css-17xejub"
+          />
+          <span>
+            4
+          </span>
+        </div>
+      </span>
+    </label>
+    <label
+      className="chakra-checkbox css-g8du1g"
+      onClick={[Function]}
+    >
+      <input
+        aria-disabled={false}
+        aria-invalid={false}
+        checked={false}
+        className="chakra-checkbox__input"
+        disabled={false}
+        id="jsxLabels-1"
+        name="jsxLabels"
+        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="checkbox"
+        value="English"
+      />
+      <span
+        aria-hidden={true}
+        className="chakra-checkbox__control css-dnty2r"
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+      >
+        <svg
+          className="chakra-icon css-1vfv7ic"
+          focusable={false}
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <span
+        className="chakra-checkbox__label css-1oeb2oe"
+        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/ComponentWrapper/ComponentWrapper.tsx

@@ -46,7 +46,7 @@ function ComponentWrapper(
   // Note: Typescript warns when there are no children passed and
   // doesn't compile. This is meant to log in non-Typescript apps.
   if (!hasChildren) {
-    console.warn("`ComponentWrapper` has no children.");
+    console.warn("NYPL Reservoir ComponentWrapper: No children were passed.");
   }
 
   return (

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

@@ -344,7 +344,8 @@ describe("DatePicker", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "A `ref` or `refTo` prop was passed but not the equivalent `nameFrom` or `nameTo` prop."
+        "NYPL Reservoir DatePicker: A `ref` or `refTo` prop was passed but " +
+          "not the equivalent `nameFrom` or `nameTo` prop."
       );
     });
 
@@ -361,7 +362,9 @@ describe("DatePicker", () => {
         />
       );
       expect(warn).toHaveBeenCalledWith(
-        "React `ref` props were passed and an `onChange` prop as well. Use whichever is best for your app but not both."
+        "NYPL Reservoir DatePicker: A `ref`, `refTo`, `nameFrom`, or `nameTo` " +
+          "prop was passed and an `onChange` prop as well. Use whichever is best " +
+          "for your app but not both."
       );
     });
 

package/src/components/DatePicker/DatePicker.tsx

@@ -327,12 +327,15 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
 
     if ((ref && !nameFrom) || (refTo && !nameTo)) {
       console.warn(
-        "A `ref` or `refTo` prop was passed but not the equivalent `nameFrom` or `nameTo` prop."
+        "NYPL Reservoir DatePicker: A `ref` or `refTo` prop was passed but " +
+          "not the equivalent `nameFrom` or `nameTo` prop."
       );
     }
     if (onChange && (ref || refTo || nameFrom || nameTo)) {
       console.warn(
-        "React `ref` props were passed and an `onChange` prop as well. Use whichever is best for your app but not both."
+        "NYPL Reservoir DatePicker: A `ref`, `refTo`, `nameFrom`, or `nameTo` " +
+          "prop was passed and an `onChange` prop as well. Use whichever is best " +
+          "for your app but not both."
       );
     }