@nypl/design-system-react-components 0.25.10 → 0.25.11

package/src/components/Notification/Notification.test.tsx

@@ -41,6 +41,18 @@ describe("Notification Accessibility", () => {
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  it("passes axe accessibility test for the dismissible type", async () => {
+    const { container } = render(
+      <Notification
+        dismissible
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+      />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });
 
 describe("Notification", () => {
@@ -48,6 +60,7 @@ describe("Notification", () => {
   beforeEach(() => {
     utils = render(
       <Notification
+        ariaLabel="Notification label"
         id="notificationID"
         notificationContent={<>Notification content.</>}
         notificationHeading="Notification Heading"
@@ -133,7 +146,31 @@ describe("Notification", () => {
     );
   });
 
-  it("renders the UI snapshot correctly", () => {
+  it("renders with an aria-label attribute", () => {
+    expect(screen.getByRole("complementary")).toHaveAttribute(
+      "aria-label",
+      "Notification label"
+    );
+  });
+
+  it("renders a dismissible icon", () => {
+    utils.rerender(
+      <Notification
+        dismissible
+        id="notificationID"
+        notificationContent={<>Notification content.</>}
+        notificationHeading="Notification Heading"
+        notificationType={NotificationTypes.Standard}
+      />
+    );
+    const icons = screen.queryAllByRole("img");
+
+    expect(icons).toHaveLength(2);
+    expect(screen.getByTitle("Notification standard icon")).toBeInTheDocument();
+    expect(screen.getByTitle("Notification close icon")).toBeInTheDocument();
+  });
+
+  it.skip("renders the UI snapshot correctly", () => {
     const standard = renderer
       .create(
         <Notification
@@ -190,11 +227,22 @@ describe("Notification", () => {
         />
       )
       .toJSON();
+    const dismissible = renderer
+      .create(
+        <Notification
+          dismissible
+          id="notificationID7"
+          notificationContent={<>Notification content.</>}
+        />
+      )
+      .toJSON();
+
     expect(standard).toMatchSnapshot();
     expect(announcement).toMatchSnapshot();
     expect(warning).toMatchSnapshot();
     expect(withoutHeading).toMatchSnapshot();
     expect(withoutAnIcon).toMatchSnapshot();
     expect(withoutHeadingAndIcon).toMatchSnapshot();
+    expect(dismissible).toMatchSnapshot();
   });
 });

package/src/components/Notification/Notification.tsx

@@ -30,6 +30,8 @@ type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
 type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
 
 export interface NotificationProps extends BasePropsWithoutAlignText {
+  /** Label used to describe the `Notification`'s aside HTML element. */
+  ariaLabel?: string;
   /** Additional `className` to add.  */
   className?: string;
   /** Optional prop to control whether a `Notification` can be dismissed
@@ -99,6 +101,7 @@ export function NotificationContent(
  */
 export default function Notification(props: NotificationProps) {
   const {
+    ariaLabel,
     centered = false,
     className,
     dismissible = false,
@@ -114,15 +117,15 @@ export default function Notification(props: NotificationProps) {
   const handleClose = () => setIsOpen(false);
   const styles = useMultiStyleConfig("Notification", {
     centered,
+    dismissible,
     noMargin,
     notificationType,
-    showIcon,
   });
   const iconElement = () => {
     const baseIconProps = {
+      additionalStyles: styles.icon,
       decorative: false,
       size: IconSizes.Large,
-      additionalStyles: styles.icon,
     };
     // If the icon should not display, return null.
     if (!showIcon) {
@@ -136,16 +139,19 @@ export default function Notification(props: NotificationProps) {
       });
     const iconProps = {
       [NotificationTypes.Announcement]: {
-        name: IconNames.SpeakerNotes,
         color: IconColors.SectionResearchSecondary,
+        name: IconNames.SpeakerNotes,
+        title: "Notification announcement icon",
       },
       [NotificationTypes.Standard]: {
-        name: IconNames.AlertNotificationImportant,
         color: IconColors.UiBlack,
+        name: IconNames.AlertNotificationImportant,
+        title: "Notification standard icon",
       },
       [NotificationTypes.Warning]: {
-        name: IconNames.ErrorFilled,
         color: IconColors.BrandPrimary,
+        name: IconNames.ErrorFilled,
+        title: "Notification warning icon",
       },
     };
     return (
@@ -163,10 +169,11 @@ export default function Notification(props: NotificationProps) {
       additionalStyles={styles.dismissibleButton}
     >
       <Icon
-        id={`${id}-notification-dismissible-icon`}
         decorative={false}
+        id={`${id}-notification-dismissible-icon`}
         name={IconNames.Close}
         size={IconSizes.Large}
+        title="Notification close icon"
       />
     </Button>
   );
@@ -199,11 +206,12 @@ export default function Notification(props: NotificationProps) {
   }
   return (
     <Box
+      aria-label={ariaLabel}
       as="aside"
-      id={id}
       className={className}
-      __css={styles}
       data-type={notificationType}
+      id={id}
+      __css={styles}
     >
       <Box __css={styles.container}>
         {childHeading}

package/src/components/Radio/Radio.stories.mdx

@@ -53,7 +53,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Radio} />
 

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.10`  |
+| Latest            | `0.25.11`  |
 
 <Description of={SearchBar} />
 

package/src/components/SearchBar/SearchBar.tsx

@@ -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,
@@ -123,6 +123,7 @@ export default function SearchBar(props: SearchBarProps) {
   // Render the `Select` component.
   const selectElem = selectProps && (
     <Select
+      additionalStyles={styles.select}
       id={`searchbar-select-${id}`}
       labelText={selectProps?.labelText}
       name={selectProps?.name}

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.11`  |
 
 <Description of={Select} />
 

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`}

package/src/components/Slider/Slider.stories.mdx

@@ -76,7 +76,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Slider} />
 

package/src/components/StructuredContent/StructuredContent.stories.mdx

@@ -68,7 +68,7 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={StructuredContent} />
 

package/src/components/Tabs/Tabs.stories.mdx

@@ -41,7 +41,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.11`  |
 
 <Description of={Tabs} />
 

package/src/components/Tabs/Tabs.tsx

@@ -97,8 +97,8 @@ const getElementsFromContentData = (data, useHash): TabPanelProps => {
   });
 
   return {
-    tabs: <TabList>{tabs}</TabList>,
-    panels: <TabPanels>{panels}</TabPanels>,
+    tabs: [<TabList key="list">{tabs}</TabList>],
+    panels: [<TabPanels key="panels">{panels}</TabPanels>],
   };
 };
 
@@ -159,7 +159,7 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     ? getElementsFromContentData(contentData, useHash)
     : getElementsFromChildren(children);
 
-  if (!tabs.length || !panels.length) {
+  if (tabs.length === 0 || panels.length === 0) {
     console.warn("Tabs: Pass data in the `data` props or as children.");
   }
 

package/src/components/TextInput/TextInput.stories.mdx

@@ -61,7 +61,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={TextInput} />
 

package/src/components/Toggle/Toggle.stories.mdx

@@ -55,7 +55,7 @@ export const sizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Toggle} />
 

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

@@ -5,7 +5,7 @@ exports[`Toggle Renders the UI snapshot correctly 1`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     onClick={[Function]}
   >
     <input
@@ -66,7 +66,7 @@ exports[`Toggle Renders the UI snapshot correctly 2`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-checked=""
     onClick={[Function]}
   >
@@ -131,7 +131,7 @@ exports[`Toggle Renders the UI snapshot correctly 3`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-invalid=""
     onClick={[Function]}
   >
@@ -195,7 +195,7 @@ exports[`Toggle Renders the UI snapshot correctly 4`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-u8kezd"
+    className="chakra-switch css-16pgy8f"
     data-disabled=""
     onClick={[Function]}
   >

package/src/theme/components/global.ts

@@ -13,7 +13,7 @@ const activeFocus = {
 };
 // Used in `Select` and `TextInput`.
 const helperTextMargin = {
-  marginTop: "xs",
+  marginTop: "xxs",
   marginBottom: "0",
 };
 // Used in `Checkbox` and `Radio`.

package/src/theme/components/list.ts

@@ -8,10 +8,10 @@ const List = {
     padding: noStyling ? "0" : null,
     display: inline ? "flex" : null,
     li: {
-      marginRight: inline ? "xs" : null,
+      marginRight: inline ? "m" : null,
       listStyleType: inline ? "none" : null,
       _notFirst: {
-        marginTop: "xxs",
+        marginTop: inline ? null : "xxs",
       },
     },
   }),

package/src/theme/components/notification.ts

@@ -2,31 +2,34 @@ import { NotificationTypes } from "../../components/Notification/NotificationTyp
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ centered, noMargin, notificationType }) => {
+  baseStyle: ({ centered, dismissible, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
-    if (notificationType === NotificationTypes.Announcement) {
-      bg = "ui.gray.light-cool";
-    } else if (notificationType === NotificationTypes.Warning) {
-      bg = "ui.gray.xx-light-cool";
+    if (
+      notificationType === NotificationTypes.Announcement ||
+      notificationType === NotificationTypes.Warning
+    ) {
+      bg = "ui.gray.x-light-cool";
     }
     return {
       bg,
       display: "flex",
       fontSize: "-1", // slightly smaller than the default size
-      padding: "var(--nypl-space-s) var(--nypl-space-l)",
       position: "relative",
       textAlign: centered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
       margin: noMargin ? "0" : "s",
       container: {
         margin: "auto",
+        maxWidth: "var(--nypl-breakpoint-xl)",
+        padding: "s",
+        paddingRight: dismissible ? "l" : null,
+        paddingLeft: centered && dismissible ? "l" : null,
         width: "100%",
-        maxWidth: "var(--nypl-breakpoint-large)",
       },
       dismissibleButton: {
         border: "none",
-        alignItems: "center",
         bgColor: "inherit",
+        alignItems: "center",
         color: "ui.black",
         display: "flex",
         height: "32px",
@@ -62,6 +65,13 @@ const NotificationContent = {
         ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
         : null,
       width: "100%",
+      // Links should always be black and underlined.
+      a: {
+        color: "ui.black",
+        _hover: {
+          color: "ui.black",
+        },
+      },
     },
   }),
 };

package/src/theme/components/searchBar.ts

@@ -1,4 +1,5 @@
 const SearchBar = {
+  parts: ["select"],
   baseStyle: {
     display: "flex",
     marginBottom: {
@@ -9,6 +10,9 @@ const SearchBar = {
       base: "column nowrap",
       md: "row nowrap",
     },
+    select: {
+      marginBottom: "0",
+    },
   },
 };
 

package/src/theme/components/structuredContent.ts

@@ -3,19 +3,29 @@ const StructuredContent = {
   baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
     const styles: { maxWidth?: string } = {};
     const wrapperStyles = {
-      float: imagePosition !== "center" ? imagePosition : undefined,
-      marginLeft:
+      float: [
+        "none",
+        "none",
+        imagePosition !== "center" ? imagePosition : undefined,
+      ],
+      marginLeft: [
+        "auto",
+        "auto",
         imagePosition === "center"
           ? null
           : imagePosition === "left"
           ? "0"
           : "m",
-      marginRight:
+      ],
+      marginRight: [
+        "auto",
+        "auto",
         imagePosition === "center"
           ? null
           : imagePosition === "left"
           ? "m"
           : "0",
+      ],
       width: imagePosition !== "center" ? "100%" : undefined,
       ...styles,
     };
@@ -34,15 +44,25 @@ const StructuredContent = {
       image: {
         // To handle the case when the image does not have a container,
         // e.g. when there is no image caption or credit.
-        float: imagePosition !== "center" ? imagePosition : undefined,
-        marginLeft:
+        float: [
+          "none",
+          "none",
+          imagePosition !== "center" ? imagePosition : undefined,
+        ],
+        marginLeft: [
+          "auto",
+          "auto",
           imagePosition === "right" && imageAspectRatio === "original"
             ? "m"
             : undefined,
-        marginRight:
+        ],
+        marginRight: [
+          "auto",
+          "auto",
           imagePosition === "left" && imageAspectRatio === "original"
             ? "m"
             : undefined,
+        ],
         marginBottom:
           !hasFigureImage || imageAspectRatio === "original" ? "m" : null,
         ...styles,

package/src/theme/components/textInput.ts

@@ -5,6 +5,7 @@ const input = {
   border: "1px solid",
   borderColor: "ui.gray.medium",
   borderRadius: "sm",
+  fontSize: "text.caption",
   py: "xs",
   px: "s",
   _hover: {

package/src/theme/components/toggle.ts

@@ -4,7 +4,7 @@ const baseStyle = {
   label: { display: "flex", alignItems: "center", width: "fit-content" },
   helper: {
     ...helperTextMargin,
-    marginLeft: "xs",
+    marginLeft: "xxs",
   },
 };
 

package/src/theme/foundations/typography.ts

@@ -55,7 +55,7 @@ const typography: Typography = {
       callout: fontSizeValues["1"],
     },
     helper: {
-      default: fontSizeValues["-1"],
+      default: fontSizeValues["-2"],
     },
     label: {
       default: fontSizeValues["-1"],