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

package/src/theme/components/notification.ts

@@ -0,0 +1,132 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+
+interface NotificationBaseStyle {
+  dismissible: boolean;
+  isCentered: boolean;
+  noMargin: boolean;
+  notificationType: NotificationTypes;
+}
+interface NotificationContentBaseStyle {
+  alignText: boolean;
+  icon: boolean;
+  notificationType: NotificationTypes;
+}
+interface NotificationHeadingBaseStyle {
+  icon: boolean;
+  isCentered: boolean;
+  notificationType: NotificationTypes;
+}
+
+const Notification = {
+  parts: ["container", "dismissibleButton", "icon"],
+  baseStyle: ({
+    dismissible,
+    isCentered,
+    noMargin,
+    notificationType,
+  }: NotificationBaseStyle) => {
+    let bg = "ui.status.primary";
+    if (notificationType === "announcement" || notificationType === "warning") {
+      bg = "ui.gray.x-light-cool";
+    }
+    return {
+      bg,
+      display: "flex",
+      fontSize: "text.caption", // slightly smaller than the default size
+      position: "relative",
+      textAlign: isCentered ? "center" : null,
+      borderRadius: noMargin ? "0" : "4px",
+      margin: noMargin ? "0" : "s",
+      container: {
+        margin: "auto",
+        maxWidth: "var(--nypl-breakpoint-xl)",
+        padding: "inset.default",
+        paddingRight: dismissible ? "l" : null,
+        paddingLeft: isCentered && dismissible ? "l" : null,
+        width: "100%",
+      },
+      dismissibleButton: {
+        border: "none",
+        bgColor: "inherit",
+        alignItems: "center",
+        color: "ui.black",
+        display: "flex",
+        height: "32px",
+        width: "32px",
+        minWidth: "0",
+        position: "absolute",
+        right: "0",
+        top: "0",
+        svg: {
+          marginTop: "0",
+        },
+        _hover: {
+          bg: "inherit",
+        },
+      },
+      icon: {
+        flexShrink: "0",
+        marginRight: "s",
+      },
+    };
+  },
+};
+
+const NotificationContent = {
+  parts: ["content"],
+  baseStyle: ({
+    alignText,
+    icon,
+    notificationType,
+  }: NotificationContentBaseStyle) => ({
+    display: "flex",
+    justifyContent: "center",
+    content: {
+      color: notificationType === "warning" ? "brand.primary" : "currentColor",
+      marginTop: icon ? "xxxs" : "0",
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
+      width: "100%",
+      // Links should always be black and underlined.
+      a: {
+        color: "ui.black",
+        _hover: {
+          color: "ui.black",
+        },
+      },
+    },
+  }),
+};
+
+const NotificationHeading = {
+  parts: ["heading"],
+  baseStyle: ({
+    icon,
+    isCentered,
+    notificationType,
+  }: NotificationHeadingBaseStyle) => {
+    let color = "ui.black";
+    if (notificationType === "announcement") {
+      color = "section.research.secondary";
+    } else if (notificationType === "warning") {
+      color = "brand.primary";
+    }
+    return {
+      display: "flex",
+      marginBottom: "xxs",
+      justifyContent: isCentered ? "center" : null,
+      heading: {
+        marginBottom: "0",
+        marginTop: icon ? "xxxs" : "0",
+        color,
+      },
+    };
+  },
+};
+
+export default {
+  Notification,
+  NotificationContent,
+  NotificationHeading,
+};

package/src/theme/components/pagination.ts

@@ -0,0 +1,17 @@
+const Pagination = {
+  parts: ["link"],
+  baseStyle: {
+    alignItems: "stretch",
+    display: "flex",
+    width: "100%",
+    link: {
+      lineHeight: "1.15",
+      textDecoration: "none",
+    },
+    ul: {
+      marginBottom: "0",
+    },
+  },
+};
+
+export default Pagination;

package/src/theme/components/progressIndicator.ts

@@ -0,0 +1,67 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+
+interface ProgressIndicatorBaseStyle {
+  darkMode: boolean;
+  size: ProgressIndicatorSizes;
+}
+
+const ProgressIndicator = {
+  parts: [
+    "circular",
+    "circularLabel",
+    "linear",
+    "linearContainer",
+    "linearPercentage",
+  ],
+  baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
+    return {
+      color: darkMode ? "ui.white" : "ui.black",
+      circular: {
+        // Note: we have to target the SVG HTMl elements in order
+        // to override the default styles.
+        svg: {
+          height: size === "default" ? "48px" : "24px",
+          width: size === "default" ? "48px" : "24px",
+          display: "block",
+          circle: {
+            _first: {
+              stroke: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
+            },
+            _last: {
+              stroke: darkMode ? "ui.white" : "ui.link.primary",
+            },
+          },
+        },
+      },
+      circularContainer: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        width: "fit-content",
+      },
+      linear: {
+        // Hard to target this specific element without using
+        // "Progress" as the key name in index.ts
+        "> div": {
+          bg: darkMode ? "ui.white" : "ui.link.primary",
+        },
+        flex: 25,
+        bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
+        height: {
+          base: "4px",
+          md: size === "default" ? "8px" : "4px",
+        },
+      },
+      linearContainer: {
+        display: "flex",
+        alignItems: "center",
+      },
+      linearPercentage: {
+        padding: "0 var(--nypl-space-xs)",
+        flex: 1,
+      },
+    };
+  },
+};
+
+export default ProgressIndicator;

package/src/theme/components/radio.ts

@@ -0,0 +1,103 @@
+import {
+  activeFocus,
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperErrorTextStyle,
+} from "./global";
+
+// Style object for the Radio's "control" or visual icon.
+const baseStyleControl = {
+  verticalAlign: "middle",
+  transitionProperty: "box-shadow",
+  transitionDuration: "normal",
+  border: "2px solid",
+  borderRadius: "round",
+  borderColor: "ui.black",
+  color: "ui.white",
+  outline: "none",
+  _checked: {
+    bg: "ui.white",
+    borderColor: "ui.focus",
+    color: "ui.white",
+    _disabled: {
+      borderColor: "ui.disabled.primary",
+      bg: "ui.white",
+      _before: {
+        bg: "ui.disabled.primary",
+      },
+    },
+    _invalid: {
+      _hover: {
+        borderColor: "ui.error.primary",
+      },
+      _before: {
+        borderColor: "ui.error.primary",
+        bg: "ui.error.primary",
+      },
+    },
+    _hover: {
+      bg: "ui.white",
+    },
+    _before: {
+      content: `""`,
+      display: "block",
+      w: "3",
+      h: "3",
+      borderRadius: "round",
+      bg: "ui.focus",
+    },
+  },
+  _disabled: {
+    borderColor: "ui.disabled.primary",
+    bg: "ui.white",
+  },
+  _focus: {
+    ...activeFocus(),
+    boxShadow: "outline",
+    borderColor: "ui.focus",
+  },
+  _invalid: {
+    borderColor: "ui.error.primary",
+  },
+  // TODO:
+  // _indeterminate: {
+  //   borderColor: "ui.gray.medium",
+  //   bg: "ui.white",
+  // },
+};
+
+// Style object for the Radio's label
+const baseStyleLabel = checkboxRadioLabelStyles;
+
+// Style object for the Radio's helper text
+const baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
+
+const baseStyle = {
+  // Chakra-inserted elements in the Chakra Radio component
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  // Custom element in the DS Radio component.
+  helperErrorText: baseStyleHelperErrorText,
+};
+
+// Sticking to "md" for the default size.
+const sizes = {
+  md: {
+    control: {
+      ...checkboxRadioControlSize,
+    },
+    label: { fontSize: "label.default" },
+  },
+};
+
+const Radio = {
+  parts: ["control", "helperErrorText", "label"],
+  baseStyle,
+  sizes,
+  // Default values
+  defaultProps: {
+    size: "md",
+  },
+};
+
+export default Radio;

package/src/theme/components/radioGroup.ts

@@ -0,0 +1,10 @@
+import { checkboxRadioGroupStyles } from "./global";
+
+const RadioGroup = {
+  parts: ["helperErrorText", "stack"],
+  baseStyle: ({ isFullWidth = false }) => ({
+    ...checkboxRadioGroupStyles(isFullWidth),
+  }),
+};
+
+export default RadioGroup;

package/src/theme/components/searchBar.ts

@@ -0,0 +1,19 @@
+const SearchBar = {
+  parts: ["select"],
+  baseStyle: {
+    display: "flex",
+    marginBottom: {
+      base: "xs",
+      md: "auto",
+    },
+    flexFlow: {
+      base: "column nowrap",
+      md: "row nowrap",
+    },
+    select: {
+      marginBottom: "0",
+    },
+  },
+};
+
+export default SearchBar;

package/src/theme/components/select.ts

@@ -0,0 +1,72 @@
+import {
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+} from "./global";
+
+interface SelectBaseStyle {
+  labelPosition: string;
+}
+
+const select = {
+  backgroundColor: "ui.white",
+  borderRadius: "sm",
+  borderColor: "ui.gray.medium",
+  fontSize: "text.caption",
+  paddingTop: "inset.narrow",
+  paddingRight: "inset.extrawide",
+  paddingBottom: "inset.narrow",
+  paddingLeft: "inset.default",
+  _hover: {
+    borderColor: "ui.gray.dark",
+  },
+  _active: selectTextInputFocusStyles,
+  _disabled: {
+    ...selectTextInputDisabledStyles,
+  },
+  _focus: selectTextInputFocusStyles,
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const Select = {
+  parts: ["helperText", "inline", "select"],
+  baseStyle: ({ labelPosition }: SelectBaseStyle) => {
+    return {
+      // The backgroundColor set to "ui.white" hides the arrow SVG icon when
+      // the component is focused. The background is added for dark mode and
+      // so we need to add specific selector.
+      ".chakra-select__icon-wrapper": {
+        zIndex: "9999",
+      },
+      inline: {
+        display: { md: "flex" },
+        gap: { md: "var(--nypl-space-xs)" },
+        alignItems: { md: "flex-end" },
+      },
+      select: {
+        ...select,
+        flex: labelPosition === "inline" ? { md: "1" } : null,
+      },
+    };
+  },
+  variants: {
+    searchbar: {
+      select: {
+        flex: "1 1 20%",
+        borderRightColor: { md: "transparent" },
+        borderRightRadius: { md: "none" },
+        _hover: {
+          borderRightColor: { md: "transparent" },
+        },
+      },
+    },
+  },
+  defaultProps: {
+    size: "md",
+  },
+};
+
+export default Select;

package/src/theme/components/skeletonLoader.ts

@@ -0,0 +1,113 @@
+import { keyframes } from "@chakra-ui/system";
+
+interface SkeletonLoaderBaseStyle {
+  imageAspectRatio: keyof typeof imagePaddingBottomStyles;
+  isBordered: boolean;
+  showImage?: boolean;
+}
+
+const element = {
+  borderRadius: "2px",
+  boxSizing: "border-box",
+  marginBottom: "xs",
+};
+const borderRules = {
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  padding: "s",
+};
+const imagePaddingBottomStyles = {
+  landscape: "50%",
+  portrait: "133%",
+  square: "100%",
+};
+const imageRowHeightStyles = {
+  landscape: "110px",
+  portrait: "294px",
+  square: "220px",
+};
+// NYPL's skeleton loader component.
+const SkeletonLoader = {
+  parts: ["section", "image", "container", "heading", "content", "button"],
+  baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
+    const borderStyles = isBordered ? { ...borderRules } : {};
+
+    return {
+      margin: "auto",
+      width: "100%",
+      ...borderStyles,
+      section: {
+        marginBottom: "s",
+        _last: {
+          marginBottom: "0",
+        },
+      },
+      image: {
+        ...element,
+        boxSizing: "border-box",
+        flexShrink: "0",
+        height: "0",
+        overflow: "hidden",
+        paddingBottom: imagePaddingBottomStyles[imageAspectRatio],
+        position: "relative",
+        width: "100%",
+      },
+      container: {
+        marginTop: "s",
+        width: "100%",
+      },
+      heading: {
+        ...element,
+        height: "32px",
+      },
+      content: {
+        ...element,
+        height: "20px",
+      },
+      button: {
+        height: "32px",
+        margin: "auto",
+        maxWidth: "160px",
+        width: "100%",
+      },
+    };
+  },
+  variants: {
+    row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => ({
+      alignItems: "flex-start",
+      display: { md: "flex" },
+      image: {
+        overflow: { md: "visible" },
+        paddingBottom: { md: "0" },
+        position: { md: "relative" },
+        width: { md: "220px" },
+        height: { md: imageRowHeightStyles[imageAspectRatio] },
+      },
+      container: {
+        marginLeft: showImage ? { md: "m" } : null,
+        marginTop: { md: "0" },
+      },
+      button: {
+        margin: { md: "0" },
+      },
+    }),
+  },
+};
+
+// Fade animation
+const fade = () =>
+  keyframes({
+    from: { opacity: 0.9 },
+    "50%": { opacity: 0.7 },
+    to: { opacity: 0.9 },
+  });
+// Overriding Chakra's Skeleton animation.
+const Skeleton = {
+  baseStyle: {
+    borderRadius: "2px",
+    background: "ui.gray.light-cool",
+    animation: `${fade()} 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite`,
+  },
+};
+
+export { Skeleton, SkeletonLoader };

package/src/theme/components/skipNavigation.ts

@@ -0,0 +1,29 @@
+const SkipNavigation = {
+  baseStyle: {
+    ul: {
+      margin: "0",
+    },
+    // Don't display links by default...
+    a: {
+      backgroundColor: "ui.white",
+      height: "1px",
+      left: "-10000px",
+      overflow: "hidden",
+      position: "absolute",
+      top: "auto",
+      width: "1px",
+      // Only display when the user focuses on the links.
+      _focus: {
+        border: "1px solid var(—nypl-colors-ui-gray-dark)",
+        height: "auto",
+        left: "2rem",
+        padding:
+          "var(--nypl-space-inset-extranarrow) var(--nypl-space-inset-narrow)",
+        top: "3rem",
+        width: "auto",
+      },
+    },
+  },
+};
+
+export default SkipNavigation;

package/src/theme/components/slider.ts

@@ -0,0 +1,95 @@
+interface CustomSliderBaseStyle {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  showBoxes: boolean;
+  showValues: boolean;
+}
+
+// Margins around the static display values.
+const staticValues = {
+  marginTop: "xs",
+  marginBottom: "xs",
+  marginRight: "s",
+  marginLeft: "0",
+};
+const CustomSlider = {
+  parts: [
+    "container",
+    "leftValue",
+    "rightValue",
+    "textInput",
+    "sliderContainer",
+    "filledTrack",
+    "track",
+    "thumb",
+  ],
+  baseStyle: ({
+    isDisabled,
+    isInvalid,
+    showBoxes,
+    showValues,
+  }: CustomSliderBaseStyle) => {
+    let baseColor = "ui.link.primary";
+    if (isInvalid) {
+      baseColor = "ui.error.primary";
+    } else if (isDisabled) {
+      baseColor = "ui.disabled.primary";
+    }
+
+    return {
+      container: {
+        display: "flex",
+        alignItems: "center",
+      },
+      leftValue: { ...staticValues, color: isDisabled ? "ui.gray.dark" : null },
+      rightValue: {
+        ...staticValues,
+        marginLeft: "s",
+        // If the text input boxes are shown, then there already is
+        // a margin, so we can set this static value to "0".
+        marginRight: showBoxes ? "0" : "s",
+        color: isDisabled ? "ui.gray.dark" : null,
+      },
+      textInput: {
+        // Allows for three or more digits present in the
+        // min or max value text input.
+        minWidth: "65px",
+        color: isInvalid ? "ui.error.primary" : "ui.black",
+      },
+      // This is added to the container so that the slider thumbs don't
+      // overflow past the container when the value boxes or min/max values
+      // are not shown.
+      sliderContainer: {
+        marginLeft: !showValues ? "xs" : null,
+        marginRight: !showBoxes && !showValues ? "xs" : null,
+      },
+      // Filled track doesn't have a _disabled or _invalid state...
+      // so we manually do it through the props.
+      filledTrack: {
+        bgColor: baseColor,
+      },
+      track: {
+        bgColor: "ui.gray.light-cool",
+        _disabled: {
+          bgColor: "ui.disabled.primary",
+        },
+      },
+      thumb: {
+        border: "1px solid",
+        // Thumb doesn't have an _invalid state...
+        // so we manually do it through the props.
+        borderColor: baseColor,
+        boxShadow: "none",
+        _active: {
+          transform: "translateY(-50%) scale(1.0)",
+        },
+        _disabled: {
+          bgColor: "ui.disabled.secondary",
+          borderColor: "ui.disabled.primary",
+        },
+      },
+    };
+  },
+};
+
+export default CustomSlider;

package/src/theme/components/statusBadge.ts

@@ -0,0 +1,26 @@
+const StatusBadge = {
+  baseStyle: {
+    borderRadius: "base",
+    color: "ui.black",
+    display: "block",
+    fontSize: "-1", // slightly smaller than the default size
+    fontStyle: "italic",
+    py: "inset.extranarrow",
+    px: "inset.narrow",
+    textAlign: "center",
+    width: "fit-content",
+  },
+  variants: {
+    low: {
+      bg: "ui.gray.light-cool",
+    },
+    medium: {
+      bg: "ui.status.primary",
+    },
+    high: {
+      bg: "ui.status.secondary",
+    },
+  },
+};
+
+export default StatusBadge;