@nypl/design-system-react-components 0.25.2 → 0.25.6

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",

package/src/theme/components/list.ts

@@ -1,12 +1,15 @@
 const List = {
-  baseStyle: ({ noStyling }) => ({
+  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",
       },
@@ -38,13 +41,13 @@ const List = {
         borderTop: "3px solid",
         borderColor: "section.research.primary",
         margin: "0",
-        padding: "var(--space-xs) 0 0",
+        padding: "var(--nypl-space-xs) 0 0",
       },
       dl: {
         display: "grid",
         gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
         gridTemplateRows: "1fr",
-        margin: "var(--space-xs) 0 0",
+        margin: "var(--nypl-space-xs) 0 0",
       },
       dt: {
         borderTop: "1px solid",

package/src/theme/components/notification.ts

@@ -1,7 +1,7 @@
 import { NotificationTypes } from "../../components/Notification/NotificationTypes";
 
 const Notification = {
-  parts: ["container", "dismissibleButton", "dismissibleIcon", "icon"],
+  parts: ["container", "dismissibleButton", "icon"],
   baseStyle: ({ centered, noMargin, notificationType }) => {
     let bg = "ui.status.primary";
     if (notificationType === NotificationTypes.Announcement) {
@@ -13,7 +13,7 @@ const Notification = {
       bg,
       display: "flex",
       fontSize: "-1",
-      padding: "var(--space) var(--space-l)",
+      padding: "var(--nypl-space-s) var(--nypl-space-l)",
       position: "relative",
       textAlign: centered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
@@ -21,28 +21,24 @@ const Notification = {
       container: {
         margin: "auto",
         width: "100%",
-        maxWidth: "var(--breakpoint-large)",
+        maxWidth: "var(--nypl-breakpoint-large)",
       },
       dismissibleButton: {
+        border: "none",
         alignItems: "center",
         bgColor: "inherit",
         color: "ui.black",
         display: "flex",
-        height: { base: "var(--space-l)", lg: "var(--space-m)" },
-        width: { base: "var(--space-l)", lg: "var(--space-m)" },
-        padding: "0",
+        height: "32px",
+        width: "32px",
+        minWidth: "0",
         position: "absolute",
-        right: "xs",
-        top: "xs",
+        right: "0",
+        top: "0",
         _hover: {
           bg: "inherit",
         },
       },
-      dismissibleIcon: {
-        height: "var(--space-m)",
-        marginRight: "0",
-        width: "var(--space-m)",
-      },
       icon: {
         flexShrink: "0",
         marginRight: "s",
@@ -58,7 +54,9 @@ const NotificationContent = {
     justifyContent: "center",
     content: {
       width: "100%",
-      paddingLeft: alignText ? "calc(var(--space-m) + var(--space-s))" : null,
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
       color:
         notificationType === NotificationTypes.Warning
           ? "brand.primary"

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/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

@@ -37,8 +37,11 @@ const Select = {
     searchbar: {
       select: {
         flex: "1 1 20%",
-        borderRight: "none",
-        borderRightRadius: "none",
+        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/textInput.ts

@@ -52,6 +52,8 @@ const TextInput = {
       flex: "1 1 80%",
       input: {
         borderRadius: "none",
+        borderTopLeftRadius: { base: "sm", md: "none" },
+        borderTopRightRadius: { base: "sm", md: "none" },
       },
     },
   },

package/src/theme/foundations/breakpoints.ts

@@ -1,16 +1,16 @@
 import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

package/src/theme/foundations/global.ts

@@ -7,12 +7,14 @@
 const global = {
   // styles for the `body` element
   body: {
+    boxSizing: "border-box",
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
-    fontSize: 0,
+    fontSize: "0",
     fontWeight: "300",
     lineHeight: "1.5",
+    overflowX: "hidden",
   },
   // styles for the `a` element
   a: {
@@ -21,6 +23,9 @@ const global = {
   svg: {
     display: "inline",
   },
+  p: {
+    margin: "0 0 var(--nypl-space-s",
+  },
 };
 
 export default global;

package/src/theme/index.ts

@@ -11,11 +11,14 @@ import typography from "./foundations/typography";
 import Accordion from "./components/accordion";
 import Breadcrumb from "./components/breadcrumb";
 import Button from "./components/button";
+import Card from "./components/card";
 import Checkbox from "./components/checkbox";
 import ComponentWrapper from "./components/componentWrapper";
-import CustomCheckboxGroup from "./components/customCheckboxGroup";
-import CustomRadioGroup from "./components/customRadioGroup";
+import CheckboxGroup from "./components/checkboxGroup";
+import { CustomImage, CustomImageWrapper } from "./components/image";
 import CustomSelect from "./components/select";
+import DatePicker from "./components/datePicker";
+import Fieldset from "./components/fieldset";
 import Heading from "./components/heading";
 import HelperErrorText from "./components/helperErrorText";
 import Hero from "./components/hero";
@@ -25,8 +28,13 @@ import Label from "./components/label";
 import Link from "./components/link";
 import List from "./components/list";
 import NotificationStyles from "./components/notification";
+import Pagination from "./components/pagination";
+import ProgressIndicator from "./components/progressIndicator";
 import Radio from "./components/radio";
+import RadioGroup from "./components/radioGroup";
 import SearchBar from "./components/searchBar";
+import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import CustomSlider from "./components/slider";
 import StatusBadge from "./components/statusBadge";
 import Tabs from "./components/tabs";
 import TemplateStyles from "./components/template";
@@ -68,11 +76,15 @@ const theme = extendTheme({
     Accordion,
     Breadcrumb,
     Button,
+    ...Card,
     Checkbox,
+    CheckboxGroup,
     ComponentWrapper,
-    CustomCheckboxGroup,
-    CustomRadioGroup,
+    CustomImage,
+    CustomImageWrapper,
     CustomSelect,
+    DatePicker,
+    Fieldset,
     Heading,
     HelperErrorText,
     Hero,
@@ -82,8 +94,14 @@ const theme = extendTheme({
     Link,
     List,
     ...NotificationStyles,
+    Pagination,
+    ProgressIndicator,
     Radio,
+    RadioGroup,
     SearchBar,
+    Skeleton,
+    SkeletonLoader,
+    CustomSlider,
     StatusBadge,
     Tabs,
     ...TemplateStyles,