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

package/src/components/Input/Input.stories.tsx

@@ -6,8 +6,6 @@ import Label from "../Label/Label";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
-// eslint-disable-next-line id-blacklist
-import { text, boolean, select, number } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -16,47 +14,24 @@ export default {
   component: Input,
 };
 
-let showLabel, showHelperText;
-
 export const input = () => (
   <>
-    {boolean("Show Label", true) ? (showLabel = true) : (showLabel = false)}
-    {showLabel && (
-      <Label
-        htmlFor="inputID"
-        optReqFlag={select(
-          "Optional/Required Flag",
-          ["Required", "Optional", ""],
-          "Required"
-        )}
-        id={"label"}
-      >
-        {text("Input Label", "Choose your islander name: ")}
-      </Label>
-    )}
+    <Label htmlFor="inputID" optReqFlag="Required" id={"label"}>
+      Choose your islander name:
+    </Label>
     <Input
       id="inputID"
       ariaLabel="Input Label"
       ariaLabelledBy={"helperText"}
-      required={boolean("Input Required", false)}
-      placeholder={text("Input Placeholder", "CoolPerson99")}
-      type={select("Input Type", InputTypes, InputTypes.text)}
-      disabled={boolean("Disabled", false)}
+      required={false}
+      placeholder="CoolPerson99"
+      type={InputTypes.text}
+      disabled={false}
     ></Input>
-    {boolean("Show Helper Text", true)
-      ? (showHelperText = true)
-      : (showHelperText = false)}
-    {showHelperText && (
-      <HelperErrorText
-        isInvalid={boolean("Helper Text Errored", false)}
-        id={"helperText"}
-      >
-        {text(
-          "Helper Text Content",
-          "Once you pick a name for your islander it cannot be changed, so choose wisely!"
-        )}
-      </HelperErrorText>
-    )}
+    <HelperErrorText isInvalid={false} id={"helperText"}>
+      Once you pick a name for your islander it cannot be changed, so choose
+      wisely!
+    </HelperErrorText>
   </>
 );
 
@@ -64,8 +39,7 @@ input.storyName = "Input";
 input.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -74,12 +48,7 @@ let groupErrored;
 
 export const inputGroup = () => (
   <fieldset className="fieldset">
-    {boolean("Input Group Errored", false)
-      ? (groupErrored = true)
-      : (groupErrored = false)}
-    <legend className="legend">
-      {text("Input Group Label", "Construction Time Request Form: ")}
-    </legend>
+    <legend className="legend">Construction Time Request Form:</legend>
     <div className="input-group">
       <div style={{ flex: "1" }}>
         <Label htmlFor="input1" id={"label1"}>
@@ -87,17 +56,13 @@ export const inputGroup = () => (
         </Label>
         <Input
           id="input1"
-          ariaLabelledBy={
-            groupErrored
-              ? "helperText1 sharedHelperText label1"
-              : "helperText1 label1"
-          }
+          ariaLabelledBy="helperText1 sharedHelperText label1"
           errored={groupErrored ? true : false}
           required={true}
           type={InputTypes.text}
         ></Input>
         <HelperErrorText isInvalid={false} id={"helperText1"}>
-          {text("Input 1 Helper Text", "E.g., 10am")}
+          "E.g., 10am"
         </HelperErrorText>
       </div>
 
@@ -112,23 +77,15 @@ export const inputGroup = () => (
               ? "helperText2 sharedHelperText label2"
               : "helperText2 label2"
           }
-          errored={groupErrored ? true : false}
+          errored={false}
           required={true}
           type={InputTypes.text}
         ></Input>
         <HelperErrorText isInvalid={false} id={"helperText2"}>
-          {text("Input 2 Helper Text", "E.g., 11am")}
+          E.g., 11am
         </HelperErrorText>
       </div>
     </div>
-    {groupErrored && (
-      <HelperErrorText isInvalid={true} id={"sharedHelperText"}>
-        {text(
-          "Additional Error Text",
-          "Sorry villager! Those times are not available right now."
-        )}
-      </HelperErrorText>
-    )}
     <Button
       onClick={action("clicked")}
       id="button"
@@ -144,8 +101,7 @@ inputGroup.storyName = "Input Group";
 inputGroup.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -165,8 +121,8 @@ export const inputAttributes = () => (
       attributes={{
         onBlur: action("onBlur"),
         onChange: action("onChange"),
-        maxLength: number("maxLength", 10),
-        tabIndex: number("tabIndex", 0),
+        maxLength: 10,
+        tabIndex: 0,
       }}
     ></Input>
     <HelperErrorText isInvalid={false} id="helperText-attrs">

package/src/components/Input/_Input.scss

@@ -1,10 +1,10 @@
 $break-input-mobile: 400px;
 
 .input {
-  @include space-inset-xs;
-  @include space-stack-xs;
+  padding: var(--nypl-space-xs);
+  margin-bottom: var(--nypl-space-xs);
 
-  border: 1px solid var(--ui-gray-medium);
+  border: 1px solid var(--nypl-colors-ui-gray-medium);
 
   &[type="text"],
   &[type="number"],
@@ -17,43 +17,43 @@ $break-input-mobile: 400px;
 
     + .label {
       display: unset;
-      margin-left: var(--space-s);
+      margin-left: var(--nypl-space-s);
     }
   }
 
   &::-webkit-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-moz-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-ms-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:hover {
-    border-color: var(--ui-gray-dark);
+    border-color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:disabled {
-    background-color: var(--ui-gray-xx-light-cool);
-    color: var(--ui-gray-xdark);
+    background-color: var(--nypl-colors-ui-gray-xx-light-cool);
+    color: var(--nypl-colors-ui-gray-xdark);
   }
 
   &:active,
   &:focus,
   &:active:hover,
   &:focus:hover {
-    border: 1px solid var(--ui-focus);
+    border: 1px solid var(--nypl-colors-ui-focus);
     box-shadow: 0;
-    outline: 1px solid var(--ui-focus);
+    outline: 1px solid var(--nypl-colors-ui-focus);
     z-index: 9999;
   }
 
   &--error {
-    border: 1px solid var(--ui-error-primary);
+    border: 1px solid var(--nypl-colors-ui-error-primary);
   }
 }
 
@@ -63,7 +63,16 @@ $break-input-mobile: 400px;
     justify-content: space-between;
 
     > *:not(:last-child) {
-      @include space-inline-m;
+      margin-right: var(--nypl-space-m);
     }
   }
 }
+
+// Used in `Input.stories.tsx`
+.fieldset {
+  @include fieldset-reset;
+}
+.legend {
+  border: 0;
+  font-weight: 500;
+}

package/src/components/Link/Link.tsx

@@ -7,6 +7,8 @@ import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface LinkProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
   attributes?: { [key: string]: any };
   /** Any child node passed to the component. */
@@ -65,6 +67,7 @@ function getWithDirectionIcon(children, type: LinkTypes) {
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   (props, ref: any) => {
     const {
+      additionalStyles = {},
       attributes,
       children,
       className,
@@ -130,7 +133,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           className={className}
           ref={ref}
           {...linkProps}
-          __css={style}
+          __css={{ ...style, ...additionalStyles }}
         >
           {newChildren}
         </Box>

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

@@ -47,7 +47,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.2`   |
 
 <Description of={List} />
 

package/src/components/List/List.tsx

@@ -11,17 +11,21 @@ interface DefinitionProps {
   definition: string;
 }
 export interface ListProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'list' */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
+  /** Display the list in a row. */
+  inline?: boolean;
   /** Data to render if children are not passed. For `ListTypes.Ordered` and
    * `ListTypes.Unordered` `List` types, the data structure is an array of
    * strings to renders as `li` items. For `ListTypes.Definition` `List` types,
    * the data structure is an array of objects with `term` and `definition`
    * properties to render `dt` and `dd` elements, respectively.
    */
-  listItems?: (string | DefinitionProps)[];
+  listItems?: (string | JSX.Element | DefinitionProps)[];
   /** Remove list styling. */
   noStyling?: boolean;
   /** An optional title that will appear over the list. This prop only applies
@@ -38,15 +42,18 @@ export interface ListProps {
  */
 export default function List(props: React.PropsWithChildren<ListProps>) {
   const {
+    additionalStyles = {},
     children,
     className,
     id = generateUUID(),
+    inline = false,
     listItems,
     noStyling = false,
     title,
     type = ListTypes.Unordered,
   } = props;
-  const styles = useStyleConfig("List", { noStyling, variant: type });
+  const styles = useStyleConfig("List", { inline, noStyling, variant: type });
+  const finalStyles = { ...styles, ...additionalStyles };
   let listElement = null;
 
   // Either li/dt/dd children elements must be passed or the `listItems`
@@ -122,14 +129,14 @@ export default function List(props: React.PropsWithChildren<ListProps>) {
   if (type === ListTypes.Ordered || type === ListTypes.Unordered) {
     checkListChildrenError(type);
     listElement = (
-      <Box as={type as As} id={id} className={className} __css={styles}>
+      <Box as={type as As} id={id} className={className} __css={finalStyles}>
         {listChildrenElms(type)}
       </Box>
     );
   } else if (type === ListTypes.Definition) {
     checkDefinitionChildrenError();
     listElement = (
-      <Box as="section" id={id} className={className} __css={styles}>
+      <Box as="section" id={id} className={className} __css={finalStyles}>
         {title && (
           <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
             {title}

package/src/components/Modal/Modal.stories.mdx

@@ -3,7 +3,7 @@ import {
   Meta,
   Story,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import Modal from "./Modal";
@@ -118,11 +118,11 @@ export const ModalStory = (args) => {
   );
 };
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" args={{ open: false }}>
     {(args) => <ModalStory {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 

package/src/components/Modal/_Modal.scss

@@ -5,9 +5,9 @@
 }
 
 .modal {
-  @include space-inset-s;
+  padding: var(--nypl-space-s);
 
-  background-color: var(--ui-gray-x-light-warm);
+  background-color: var(--nypl-colors-ui-gray-x-light-warm);
   height: 100vh;
   left: 0;
   overflow-y: auto;

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

@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Notification} />
 
@@ -204,9 +204,7 @@ The default icon can be overridden by using the `icon` prop to pass a custom `Ic
       <Notification
         icon={
           <Icon
-            align={IconAlign.Left}
             name={IconNames.Check}
-            size={IconSizes.Large}
             color={IconColors.SectionResearchSecondary}
           />
         }

package/src/components/Notification/Notification.tsx

@@ -11,7 +11,7 @@ import { NotificationTypes } from "./NotificationTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 interface BaseProps {
-  /** Optional prop to control text alignment of the `Notification` content */
+  /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
   /** Optional prop to control horizontal alignment of the `Notification` content */
   centered?: boolean;
@@ -22,7 +22,12 @@ interface BaseProps {
   notificationType?: NotificationTypes;
 }
 
-export interface NotificationProps extends BaseProps {
+// Used for `NotificationHeading` and `Notification`
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+// Used for `NotificationContent`
+type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+
+export interface NotificationProps extends BasePropsWithoutAlignText {
   /** Additional `className` to add.  */
   className?: string;
   /** Optional prop to control whether a `Notification` can be dismissed
@@ -43,7 +48,9 @@ export interface NotificationProps extends BaseProps {
 /**
  * NotificationHeading child-component.
  */
-export function NotificationHeading(props: React.PropsWithChildren<BaseProps>) {
+export function NotificationHeading(
+  props: React.PropsWithChildren<BasePropsWithoutAlignText>
+) {
   const { centered, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
     centered,
@@ -62,7 +69,9 @@ export function NotificationHeading(props: React.PropsWithChildren<BaseProps>) {
 /**
  * NotificationContent child-component.
  */
-export function NotificationContent(props: React.PropsWithChildren<BaseProps>) {
+export function NotificationContent(
+  props: React.PropsWithChildren<BasePropsWithoutCentered>
+) {
   const { alignText, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationContent", {
     alignText,
@@ -100,8 +109,17 @@ export default function Notification(props: NotificationProps) {
     notificationType,
   });
   const iconElement = () => {
+    const baseIconProps = {
+      decorative: false,
+      size: IconSizes.Large,
+      additionalStyles: styles.icon,
+    };
     // If a custom icon is passed, add specific `Notification` styles.
-    if (icon) return React.cloneElement(icon, { sx: styles.icon });
+    if (icon)
+      return React.cloneElement(icon, {
+        id: `${id}-custom-notification-icon`,
+        ...baseIconProps,
+      });
     const iconProps = {
       [NotificationTypes.Announcement]: {
         name: IconNames.SpeakerNotes,
@@ -115,9 +133,7 @@ export default function Notification(props: NotificationProps) {
     return notificationType !== NotificationTypes.Standard ? (
       <Icon
         id={`${id}-notification-icon`}
-        decorative={false}
-        size={IconSizes.Large}
-        additionalStyles={styles.icon}
+        {...baseIconProps}
         {...iconProps[notificationType]}
       />
     ) : null;
@@ -133,7 +149,6 @@ export default function Notification(props: NotificationProps) {
         decorative={false}
         name={IconNames.Close}
         size={IconSizes.Large}
-        additionalStyles={styles.dismissibleIcon}
       />
     </Button>
   );

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

@@ -49,6 +49,7 @@ exports[`Notification renders the UI snapshot correctly 2`] = `
         focusable={false}
         id="notificationID2-notification-icon"
         role="img"
+        title="speaker_notes icon"
         viewBox="0 0 24 24"
       >
         <g
@@ -111,6 +112,7 @@ exports[`Notification renders the UI snapshot correctly 3`] = `
         focusable={false}
         id="notificationID3-notification-icon"
         role="img"
+        title="error_filled icon"
         viewBox="0 0 24 24"
       >
         <g

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

@@ -15,11 +15,6 @@ import { getCategory } from "../../utils/componentCategories";
   title={getCategory("Pagination")}
   component={Pagination}
   decorators={[withDesign, withQuery]}
-  argTypes={{
-    blockName: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
-    className: { table: { disable: true } },
-  }}
   parameters={{
     design: {
       type: "figma",
@@ -28,6 +23,11 @@ import { getCategory } from "../../utils/componentCategories";
     },
     jest: ["Pagination.test.tsx"],
   }}
+  argTypes={{
+    id: { table: { disable: true } },
+    getPageHref: { table: { disable: true } },
+    onPageChange: { table: { disable: true } },
+  }}
 />
 
 # Pagination
@@ -35,7 +35,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.22.2`   |
+| Latest            | `0.25.3`   |
 
 <Description of={Pagination} />
 
@@ -49,17 +49,20 @@ Pagination uses anchor tags because it is navigating between URLs.
 
 In order to update the URL with a query parameter, the parent component must
 declare and pass a `getPageHref` function to the `Pagination` component. This
-function should return a string with the desired URL that the pagination links
-should go to. Note that this will refresh the browser on every click.
+function takes a `selectedPage` number argument for the selected page and it
+should return a string with the desired URL that the pagination links should go
+to. Note that this will refresh the browser on every click.
 
 In the following example, the `getPageHref` function will compute a new URL that
 has `&page=` as a URL query. In your own application this query parameter can be
 named anything but you have to pick up the value in the wrapper component.
 
-```jsx
+```tsx
 // Example in a search results page.
-const getPageHref = (page) => {
-  return `${location.origin}?q=celeste&page=${page}`;
+const getPageHref = (selectedPage: number) => {
+  // This should be updated for your router system, if any, including the
+  // base or origin URL.
+  return `${location.origin}?q=celeste&page=${selectedPage}`;
 };
 ```
 
@@ -67,8 +70,8 @@ const getPageHref = (page) => {
   <Story
     name="Pagination with URL Updates"
     args={{
-      currentPage: 4,
-      pageCount: 100,
+      initialPage: 1,
+      pageCount: 10,
     }}
   >
     {(args) => stories.PaginationGetPageHref(args)}
@@ -82,29 +85,25 @@ const getPageHref = (page) => {
 It is preferred to use the `Pagination` component with the `getPageHref`
 function passed as a prop and that the URL is updated whenever a page is
 changed. However, the optional `onPageChange` prop is available in case URL
-updating is not desired. The parent component must now keep track of the state
-of the current page value.
+updating is not desired.
 
-the `getPageHref` function will compute a new URL that
-has `&page=` as a URL query. In your own application this query parameter can be
-named anything but you have to pick up the value in the wrapper component.
+In the following example, the `onPageChange` function gets the current page as
+its only function argument. This is computed internally in the `Pagination`
+component through its own state.
 
-In the following example, the `onPageChange` function is keeping track of the
-current page through the use of React's `useState` feature.
-
-```jsx
+```tsx
 // Example in a search results page.
-const [computedCurrentPage, setComputedCurrentPage] = useState(
-  args.currentPage
-);
-const onPageChange = (page: number) => setComputedCurrentPage(page);
+const onPageChange = (currentPage: number) => {
+  console.log(`Current page: ${currentPage}`);
+  // Do what you need to with the `currentPage` value.
+};
 ```
 
 <Canvas withToolbar>
   <Story
     name="Pagination with Unchanging URL"
     args={{
-      currentPage: 7,
+      initialPage: 7,
       pageCount: 100,
     }}
   >

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,17 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Story } from "@storybook/react/types-6-0";
 
 import Pagination, { PaginationProps } from "./Pagination";
 
 /**
  * PaginationGetPageHref will refresh the browser as a new page is selected.
+ * In this example, `getPageHref` creates the `href` attribute for each
+ * page URL.
  */
 export const PaginationGetPageHref: Story<PaginationProps> = (args) => {
   // This uses the `addon-queryparams` Storybook addon.
   const urlParams = new URLSearchParams(document.location.search);
   const pageParam = urlParams.get("page");
   const getPageNumber = (page: number, pageCount: number) => {
-    return page > 0 && page < pageCount ? page : 1;
+    return page > 0 && page <= pageCount ? page : 1;
   };
   const computedCurrentPage =
     pageParam &&
@@ -20,15 +22,14 @@ export const PaginationGetPageHref: Story<PaginationProps> = (args) => {
   const location = window.location;
   // Passing this function into `Pagination` makes the URL to change
   // and refreshes the page.
-  const getPageHref = (page) => {
-    const currentStoryId = urlParams.get("id");
-    return `${location.origin}?path=/story/${currentStoryId}&page=${page}`;
+  const getPageHref = (selectedPage) => {
+    return `${location.href}&page=${selectedPage}`;
   };
 
   return (
     <Pagination
       pageCount={args.pageCount}
-      currentPage={computedCurrentPage || args.currentPage}
+      initialPage={computedCurrentPage || args.initialPage}
       getPageHref={getPageHref}
     />
   );
@@ -39,20 +40,14 @@ export const PaginationGetPageHref: Story<PaginationProps> = (args) => {
  * selected but will not change the URL or refresh the page.
  */
 export const PaginationOnPageChange: Story<PaginationProps> = (args) => {
-  const [computedCurrentPage, setComputedCurrentPage] = useState(
-    args.currentPage
-  );
-  const onPageChange = (page: number) => setComputedCurrentPage(page);
-
-  // Allows storybook controls to control `currentPage` prop.
-  useEffect(() => {
-    setComputedCurrentPage(args.currentPage);
-  }, [args.currentPage]);
+  const onPageChange = (currentPage: number) => {
+    console.log(`Current page: ${currentPage}`);
+  };
 
   return (
     <Pagination
       pageCount={args.pageCount}
-      currentPage={computedCurrentPage}
+      initialPage={args.initialPage}
       onPageChange={onPageChange}
     />
   );