@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/StatusBadge/StatusBadge.stories.mdx

@@ -0,0 +1,91 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { VStack } from "@chakra-ui/react";
+
+import StatusBadge from "./StatusBadge";
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
+import getCSSVariable from "../../helpers/getCSSVariable";
+import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+
+<Meta
+  title={getCategory("StatusBadge")}
+  component={StatusBadge}
+  decorators={[withDesign]}
+  parameters={{
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
+    },
+    jest: ["StatusBadge.test.tsx"],
+  }}
+  argTypes={{
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+    level: {
+      control: {
+        type: "select",
+      },
+      options: Object.values(StatusBadgeTypes).map((value) => value),
+    },
+  }}
+/>
+
+# StatusBadge
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.18.7`   |
+| Latest            | `0.25.1`   |
+
+<Description of={StatusBadge} />
+
+<Canvas withToolbar>
+  <Story
+    name="Basic with props"
+    args={{ level: StatusBadgeTypes.Low, text: "Registration Required" }}
+  >
+    {(args) => <StatusBadge {...args}>{args.text}</StatusBadge>}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic with props" />
+
+## Patterns
+
+### Higher Barrier
+
+Used in instances where the associated message is the highest barrier. Use
+`"high"` and `"medium"` for these levels.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge level={StatusBadgeTypes.High}>
+        On-Site Access Only
+      </StatusBadge>
+      <StatusBadge level={StatusBadgeTypes.Medium}>Cancelled</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>
+
+### Lower Barrier
+
+Used in instances where the associated message is the lower barrier. Use
+`"low"` for this level which is the default.
+
+<Canvas>
+  <DSProvider>
+    <VStack spacing="s" align="stretch">
+      <StatusBadge>Library Card Required</StatusBadge>
+      <StatusBadge>Registration Required</StatusBadge>
+    </VStack>
+  </DSProvider>
+</Canvas>

package/src/components/StatusBadge/StatusBadge.test.tsx

@@ -1,25 +1,53 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import StatusBadge from "./StatusBadge";
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
 
 describe("StatusBadge Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <StatusBadge level={"low"}>Registration Required</StatusBadge>
+      <StatusBadge>Registration Required</StatusBadge>
     );
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
-describe("StatusBadge Test", () => {
-  it("Shows status badge", () => {
-    render(<StatusBadge level={"low"}>Registration Required</StatusBadge>);
+describe("StatusBadge", () => {
+  it("renders a status badge and text", () => {
+    render(<StatusBadge>Registration Required</StatusBadge>);
     expect(screen.getByText("Registration Required")).toBeInTheDocument();
   });
-  it("Can pass status badge content as child", () => {
-    render(<StatusBadge level={"medium"}>Cancelled</StatusBadge>);
-    expect(screen.getByText("Cancelled")).toBeInTheDocument();
+
+  it("throws a warning when no children are passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<StatusBadge></StatusBadge>);
+    expect(warn).toHaveBeenCalledWith("Status Badge has no children.");
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const low = renderer
+      .create(<StatusBadge id="low">Registration Required</StatusBadge>)
+      .toJSON();
+    const medium = renderer
+      .create(
+        <StatusBadge id="medium" level={StatusBadgeTypes.Medium}>
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+    const high = renderer
+      .create(
+        <StatusBadge id="high" level={StatusBadgeTypes.High}>
+          Registration Required
+        </StatusBadge>
+      )
+      .toJSON();
+
+    expect(low).toMatchSnapshot();
+    expect(medium).toMatchSnapshot();
+    expect(high).toMatchSnapshot();
   });
 });

package/src/components/StatusBadge/StatusBadge.tsx

@@ -1,37 +1,36 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useStyleConfig } from "@chakra-ui/react";
+
+import { StatusBadgeTypes } from "./StatusBadgeTypes";
+import generateUUID from "../../helpers/generateUUID";
 
 export interface StatusBadgeProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** ClassName that appears in addition to "status-badge" */
+  /** Additional class for the component */
   className?: string;
-  /** Level of badge **/
-  level?: "low" | "medium" | "high";
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Level of the status badge through StatusBadgeTypes. */
+  level?: StatusBadgeTypes;
 }
 
-export default function StatusBadge(
-  props: React.PropsWithChildren<StatusBadgeProps>
-) {
-  const { blockName, className, level } = props;
-
-  const baseClass = "status-badge";
-
-  let statusBadgeModifiers = ["low"];
+function StatusBadge(props: React.PropsWithChildren<StatusBadgeProps>) {
+  const {
+    children,
+    className,
+    id = generateUUID(),
+    level = StatusBadgeTypes.Low,
+  } = props;
+  const styles = useStyleConfig("StatusBadge", { variant: level });
 
-  if (!props.children) {
-    console.warn("Status Badge has no children");
-  }
-
-  if (level) {
-    statusBadgeModifiers = [level];
+  if (!children) {
+    console.warn("Status Badge has no children.");
   }
 
   return (
-    <div
-      className={bem(baseClass, statusBadgeModifiers, blockName, [className])}
-    >
-      {props.children}
-    </div>
+    <Box id={id} className={className} __css={styles}>
+      {children}
+    </Box>
   );
 }
+
+export default StatusBadge;

package/src/components/StatusBadge/StatusBadgeTypes.tsx

@@ -0,0 +1,5 @@
+export enum StatusBadgeTypes {
+  Low = "low",
+  Medium = "medium",
+  High = "high",
+}

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusBadge renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+  id="low"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+  id="medium"
+>
+  Registration Required
+</div>
+`;
+
+exports[`StatusBadge renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+  id="high"
+>
+  Registration Required
+</div>
+`;

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -4,7 +4,7 @@ import SearchBar from "../SearchBar/SearchBar";
 import Input from "../Input/Input";
 import { InputTypes } from "../Input/InputTypes";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconNames, IconSizes, IconAlign } from "../Icons/IconTypes";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
@@ -132,9 +132,9 @@ won't hurt.
         />
         <Button buttonType={ButtonTypes.Primary} id="button-ex1" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
           Search
         </Button>
@@ -170,9 +170,9 @@ block to see its code implementation.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             يبحث
           </Button>
@@ -209,9 +209,9 @@ block to see its code implementation.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             يبحث
           </Button>
@@ -237,14 +237,14 @@ help reduce any visual mistakes.
 
 <Canvas>
   <DSProvider>
-    <div style={{ display: "flex", "flex-direction": "column" }}>
+    <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ width: "300px" }}>
         A regular button:
         <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">
           <Icon
-            name={IconNames.search}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            name={IconNames.Search}
+            size={IconSizes.Small}
+            align={IconAlign.Left}
           />
           Search
         </Button>
@@ -258,9 +258,9 @@ help reduce any visual mistakes.
             type="submit"
           >
             <Icon
-              name={IconNames.search}
-              decorative={true}
-              modifiers={["small", "icon-left"]}
+              name={IconNames.Search}
+              size={IconSizes.Small}
+              align={IconAlign.Left}
             />
             Search
           </Button>

package/src/components/StyleGuide/Breakpoints.stories.mdx

@@ -18,24 +18,48 @@ import { getCategory } from "../../utils/componentCategories";
 
 # Breakpoints
 
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [CSS Variables](#css-variables)             |
+| 3. [Figma Reference](#figma-reference)         |
+
+## General Information
+
 The DS adheres to four global breakpoints for responsive layouts and typography.
 
-- Desktop: 1280px
-- Tablet Landscape: 960px
-- Tablet Portrait: 600px
 - Mobile: 320px
+- Tablet Portrait: 600px
+- Tablet Landscape: 960px
+- Desktop: 1280px
 
-### CSS Variables
+## CSS Variables
 
 The following CSS variables are available through the DS.
 
+```scss
+--nypl-breakpoint-small: 320px;
+--nypl-breakpoint-medium: 600px;
+--nypl-breakpoint-large: 960px;
+--nypl-breakpoint-xl: 1280px;
 ```
---breakpoint-xl: 1280px;
---breakpoint-large: 960px;
---breakpoint-medium: 600px;
---breakpoint-small: 320px;
+
+## SCSS Variables
+
+If you are using SCSS and imported the NYPL Design System `/dist/resources.scss`
+file, then you can use the following SCSS variables in your media queries or
+SCSS `breakpoint` function (if used).
+
+```scss
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
+$nypl-max-width: $nypl-breakpoint-xl;
 ```
 
-### Design System Figma Reference
+## Figma Reference
+
+For additional spacing information, please refer to the Figma Main file.
 
-https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17983%3A60146
+- https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17983%3A60146

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -6,18 +6,19 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { ButtonGroup } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import Button, { ButtonGroup } from "../Button/Button";
+import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
-  IconColors,
+  IconAlign,
   IconNames,
   IconRotationTypes,
   IconSizes,
 } from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta
@@ -26,15 +27,26 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
     },
   }}
 />
 
 # Buttons
 
-Use the NYPL Design System [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic) component to render form buttons.
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [Guidelines](#guidelines)                   |
+| 3. [Button Groups](#button-groups)             |
+| 4. [Button Types](#button-types)               |
+| 5. [Patterns](#patterns)                       |
+| 6. [Figma Reference](#figma-reference)         |
+
+## General Information
+
+Use the NYPL Design System [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
+component to render form buttons.
 
 ```jsx
 import { Button, ButtonTypes } from "@nypl/design-system-react-components";
@@ -42,86 +54,53 @@ import { Button, ButtonTypes } from "@nypl/design-system-react-components";
 <Button buttonType={ButtonTypes.Primary}>Button Text</Button>;
 ```
 
-## Style Guide Topics
-
-For information about using the `Button` component, please see below.
-
-- [General Guidelines](#general-guidelines)
-- [Spacing](#spacing)
-- [Button Types](#button-types)
-- [Patterns](#patterns)
-- [Figma Reference](#figma-reference)
-
-## General Guidelines
+## Guidelines
 
 - Button text is optional.
 - Button text should be title case.
 - Button icon is optional.
 - Buttons may have an icon on either the left or the right.
-- Buttons by default are blue. However, Donation buttons are red.
-- Buttons used for Back to Top actions have a Secondary button style with an arrow icon pointing up.
-- When buttons are used in a set (where the user can move forward or backward), the `Primary` button is on the right and the `Secondary` button on the left (i.e. cancel = secondary, submit = primary).
+- Buttons by default are blue. However, Donation callout buttons are red.
+- Buttons used for Back to Top actions have a Secondary button style with an
+  arrow icon pointing up.
+- When buttons are used in a group, they should be wrapped in a `ButtonGroup`.
+- When buttons are used in a group where the user can move forward or backward,
+  the `Primary` button is on the right and the `Secondary` button on the left
+  (i.e. cancel = secondary, submit = primary).
+
+## Button Groups
 
-## Spacing
+When `Button` components are displayed in a group, use the `ButtonGroup`
+component to handle the spacing and layout. The `ButtonGroup` component will use
+`--nypl-space-xs` (0.5rem) for spacing in horizontal group layouts.
 
-Buttons should use `--space-xs` (0.5rem) for spacing in situations where multiple buttons are aligned in horizontal or vertical layouts. Buttons should use `--space-l` (2rem) for all other spacing situations.
+Standalone `Button` components and the `ButtonGroup` component should use
+`--nypl-space-l` (2rem) for spacing between all other UI elements. This spacing
+can be achieved by using the `Form` component to wrap the `Button`s.
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button
-        buttonType={ButtonTypes.Primary}
-        attributes={{
-          style: {
-            marginRight: getCSSVariable("--space-xs"),
-          },
-        }}
-      >
-        Button Text
-      </Button>
-      <Button
-        buttonType={ButtonTypes.Primary}
-        attributes={{
-          style: {
-            marginRight: getCSSVariable("--space-xs"),
-          },
-        }}
-      >
-        <Icon decorative modifiers={["small", "icon-left"]} name="search" />
-        Button Text
-      </Button>
-      <Button
-        buttonType={ButtonTypes.Primary}
-        attributes={{
-          style: {
-            marginRight: getCSSVariable("--space-xs"),
-          },
-        }}
-      >
+      <Button buttonType={ButtonTypes.Primary}>Button Text</Button>
+      <Button buttonType={ButtonTypes.Primary}>
         <Icon
-          name={IconNames.close}
-          decorative={true}
-          size={IconSizes.medium}
+          name={IconNames.Search}
+          size={IconSizes.Small}
+          align={IconAlign.Left}
         />
-      </Button>
-      <Button
-        buttonType={ButtonTypes.Primary}
-        attributes={{
-          style: {
-            backgroundColor: getCSSVariable("--section-books-and-more-primary"),
-            marginRight: getCSSVariable("--space-xs"),
-          },
-        }}
-      >
         Button Text
       </Button>
+      <Button buttonType={ButtonTypes.Primary}>
+        <Icon name={IconNames.Close} size={IconSizes.Medium} />
+      </Button>
+      <Button buttonType={ButtonTypes.Callout}>Donate</Button>
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
+          iconRotation={IconRotationTypes.Rotate180}
         />
       </Button>
     </ButtonGroup>
@@ -130,15 +109,20 @@ Buttons should use `--space-xs` (0.5rem) for spacing in situations where multipl
 
 ## Button Types
 
-The `buttonType` prop should be used to render various forms of the button component.
+The `buttonType` prop should be used to render various forms of the button
+component. Note that the `SearchBar` type is only used internally in the
+`SearchBar` component.
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
       <Button buttonType={ButtonTypes.Primary}>Primary Button</Button>
       <Button buttonType={ButtonTypes.Secondary}>Secondary Button</Button>
+      <Button buttonType={ButtonTypes.Callout}>Callout Button</Button>
       <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
       <Button buttonType={ButtonTypes.Link}>Link Button</Button>
+      <Button buttonType={ButtonTypes.SearchBar}>SearchBar Button</Button>
+      <Button buttonType={ButtonTypes.NoBrand}>NoBrand Button</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
@@ -154,6 +138,11 @@ The `buttonType` prop should be used to render various forms of the button compo
 - often paired with a Primary button
 - Visual Treatment: rectangular, outlined
 
+### ButtonTypes.Callout
+
+- used for call to actions such as donation buttons
+- Visual Treatment: rectangular, NYPL red background
+
 ### ButtonTypes.Pill
 
 - used for equally weighted actions
@@ -165,31 +154,58 @@ The `buttonType` prop should be used to render various forms of the button compo
 - used for equally weighted actions
 - Visual Treatment: text link with underline
 
+### ButtonTypes.SearchBar
+
+- used internally in the `SearchBar` component for visual flow when it is next
+  to the `TextInput` component
+- Visual Treatment: rectangular, filled, no border radius on the left side
+
+### ButtonTypes.NoBrand
+
+- used in cases where there is no brand color
+- Visual Treatment: rectangular, filled with a black background
+
 ## Patterns
 
-Buttons are blue by default but should be red when it is intended as a call out.
-The "Back to Top" button must be of `ButtonTypes` `Secondary` and must include an up arrow icon.
+- Buttons are blue by default.
+- Buttons that are intended as a call out (i.e. Donation buttons) should be set
+  as `ButtonTypes.Callout`.
+- The "Back to Top" button must be set as `ButtonTypes.Secondary` and must
+  include an up arrow icon.
+- Previous and Next buttons should be set as `ButtonTypes.Secondary` and be
+  wrapped in a `ButtonGroup`.
+- Only use the `ButtonTypes.NoBrand` style where there is no brand color. _This
+  should be rarely used._
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button
-        buttonType={ButtonTypes.Primary}
-        attributes={{
-          style: {
-            backgroundColor: getCSSVariable("--section-books-and-more-primary"),
-          },
-        }}
-      >
-        Donate to this library
-      </Button>
+      <Button buttonType={ButtonTypes.Callout}>Donate to this library</Button>
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          align={IconAlign.Right}
+        />
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
+        Previous
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Next
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
         />
       </Button>
     </ButtonGroup>
@@ -200,4 +216,4 @@ The "Back to Top" button must be of `ButtonTypes` `Secondary` and must include a
 
 For more styling information, please refer to the Figma Main file.
 
-https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298
+- https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298