@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/theme/components/image.ts

@@ -0,0 +1,116 @@
+const imageWrap = {
+  position: "relative",
+  width: "100%",
+  height: "auto",
+  overflow: "hidden",
+};
+const sideMarginsAuto = {
+  marginLeft: "auto",
+  marginRight: "auto",
+};
+const imageSizes = {
+  default: {
+    maxWidth: "100%",
+  },
+  small: {
+    ...sideMarginsAuto,
+    maxWidth: "165px",
+  },
+  medium: {
+    ...sideMarginsAuto,
+    maxWidth: "225px",
+  },
+  large: {
+    ...sideMarginsAuto,
+    maxWidth: "360px",
+  },
+};
+const imageRatios = {
+  fourByThree: {
+    ...imageWrap,
+    paddingBottom: "75%",
+  },
+  oneByTwo: {
+    ...imageWrap,
+    paddingBottom: "200%",
+  },
+  original: {
+    ...imageWrap,
+  },
+  sixteenByNine: {
+    ...imageWrap,
+    paddingBottom: "56.25%",
+  },
+  square: {
+    ...imageWrap,
+    paddingBottom: "100%",
+  },
+  threeByFour: {
+    ...imageWrap,
+    paddingBottom: "133.33%",
+  },
+  threeByTwo: {
+    ...imageWrap,
+    paddingBottom: "66.66%",
+  },
+  twoByOne: {
+    ...imageWrap,
+    paddingBottom: "50%",
+  },
+};
+const CustomImage = {
+  parts: ["captionWrappers"],
+  variants: {
+    circle: {
+      img: {
+        borderRadius: "50%",
+      },
+    },
+  },
+  baseStyle: ({ size = "default" }) => ({
+    figure: {
+      margin: "auto",
+      ...imageSizes[size],
+      img: {
+        marginBottom: "xxs",
+      },
+    },
+    figcaption: {
+      fontStyle: "italic",
+    },
+    img: {
+      display: "block",
+      boxSizing: "border-box",
+      objectFit: "cover",
+      position: "relative",
+      width: "100%",
+      ...imageSizes[size],
+    },
+    captionWrappers: {
+      marginBottom: "xxs",
+      fontSize: "-1",
+    },
+  }),
+};
+const CustomImageWrapper = {
+  parts: ["crop"],
+  baseStyle: ({ ratio = "original", size = "default" }) => ({
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "100%",
+    ...imageSizes[size],
+    crop: {
+      ...imageRatios[ratio],
+    },
+    img: {
+      height: "100%",
+      left: "0",
+      maxWidth: "100%",
+      position: "absolute",
+      top: "0",
+      width: "100%",
+    },
+  }),
+};
+
+export { CustomImage, CustomImageWrapper };

package/src/theme/components/label.ts

@@ -1,16 +1,9 @@
+import { labelLegendText } from "./global";
+
 const Label = {
   parts: ["helper"],
   baseStyle: {
-    marginBottom: "xs",
-    alignItems: "baseline",
-    display: "flex",
-    fontWeight: "500",
-    justifyContent: "space-between",
-    fontSize: "14px",
-    helper: {
-      fontWeight: "300",
-      fontSize: "-1",
-    },
+    ...labelLegendText,
   },
 };
 

package/src/theme/components/link.ts

@@ -1,5 +1,9 @@
 const variants = {
   link: {},
+  disabled: {
+    color: "ui.gray.dark",
+    pointerEvents: "none",
+  },
   moreLink: {
     alignItems: "center",
     display: "inline-flex",
@@ -15,7 +19,7 @@ const variants = {
   },
   button: {
     width: "100px",
-    borderRadius: "2px",
+    borderRadius: "sm",
     lineHeight: "1.5",
     display: "flex",
     cursor: "pointer",

package/src/theme/components/list.ts

@@ -0,0 +1,73 @@
+const List = {
+  baseStyle: ({ inline, noStyling }) => ({
+    // Browser automatically applies margin, so by default we unset it.
+    margin: noStyling ? "0" : "unset",
+    listStyle: noStyling ? "none" : null,
+    marginInlineStart: "unset",
+    paddingLeft: noStyling ? "0" : "l",
+    padding: noStyling ? "0" : null,
+    display: inline ? "flex" : null,
+    li: {
+      marginRight: inline ? "xs" : null,
+      listStyleType: inline ? "none" : null,
+      _notFirst: {
+        marginTop: "xxs",
+      },
+    },
+  }),
+  variants: {
+    ul: ({ noStyling }) => ({
+      listStyle: "none",
+      li: {
+        _before: {
+          color: "ui.gray.medium",
+          // \2022 is the CSS Code/unicode for a bullet.
+          content: noStyling ? "unset" : `"\\2022"`,
+          // Needed to add space between the bullet and the text.
+          display: "inline-block",
+          fontWeight: "bold",
+          fontSize: "2",
+          lineHeight: "0.9",
+          marginLeft: "-1rem",
+          width: "1rem",
+        },
+      },
+    }),
+    dl: {
+      borderBottom: "1px solid",
+      borderColor: "ui.gray.light-cool",
+      paddingLeft: "0",
+      h2: {
+        borderTop: "3px solid",
+        borderColor: "section.research.primary",
+        margin: "0",
+        padding: "var(--nypl-space-xs) 0 0",
+      },
+      dl: {
+        display: "grid",
+        gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
+        gridTemplateRows: "1fr",
+        margin: "var(--nypl-space-xs) 0 0",
+      },
+      dt: {
+        borderTop: "1px solid",
+        borderColor: "ui.gray.light-cool",
+        fontSize: "0",
+        fontWeight: "bold",
+        paddingBottom: { base: "0", md: "s" },
+        paddingTop: "s",
+        paddingRight: { md: "m" },
+      },
+      dd: {
+        fontSize: "0",
+        margin: "0",
+        paddingBottom: "s",
+        borderTop: { base: "none", md: "1px solid" },
+        borderColor: { md: "ui.gray.light-cool" },
+        paddingTop: { md: "s" },
+      },
+    },
+  },
+};
+
+export default List;

package/src/theme/components/notification.ts

@@ -0,0 +1,93 @@
+import { NotificationTypes } from "../../components/Notification/NotificationTypes";
+
+const Notification = {
+  parts: ["container", "dismissibleButton", "icon"],
+  baseStyle: ({ centered, noMargin, notificationType }) => {
+    let bg = "ui.status.primary";
+    if (notificationType === NotificationTypes.Announcement) {
+      bg = "ui.gray.light-cool";
+    } else if (notificationType === NotificationTypes.Warning) {
+      bg = "ui.gray.xx-light-cool";
+    }
+    return {
+      bg,
+      display: "flex",
+      fontSize: "-1",
+      padding: "var(--nypl-space-s) var(--nypl-space-l)",
+      position: "relative",
+      textAlign: centered ? "center" : null,
+      borderRadius: noMargin ? "0" : "4px",
+      margin: noMargin ? "0" : "s",
+      container: {
+        margin: "auto",
+        width: "100%",
+        maxWidth: "var(--nypl-breakpoint-large)",
+      },
+      dismissibleButton: {
+        border: "none",
+        alignItems: "center",
+        bgColor: "inherit",
+        color: "ui.black",
+        display: "flex",
+        height: "32px",
+        width: "32px",
+        minWidth: "0",
+        position: "absolute",
+        right: "0",
+        top: "0",
+        _hover: {
+          bg: "inherit",
+        },
+      },
+      icon: {
+        flexShrink: "0",
+        marginRight: "s",
+      },
+    };
+  },
+};
+
+const NotificationContent = {
+  parts: ["content"],
+  baseStyle: ({ alignText, notificationType }) => ({
+    display: "flex",
+    justifyContent: "center",
+    content: {
+      width: "100%",
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
+      color:
+        notificationType === NotificationTypes.Warning
+          ? "brand.primary"
+          : "currentColor",
+    },
+  }),
+};
+
+const NotificationHeading = {
+  parts: ["heading"],
+  baseStyle: ({ centered, notificationType }) => {
+    let color = "ui.black";
+    if (notificationType === NotificationTypes.Announcement) {
+      color = "section.research.secondary";
+    } else if (notificationType === NotificationTypes.Warning) {
+      color = "brand.primary";
+    }
+    return {
+      display: "flex",
+      marginBottom: "xxs",
+      justifyContent: centered ? "center" : null,
+      heading: {
+        marginBottom: "0",
+        color,
+      },
+    };
+  },
+};
+
+export default {
+  Notification,
+  NotificationContent,
+  NotificationHeading,
+};

package/src/theme/components/pagination.ts

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

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

@@ -10,7 +10,7 @@ const baseStyleControl = {
   transitionProperty: "box-shadow",
   transitionDuration: "normal",
   border: "2px solid",
-  borderRadius: "50%",
+  borderRadius: "round",
   borderColor: "ui.black",
   color: "ui.white",
   outline: "none",
@@ -44,7 +44,7 @@ const baseStyleControl = {
       display: "block",
       w: "3",
       h: "3",
-      borderRadius: "100%",
+      borderRadius: "round",
       bg: "ui.focus",
     },
   },

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/select.ts

@@ -1,7 +1,7 @@
 import { activeFocus, helperTextMargin } from "./global";
 
 const select = {
-  borderRadius: "2px",
+  borderRadius: "sm",
   borderColor: "ui.gray.medium",
   paddingTop: "xs",
   paddingRight: "xl",
@@ -37,8 +37,11 @@ const Select = {
     searchbar: {
       select: {
         flex: "1 1 20%",
-        borderRight: "none",
-        borderRightRadius: "0",
+        borderRightColor: { md: "transparent" },
+        borderRightRadius: { md: "none" },
+        _hover: {
+          borderRightColor: { md: "transparent" },
+        },
       },
     },
   },

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

@@ -1,7 +1,6 @@
 const StatusBadge = {
   baseStyle: {
-    // Temporary until NYPL-theme radius values are configured.
-    borderRadius: "4px",
+    borderRadius: "base",
     color: "ui.black",
     display: "block",
     fontSize: "-1",