@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -0,0 +1,132 @@
+import {
+  Box,
+  chakra,
+  CircularProgress as ChakraCircularProgress,
+  CircularProgressLabel as ChakraCircularProgressLabel,
+  Progress as ChakraProgress,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import React from "react";
+
+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;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id: string;
+  /** Whether the `ProgressIndicator` should be linear or circular. */
+  indicatorType?: ProgressIndicatorTypes;
+  /** Whether the progress animation should display because the `value` prop is
+   * not known. When this is set to `true`, the `value` prop will be ignored. */
+  isIndeterminate?: boolean;
+  /** The text to display in an HTML `label` element. */
+  labelText: string;
+  /** Visually show or hide the label text. When set to `false`, then the label
+   * text will be added to the parent component as its `aria-label` attribute. */
+  showLabel?: boolean;
+  /** The size of the linear or circular progress. */
+  size?: ProgressIndicatorSizes;
+  /** A number between 0 to 100 that defines the progress' value. */
+  value?: number;
+}
+
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+export const ProgressIndicator = chakra((props: ProgressIndicatorProps) => {
+  const {
+    darkMode = false,
+    id,
+    indicatorType = "linear",
+    isIndeterminate = false,
+    labelText,
+    showLabel = true,
+    size = "default",
+    value = 0,
+    ...rest
+  } = props;
+  const styles = useMultiStyleConfig("ProgressIndicator", {
+    darkMode,
+    size,
+  });
+  let finalValue = value;
+  if (!id) {
+    console.warn(
+      "NYPL Reservoir Progress Indicator: This component's required `id` prop was not passed."
+    );
+  }
+  if (finalValue < 0 || finalValue > 100) {
+    console.warn(
+      "NYPL Reservoir ProgressIndicator: An invalid value was passed for the" +
+        " `value` prop, so 0 will be used. A valid value should be a number" +
+        " between 0 and 100."
+    );
+    finalValue = 0;
+  }
+  const progressProps = {
+    id,
+    // If the label is visually shown, associate it with the progress indicator.
+    // Otherwise, the `aria-label` will be added.
+    "aria-label": showLabel ? undefined : labelText,
+    "aria-labelledby": showLabel ? `${id}-label` : undefined,
+    // If `isIndeterminate` is true, then it overrides the `value` prop.
+    isIndeterminate: isIndeterminate || undefined,
+    value: isIndeterminate ? undefined : finalValue,
+  };
+  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 === "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 === "small") {
+        progressProps["aria-label"] = labelText;
+      }
+      return (
+        <Box __css={styles.circularContainer}>
+          <ChakraCircularProgress {...progressProps} sx={styles.circular}>
+            {showLabel && !isIndeterminate && size !== "small" && (
+              <ChakraCircularProgressLabel>
+                {finalValue}%
+              </ChakraCircularProgressLabel>
+            )}
+          </ChakraCircularProgress>
+          {showLabel && size !== "small" && (
+            <Label id={`${id}-label`} htmlFor={id}>
+              {labelText}
+            </Label>
+          )}
+        </Box>
+      );
+    }
+    // The Linear progress indicator is the default.
+    return (
+      <>
+        {showLabel && (
+          <Label id={`${id}-label`} htmlFor={id}>
+            {labelText}
+          </Label>
+        )}
+        <Box __css={styles.linearContainer}>
+          <ChakraProgress {...progressProps} sx={styles.linear} />
+          {showLabel && !isIndeterminate && (
+            <Box __css={styles.linearPercentage}>{finalValue}%</Box>
+          )}
+        </Box>
+      </>
+    );
+  };
+
+  return (
+    <Box __css={styles} {...rest}>
+      {progressComponent(indicatorType)}
+    </Box>
+  );
+});
+
+export default ProgressIndicator;

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

@@ -0,0 +1,434 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="linearBasic"
+    id="linearBasic-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearBasic"
+    >
+      <div
+        aria-labelledby="linearBasic-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-labelledby="circularBasic-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularBasic"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-1xdhyk6"
+      htmlFor="circularBasic"
+      id="circularBasic-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearNoLabel"
+    >
+      <div
+        aria-label="Linear"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-label="Circular"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularNoLabel"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="linearIndeterminate"
+    id="linearIndeterminate-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearIndeterminate"
+    >
+      <div
+        aria-labelledby="linearIndeterminate-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        className="css-1demtxk"
+        data-indeterminate=""
+        role="progressbar"
+        style={
+          Object {
+            "width": "0%",
+          }
+        }
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-labelledby="circularIndeterminate-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      className="chakra-progress css-120wkjd"
+      data-indeterminate=""
+      id="circularIndeterminate"
+      role="progressbar"
+    >
+      <svg
+        className="css-jf70f3"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-tueqm1"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+      </svg>
+    </div>
+    <label
+      className="css-1xdhyk6"
+      htmlFor="circularIndeterminate"
+      id="circularIndeterminate-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="linearDarkMode"
+    id="linearDarkMode-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="linearDarkMode"
+    >
+      <div
+        aria-labelledby="linearDarkMode-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 8`] = `
+<div
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      aria-labelledby="circularDarkMode-label"
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={50}
+      className="chakra-progress css-120wkjd"
+      id="circularDarkMode"
+      role="progressbar"
+    >
+      <svg
+        className="css-kn46u7"
+        viewBox="0 0 100 100"
+      >
+        <circle
+          className="chakra-progress__track css-1bhxzgy"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeWidth="10px"
+        />
+        <circle
+          className="chakra-progress__indicator css-5hfhx0"
+          cx={50}
+          cy={50}
+          r={42}
+          strokeDasharray="132 132"
+          strokeDashoffset={66}
+          strokeWidth="10px"
+        />
+      </svg>
+      <div
+        className="css-f1j64i"
+      >
+        50
+        %
+      </div>
+    </div>
+    <label
+      className="css-1xdhyk6"
+      htmlFor="circularDarkMode"
+      id="circularDarkMode-label"
+    >
+      Circular
+    </label>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-10g9ftz"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="chakra"
+    id="chakra-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="chakra"
+    >
+      <div
+        aria-labelledby="chakra-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressIndicator Renders the UI snapshot correctly 10`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="props"
+    id="props-label"
+  >
+    Linear
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-kdwx3d"
+      id="props"
+    >
+      <div
+        aria-labelledby="props-label"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="css-1jy0d03"
+        role="progressbar"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      50
+      %
+    </div>
+  </div>
+</div>
+`;