@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/components/SearchBar/SearchBar.Test.tsx

@@ -19,12 +19,13 @@ const optionsGroup = [
   "Villagers",
 ];
 const selectProps = {
-  name: "nhItemSearch",
+  name: "selectName",
   labelText: "Select a category",
   optionsData: optionsGroup,
 };
 const textInputProps = {
   labelText: "Item Search",
+  name: "textInputName",
   placeholder: "Item Search",
 };
 const helperErrorText = "Search for items in Animal Crossing New Horizons";
@@ -34,13 +35,13 @@ describe("SearchBar Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
         labelText="Searchbar"
         onSubmit={jest.fn()}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -54,11 +55,11 @@ describe("SearchBar", () => {
   it("renders the basic form", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("search")).toBeInTheDocument();
@@ -73,12 +74,12 @@ describe("SearchBar", () => {
   it("renders an optional Select component", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(screen.getByRole("combobox")).toBeInTheDocument();
@@ -88,14 +89,14 @@ describe("SearchBar", () => {
   it("renders the invalid text in the invalid state", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(screen.getByText(invalidText)).toBeInTheDocument();
@@ -105,14 +106,14 @@ describe("SearchBar", () => {
   it("does not render the default invalid text from the Select or TextInput components", () => {
     render(
       <SearchBar
+        helperErrorText={helperErrorText}
         id="id"
+        invalidText={invalidText}
+        isInvalid
         labelText="searchbar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
-        invalidText={invalidText}
-        isInvalid
       />
     );
     expect(
@@ -123,12 +124,12 @@ describe("SearchBar", () => {
   it("calls the callback function on submit ", () => {
     render(
       <SearchBar
-        labelText="searchBar"
+        helperErrorText={helperErrorText}
         id="id"
+        labelText="searchBar"
         onSubmit={searchBarSubmit}
         selectProps={selectProps}
         textInputProps={textInputProps}
-        helperErrorText={helperErrorText}
       />
     );
     expect(searchBarSubmit).toHaveBeenCalledTimes(0);
@@ -138,34 +139,65 @@ describe("SearchBar", () => {
     expect(buttonCallback).toHaveBeenCalledTimes(1);
   });
 
+  it("Renders 'required' in the placeholder text", () => {
+    const { rerender } = render(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SearchBar
+        id="requiredState"
+        isDisabled
+        isRequired
+        labelText="searchbar"
+        onSubmit={jest.fn()}
+        textInputProps={textInputProps}
+      />
+    );
+    expect(
+      screen.getByPlaceholderText("Item Search (Required)")
+    ).toBeInTheDocument();
+  });
+
   it("Renders the UI snapshot correctly", () => {
     const basic = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="basic"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withSelect = renderer
       .create(
         <SearchBar
-          id="id"
+          helperErrorText={helperErrorText}
+          id="withSelect"
           labelText="searchbar"
           onSubmit={jest.fn()}
           selectProps={selectProps}
           textInputProps={textInputProps}
-          helperErrorText={helperErrorText}
         />
       )
       .toJSON();
     const withoutHelperText = renderer
       .create(
         <SearchBar
-          id="id"
+          id="withoutHelperText"
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
@@ -175,22 +207,34 @@ describe("SearchBar", () => {
     const invalidState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="invalidState"
+          isInvalid
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
-          isInvalid
         />
       )
       .toJSON();
     const disabledState = renderer
       .create(
         <SearchBar
-          id="id"
+          id="disabledState"
+          isDisabled
           labelText="searchbar"
           onSubmit={jest.fn()}
           textInputProps={textInputProps}
+        />
+      )
+      .toJSON();
+    const requiredState = renderer
+      .create(
+        <SearchBar
+          id="requiredState"
           isDisabled
+          isRequired
+          labelText="searchbar"
+          onSubmit={jest.fn()}
+          textInputProps={textInputProps}
         />
       )
       .toJSON();
@@ -200,5 +244,6 @@ describe("SearchBar", () => {
     expect(withoutHelperText).toMatchSnapshot();
     expect(invalidState).toMatchSnapshot();
     expect(disabledState).toMatchSnapshot();
+    expect(requiredState).toMatchSnapshot();
   });
 });

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

@@ -19,8 +19,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11689%3A423",
     },
     jest: ["SearchBar.test.tsx"],
   }}
@@ -40,6 +39,11 @@ import DSProvider from "../../theme/provider";
 
 # SearchBar
 
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.4`    |
+| Latest            | `0.25.6`   |
+
 <Description of={SearchBar} />
 
 The main wrapper element that is rendered is a `<form>` DOM element. All the
@@ -51,6 +55,9 @@ based on the required props.
 The `Select` dropdown narrows the search within a specific category, typically
 title or author. Toggle the `Select` through the Controls.
 
+Note: The labels for the `Select` and `TextInput` components are not visible but
+aria-labels are used to make these children components accessible.
+
 export const optionsGroup = [
   "Art",
   "Bushes",
@@ -68,13 +75,13 @@ export const optionsGroup = [
   <Story
     name="Basic"
     args={{
-      showHelperText: true,
-      showSelect: true,
+      helperErrorText: "Search for items in Animal Crossing New Horizons",
       invalidText: "Could not find the item :(",
       isDisabled: false,
       isInvalid: false,
       isRequired: false,
-      helperErrorText: "Search for items in Animal Crossing New Horizons",
+      showHelperText: true,
+      showSelect: true,
     }}
   >
     {(args) => (
@@ -83,13 +90,14 @@ export const optionsGroup = [
         {...args}
         selectProps={
           args.showSelect && {
-            name: "nhItemSearch",
             labelText: "Select a category",
+            name: "selectName",
             optionsData: optionsGroup,
           }
         }
         textInputProps={{
           labelText: "Item Search",
+          name: "textInputName",
           placeholder: "Item Search",
         }}
         helperErrorText={args.showHelperText && args.helperErrorText}
@@ -127,14 +135,19 @@ const selectProps = {
 ### TextInput Component
 
 To render the `TextInput` component, an object must be passed to the
-`textInputProps` prop. It _must_ include `labelText` and `placeholder`
+`textInputProps` prop. It _must_ include `labelText`, `name`, and `placeholder`
 properties. The `labelText` value won't be rendered but will be used for its
-`aria-label` attribute.
+`aria-label` attribute. Optional values to pass include `onChange` and `value`.
 
 ```
 const textInputProps = {
   labelText: "Item Search",
+  name: "textInputName",
+  onChange: (event) => {
+    console.log(event.target.value);
+  },
   placeholder: "Item Search",
+  value: "Horizon"
 };
 
 // ...
@@ -202,8 +215,8 @@ precedence.
   <Story
     name="Search Autocomplete"
     args={{
-      isInvalid: false,
       isDisabled: false,
+      isInvalid: false,
       isRequired: false,
     }}
   >
@@ -237,9 +250,10 @@ handle the error state yourself.
       onSubmit={() => {}}
       textInputProps={{
         labelText: "Item Search",
+        name: "textInputName",
         placeholder: "Item Search",
       }}
-      helperErrorText="Sorry, we can't find that item!"
+      helperErrorText="This is the helper text!"
       invalidText="Could not find the item :("
       isInvalid
     />
@@ -258,6 +272,7 @@ handle the disabled state yourself.
       obSubmit={() => {}}
       textInputProps={{
         labelText: "Item Search",
+        name: "textInputName",
         placeholder: "Item Search",
       }}
       helperErrorText="Reason for disabled state."
@@ -265,3 +280,92 @@ handle the disabled state yourself.
     />
   </DSProvider>
 </Canvas>
+
+### TextInput and onSubmit Values
+
+_NOTE: open the browser console to see the values logged in the example below._
+
+It is possible to get certain values from the `SearchBar` component by passing
+callback functions as props.
+
+The keyword value in the `TextInput` component can be accessed by passing a
+function to the `onChange` property in the `textInputProp` prop. This is useful
+for validating the keyword the user entered.
+
+To get values when the form is submitted, you must:
+
+- pass values for the `name` property in the `selectProps` and `textInputProps`
+  prop objects.
+- get the values returned in the `onSubmit` callback function.
+
+In the following example, the `name` for the `Select` is "selectName" and the
+`name` for the `TextInput` is "textInputName". The `onSubmit` function can get
+the submitted values through the `event` object. In the example below, the
+values can be retrieved as `event.target.selectName.value` and
+`event.target.textInputName.value`.
+
+```tsx
+function SearchBarValueExample() {
+  const textInputOnChange = (event) => {
+    console.log(`onChange TextInput value: ${event.target.value}`);
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    console.log(`onSubmit Select value: ${event.target.searchName.value}`);
+    console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
+  };
+  return (
+    <SearchBar
+      onSubmit={onSubmit}
+      selectProps={{
+        labelText: "Select a category",
+        name: "selectName",
+        optionsData: optionsGroup,
+      }}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        onChange: textInputOnChange,
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Search for an item"
+      invalidText="Could not find the item :("
+    />
+  );
+}
+```
+
+export function SearchBarValueExample() {
+  const textInputOnChange = (event) => {
+    console.log(`onChange TextInput value: ${event.target.value}`);
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    console.log(`onSubmit Select value: ${event.target.selectName.value}`);
+    console.log(`onSubmit TextInput value ${event.target.textInputName.value}`);
+  };
+  return (
+    <SearchBar
+      onSubmit={onSubmit}
+      selectProps={{
+        labelText: "Select a category",
+        name: "selectName",
+        optionsData: optionsGroup,
+      }}
+      textInputProps={{
+        labelText: "Item Search",
+        name: "textInputName",
+        onChange: textInputOnChange,
+        placeholder: "Item Search",
+      }}
+      helperErrorText="Search for an item"
+      invalidText="Could not find the item :("
+    />
+  );
+}
+
+<Canvas>
+  <DSProvider>
+    <SearchBarValueExample />
+  </DSProvider>
+</Canvas>

package/src/components/SearchBar/SearchBar.tsx

@@ -20,7 +20,14 @@ interface SelectProps {
 }
 interface TextInputProps {
   labelText: string;
+  name: string;
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
   placeholder: string;
+  value?: string;
 }
 
 export interface SearchBarProps {
@@ -51,9 +58,6 @@ export interface SearchBarProps {
   onSubmit: (event: React.FormEvent) => void;
   /** Required props to render a `Select` element. */
   selectProps?: SelectProps | undefined;
-  /** Will be used to visually display the label text for this
-   * `SearchBar` component. False by default. */
-  showLabel?: boolean;
   /** Custom input element to render instead of a `TextInput` element. */
   textInputElement?: JSX.Element;
   /** Required props to render a `TextInput` element. */
@@ -95,6 +99,9 @@ export default function SearchBar(props: SearchBarProps) {
   const ariaDescribedby = helperErrorTextID;
   const footnote = isInvalid ? invalidText : helperErrorText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
+  const textInputPlaceholder = `${textInputProps?.placeholder} ${
+    isRequired ? "(Required)" : ""
+  }`;
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
@@ -116,13 +123,16 @@ export default function SearchBar(props: SearchBarProps) {
     <TextInput
       id={generateUUID()}
       labelText={textInputProps?.labelText}
-      placeholder={textInputProps?.placeholder}
+      placeholder={textInputPlaceholder}
+      onChange={textInputProps?.onChange}
+      name={textInputProps?.name}
       type={TextInputTypes.text}
       variantType={
         selectElem
           ? TextInputVariants.SearchBarSelect
           : TextInputVariants.SearchBar
       }
+      value={textInputProps?.value}
       {...stateProps}
     />
   );
@@ -133,7 +143,7 @@ export default function SearchBar(props: SearchBarProps) {
       buttonType={ButtonTypes.SearchBar}
       type="submit"
       onClick={buttonOnClick}
-      disabled={isDisabled}
+      isDisabled={isDisabled}
     >
       <Icon
         name={IconNames.Search}

package/src/components/Select/SelectTypes.tsx

@@ -1,3 +1,4 @@
+// Only used for internal purposes.
 export enum SelectTypes {
   Default = "default",
   SearchBar = "searchbar",

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

@@ -3,18 +3,18 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { action } from "@storybook/addon-actions";
 
+import { getCategory } from "../../utils/componentCategories";
 import SkeletonLoader from "./SkeletonLoader";
 import {
   SkeletonLoaderLayouts,
   SkeletonLoaderImageRatios,
 } from "./SkeletonLoaderTypes";
-import { action } from "@storybook/addon-actions";
-import { getCategory } from "../../utils/componentCategories";
+import SimpleGrid from "../Grid/SimpleGrid";
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -29,33 +29,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["SkeletonLoader.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    layout: {
-      table: { defaultValue: { summary: "column" } },
-    },
-    showImage: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showHeading: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showContent: {
-      table: { defaultValue: { summary: "true" } },
-    },
-    showButton: {
-      table: { defaultValue: { summary: "false" } },
-    },
-    headingSize: {
-      table: { defaultValue: { summary: "1" } },
-    },
-    contentSize: {
-      table: { defaultValue: { summary: "3" } },
-    },
-    imageAspectRatio: {
-      table: { defaultValue: { summary: "square" } },
-    },
+    contentSize: { table: { defaultValue: { summary: "3" } } },
+    headingSize: { table: { defaultValue: { summary: "1" } } },
+    imageAspectRatio: { table: { defaultValue: { summary: "square" } } },
+    layout: { table: { defaultValue: { summary: "column" } } },
+    showButton: { table: { defaultValue: { summary: "false" } } },
+    showContent: { table: { defaultValue: { summary: "true" } } },
+    showHeading: { table: { defaultValue: { summary: "true" } } },
+    showImage: { table: { defaultValue: { summary: "true" } } },
   }}
 />
 
@@ -64,41 +46,34 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.17.3`   |
-| Latest            | `0.23.4`   |
+| Latest            | `0.25.3`   |
 
 <Description of={SkeletonLoader} />
 
-The `SkeletonLoader` component renders a placeholder to be used while dynamic
-content is loading. The `layout`, `width` and placeholder elements within the
-`SkeletonLoader` can be customized.
+The `layout`, `width`, and placeholder elements within the `SkeletonLoader` can
+be customized.
 
-Please note that the initial rendering below has the `width` prop set to `300px`.
-The default value is `100%`.
+Please note that the initial rendering below has the `width` prop set to `300px`
+to better view the example. The default value is `100%`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
-    name="SkeletonLoader"
+    name="Basic with Props"
     args={{
       width: "300px",
     }}
   >
     {(args) => <SkeletonLoader {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
-<ArgsTable story="SkeletonLoader" />
+<ArgsTable story="Basic with Props" />
 
 # Card Placeholders in a Grid
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a Grid">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        gridTemplateColumns: "repeat(3, 1fr)",
-      }}
-    >
+    <SimpleGrid columns={3}>
       <SkeletonLoader
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
@@ -123,26 +98,20 @@ The default value is `100%`.
         imageAspectRatio={SkeletonLoaderImageRatios.Landscape}
         border
       />
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>
 
 # Text Placeholders in a List
 
-<Preview>
+<Canvas>
   <Story name="Placeholders in a List">
-    <div
-      style={{
-        display: "grid",
-        gap: "2rem",
-        gridTemplateColumns: "repeat(1, 1fr)",
-      }}
-    >
+    <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} />
-    </div>
+    </SimpleGrid>
   </Story>
-</Preview>
+</Canvas>