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

package/src/components/Template/Template.test.tsx

@@ -5,6 +5,7 @@ import renderer from "react-test-renderer";
 
 import {
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,
@@ -16,6 +17,7 @@ import {
 } from "./Template";
 import Placeholder from "../Placeholder/Placeholder";
 
+const aboveHeader = <Placeholder variant="short">Above Header</Placeholder>;
 const header = <Placeholder variant="short">NYPL Header</Placeholder>;
 const breakout = (
   <>
@@ -38,6 +40,7 @@ describe("TemplateAppContainer accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <TemplateAppContainer
+        aboveHeader={aboveHeader}
         header={header}
         breakout={breakout}
         sidebar={sidebar}
@@ -55,6 +58,7 @@ describe("Template components accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <Template>
+        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
         <TemplateHeader>
           {header}
           <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -75,6 +79,7 @@ describe("TemplateAppContainer component", () => {
   it("renders each section", () => {
     render(
       <TemplateAppContainer
+        aboveHeader={aboveHeader}
         header={header}
         breakout={breakout}
         sidebar={sidebar}
@@ -84,7 +89,7 @@ describe("TemplateAppContainer component", () => {
         footer={footer}
       />
     );
-
+    expect(screen.getByText("Above Header")).toBeInTheDocument();
     expect(screen.getByText("NYPL Header")).toBeInTheDocument();
     expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
     expect(screen.getByText("Hero")).toBeInTheDocument();
@@ -95,6 +100,45 @@ describe("TemplateAppContainer component", () => {
     expect(screen.getByText("Footer")).toBeInTheDocument();
   });
 
+  it("renders only one header in a custom header component", () => {
+    const customHeader = <header>Custom header</header>;
+    render(
+      <TemplateAppContainer
+        header={customHeader}
+        renderHeaderElement={false}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={footer}
+      />
+    );
+
+    // The `<header>` HTML element has the same meaning as `role="banner"`.
+    expect(screen.getAllByRole("banner")).toHaveLength(1);
+  });
+
+  it("consoles a warning when a header element was passed without setting `renderHeaderElement` to false", () => {
+    const warn = jest.spyOn(console, "warn");
+    const customHeader = <header>Custom header</header>;
+    render(
+      <TemplateAppContainer
+        header={customHeader}
+        breakout={breakout}
+        sidebar={sidebar}
+        contentTop={contentTop}
+        contentSidebar={contentSidebar}
+        contentPrimary={contentPrimary}
+        footer={footer}
+      />
+    );
+    expect(warn).toHaveBeenCalledWith(
+      "`TemplateHeader`: An HTML `header` element was passed in. Set " +
+        "`renderHeaderElement` to `false` to avoid nested HTML `header` elements."
+    );
+  });
+
   it("renders only one footer in a custom footer component", () => {
     const customFooter = <footer>Custom Footer</footer>;
     render(
@@ -138,6 +182,7 @@ describe("Template components", () => {
   it("renders each section", () => {
     render(
       <Template>
+        <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
         <TemplateHeader>
           {header}
           <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -151,6 +196,7 @@ describe("Template components", () => {
       </Template>
     );
 
+    expect(screen.getByText("Above Header")).toBeInTheDocument();
     expect(screen.getByText("NYPL Header")).toBeInTheDocument();
     expect(screen.getByText("Breadcrumbs")).toBeInTheDocument();
     expect(screen.getByText("Hero")).toBeInTheDocument();
@@ -162,9 +208,10 @@ describe("Template components", () => {
   });
 
   it("Renders the UI snapshot correctly", () => {
-    const basic = renderer
+    const templateComponents = renderer
       .create(
         <Template>
+          <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
           <TemplateHeader>
             {header}
             <TemplateBreakout>{breakout}</TemplateBreakout>
@@ -178,7 +225,22 @@ describe("Template components", () => {
         </Template>
       )
       .toJSON();
+    const singleComponent = renderer
+      .create(
+        <TemplateAppContainer
+          aboveHeader={aboveHeader}
+          header={header}
+          breakout={breakout}
+          sidebar={sidebar}
+          contentTop={contentTop}
+          contentSidebar={contentSidebar}
+          contentPrimary={contentPrimary}
+          footer={footer}
+        />
+      )
+      .toJSON();
 
-    expect(basic).toMatchSnapshot();
+    expect(templateComponents).toMatchSnapshot();
+    expect(singleComponent).toMatchSnapshot();
   });
 });

package/src/components/Template/Template.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { Box, useStyleConfig } from "@chakra-ui/react";
 
 export interface TemplateProps {}
+export interface TemplateHeaderProps {
+  /** Flag to render an HTML header element. True by default. */
+  renderHeaderElement?: boolean;
+}
 export interface TemplateFooterProps {
   /** Flag to render an HTML footer element. True by default. */
   renderFooterElement?: boolean;
@@ -14,7 +18,11 @@ export interface TemplateSidebarProps {
 export interface TemplateContentProps extends TemplateSidebarProps {}
 export interface TemplateAppContainerProps
   extends TemplateFooterProps,
+    TemplateHeaderProps,
     TemplateSidebarProps {
+  /** DOM that will be rendered before the rest of the components in
+   * `TemplateAppContainer` and immediately before the `TemplateHeader` component. */
+  aboveHeader?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateBreakout` component section. */
   breakout?: React.ReactElement;
   /** DOM that will be rendered in the `TemplateContentPrimary` component section. */
@@ -31,28 +39,59 @@ export interface TemplateAppContainerProps
 
 /**
  * The main top-level parent component that wraps all template-related
- * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ * components.
  */
 const Template = (props: React.PropsWithChildren<TemplateProps>) => {
   const styles = useStyleConfig("Template", {});
-  return (
-    <Box __css={styles} className="nypl-ds">
-      {props.children}
-    </Box>
-  );
+  return <Box __css={styles}>{props.children}</Box>;
+};
+
+/**
+ * This optional component renders its children from edge-to-edge and should
+ * be used for alerts or notifications that are typically site-wide. This must
+ * be rendered immediately before the `TemplateHeader` component. This is meant
+ * for components that render an `aside` HTML element or HTML element with the
+ * `role="complementary"` attribute. These elements should *not* be rendered
+ * in the `header` HTML section since that's an accessibility violation.
+ */
+const TemplateAboveHeader = (props: React.PropsWithChildren<TemplateProps>) => {
+  const styles = useStyleConfig("TemplateBreakout", {});
+  return <Box __css={styles}>{props.children}</Box>;
 };
 
 /**
  * This optional component should be the first child of the `Template`
- * component. This is rendered as an HTML `<header>` element.
+ * component. This is rendered as an HTML `<header>` element. If an HTML
+ * `<header>` element is already passed in a custom component as the children,
+ * set `renderFooterElement` to `false`. Otherwise, the parent wrapper will
+ * render an HTML `<header>` element.
  */
-const TemplateHeader = (props: React.PropsWithChildren<TemplateProps>) => {
+const TemplateHeader = ({
+  children,
+  renderHeaderElement = true,
+}: React.PropsWithChildren<TemplateHeaderProps>) => {
   const styles = useStyleConfig("TemplateHeader", {});
-  return (
-    <Box as="header" __css={styles}>
-      {props.children}
-    </Box>
-  );
+  let headerElement = <Box __css={styles}>{children}</Box>;
+
+  // The user wants to render the `header` HTML element.
+  if (renderHeaderElement) {
+    // But if they passed in a component that renders an HTML `<header>`,
+    // then log a warning.
+    React.Children.map(children, (child: React.ReactElement) => {
+      if (child?.type === "header" || child?.props?.mdxType === "header") {
+        console.warn(
+          "`TemplateHeader`: An HTML `header` element was passed in. Set " +
+            "`renderHeaderElement` to `false` to avoid nested HTML `header` elements."
+        );
+      }
+    });
+    headerElement = (
+      <Box as="header" __css={styles}>
+        {children}
+      </Box>
+    );
+  }
+  return headerElement;
 };
 
 /**
@@ -194,6 +233,7 @@ const TemplateAppContainer = (
   props: React.PropsWithChildren<TemplateAppContainerProps>
 ) => {
   const {
+    aboveHeader,
     breakout,
     contentPrimary,
     contentSidebar,
@@ -202,7 +242,11 @@ const TemplateAppContainer = (
     header,
     sidebar = "none",
     renderFooterElement = true,
+    renderHeaderElement = true,
   } = props;
+  const aboveHeaderElem = aboveHeader && (
+    <TemplateAboveHeader>{aboveHeader}</TemplateAboveHeader>
+  );
   const breakoutElem = breakout && (
     <TemplateBreakout>{breakout}</TemplateBreakout>
   );
@@ -217,8 +261,9 @@ const TemplateAppContainer = (
   );
   return (
     <Template>
+      {aboveHeaderElem}
       {(header || breakoutElem) && (
-        <TemplateHeader>
+        <TemplateHeader renderHeaderElement={renderHeaderElement}>
           {header}
           {breakoutElem}
         </TemplateHeader>
@@ -246,6 +291,7 @@ const TemplateAppContainer = (
 export {
   TemplateAppContainer,
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,

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

@@ -2,8 +2,101 @@
 
 exports[`Template components Renders the UI snapshot correctly 1`] = `
 <div
-  className="nypl-ds css-0"
+  className="css-0"
 >
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Above Header
+    </div>
+  </div>
+  <header
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      NYPL Header
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-short"
+      >
+        Breadcrumbs
+      </div>
+      <div
+        className="placeholder placeholder-short"
+      >
+        Hero
+      </div>
+    </div>
+  </header>
+  <main
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Content Top
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Left Sidebar
+      </div>
+    </div>
+    <div
+      className="css-0"
+    >
+      <div
+        className="placeholder placeholder-undefined"
+      >
+        Main Content
+      </div>
+      <div
+        className="placeholder placeholder-short"
+      >
+        More Content
+      </div>
+    </div>
+  </main>
+  <footer
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Footer
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`Template components Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="placeholder placeholder-short"
+    >
+      Above Header
+    </div>
+  </div>
   <header
     className="css-0"
   >

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

package/src/components/Toggle/Toggle.tsx

@@ -77,7 +77,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
     const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", {});
-    const switchStyles = useStyleConfig("Switch");
+    const switchStyles = useStyleConfig("Switch", { size });
     ariaAttributes["aria-label"] =
       labelText && footnote ? `${labelText} - ${footnote}` : labelText;
 
@@ -92,6 +92,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
             isRequired={isRequired}
             ref={ref}
             size={size === ToggleSizes.Large ? "lg" : "sm"}
+            lineHeight="1.5"
             {...(isChecked !== undefined
               ? {
                   isChecked,

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-18x0has"
     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-18x0has"
     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-18x0has"
     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-18x0has"
     data-disabled=""
     onClick={[Function]}
   >

package/src/docs/Chakra.stories.mdx

@@ -64,7 +64,7 @@ const Application = (props) => {
   return (
     <DSProvider>
       <header>...</header>
-      <div className="my-app nypl-ds">
+      <div className="my-app">
         // ...
         {children}
       </div>

package/src/index.ts

@@ -7,9 +7,11 @@ export {
   ButtonGroup,
   Center,
   Circle,
+  Flex,
   Grid,
   GridItem,
   HStack,
+  Spacer,
   Square,
   Stack,
   VStack,
@@ -29,12 +31,15 @@ export { CardLayouts } from "./components/Card/CardTypes";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
-export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export {
+  default as DatePicker,
+  FullDateType,
+} from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
 export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
-export { FormSpacing } from "./components/Form/FormTypes";
+export { FormGaps } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
 export {
@@ -102,6 +107,7 @@ export {
 export {
   TemplateAppContainer,
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,

package/src/styles/base/_place-holder.scss

@@ -1,3 +1,5 @@
+// Only used for the `Placeholder` component, not to style
+// an `input`'s placeholder.
 .placeholder {
   --color-place-holder: var(--nypl-colors-ui-gray-dark);
 

package/src/styles.scss

@@ -13,8 +13,6 @@
 // Order important
 @import "./styles/base/_01-breakpoints";
 @import "./styles/base/_02-mixins";
-@import "./styles/base/_03-base";
-@import "./styles/base/_04-focus";
 @import "./styles/base/_place-holder";
 @import "./styles/space/_space-inline";
 @import "./styles/space/_space-inset";

package/src/theme/components/breadcrumb.ts

@@ -11,6 +11,9 @@ const blogs = {
 const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
+const education = {
+  bg: "section.education.secondary",
+};
 const locations = {
   bg: "section.locations.primary",
 };
@@ -67,7 +70,7 @@ const Breadcrumb = {
         marginInlineStart: "xxs",
       },
     },
-    "li:nth-last-child(2)": {
+    "li:nth-last-of-type(2)": {
       display: "inline-block",
       span: {
         display: { base: "none", md: "inline" },
@@ -78,6 +81,7 @@ const Breadcrumb = {
   variants: {
     blogs,
     booksAndMore,
+    education,
     locations,
     research,
     whatsOn,

package/src/theme/components/checkbox.ts

@@ -69,14 +69,10 @@ const baseStyleControl = {
 };
 
 // Style object for the Checkbox's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Checkbox's helper text
-const baseStyleHelper = {
-  ...checkboxRadioHelperStyle,
-};
+const baseStyleHelper = checkboxRadioHelperStyle;
 
 const baseStyle = {
   icon: baseStyleIcon,
@@ -94,7 +90,7 @@ const sizes = {
       borderRadius: "sm",
     },
     // Controls the font-size of the label only.
-    label: { fontSize: "text.default" },
+    label: { fontSize: "label.default" },
   },
 };
 

package/src/theme/components/customTable.ts

@@ -3,6 +3,15 @@ const baseStyle = ({
   showRowDividers,
   useRowHeaders,
 }) => ({
+  // Headers `th` can be rendered as the first cell in every row through the
+  // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
+  // with a custom color, the row header `th` in the `tbody` should always
+  // have text color black.
+  tbody: {
+    th: {
+      color: "var(--nypl-colors-ui-black)",
+    },
+  },
   th: {
     border: showRowDividers ? undefined : "none",
     borderBottom: showRowDividers ? undefined : "0px",
@@ -35,11 +44,15 @@ const baseStyle = ({
   },
   caption: {
     captionSide: "top",
-    textAlign: "left",
-    fontSize: "heading.secondary",
     color: "ui.black",
-    textTransform: "capitalize",
+    fontSize: "heading.secondary",
     fontWeight: "heading.secondary",
+    marginBottom: "s",
+    marginLeft: "0",
+    marginRight: "0",
+    marginTop: "0",
+    padding: "0",
+    textAlign: "left",
   },
 });
 

package/src/theme/components/fieldset.ts

@@ -6,6 +6,8 @@ const Fieldset = {
   baseStyle: ({ isLegendHidden }) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
     return {
+      border: 0,
+      padding: 0,
       legend: {
         ...labelLegendText,
         ...screenreaderStyles,

package/src/theme/components/global.ts

@@ -4,26 +4,23 @@ export { wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 
 // Used in `Select` and `TextInput`.
-const activeFocus = {
-  border: "1px solid",
-  borderColor: "ui.focus",
+const activeFocus = (darkMode = false) => ({
+  outline: "2px solid",
+  outlineOffset: "2px",
+  outlineColor: darkMode ? "ui.white" : "ui.focus",
   zIndex: "9999",
-  outline: "1px solid",
-  outlineColor: "ui.focus",
-};
+});
 // Used in `Select` and `TextInput`.
 const helperTextMargin = {
-  marginTop: "xs",
+  marginTop: "xxs",
   marginBottom: "0",
 };
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
-  fontSize: "text.default",
   fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
-  verticalAlign: "middle",
   _disabled: {
     color: "ui.gray.dark",
     opacity: 1,
@@ -47,6 +44,14 @@ const checkboxRadioHelperStyle = {
     fontStyle: "italic",
   },
 };
+const checkboxRadioGroupStyles = {
+  helper: {
+    marginTop: "s",
+  },
+  stack: {
+    width: "fit-content",
+  },
+};
 // Used in `Label` and `Fieldset`.
 const labelLegendText = {
   alignItems: "baseline",
@@ -62,13 +67,10 @@ const labelLegendText = {
     fontWeight: "helper.default",
   },
 };
-const checkboxRadioGroupStyles = {
-  helper: {
-    marginTop: "s",
-  },
-  stack: {
-    width: "fit-content",
-  },
+// Used for p, ul, and ol
+const textMargin = {
+  margin: "0",
+  marginBottom: "s",
 };
 
 export {
@@ -79,4 +81,5 @@ export {
   checkboxRadioLabelStyles,
   helperTextMargin,
   labelLegendText,
+  textMargin,
 };