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

package/src/theme/components/card.ts

@@ -0,0 +1,174 @@
+const imageSizes = {
+  small: { flex: { md: "0 0 165px" } },
+  medium: { flex: { md: "0 0 225px" } },
+  large: { flex: { md: "0 0 360px" } },
+};
+// This is complicated and can be refactored later...
+const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
+  let bodyPadding = null;
+  if (border) {
+    bodyPadding = "s";
+    if (hasImage) {
+      bodyPadding = "0 var(--nypl-space-s) var(--nypl-space-s)";
+    }
+  }
+  if (isRow && border) {
+    bodyPadding = "var(--nypl-space-s)";
+  }
+  if (isRow && border && hasImage) {
+    bodyPadding = {
+      base: "0 var(--nypl-space-s) var(--nypl-space-s)",
+      md: "var(--nypl-space-s) var(--nypl-space-s) var(--nypl-space-s) 0",
+    };
+    if (imageAtEnd) {
+      bodyPadding = {
+        base: "var(--nypl-space-s) var(--nypl-space-s) 0",
+        md: "var(--nypl-space-s) 0 var(--nypl-space-s) var(--nypl-space-s)",
+      };
+    }
+  }
+  return bodyPadding;
+};
+const Card = {
+  parts: ["body", "heading"],
+  baseStyle: (props) => {
+    const { border, center, hasImage, imageAtEnd, layout } = props;
+    const isRow = layout === "row";
+    const layoutStyles = isRow
+      ? {
+          display: "flex",
+          flexFlow: {
+            base: "column nowrap",
+            md: "row",
+          },
+          maxWidth: "100%",
+          textAlign: "left",
+          alignItems: center ? "center" : null,
+        }
+      : {};
+    const baseBorderStyles = border
+      ? {
+          border: "1px solid",
+          borderColor: "ui.gray.medium",
+        }
+      : {};
+    const bodyPadding = getBodyPaddingStyles({
+      border,
+      hasImage,
+      imageAtEnd,
+      isRow,
+    });
+    let bodyMargin = null;
+    if (center) {
+      bodyMargin = "auto";
+      if (isRow) {
+        bodyMargin = "0";
+      }
+    }
+    return {
+      alignItems: "flex-start",
+      display: "flex",
+      flexFlow: "column wrap",
+      textAlign: center ? "center" : null,
+      heading: {
+        marginBottom: "xs",
+      },
+      body: {
+        display: { md: "block" },
+        flexFlow: { md: "row nowrap" },
+        margin: bodyMargin,
+        padding: bodyPadding,
+      },
+      ...baseBorderStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+const CardActions = {
+  baseStyle: (props) => {
+    const { bottomBorder, center, layout, topBorder } = props;
+    let justifyContent = null;
+    if (center) {
+      justifyContent = "center";
+    } else if (layout === "row") {
+      justifyContent = "left";
+    }
+    const topBorderStyles = topBorder
+      ? {
+          borderTop: "1px solid",
+          paddingTop: "xs",
+        }
+      : {};
+    const bottomBorderStyles = bottomBorder
+      ? {
+          borderBottom: "1px solid",
+          paddingBottom: "xs",
+        }
+      : {};
+    return {
+      marginBottom: "xs",
+      columnGap: "var(--nypl-space-xs)",
+      display: "flex",
+      _last: {
+        marginBottom: "0",
+      },
+      ...topBorderStyles,
+      ...bottomBorderStyles,
+      justifyContent,
+      borderColor: "ui.gray.medium",
+    };
+  },
+};
+
+const CardContent = {
+  baseStyle: {
+    marginBottom: "xs",
+    _last: {
+      marginBottom: "0",
+    },
+  },
+};
+
+const CardImage = {
+  baseStyle: ({ center, imageSize, imageAtEnd, layout }) => {
+    // These sizes are only for the "row" layout.
+    const size = imageSizes[imageSize] || {};
+    const layoutStyles =
+      layout === "row"
+        ? {
+            display: "flex",
+            flexFlow: {
+              base: "column nowrap",
+              md: "row",
+            },
+            flex: { md: "0 0 225px" },
+            maxWidth: { base: "100%", md: "50%" },
+            textAlign: "left",
+            alignItems: center ? "center" : null,
+            margin: {
+              base: imageAtEnd ? "var(--nypl-space-m) 0 0" : null,
+              md: imageAtEnd
+                ? "0 0 0 var(--nypl-space-m)"
+                : "0 var(--nypl-space-m) 0 0",
+            },
+            ...size,
+          }
+        : {
+            marginBottom: "xs",
+          };
+    const imageAtEndStyles = imageAtEnd
+      ? {
+          marginBottom: "0",
+          marginTop: "s",
+          order: "2",
+        }
+      : {};
+    return {
+      ...imageAtEndStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+export default { Card, CardActions, CardContent, CardImage };

package/src/theme/components/checkbox.ts

@@ -1,5 +1,11 @@
 // @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts
-// For avail theme override options.
+// for available theme override options.
+
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperStyle,
+} from "./global";
 
 // Style object for the Checkbox's visual icon.
 const baseStyleIcon = {
@@ -33,11 +39,16 @@ const baseStyleControl = {
       borderColor: "ui.gray.medium",
       color: "ui.gray.medium",
     },
+
+    _indeterminate: {
+      color: "ui.focus",
+      borderColor: "ui.focus",
+    },
   },
 
   _indeterminate: {
-    bg: "ui.white",
-    borderColor: "ui.gray.medium",
+    color: "ui.focus",
+    borderColor: "ui.focus",
   },
 
   _disabled: {
@@ -52,40 +63,19 @@ const baseStyleControl = {
   },
 
   _invalid: {
-    borderColor: "ui.error",
-    color: "ui.error",
+    borderColor: "ui.error.primary",
+    color: "ui.error.primary",
   },
 };
 
 // Style object for the Checkbox's label
 const baseStyleLabel = {
-  userSelect: "none",
-  fontSize: 0,
-  fontWeight: "light",
-  marginBottom: 0,
-  marginLeft: 2,
-  verticalAlign: "middle",
-
-  _disabled: {
-    color: "ui.gray.dark",
-    opacity: 1,
-    fontStyle: "italic",
-  },
-
-  _invalid: {
-    color: "ui.error",
-  },
+  ...checkboxRadioLabelStyles,
 };
 
 // Style object for the Checkbox's helper text
 const baseStyleHelper = {
-  marginTop: 2, // var(--space-xs)
-  marginBottom: 0,
-  marginLeft: "30px", // calc(22px + var(--space-xs))
-
-  _disabled: {
-    fontStyle: "italic",
-  },
+  ...checkboxRadioHelperStyle,
 };
 
 const baseStyle = {
@@ -99,7 +89,10 @@ const baseStyle = {
 const sizes = {
   lg: {
     // Controls the width/height of the checkbox itself.
-    control: { w: "1.375rem", h: "1.375rem", borderRadius: "3px" },
+    control: {
+      ...checkboxRadioControlSize,
+      borderRadius: "sm",
+    },
     // Controls the font-size of the label only.
     label: { fontSize: "md" },
   },

package/src/theme/components/checkboxGroup.ts

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

package/src/theme/components/componentWrapper.ts

@@ -0,0 +1,10 @@
+const ComponentWrapper = {
+  baseStyle: ({ hasChildren }) => ({
+    helperText: {
+      marginBottom: "0",
+      marginTop: hasChildren ? "xs" : "0",
+    },
+  }),
+};
+
+export default ComponentWrapper;

package/src/theme/components/datePicker.ts

@@ -0,0 +1,17 @@
+/**
+ * Note: these styles are only used when the
+ * DatePicker is in "date range" mode.
+ */
+const DatePicker = {
+  parts: ["subLabels"],
+  baseStyle: {
+    subLabels: {
+      label: {
+        fontSize: "12px",
+        marginBottom: "0",
+      },
+    },
+  },
+};
+
+export default DatePicker;

package/src/theme/components/fieldset.ts

@@ -0,0 +1,18 @@
+import { labelLegendText } from "./global";
+import { screenreaderOnly } from "./globalMixins";
+
+const Fieldset = {
+  parts: ["helper"],
+  baseStyle: ({ isLegendHidden }) => {
+    const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+    return {
+      legend: {
+        ...labelLegendText,
+        ...screenreaderStyles,
+      },
+      helper: { ...labelLegendText.helper },
+    };
+  },
+};
+
+export default Fieldset;

package/src/theme/components/global.ts

@@ -0,0 +1,82 @@
+/** Export "mixin" styles. */
+export { wrapperStyles } from "./globalMixins";
+
+/** Reusable component styles. */
+
+// Used in `Select` and `TextInput`.
+const activeFocus = {
+  border: "1px solid",
+  borderColor: "ui.focus",
+  zIndex: "9999",
+  outline: "1px solid",
+  outlineColor: "ui.focus",
+};
+// Used in `Select` and `TextInput`.
+const helperTextMargin = {
+  marginTop: "xs",
+  marginBottom: "0",
+};
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioLabelStyles = {
+  userSelect: "none",
+  fontSize: "0",
+  fontWeight: "light",
+  marginBottom: "0",
+  marginLeft: "xs",
+  verticalAlign: "middle",
+  _disabled: {
+    color: "ui.gray.dark",
+    opacity: 1,
+    fontStyle: "italic",
+  },
+  _invalid: {
+    color: "ui.error.primary",
+  },
+};
+// Custom values not in the spacing theme.
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioControlSize = {
+  h: "1.375rem",
+  w: "1.375rem",
+};
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioHelperStyle = {
+  ...helperTextMargin,
+  marginLeft: "30px", // calc(22px + var(--nypl-space-xs))
+  _disabled: {
+    fontStyle: "italic",
+  },
+};
+// Used in `Label` and `Fieldset`.
+const labelLegendText = {
+  alignItems: "baseline",
+  width: "100%",
+  marginBottom: "s",
+  fontSize: "14px",
+  fontWeight: "medium",
+  display: "flex",
+  justifyContent: "space-between",
+  helper: {
+    marginLeft: "m",
+    fontWeight: "300",
+    fontSize: "-1",
+  },
+};
+const checkboxRadioGroupStyles = {
+  helper: {
+    marginTop: "s",
+  },
+  stack: {
+    width: "fit-content",
+  },
+};
+
+export {
+  activeFocus,
+  checkboxRadioControlSize,
+  checkboxRadioGroupStyles,
+  checkboxRadioHelperStyle,
+  checkboxRadioLabelStyles,
+  helperTextMargin,
+  labelLegendText,
+};

package/src/theme/components/globalMixins.ts

@@ -0,0 +1,24 @@
+/**
+ * These objects are also SCSS mixins but are now JS objects in the
+ * context of css-in-js and the custom NYPL-theme.
+ */
+const wrapperStyles = {
+  marginY: "0",
+  marginX: "auto",
+  maxWidth: "1280px",
+  paddingTop: "0",
+  paddingBottom: "0",
+  paddingRight: "0",
+  paddingLeft: "0",
+  width: "100%",
+};
+const screenreaderOnly = {
+  clip: "rect(1px, 1px, 1px, 1px)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute !important",
+  width: "1px",
+  wordWrap: "normal",
+};
+
+export { screenreaderOnly, wrapperStyles };

package/src/theme/components/heading.ts

@@ -1,45 +1,51 @@
+const margins = {
+  marginTop: "0",
+  marginLeft: "0",
+  marginRight: "0",
+  marginBottom: "s",
+};
+
 // Heading Styles
 const headings = {
   h1: {
-    fontSize: "4", // var(--font-size-4);
+    fontSize: "4", // var(--nypl-fontSizes-4);
     fontWeight: "light",
     letterSpacing: "0",
     lineHeight: "1.1",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h2: {
-    fontSize: "3", // var(--font-size-3);
+    fontSize: "3", // var(--nypl-fontSizes-3);
     fontWeight: "medium",
     lineHeight: "1.25",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h3: {
-    fontSize: "2", // var(--font-size-2);
+    fontSize: "2", // var(--nypl-fontSizes-2);
     fontWeight: "medium",
     lineHeight: "1.25",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h4: {
-    fontSize: "1", // var(--font-size-1);
+    fontSize: "1", // var(--nypl-fontSizes-1);
     fontWeight: "medium",
     lineHeight: "1.15",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   fallback: {
-    fontSize: "1", // var(--font-size-1);
+    fontSize: "1", // var(--nypl-fontSizes-1);
     fontWeight: "regular",
     lineHeight: "1.15",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
 };
 
-// styles for different visual variants:
-// primary, secondary, tertiary, callout
+// Styles for different visual variants
 const variants = {
   h1: headings.h1,
   h2: headings.h2,
@@ -54,8 +60,14 @@ const variants = {
 };
 
 const Heading = {
+  baseStyle: {
+    a: {
+      color: "ui.black",
+    },
+  },
   // Available variants:
-  //   primary, secondary, tertiary, callout
+  // h1, h2, h3, h4, h5, h6,
+  // primary, secondary, tertiary, callout
   variants,
   defaultProps: {
     variant: "secondary",

package/src/theme/components/helperErrorText.ts

@@ -0,0 +1,9 @@
+const helperErrorText = {
+  baseStyle: ({ isInvalid }) => ({
+    marginBottom: "0",
+    fontSize: "-1",
+    color: isInvalid ? "ui.error.primary" : "ui.black",
+  }),
+};
+
+export default helperErrorText;