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

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.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={SearchBar} />
 
@@ -142,14 +142,17 @@ export const optionsGroup = [
 
 To render an optional `Select` component, an object must be passed to the
 `selectProps` prop. It _must_ include `name`, `labelText`, and `optionsData`
-properties. The `labelText` value won't be rendered but will be used for its
-`aria-label` attribute.
+properties. The `onChange` property is optional. The `labelText` value won't be
+rendered but will be used for its `aria-label` attribute.
 
 ```
 const selectProps = {
   name: "select-form-name",
   labelText: "Select a category",
   optionsData: optionsGroup,
+  onChange: (event) => {
+    console.log(event.target.value);
+  },
 };
 
 // ...
@@ -163,9 +166,9 @@ const selectProps = {
 ### TextInput Component
 
 To render the `TextInput` component, an object must be passed to the
-`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. Optional values to pass include `onChange` and `value`.
+`textInputProps` prop. It _must_ include `labelText` and `name` properties. The
+`labelText` value won't be rendered but will be used for its `aria-label`
+attribute. Optional properties to pass include `onChange`, `placeholder`, and `value`.
 
 ```
 const textInputProps = {

package/src/components/SearchBar/SearchBar.tsx

@@ -13,13 +13,7 @@ import TextInput from "../TextInput/TextInput";
 import { TextInputTypes, TextInputVariants } from "../TextInput/TextInputTypes";
 import generateUUID from "../../helpers/generateUUID";
 
-// Internal interfaces that are used only for `SearchBar` props.
-interface SelectProps {
-  labelText: string;
-  name: string;
-  optionsData: string[];
-}
-interface TextInputProps {
+interface BaseProps {
   labelText: string;
   name: string;
   onChange?: (
@@ -27,7 +21,13 @@ interface TextInputProps {
       | React.ChangeEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLTextAreaElement>
   ) => void;
-  placeholder: string;
+}
+// Internal interfaces that are used only for `SearchBar` props.
+export interface SelectProps extends BaseProps {
+  optionsData: string[];
+}
+export interface TextInputProps extends BaseProps {
+  placeholder?: string;
   value?: string;
 }
 
@@ -97,7 +97,7 @@ export default function SearchBar(props: SearchBarProps) {
     textInputElement,
     textInputProps,
   } = props;
-  const styles = useMultiStyleConfig("SearchBar", { hasSelect: selectProps });
+  const styles = useMultiStyleConfig("SearchBar", {});
   const stateProps = {
     helperText: "",
     isDisabled,
@@ -106,11 +106,10 @@ export default function SearchBar(props: SearchBarProps) {
     showHelperInvalidText: false,
     showLabel: false,
   };
-  const helperErrorTextID = generateUUID();
-  const ariaDescribedby = helperErrorTextID;
   const footnote = isInvalid ? invalidText : helperText;
   const finalAriaLabel = footnote ? `${labelText} - ${footnote}` : labelText;
-  const textInputPlaceholder = `${textInputProps?.placeholder} ${
+  const inputPlaceholder = textInputProps?.placeholder || "Search terms";
+  const textInputPlaceholder = `${inputPlaceholder} ${
     isRequired ? "(Required)" : ""
   }`;
   const buttonType = noBrandButtonType
@@ -125,9 +124,11 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
-      id={generateUUID()}
-      name={selectProps?.name}
+      additionalStyles={styles.select}
+      id={`searchbar-select-${id}`}
       labelText={selectProps?.labelText}
+      name={selectProps?.name}
+      onChange={selectProps?.onChange}
       type={SelectTypes.SearchBar}
       {...stateProps}
     >
@@ -141,11 +142,11 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `TextInput` component.
   const textInputNative = textInputProps && (
     <TextInput
-      id={generateUUID()}
+      id={`searchbar-textinput-${id}`}
       labelText={textInputProps?.labelText}
-      placeholder={textInputPlaceholder}
-      onChange={textInputProps?.onChange}
       name={textInputProps?.name}
+      onChange={textInputProps?.onChange}
+      placeholder={textInputPlaceholder}
       type={TextInputTypes.text}
       variantType={
         selectElem
@@ -161,21 +162,22 @@ export default function SearchBar(props: SearchBarProps) {
     <Button
       additionalStyles={searchBarButtonStyles}
       buttonType={buttonType}
-      id={generateUUID()}
+      id={`searchbar-button-${id}`}
       isDisabled={isDisabled}
       onClick={buttonOnClick}
       type="submit"
     >
       <Icon
+        align={IconAlign.Left}
+        id={`searchbar-icon-${id}`}
         name={IconNames.Search}
         size={IconSizes.Small}
-        align={IconAlign.Left}
       />
       Search
     </Button>
   );
-  // If a custom input element was passed, use that instead of the
-  // `TextInput` component.
+  // If a custom input element was passed, use that element
+  // instead of the DS `TextInput` component.
   const textInputElem = textInputElement || textInputNative;
 
   return (
@@ -189,11 +191,10 @@ export default function SearchBar(props: SearchBarProps) {
     >
       <Box
         as="form"
-        id={`${id}-form`}
+        id={`searchbar-form-${id}`}
         className={className}
         role="search"
         aria-label={finalAriaLabel}
-        aria-describedby={ariaDescribedby}
         onSubmit={onSubmit}
         method={method}
         action={action}

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

@@ -67,7 +67,7 @@ export const enumValues = getStorybookEnumValues(SelectTypes, "SelectTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Select} />
 

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Select from "./Select";
 
@@ -255,4 +256,92 @@ describe("Select", () => {
       "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"];
+
+    const options = siblings.map((sibling) => (
+      <option key={sibling}>{sibling}</option>
+    ));
+
+    const primary = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const disabled = renderer
+      .create(
+        <Select
+          id="select"
+          isDisabled
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withInvalidText = renderer
+      .create(
+        <Select
+          id="select"
+          invalidText="Tom doesn't count as a sibling :(."
+          isInvalid
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const withHelperText = renderer
+      .create(
+        <Select
+          helperText="Remember, Logan will judge you no matter who you pick."
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Select
+          id="select"
+          isRequired
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+    const hasOnChange = renderer
+      .create(
+        <Select
+          id="select"
+          labelText="Which Succession sibling are you?"
+          name="succession-sibling"
+          onChange={jest.fn()}
+        >
+          {options}
+        </Select>
+      )
+      .toJSON();
+
+    expect(primary).toMatchSnapshot();
+    expect(disabled).toMatchSnapshot();
+    expect(withInvalidText).toMatchSnapshot();
+    expect(withHelperText).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+    expect(hasOnChange).toMatchSnapshot();
+  });
 });

package/src/components/Select/Select.tsx

@@ -15,6 +15,8 @@ import { SelectTypes } from "./SelectTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface SelectProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** A class name for the `div` parent element. */
   className?: string;
   /** Optional string to populate the `HelperErrorText` for the standard state. */
@@ -65,6 +67,7 @@ const Select = React.forwardRef<
   React.PropsWithChildren<SelectProps>
 >((props: React.PropsWithChildren<SelectProps>, ref?) => {
   const {
+    additionalStyles = {},
     children,
     className,
     helperText,
@@ -116,7 +119,7 @@ const Select = React.forwardRef<
   }
 
   return (
-    <Box className={className} __css={styles}>
+    <Box className={className} __css={{ ...styles, ...additionalStyles }}>
       {showLabel && (
         <Label
           id={`${id}-label`}
@@ -137,7 +140,13 @@ const Select = React.forwardRef<
         ref={ref}
         {...controlledProps}
         {...ariaAttributes}
-        icon={<Icon name={IconNames.Arrow} size={IconSizes.Medium} />}
+        icon={
+          <Icon
+            id={`${id}-icon`}
+            name={IconNames.Arrow}
+            size={IconSizes.Medium}
+          />
+        }
         __css={styles.select}
       >
         {children}