@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,132 +0,0 @@
-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

@@ -1,434 +0,0 @@
-// 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>
-`;