@nypl/design-system-react-components 0.26.0 → 0.28.0

package/src/components/Notification/Notification.tsx

@@ -2,12 +2,10 @@ import { Box, chakra, useMultiStyleConfig } from "@chakra-ui/react";
 import React, { useState } from "react";
 
 import Button from "../Button/Button";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import Icon from "../Icons/Icon";
-import { IconColors, IconNames, IconSizes } from "../Icons/IconTypes";
-import { NotificationTypes } from "./NotificationTypes";
+import Icon, { IconColors, IconNames, IconSizes } from "../Icons/Icon";
+
+export type NotificationTypes = "standard" | "announcement" | "warning";
 interface BaseProps {
   /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
@@ -61,11 +59,7 @@ export const NotificationHeading = chakra(
     return (
       <Box as="header" __css={styles} {...rest}>
         {icon}
-        <Heading
-          additionalStyles={styles.heading}
-          id={`${id}-heading`}
-          level={HeadingLevels.Four}
-        >
+        <Heading id={`${id}-heading`} level="four" __css={styles.heading}>
           {children}
         </Heading>
       </Box>
@@ -108,7 +102,7 @@ export const Notification = chakra((props: NotificationProps) => {
     noMargin = false,
     notificationContent,
     notificationHeading,
-    notificationType = NotificationTypes.Standard,
+    notificationType = "standard",
     showIcon = true,
     ...rest
   } = props;
@@ -122,12 +116,12 @@ export const Notification = chakra((props: NotificationProps) => {
   });
   const iconElement = () => {
     const baseIconProps = {
-      additionalStyles: styles.icon,
-      size: IconSizes.Large,
+      size: "large" as IconSizes,
+      __css: styles.icon,
     };
-    // If the icon should not display, return null.
+    // If the icon should not display, return undefined.
     if (!showIcon) {
-      return null;
+      return undefined;
     }
     // If a custom icon is passed, add specific `Notification` styles.
     if (icon)
@@ -135,45 +129,48 @@ export const Notification = chakra((props: NotificationProps) => {
         id: `${id}-custom-notification-icon`,
         ...baseIconProps,
       });
+    interface IconProps {
+      color: IconColors;
+      name: IconNames;
+      title: string;
+    }
     const iconProps = {
-      [NotificationTypes.Announcement]: {
-        color: IconColors.SectionResearchSecondary,
-        name: IconNames.SpeakerNotes,
+      announcement: {
+        color: "section.research.secondary",
+        name: "speakerNotes",
         title: "Notification announcement icon",
-      },
-      [NotificationTypes.Standard]: {
-        color: IconColors.UiBlack,
-        name: IconNames.AlertNotificationImportant,
+      } as IconProps,
+      standard: {
+        color: "ui.black",
+        name: "alertNotificationImportant",
         title: "Notification standard icon",
-      },
-      [NotificationTypes.Warning]: {
-        color: IconColors.BrandPrimary,
-        name: IconNames.ErrorFilled,
+      } as IconProps,
+      warning: {
+        color: "brand.primary",
+        name: "errorFilled",
         title: "Notification warning icon",
-      },
+      } as IconProps,
     };
     return (
       <Icon
         id={`${id}-notification-icon`}
-        {...baseIconProps}
         {...iconProps[notificationType]}
+        {...baseIconProps}
       />
     );
   };
   const dismissibleButton = dismissible && (
     <Button
-      additionalStyles={styles.dismissibleButton}
-      attributes={{
-        "aria-label": "Close the notification",
-      }}
-      buttonType={ButtonTypes.Link}
+      aria-label="Close the notification"
+      buttonType="link"
       id={`${id}-notification-dismissible-button`}
       onClick={handleClose}
+      __css={styles.dismissibleButton}
     >
       <Icon
         id={`${id}-dismissible-notification-icon`}
-        name={IconNames.Close}
-        size={IconSizes.Large}
+        name="close"
+        size="large"
         title="Notification close icon"
       />
     </Button>
@@ -190,11 +187,11 @@ export const Notification = chakra((props: NotificationProps) => {
     </NotificationHeading>
   );
   // Specific alignment styles for the content.
-  const alignText = childHeading && showIcon && (!!icon || !isCentered);
+  const alignText = !!(childHeading && showIcon && (!!icon || !isCentered));
   const childContent = (
     <NotificationContent
       alignText={alignText}
-      icon={!childHeading ? iconElem : null}
+      icon={!childHeading ? iconElem : undefined}
       notificationType={notificationType}
     >
       {notificationContent}

package/src/components/Pagination/Pagination.stories.mdx

@@ -8,7 +8,6 @@ import {
   Story,
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { withQuery } from "@storybook/addon-queryparams";
 
 import Button from "../Button/Button";
 import DSProvider from "../../theme/provider";
@@ -21,7 +20,7 @@ export const hrefProps = getStorybookHrefProps(10);
 <Meta
   title={getCategory("Pagination")}
   component={Pagination}
-  decorators={[withDesign, withQuery]}
+  decorators={[withDesign]}
   parameters={{
     design: {
       type: "figma",
@@ -44,7 +43,7 @@ export const hrefProps = getStorybookHrefProps(10);
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -171,7 +170,7 @@ export function CurrentPagePaginationExample() {
         currentPage={page}
         onPageChange={(selectedPage) => handleSelection(selectedPage)}
       />
-      <Button type="button" buttonType="primary" onClick={handleClick}>
+      <Button type="button" onClick={handleClick}>
         Go to Page 1
       </Button>
     </VStack>

package/src/components/Pagination/Pagination.tsx

@@ -3,8 +3,8 @@ import React, { useState, useRef } from "react";
 
 import Link from "../Link/Link";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import { range } from "../../utils/utils";
+
 export interface PaginationProps {
   /** Additional className. */
   className?: string;
@@ -51,7 +51,7 @@ export const Pagination = chakra((props: PaginationProps) => {
   // function exists, then set the internal state – selectedPage –
   // to the new currentPage and update the refCurrentPage with that value.
   React.useEffect(() => {
-    if (onPageChange && currentPage !== refCurrentPage.current) {
+    if (onPageChange && currentPage && currentPage !== refCurrentPage.current) {
       setSelectedPage(currentPage);
       refCurrentPage.current = currentPage;
     }
@@ -110,7 +110,10 @@ export const Pagination = chakra((props: PaginationProps) => {
    * 2. Otherwise, we stay on the same page by setting the `href` attribute to
    *    "#" and call the `onPageChange` prop through the `onClick` callback.
    */
-  const getLinkElement = (type: string, item?: number) => {
+  const getLinkElement = (
+    type: "items" | "previous" | "next",
+    item?: number
+  ) => {
     const isSelectedPage = selectedPage === item;
     // The current page link has different styles.
     const currentStyles = isSelectedPage
@@ -121,11 +124,13 @@ export const Pagination = chakra((props: PaginationProps) => {
       : {};
     const allAttrs = {
       items: {
-        href: changeUrls ? getPageHref(item) : "#",
+        href: changeUrls ? getPageHref(item as number) : "#",
         attributes: {
           "aria-label": `Page ${item}`,
           "aria-current": isSelectedPage ? "page" : null,
-          onClick: changeUrls ? undefined : (e) => handlePageClick(e, item),
+          onClick: changeUrls
+            ? undefined
+            : (e: Event) => handlePageClick(e, item as number),
         },
         text: item,
       },
@@ -149,13 +154,13 @@ export const Pagination = chakra((props: PaginationProps) => {
     const linkAttrs = allAttrs[type];
     return (
       <Link
-        additionalStyles={{
+        href={linkAttrs.href}
+        id={`${id}-${linkAttrs.text}`}
+        {...linkAttrs.attributes}
+        __css={{
           ...styles.link,
           ...currentStyles,
         }}
-        attributes={linkAttrs.attributes}
-        href={linkAttrs.href}
-        id={`${id}-${linkAttrs.text}`}
       >
         {linkAttrs.text}
       </Link>
@@ -252,7 +257,7 @@ export const Pagination = chakra((props: PaginationProps) => {
       __css={styles}
       {...rest}
     >
-      <List type={ListTypes.Unordered} inline noStyling id={`${id}-list`}>
+      <List type="ul" inline noStyling id={`${id}-list`}>
         {previousLiLink}
         {getPaginationNumbers(selectedPage)}
         {nextLiLink}

package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx

@@ -8,25 +8,10 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { GridGaps } from "../Grid/GridTypes";
 import ProgressIndicator from "./ProgressIndicator";
-import {
-  ProgressIndicatorSizes,
-  ProgressIndicatorTypes,
-} from "./ProgressIndicatorTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const sizesEnumValues = getStorybookEnumValues(
-  ProgressIndicatorSizes,
-  "ProgressIndicatorSizes"
-);
-export const typesEnumValues = getStorybookEnumValues(
-  ProgressIndicatorTypes,
-  "ProgressIndicatorTypes"
-);
 
 <Meta
   title={getCategory("ProgressIndicator")}
@@ -45,9 +30,7 @@ export const typesEnumValues = getStorybookEnumValues(
     },
     id: { control: false },
     indicatorType: {
-      control: { type: "radio" },
-      table: { defaultValue: { summary: "ProgressIndicatorTypes.Linear" } },
-      options: typesEnumValues.options,
+      table: { defaultValue: { summary: "linear" } },
     },
     isIndeterminate: {
       table: { defaultValue: { summary: false } },
@@ -56,9 +39,7 @@ export const typesEnumValues = getStorybookEnumValues(
       table: { defaultValue: { summary: true } },
     },
     size: {
-      control: { type: "radio" },
-      table: { defaultValue: { summary: "ProgressIndicatorSizes.Default" } },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "default" } },
     },
     value: {
       table: { defaultValue: { summary: 0 } },
@@ -71,7 +52,7 @@ export const typesEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -98,21 +79,15 @@ export const typesEnumValues = getStorybookEnumValues(
     args={{
       darkMode: false,
       id: "progressIndicator-id",
-      indicatorType: "ProgressIndicatorTypes.Linear",
+      indicatorType: "linear",
       isIndeterminate: false,
       labelText: "Progress",
       showLabel: true,
-      size: "ProgressIndicatorSizes.Default",
+      size: "default",
       value: 50,
     }}
   >
-    {(args) => (
-      <ProgressIndicator
-        {...args}
-        indicatorType={typesEnumValues.getValue(args.indicatorType)}
-        size={sizesEnumValues.getValue(args.size)}
-      />
-    )}
+    {(args) => <ProgressIndicator {...args} />}
   </Story>
 </Canvas>
 
@@ -152,7 +127,7 @@ dialogs, etc.
   >
     <ProgressIndicator
       id="linear"
-      indicatorType={ProgressIndicatorTypes.Linear}
+      indicatorType="linear"
       labelText="Linear Progress Type"
       value={50}
     />
@@ -162,8 +137,7 @@ dialogs, etc.
 ## Circular Type
 
 The circular progress type is preferred for large content areas and for
-full-screen loading. Set the `indicatorType` prop to
-`ProgressIndicatorTypes.Circular` for this type.
+full-screen loading. Set the `indicatorType` prop to `"circular"` for this type.
 
 <Canvas>
   <Story
@@ -174,7 +148,7 @@ full-screen loading. Set the `indicatorType` prop to
   >
     <ProgressIndicator
       id="circular"
-      indicatorType={ProgressIndicatorTypes.Circular}
+      indicatorType="circular"
       labelText="Linear Progress Type"
       value={50}
     />
@@ -187,11 +161,11 @@ The starting height for the progress bar is 4px on mobile and 8px for desktop.
 The `size` prop can be used to optionally set the height to 4px for desktop
 through the `ProgressIndicatorSizes.Small` value.
 
-`size={ProgressIndicatorSizes.Small}`
+`size="small"`
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="default-size"
         labelText="Default 8px size"
@@ -200,7 +174,7 @@ through the `ProgressIndicatorSizes.Small` value.
       <ProgressIndicator
         id="small-size"
         labelText="Small 4px size"
-        size={ProgressIndicatorSizes.Small}
+        size="small"
         value={50}
       />
     </SimpleGrid>
@@ -212,22 +186,22 @@ The starting size for the circular progress is 48px and can be made smaller to
 changes in content. Note that in the small size, the label text and the
 percentage will not displayed.
 
-`size={ProgressIndicatorSizes.Small}`
+`size="small"`
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="default-size"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         labelText="Default 48px size"
         value={50}
       />
       <ProgressIndicator
         id="small-size"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         labelText="Small 24px size"
-        size={ProgressIndicatorSizes.Small}
+        size="small"
         value={50}
       />
     </SimpleGrid>
@@ -246,7 +220,7 @@ the progress element to provide a description of the progress for screen readers
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="label"
         labelText="This label will be added through aria-label"
@@ -255,7 +229,7 @@ the progress element to provide a description of the progress for screen readers
       />
       <ProgressIndicator
         id="label-hidden"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         labelText="This label will be added through aria-label"
         showLabel={false}
         value={50}
@@ -272,7 +246,7 @@ exact value or progress of the task is unknown.
 
 <Canvas>
   <DSProvider>
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="indeterminate"
         isIndeterminate
@@ -281,7 +255,7 @@ exact value or progress of the task is unknown.
       />
       <ProgressIndicator
         id="indeterminate-circular"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         isIndeterminate
         labelText="Indeterminate state"
         value={50}
@@ -300,7 +274,7 @@ Note: the background is manually set to better showcase the `darkMode` prop.
 <Canvas>
   <DSProvider>
     <Box bg="black" w="100%" h="200px" p="20px">
-      <SimpleGrid columns={1} gap={GridGaps.Medium}>
+      <SimpleGrid columns={1} gap="grid.m">
         <ProgressIndicator
           darkMode
           id="darkmode"
@@ -310,7 +284,7 @@ Note: the background is manually set to better showcase the `darkMode` prop.
         <ProgressIndicator
           darkMode
           id="darkmode-circular"
-          indicatorType={ProgressIndicatorTypes.Circular}
+          indicatorType="circular"
           labelText="Dark Mode"
           value={50}
         />
@@ -337,7 +311,7 @@ function ProgressIndicatorExample() {
     return () => clearInterval(interval);
   }, []);
   return (
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="example"
         labelText="Progress example"
@@ -345,7 +319,7 @@ function ProgressIndicatorExample() {
       />
       <ProgressIndicator
         id="example-circular"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         labelText="Progress example"
         value={value}
       />
@@ -363,7 +337,7 @@ export function ProgressIndicatorExample() {
     return () => clearInterval(interval);
   }, []);
   return (
-    <SimpleGrid columns={1} gap={GridGaps.Medium}>
+    <SimpleGrid columns={1} gap="grid.m">
       <ProgressIndicator
         id="example"
         labelText="Progress example"
@@ -371,7 +345,7 @@ export function ProgressIndicatorExample() {
       />
       <ProgressIndicator
         id="example-circular"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         labelText="Progress example"
         value={value}
       />

package/src/components/ProgressIndicator/ProgressIndicator.test.tsx

@@ -4,7 +4,6 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import ProgressIndicator from "./ProgressIndicator";
-import { ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
 
 describe("ProgressIndicator Accessibility", () => {
   it("passes axe accessibility for linear and circular types", async () => {
@@ -20,7 +19,7 @@ describe("ProgressIndicator Accessibility", () => {
         id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
       />
     );
     expect(await axe(linearUtils.container)).toHaveNoViolations();
@@ -41,7 +40,7 @@ describe("ProgressIndicator Accessibility", () => {
         id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         showLabel={false}
       />
     );
@@ -63,7 +62,7 @@ describe("ProgressIndicator Accessibility", () => {
         id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         isIndeterminate
       />
     );
@@ -85,7 +84,7 @@ describe("ProgressIndicator Accessibility", () => {
         id="progressIndicatorCircular"
         labelText="Circular"
         value={50}
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         darkMode
       />
     );
@@ -108,7 +107,7 @@ describe("ProgressIndicator", () => {
       <ProgressIndicator
         id="progressIndicator"
         labelText="Circular"
-        indicatorType={ProgressIndicatorTypes.Circular}
+        indicatorType="circular"
         value={50}
       />
     );
@@ -196,7 +195,7 @@ describe("ProgressIndicator", () => {
           id="circularBasic"
           labelText="Circular"
           value={50}
-          indicatorType={ProgressIndicatorTypes.Circular}
+          indicatorType="circular"
         />
       )
       .toJSON();
@@ -216,7 +215,7 @@ describe("ProgressIndicator", () => {
           id="circularNoLabel"
           labelText="Circular"
           value={50}
-          indicatorType={ProgressIndicatorTypes.Circular}
+          indicatorType="circular"
           showLabel={false}
         />
       )
@@ -237,7 +236,7 @@ describe("ProgressIndicator", () => {
           id="circularIndeterminate"
           labelText="Circular"
           value={50}
-          indicatorType={ProgressIndicatorTypes.Circular}
+          indicatorType="circular"
           isIndeterminate
         />
       )
@@ -258,7 +257,7 @@ describe("ProgressIndicator", () => {
           id="circularDarkMode"
           labelText="Circular"
           value={50}
-          indicatorType={ProgressIndicatorTypes.Circular}
+          indicatorType="circular"
           darkMode
         />
       )

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -8,12 +8,10 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 
-import {
-  ProgressIndicatorSizes,
-  ProgressIndicatorTypes,
-} from "./ProgressIndicatorTypes";
 import Label from "../Label/Label";
 
+export type ProgressIndicatorSizes = "default" | "small";
+export type ProgressIndicatorTypes = "circular" | "linear";
 export interface ProgressIndicatorProps {
   /** Flag to render the component in a dark background. */
   darkMode?: boolean;
@@ -44,11 +42,11 @@ export const ProgressIndicator = chakra((props: ProgressIndicatorProps) => {
   const {
     darkMode = false,
     id,
-    indicatorType = ProgressIndicatorTypes.Linear,
+    indicatorType = "linear",
     isIndeterminate = false,
     labelText,
     showLabel = true,
-    size = ProgressIndicatorSizes.Default,
+    size = "default",
     value = 0,
     ...rest
   } = props;
@@ -74,33 +72,31 @@ export const ProgressIndicator = chakra((props: ProgressIndicatorProps) => {
     id,
     // If the label is visually shown, associate it with the progress indicator.
     // Otherwise, the `aria-label` will be added.
-    "aria-label": showLabel ? null : labelText,
-    "aria-labelledby": showLabel ? `${id}-label` : null,
+    "aria-label": showLabel ? undefined : labelText,
+    "aria-labelledby": showLabel ? `${id}-label` : undefined,
     // If `isIndeterminate` is true, then it overrides the `value` prop.
-    isIndeterminate: isIndeterminate || null,
-    value: isIndeterminate ? null : finalValue,
+    isIndeterminate: isIndeterminate || undefined,
+    value: isIndeterminate ? undefined : finalValue,
   };
-  const progressComponent = (indicatorType) => {
+  const progressComponent = (indicatorType: ProgressIndicatorTypes) => {
     // Only display the percentage text for the default size, not in the
     // indeterminate state, and when `showLabel` is true.
-    if (indicatorType === ProgressIndicatorTypes.Circular) {
+    if (indicatorType === "circular") {
       // For the small size, since the label won't be visible, we need to add
       // it to the parent component's `aria-label` attribute.
-      if (size === ProgressIndicatorSizes.Small) {
+      if (size === "small") {
         progressProps["aria-label"] = labelText;
       }
       return (
         <Box __css={styles.circularContainer}>
           <ChakraCircularProgress {...progressProps} sx={styles.circular}>
-            {showLabel &&
-              !isIndeterminate &&
-              size !== ProgressIndicatorSizes.Small && (
-                <ChakraCircularProgressLabel>
-                  {finalValue}%
-                </ChakraCircularProgressLabel>
-              )}
+            {showLabel && !isIndeterminate && size !== "small" && (
+              <ChakraCircularProgressLabel>
+                {finalValue}%
+              </ChakraCircularProgressLabel>
+            )}
           </ChakraCircularProgress>
-          {showLabel && size !== ProgressIndicatorSizes.Small && (
+          {showLabel && size !== "small" && (
             <Label id={`${id}-label`} htmlFor={id}>
               {labelText}
             </Label>