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

package/src/theme/components/progressIndicator.ts

@@ -0,0 +1,62 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicatorTypes";
+
+const ProgressIndicator = {
+  parts: [
+    "circular",
+    "circularLabel",
+    "linear",
+    "linearContainer",
+    "linearPercentage",
+  ],
+  baseStyle: ({ darkMode, size }) => {
+    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 === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          width: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          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 === ProgressIndicatorSizes.Small ? "4px" : "8px",
+        },
+      },
+      linearContainer: {
+        display: "flex",
+        alignItems: "center",
+      },
+      linearPercentage: {
+        padding: "0 var(--nypl-space-xs)",
+        flex: 1,
+      },
+    };
+  },
+};
+
+export default ProgressIndicator;

package/src/theme/components/radio.ts

@@ -1,10 +1,16 @@
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperStyle,
+} 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: "50%",
+  borderRadius: "round",
   borderColor: "ui.black",
   color: "ui.white",
   outline: "none",
@@ -23,11 +29,11 @@ const baseStyleControl = {
     },
     _invalid: {
       _hover: {
-        borderColor: "ui.error",
+        borderColor: "ui.error.primary",
       },
       _before: {
-        borderColor: "ui.error",
-        bg: "ui.error",
+        borderColor: "ui.error.primary",
+        bg: "ui.error.primary",
       },
     },
     _hover: {
@@ -36,9 +42,9 @@ const baseStyleControl = {
     _before: {
       content: `""`,
       display: "block",
-      w: 3,
-      h: 3,
-      borderRadius: "100%",
+      w: "3",
+      h: "3",
+      borderRadius: "round",
       bg: "ui.focus",
     },
   },
@@ -51,7 +57,7 @@ const baseStyleControl = {
     borderColor: "ui.focus",
   },
   _invalid: {
-    borderColor: "ui.error",
+    borderColor: "ui.error.primary",
   },
   // TODO:
   // _indeterminate: {
@@ -62,21 +68,12 @@ const baseStyleControl = {
 
 // Style object for the Radio's label
 const baseStyleLabel = {
-  userSelect: "none",
-  fontSize: 0,
-  fontWeight: "light",
-  marginBottom: 0,
-  marginLeft: 2,
-  verticalAlign: "middle",
+  ...checkboxRadioLabelStyles,
+};
 
-  _disabled: {
-    color: "ui.gray.dark",
-    opacity: 1,
-    fontStyle: "italic",
-  },
-  _invalid: {
-    color: "ui.error",
-  },
+// Style object for the Radio's helper text
+const baseStyleHelper = {
+  ...checkboxRadioHelperStyle,
 };
 
 const baseStyle = {
@@ -84,28 +81,20 @@ const baseStyle = {
   control: baseStyleControl,
   label: baseStyleLabel,
   // Custom element in the DS Radio component.
-  helper: {
-    marginTop: 2, // var(--space-xs)
-    marginBottom: 0,
-    marginLeft: "30px", // calc(22px + var(--space-xs))
-    _disabled: {
-      fontStyle: "italic",
-    },
-  },
+  helper: baseStyleHelper,
 };
 
 // Sticking to "md" for the default size.
 const sizes = {
   md: {
     control: {
-      // Custom values not in the spacing theme.
-      h: "1.375rem",
-      w: "1.375rem",
+      ...checkboxRadioControlSize,
     },
   },
 };
 
 const Radio = {
+  parts: ["control", "label", "helper"],
   baseStyle,
   sizes,
   // Default values

package/src/theme/components/radioGroup.ts

@@ -0,0 +1,8 @@
+import { checkboxRadioGroupStyles } from "./global";
+
+const RadioGroup = {
+  parts: ["helper", "stack"],
+  baseStyle: checkboxRadioGroupStyles,
+};
+
+export default RadioGroup;

package/src/theme/components/searchBar.ts

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

package/src/theme/components/select.ts

@@ -0,0 +1,53 @@
+import { activeFocus, helperTextMargin } from "./global";
+
+const select = {
+  borderRadius: "sm",
+  borderColor: "ui.gray.medium",
+  paddingTop: "xs",
+  paddingRight: "xl",
+  paddingBottom: "xs",
+  paddingLeft: "s",
+  _hover: {
+    borderColor: "ui.gray.medium",
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _disabled: {
+    color: "ui.gray.xdark",
+    bg: "ui.gray.xx-light-cool",
+    opacity: "1",
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const Select = {
+  parts: ["select", "helper"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: {
+      ...helperTextMargin,
+    },
+    select,
+  },
+  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,107 @@
+import { keyframes } from "@chakra-ui/system";
+
+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: ({ border, imageAspectRatio }) => {
+    const borderStyles = border ? { ...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 }) => ({
+      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-warm",
+    animation: `${fade()} 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite`,
+  },
+};
+
+export { Skeleton, SkeletonLoader };

package/src/theme/components/slider.ts

@@ -0,0 +1,79 @@
+// Margins around the static display values.
+const staticValues = {
+  marginTop: "xs",
+  marginBottom: "xs",
+  marginRight: "s",
+  marginLeft: "s",
+};
+const CustomSlider = {
+  parts: [
+    "container",
+    "helper",
+    "leftValue",
+    "rightValue",
+    "textInput",
+    "filledTrack",
+    "track",
+    "thumb",
+  ],
+  baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }) => {
+    let baseColor = "ui.link.primary";
+    if (isInvalid) {
+      baseColor = "ui.error.primary";
+    } else if (isDisabled) {
+      baseColor = "ui.gray.light-cool";
+    }
+
+    return {
+      container: {
+        display: "flex",
+        alignItems: "center",
+      },
+      helper: {
+        marginTop: "xs",
+      },
+      leftValue: {
+        ...staticValues,
+        // If the text input boxes are shown, then there already is a
+        // margin, so we can set this static value to "0". But for the
+        // single Slider, we *do* need the margin set.
+        marginLeft: showBoxes && isRangeSlider ? "0" : "s",
+      },
+      rightValue: {
+        ...staticValues,
+        // 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",
+      },
+      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",
+      },
+      // 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.gray.light-cool",
+        },
+      },
+      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)",
+        },
+      },
+    };
+  },
+};
+
+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",
+    fontStyle: "italic",
+    py: "xxs",
+    px: "xs",
+    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;

package/src/theme/components/tabs.ts

@@ -1,76 +1,109 @@
+const tablist = {
+  borderColor: "ui.black",
+};
+const tab = {
+  color: "black !important",
+  paddingInlineStart: "s",
+  paddingLeft: "s",
+  background: "transparent",
+  border: "0",
+  borderBottom: "1px solid",
+  borderColor: "red",
+  height: { base: "44px" },
+  marginRight: {
+    base: "0",
+    md: "1px",
+  },
+  paddingRight: {
+    base: "s",
+    md: "l",
+    lg: "xl",
+  },
+  whiteSpace: "nowrap",
+  _hover: {
+    bg: "ui.gray.x-light-warm",
+    borderTopRadius: "sm",
+    borderBottom: "1px solid",
+    borderBottomColor: "ui.black",
+  },
+  _selected: {
+    fontWeight: "bold",
+    bg: "ui.gray.light-warm",
+    border: "0",
+    borderTopRadius: "sm",
+    borderBottom: "3px solid",
+    borderBottomColor: "ui.black",
+    paddingBottom: "5px",
+  },
+  _focus: {
+    boxShadow: "0",
+  },
+};
+// Only display the previous/next arrow buttons on mobile.
+const buttonArrows = {
+  border: "0",
+  borderRadius: "0",
+  display: {
+    // After 38em/600px, don't display the arrow button anymore.
+    md: "none",
+  },
+  height: "44px",
+  width: "44px !important",
+  top: "8px",
+  marginLeft: "4px",
+  marginRight: "4px",
+  // Code from https://codesandbox.io/s/fxjeo for the mobile carousel
+  pos: "absolute",
+  transition: "0.6s ease",
+  zIndex: "9999",
+};
+const tablistWrapper = {
+  display: "flex",
+  alignItems: "center",
+  borderBottom: {
+    base: "0",
+    md: "1px solid black",
+  },
+  height: { base: "58px", md: "auto" },
+  margin: "0",
+  overflowX: { base: "auto", md: "visible" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: { base: "4px", md: "0" },
+  paddingTop: { base: "4px", md: "0" },
+  position: "relative",
+};
+const tabpanels = {
+  paddingTop: "2px",
+};
+
+const carouselParent = {
+  position: { base: "absolute", md: "relative" },
+  left: { base: "50px", md: "auto" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: "0",
+  paddingTop: { base: "4px", md: "0" },
+  right: { base: "52px", md: "auto" },
+  top: { base: "4px", md: "0" },
+  overflowX: { base: "hidden", md: "visible" },
+};
+
 const CustomTabs = {
+  // tablist, tab, and tabpanels are existing keys which are extended but
+  // buttonArrows, tablistWrapper, and carouselParent are custom elements
+  // in the `Tabs` component.
+  parts: ["buttonArrows", "tablistWrapper", "carouselParent"],
   baseStyle: {
-    tablist: {
-      // no custom styles
-    },
-    tab: {
-      color: "black !important",
-      paddingInlineStart: 4,
-      paddingLeft: 4,
-      background: "transparent",
-      border: "0",
-      borderBottom: "1px solid",
-      borderColor: "red",
-      marginRight: {
-        base: "0",
-        md: "1px",
-      },
-      paddingRight: {
-        base: 4,
-        md: 8,
-        lg: 12,
-      },
-      whiteSpace: "nowrap",
-      _hover: {
-        bg: "ui.gray.warm-xlight",
-        borderTopRadius: 2,
-        borderBottom: "1px solid",
-        borderBottomColor: "ui.black",
-      },
-      _selected: {
-        fontWeight: "bold",
-        bg: "ui.gray.warm-light",
-        border: "0",
-        borderTopRadius: 2,
-        borderBottom: "3px solid",
-        borderBottomColor: "ui.black",
-        paddingBottom: "5px",
-      },
-      _focus: {
-        boxShadow: 0,
-      },
-    },
+    tablist,
+    tab,
     // Only display the previous/next arrow buttons on mobile.
-    buttonArrows: {
-      border: "0",
-      display: {
-        base: "none", // "inline-block" - hiding until the full "arrow" functionality is built out
-        // After 38em/600px, don't display the arrow button anymore.
-        md: "none",
-      },
-      height: "44px",
-      width: "44px !important",
-    },
-    // Just to better align the mobile arrow buttons with the tablist.
-    tablistWrapper: {
-      display: "flex",
-      alignItems: "center",
-      borderBottom: {
-        base: "0",
-        md: "1px solid black",
-      },
-      margin: {
-        base: "-4px",
-        md: "0",
-      },
-      overflowX: { base: "auto", md: "visible" },
-      paddingBottom: { base: "5px", md: "0" },
-      paddingLeft: { base: "4px", md: "0" },
-      paddingRight: { base: "4px", md: "0" },
-      paddingTop: { base: "4px", md: "0" },
-    },
+    buttonArrows,
+    // To better align the mobile arrow buttons with the tablist.
+    tablistWrapper,
+    tabpanels,
+    carouselParent,
   },
-  defaultProps: {},
 };
 
 export default CustomTabs;