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

package/dist/theme/components/notification.d.ts

@@ -1,28 +1,31 @@
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ centered, noMargin, notificationType }: {
+        baseStyle: ({ centered, dismissible, noMargin, notificationType }: {
             centered: any;
+            dismissible: any;
             noMargin: any;
             notificationType: any;
         }) => {
             bg: string;
             display: string;
             fontSize: string;
-            padding: string;
             position: string;
             textAlign: string;
             borderRadius: string;
             margin: string;
             container: {
                 margin: string;
-                width: string;
                 maxWidth: string;
+                padding: string;
+                paddingRight: string;
+                paddingLeft: string;
+                width: string;
             };
             dismissibleButton: {
                 border: string;
-                alignItems: string;
                 bgColor: string;
+                alignItems: string;
                 color: string;
                 display: string;
                 height: string;
@@ -55,6 +58,12 @@ declare const _default: {
                 marginTop: string;
                 paddingLeft: string;
                 width: string;
+                a: {
+                    color: string;
+                    _hover: {
+                        color: string;
+                    };
+                };
             };
         };
     };

package/dist/theme/components/searchBar.d.ts

@@ -1,4 +1,5 @@
 declare const SearchBar: {
+    parts: string[];
     baseStyle: {
         display: string;
         marginBottom: {
@@ -9,6 +10,9 @@ declare const SearchBar: {
             base: string;
             md: string;
         };
+        select: {
+            marginBottom: string;
+        };
     };
 };
 export default SearchBar;

package/dist/theme/components/structuredContent.d.ts

@@ -8,24 +8,24 @@ declare const StructuredContent: {
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             width: string;
         };
         imageWrapper: {
             marginBottom: string;
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             width: string;
         };
         image: {
             maxWidth?: string;
-            float: any;
-            marginLeft: string;
-            marginRight: string;
+            float: any[];
+            marginLeft: string[];
+            marginRight: string[];
             marginBottom: string;
         };
     };

package/dist/theme/components/textInput.d.ts

@@ -10,6 +10,7 @@ declare const TextInput: {
             border: string;
             borderColor: string;
             borderRadius: string;
+            fontSize: string;
             py: string;
             px: string;
             _hover: {
@@ -52,6 +53,7 @@ declare const TextInput: {
             border: string;
             borderColor: string;
             borderRadius: string;
+            fontSize: string;
             py: string;
             px: string;
             _hover: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.10",
+  "version": "0.25.11",
   "description": "Design System React Components",
   "repository": {
     "type": "git",

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

@@ -418,7 +418,7 @@ exports[`Card Renders the UI snapshot correctly 6`] = `
         id="heading1"
       >
         <a
-          className="chakra-linkbox__overlay css-1hnz6hu"
+          className="chakra-linkbox__overlay css-kvj8dg"
           href="http://nypl.org"
         >
           The Card Heading

package/src/components/Checkbox/Checkbox.stories.mdx

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

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

@@ -69,7 +69,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.1`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.10`  |
 
 <Description of={CheckboxGroup} />
 

package/src/components/DatePicker/DatePicker.tsx

@@ -8,12 +8,13 @@ import { FormGaps } from "../Form/FormTypes";
 import HelperErrorText, {
   HelperErrorTextType,
 } from "../HelperErrorText/HelperErrorText";
+import { helperTextMargin } from "../../theme/components/global";
 import TextInput, {
   InputProps,
   TextInputRefType,
 } from "../TextInput/TextInput";
 import generateUUID from "../../helpers/generateUUID";
-import { useMultiStyleConfig } from "@chakra-ui/system";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
 // The object shape for the DatePicker's start and end date state values.
 export interface FullDateType {
@@ -416,11 +417,13 @@ const DatePicker = React.forwardRef<TextInputRefType, DatePickerProps>(
           )}
         </DateRangeRow>
         {helperText && isDateRange && showHelperInvalidText && (
-          <HelperErrorText
-            id={`${id}-helper-text`}
-            isInvalid={false}
-            text={helperText}
-          />
+          <Box __css={helperTextMargin}>
+            <HelperErrorText
+              id={`${id}-helper-text`}
+              isInvalid={false}
+              text={helperText}
+            />
+          </Box>
         )}
       </DatePickerWrapper>
     );

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

@@ -433,17 +433,21 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
+      className="css-fjhuh4"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
         }
-      }
-      data-isinvalid={false}
-      id="invalid-helper-text"
-    />
+        data-isinvalid={false}
+        id="invalid-helper-text"
+      />
+    </div>
   </fieldset>
 </div>
 `;
@@ -545,17 +549,21 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
       </div>
     </div>
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Note that the Library may be closed on Sundays.",
+      className="css-fjhuh4"
+    >
+      <div
+        aria-atomic={true}
+        aria-live="off"
+        className=" css-0"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Note that the Library may be closed on Sundays.",
+          }
         }
-      }
-      data-isinvalid={false}
-      id="disabled-helper-text"
-    />
+        data-isinvalid={false}
+        id="disabled-helper-text"
+      />
+    </div>
   </fieldset>
 </div>
 `;

package/src/components/HelperErrorText/HelperErrorText.stories.mdx

@@ -47,7 +47,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={HelperErrorText} />
 

package/src/components/Icons/Icon.stories.mdx

@@ -89,7 +89,7 @@ export const rotationEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.8`   |
+| Latest            | `0.25.11`  |
 
 <Description of={Icon} />
 

package/src/components/Icons/Icon.test.tsx

@@ -35,7 +35,7 @@ describe("Icon", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Icon />);
     expect(warn).toHaveBeenCalledWith(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
   });
 

package/src/components/Icons/Icon.tsx

@@ -82,7 +82,7 @@ export default function Icon(props: React.PropsWithChildren<IconProps>) {
     return null;
   } else if (!name && !children) {
     console.warn(
-      "Pass an icon `name` prop or an SVG child to `Icon` to ensure an icon appears."
+      "Icon: Pass an icon `name` prop or an SVG child to ensure an icon appears."
     );
     return null;
   }

package/src/components/List/List.stories.mdx

@@ -51,7 +51,7 @@ export const enumValues = getStorybookEnumValues(ListTypes, "ListTypes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.11`  |
 
 <Description of={List} />
 
@@ -63,8 +63,15 @@ export const animalCrossingDefinitions = [
   },
   {
     term: "Golden trout",
-    definition:
-      "The golden trout is a beautifully colored fish that can only live in very clean waters. They are difficult to come across since they are found only in high mountain streams. As a side note, I find it much easier to appreciate fish that aren't such prima donnas about everything.",
+    definition: (
+      <p>
+        The golden trout is a <b>beautifully</b> colored fish that can only live
+        in very clean waters. They are difficult to come across since they are
+        found only in high mountain streams. As a side note, I find it much
+        easier to appreciate fish that aren't such prima donnas about
+        everything.
+      </p>
+    ),
   },
   {
     term: "Rainbowfish",
@@ -73,8 +80,20 @@ export const animalCrossingDefinitions = [
   },
   {
     term: "Suckerfish",
-    definition:
-      "The suckerfish is a curious fish that likes to attach itself with its sucker mouth to larger marine animals. The benefit to the suckerfish is that it gets to eat smaller parasites and dead skin off the host's body. Amusingly, some people have used suckerfish on cords to catch large turtles with the fish's own suction! I imagine this practice is the cause of some awkward conversations between fish and turtle, eh wot?",
+    definition: (
+      <p>
+        The{" "}
+        <Link href="https://animalcrossing.fandom.com/wiki/Suckerfish">
+          suckerfish
+        </Link>{" "}
+        is a curious fish that likes to attach itself with its sucker mouth to
+        larger marine animals. The benefit to the suckerfish is that it gets to
+        eat smaller parasites and dead skin off the host's body. Amusingly, some
+        people have used suckerfish on cords to catch large turtles with the
+        fish's own suction! I imagine this practice is the cause of some awkward
+        conversations between fish and turtle, eh wot?
+      </p>
+    ),
   },
 ];
 export const itemGroups = [

package/src/components/List/List.test.tsx

@@ -10,7 +10,7 @@ const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
 const fishDefinitions = [
   {
     term: "Mahi-mahi",
-    definition: "The mahi-mahi is an ocean fish known...",
+    definition: <p>The mahi-mahi is an ocean fish known...</p>,
   },
   {
     term: "Golden trout",

package/src/components/List/List.tsx

@@ -8,7 +8,7 @@ import generateUUID from "../../helpers/generateUUID";
 
 interface DefinitionProps {
   term: string;
-  definition: string;
+  definition: string | JSX.Element;
 }
 export interface ListProps {
   /** Optionally pass in additional Chakra-based styles. */

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

@@ -96,7 +96,9 @@ exports[`List Renders the UI snapshot correctly 5`] = `
       Mahi-mahi
     </dt>
     <dd>
-      The mahi-mahi is an ocean fish known...
+      <p>
+        The mahi-mahi is an ocean fish known...
+      </p>
     </dd>
     <dt>
       Golden trout

package/src/components/Logo/Logo.stories.mdx

@@ -57,7 +57,7 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={Logo} />
 
@@ -77,11 +77,13 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
     {(args) => (
       <div
         style={
-          args.name.indexOf("White") !== -1
+          args.name.indexOf("White") !== -1 ||
+          args.name.indexOf("Negative") !== -1
             ? {
                 backgroundColor: "var(--nypl-colors-ui-gray-xdark)",
                 display: "inline-block",
                 padding: "var(--nypl-space-l)",
+                width: "100%",
               }
             : undefined
         }
@@ -104,11 +106,11 @@ export const logoRow = (logo, opts = {}) => {
   const styles = { textAlign: "center" };
   const { size = LogoSizes.Large, displayValue } = opts;
   let key = logo;
-  if (logo.indexOf("White") !== -1) {
+  if (logo.indexOf("White") !== -1 || logo.indexOf("Negative") !== -1) {
     styles.backgroundColor = "var(--nypl-colors-ui-gray-xdark)";
-    styles.paddingBottom = "32px";
-    styles.paddingTop = "32px";
     styles.color = "var(--nypl-colors-ui-white)";
+    styles.paddingBottom = "var(--nypl-space-l)";
+    styles.paddingTop = "var(--nypl-space-l)";
   }
   if (size !== LogoSizes.Large) {
     key += `-${size}`;

package/src/components/Logo/LogoSvgs.tsx

@@ -1,34 +1,66 @@
 /* eslint-disable camelcase */
 import logo_bpl_black from "../../../icons/svg/logo_bpl_black.svg";
+import logo_bpl_white from "../../../icons/svg/logo_bpl_white.svg";
+import logo_clever_color from "../../../icons/svg/logo_clever_color.svg";
+import logo_clever_white from "../../../icons/svg/logo_clever_white.svg";
 import logo_lpa_color from "../../../icons/svg/logo_lpa_color.svg";
+import logo_lpa_black from "../../../icons/svg/logo_lpa_black.svg";
 import logo_lpa_white from "../../../icons/svg/logo_lpa_white.svg";
+import logo_mln_black from "../../../icons/svg/logo_mln_black.svg";
+import logo_mln_white from "../../../icons/svg/logo_mln_white.svg";
 import logo_nypl_full_black from "../../../icons/svg/logo_nypl_full_black.svg";
 import logo_nypl_full_white from "../../../icons/svg/logo_nypl_full_white.svg";
 import logo_nypl_lion_black from "../../../icons/svg/logo_nypl_lion_black.svg";
 import logo_nypl_lion_white from "../../../icons/svg/logo_nypl_lion_white.svg";
 import logo_qpl_alt_black from "../../../icons/svg/logo_qpl_alt_black.svg";
+import logo_qpl_alt_white from "../../../icons/svg/logo_qpl_alt_white.svg";
+import logo_qpl_black from "../../../icons/svg/logo_qpl_black.svg";
 import logo_qpl_color from "../../../icons/svg/logo_qpl_color.svg";
+import logo_qpl_white from "../../../icons/svg/logo_qpl_white.svg";
+import logo_schomburg_black from "../../../icons/svg/logo_schomburg_black.svg";
+import logo_schomburg_circle_black from "../../../icons/svg/logo_schomburg_circle_black.svg";
 import logo_schomburg_circle_color from "../../../icons/svg/logo_schomburg_circle_color.svg";
+import logo_schomburg_circle_white from "../../../icons/svg/logo_schomburg_circle_white.svg";
 import logo_schomburg_color from "../../../icons/svg/logo_schomburg_color.svg";
+import logo_schomburg_white from "../../../icons/svg/logo_schomburg_white.svg";
 import logo_simplye_black from "../../../icons/svg/logo_simplye_black.svg";
+import logo_simplye_white from "../../../icons/svg/logo_simplye_white.svg";
 import logo_simplye_color from "../../../icons/svg/logo_simplye_color.svg";
 import logo_snfl_black from "../../../icons/svg/logo_snfl_black.svg";
 import logo_snfl_white from "../../../icons/svg/logo_snfl_white.svg";
+import logo_treasures_color from "../../../icons/svg/logo_treasures_color.svg";
+import logo_treasures_color_negative from "../../../icons/svg/logo_treasures_color_negative.svg";
 
 export default {
   logo_bpl_black,
+  logo_bpl_white,
+  logo_clever_color,
+  logo_clever_white,
+  logo_lpa_black,
   logo_lpa_color,
   logo_lpa_white,
+  logo_mln_black,
+  logo_mln_white,
   logo_nypl_full_black,
   logo_nypl_full_white,
-  logo_nypl_lion_white,
   logo_nypl_lion_black,
+  logo_nypl_lion_white,
   logo_qpl_alt_black,
+  logo_qpl_alt_white,
+  logo_qpl_black,
   logo_qpl_color,
+  logo_qpl_white,
+  logo_schomburg_black,
+  logo_schomburg_circle_black,
   logo_schomburg_circle_color,
+  logo_schomburg_circle_white,
   logo_schomburg_color,
+  logo_schomburg_white,
   logo_simplye_black,
+  logo_simplye_white,
   logo_simplye_color,
   logo_snfl_black,
   logo_snfl_white,
+  logo_treasures_color,
+  logo_treasures_color_negative,
 };

package/src/components/Logo/LogoTypes.tsx

@@ -15,18 +15,34 @@ export enum LogoSizes {
 
 export enum LogoNames {
   BrooklynPublicLibraryBlack = "logo_bpl_black",
+  BrooklynPublicLibraryWhite = "logo_bpl_white",
+  CleverColor = "logo_clever_color",
+  CleverWhite = "logo_clever_white",
   LPAColor = "logo_lpa_color",
+  LPABlack = "logo_lpa_black",
   LPAWhite = "logo_lpa_white",
+  MyLibraryNYCBlack = "logo_mln_black",
+  MyLibraryNYCWhite = "logo_mln_white",
   NYPLBlack = "logo_nypl_full_black",
   NYPLWhite = "logo_nypl_full_white",
   NYPLLionBlack = "logo_nypl_lion_black",
   NYPLLionWhite = "logo_nypl_lion_white",
   QueensPublicLibraryColor = "logo_qpl_color",
+  QueensPublicLibraryBlack = "logo_qpl_black",
+  QueensPublicLibraryWhite = "logo_qpl_white",
   QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
+  QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
   SchomburgColor = "logo_schomburg_color",
+  SchomburgBlack = "logo_schomburg_black",
+  SchomburgWhite = "logo_schomburg_white",
   SchomburgCircleColor = "logo_schomburg_circle_color",
+  SchomburgCircleBlack = "logo_schomburg_circle_black",
+  SchomburgCircleWhite = "logo_schomburg_circle_white",
   SimplyEColor = "logo_simplye_color",
   SimplyEBlack = "logo_simplye_black",
+  SimplyEWhite = "logo_simplye_white",
   SNFLBlack = "logo_snfl_black",
   SNFLWhite = "logo_snfl_white",
+  TreasuresColor = "logo_treasures_color",
+  TreasuresColorNegative = "logo_treasures_color_negative",
 }

package/src/components/Notification/Notification.stories.mdx

@@ -9,6 +9,7 @@ import { withDesign } from "storybook-addon-designs";
 
 import Icon from "../Icons/Icon";
 import { IconColors, IconNames } from "../Icons/IconTypes";
+import Link from "../Link/Link";
 import Notification from "./Notification";
 import { NotificationTypes } from "./NotificationTypes";
 import { getCategory } from "../../utils/componentCategories";
@@ -44,6 +45,7 @@ export const enumValues = getStorybookEnumValues(
     noMargin: {
       table: { defaultValue: { summary: false } },
     },
+    notificationContent: { control: false },
     notificationType: {
       control: { type: "select" },
       table: { defaultValue: { summary: "NotificationTypes.Standard" } },
@@ -57,7 +59,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={Notification} />
 
@@ -72,6 +74,7 @@ within a parent element.
   <Story
     name="Notification with Controls"
     args={{
+      ariaLabel: "Notification label",
       centered: false,
       className: undefined,
       dismissible: false,
@@ -89,6 +92,7 @@ within a parent element.
           nisi erat porttitor ligula.
         </>
       ),
+      notificationType: "NotificationTypes.Standard",
       showIcon: true,
     }}
   >
@@ -105,6 +109,15 @@ within a parent element.
 
 <ArgsTable story="Notification with Controls" />
 
+## Accessibility
+
+The `Notification` component renders with an HTML `aside` element as its wrapper.
+This is an HTML landmark element that is similar to adding an attribute of
+`role="complementary"`. For accessibility purposes, landmark elements should not
+be rendered inside other landmark elements such as the `header` and `footer`
+landmark elements. Adding a `Notification` component inside an HTML `main` landmark
+element is acceptable.
+
 ## Variants
 
 ### With NotificationHeading
@@ -253,6 +266,34 @@ The `Notification` icon can be hidden with the `showIcon` prop set to `false`.
   </DSProvider>
 </Canvas>
 
+### With HTML content
+
+The `notificationContent` prop can accept HTML.
+
+<Canvas>
+  <DSProvider>
+    <Notification
+      notificationHeading="Standard Notification with HTML content"
+      notificationContent={
+        <>
+          <p>
+            Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus
+            mollis interdum.
+          </p>
+          <p>
+            Morbi leo risus, porta ac consectetur ac, vestibulum at eros.{" "}
+            <b>
+              Cum sociis natoque penatibus et magnis dis parturient montes,
+              nascetur ridiculus mus
+            </b>
+            . <Link href="#">This is a link</Link>.
+          </p>
+        </>
+      }
+    />
+  </DSProvider>
+</Canvas>
+
 ## Custom Icon
 
 The default icon can be overridden by using the `icon` prop to pass a custom `Icon` component.
@@ -278,3 +319,29 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
     />
   </Story>
 </Canvas>
+
+## Dismissible
+
+A dismissible `Notification` component can be created by setting the
+`dismissible` prop to `true`. Once the "X" close icon on the upper right is
+clicked, the `Notification` will be removed from the DOM, therefore it only
+appears once.
+
+<Canvas>
+  <Story name="Dismissible">
+    <Notification
+      dismissible
+      notificationHeading="Dismissible Notification"
+      notificationContent={
+        <>
+          This is a dismissible Notification with an X icon. Cras mattis
+          consectetur purus sit amet fermentum. Maecenas faucibus mollis
+          interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+          eros. Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus.
+        </>
+      }
+      notificationType={NotificationTypes.Announcement}
+    />
+  </Story>
+</Canvas>