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

package/src/theme/components/button.ts

@@ -1,4 +1,4 @@
-// style object for base or default style
+// Style object for base or default style
 const baseStyle = {
   borderRadius: "2px",
   lineHeight: "1.5",
@@ -6,10 +6,14 @@ const baseStyle = {
   cursor: "pointer",
   color: "ui.white",
   justifyContent: "center",
-  py: 2, // var(--space-xs)
-  px: 4, // var(--space-s)
+  py: "xs",
+  px: "s",
   textDecoration: "none",
   wordWrap: "normal",
+  svg: {
+    fill: "currentColor",
+    marginTop: "xxs",
+  },
   _hover: {
     bg: "ui.link.secondary",
   },
@@ -17,89 +21,99 @@ const baseStyle = {
     color: "ui.white",
   },
   _disabled: {
-    bg: "ui.gray.light",
+    bg: "ui.gray.light-cool",
     color: "ui.gray.dark",
     pointerEvents: "none",
     opacity: "1",
   },
 };
-// styles for different sizes ("sm", "md", "lg")
+// Styles for different "lg" size
 const sizes = {
   lg: {
     width: "150px",
   },
 };
-// styles for different visual variants:
-// primary, secondary, link, pill, icon-only
-const variants = {
-  primary: {
-    bg: "ui.link.primary",
-    minWidth: "none",
-    height: "none",
+// Styles for different visual variants:
+// primary, secondary, link, pill, icon-only, callout
+const primary = {
+  bg: "ui.link.primary",
+  minWidth: "none",
+  height: "none",
+};
+const secondary = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
   },
-  secondary: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
+};
+const link = {
+  bg: "transparent",
+  lineHeight: "2.5",
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _disabled: {
+    bg: "transparent",
   },
-  link: {
+  _hover: {
     bg: "transparent",
-    lineHeight: "2.5",
-    color: "ui.link.primary",
-    textDecoration: "underline",
-    _disabled: {
-      bg: "transparent",
-    },
-    _hover: {
-      bg: "transparent",
-      color: "ui.link.secondary",
-    },
+    color: "ui.link.secondary",
+  },
+};
+const pill = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  borderRadius: "20px",
+  py: "xs",
+  paddingInlineStart: "m",
+  paddingInlineEnd: "m",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
   },
-  pill: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    borderRadius: "20px",
-    py: 2, // var(--space-xs)
-    paddingInlineStart: 6, // var(--space-m)
-    paddingInlineEnd: 6, // var(--space-m)
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
+};
+const iconOnly = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
   },
-  "icon-only": {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
-    paddingInlineStart: 1, // var(--space-xs)
-    paddingInlineEnd: 1, //var(--space-xs)
+  paddingInlineStart: "xs",
+  paddingInlineEnd: "xs",
+};
+const callout = {
+  bg: "brand.primary",
+  _hover: {
+    bg: "brand.secondary",
   },
-  callout: {
-    bg: "brand.primary",
-    _hover: {
-      bg: "brand.secondary",
-    },
-    _active: {
-      bg: "brand.secondary",
-    },
+  _active: {
+    bg: "brand.secondary",
   },
 };
+const searchBar = {
+  ...primary,
+  borderLeftRadius: "0",
+};
 
 const Button = {
   baseStyle,
   sizes,
   // Available variants:
-  //   primary, secondary, link, pill, icon-only
-  variants,
+  // primary, secondary, link, pill, icon-only, searchBar
+  variants: {
+    primary,
+    secondary,
+    link,
+    pill,
+    ["icon-only"]: iconOnly,
+    callout,
+    searchBar,
+  },
   // Default values
   defaultProps: {
     size: "md",

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 = {
@@ -52,40 +58,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 +84,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: "3px",
+    },
     // Controls the font-size of the label only.
     label: { fontSize: "md" },
   },

package/src/theme/components/customCheckboxGroup.ts

@@ -0,0 +1,12 @@
+import { checkboxRadioGroupLayout } from "./global";
+
+const CustomCheckboxGroup = {
+  parts: ["legend", "required", "helper"],
+  baseStyle: {
+    ...checkboxRadioGroupLayout,
+  },
+  sizes: {},
+  defaultProps: {},
+};
+
+export default CustomCheckboxGroup;

package/src/theme/components/customRadioGroup.ts

@@ -1,15 +1,9 @@
+import { checkboxRadioGroupLayout } from "./global";
+
 const CustomRadioGroup = {
-  parts: ["required", "helper"],
+  parts: ["legend", "required", "helper"],
   baseStyle: {
-    legend: {
-      marginBottom: 4,
-    },
-    required: {
-      marginLeft: 6,
-    },
-    helper: {
-      marginTop: 4,
-    },
+    ...checkboxRadioGroupLayout,
   },
   sizes: {},
   defaultProps: {},

package/src/theme/components/global.ts

@@ -0,0 +1,71 @@
+/** 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 `CheckboxGroup` and `RadioGroup`.
+const checkboxRadioGroupLayout = {
+  legend: {
+    fontSize: "14px",
+    marginBottom: "s",
+  },
+  required: {
+    marginLeft: "m",
+  },
+  helper: {
+    marginTop: "s",
+  },
+};
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioHelperStyle = {
+  ...helperTextMargin,
+  marginLeft: "30px", // calc(22px + var(--space-xs))
+  _disabled: {
+    fontStyle: "italic",
+  },
+};
+
+export {
+  activeFocus,
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioGroupLayout,
+  checkboxRadioHelperStyle,
+  helperTextMargin,
+};

package/src/theme/components/globalMixins.ts

@@ -0,0 +1,16 @@
+/**
+ * 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%",
+};
+
+export { wrapperStyles };

package/src/theme/components/heading.ts

@@ -1,3 +1,10 @@
+const margins = {
+  marginTop: "0",
+  marginLeft: "0",
+  marginRight: "0",
+  marginBottom: "s",
+};
+
 // Heading Styles
 const headings = {
   h1: {
@@ -5,41 +12,40 @@ const headings = {
     fontWeight: "light",
     letterSpacing: "0",
     lineHeight: "1.1",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h2: {
     fontSize: "3", // var(--font-size-3);
     fontWeight: "medium",
     lineHeight: "1.25",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h3: {
     fontSize: "2", // var(--font-size-2);
     fontWeight: "medium",
     lineHeight: "1.25",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   h4: {
     fontSize: "1", // var(--font-size-1);
     fontWeight: "medium",
     lineHeight: "1.15",
-    margin: "0 0 0.5em",
+    ...margins,
     width: "auto",
   },
   fallback: {
     fontSize: "1", // var(--font-size-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,
@@ -55,7 +61,8 @@ const variants = {
 
 const Heading = {
   // Available variants:
-  //   primary, secondary, tertiary, callout
+  // h1, h2, h3, h4, h5, h6,
+  // primary, secondary, tertiary, callout
   variants,
   defaultProps: {
     variant: "secondary",

package/src/theme/components/hero.ts

@@ -0,0 +1,239 @@
+import { wrapperStyles } from "./global";
+
+// Used for all "secondary" variants.
+const secondaryBase = {
+  overflowX: "hidden",
+  content: {
+    ...wrapperStyles,
+    paddingRight: "s",
+    paddingLeft: "s",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      md: "row wrap",
+    },
+    img: {
+      flex: {
+        base: "1 1 100%",
+        md: "0 0 250px",
+      },
+      order: { md: "3" },
+      height: "150px",
+      minWidth: "0", // https://github.com/philipwalton/flexbugs/issues/41
+      objectFit: "cover",
+      width: "100%",
+    },
+  },
+  bodyText: {
+    marginTop: "xs",
+    marginRight: { md: "xs" },
+    flex: { md: "1 1 50%" },
+    order: { md: "2" },
+  },
+};
+// Used for all "secondary" variants' heading component.
+const secondaryHeadingBase = {
+  marginBottom: "0",
+  bg: "ui.black",
+  color: "ui.white",
+  flex: "1 1 100%",
+  marginTop: "0",
+  paddingBottom: "xxs",
+  position: "relative",
+  zIndex: "0",
+  order: { md: "1" },
+  _before: {
+    bg: "ui.black",
+    content: `""`,
+    height: "100%",
+    left: "-2000px",
+    position: "absolute",
+    width: "4000px",
+    zIndex: "-1",
+  },
+};
+// Get all the styles for the specific Secondary variant but
+// update the background color.
+const getSecondaryVariantStyles = (bgColor: string) => ({
+  ...secondaryBase,
+  heading: {
+    ...secondaryHeadingBase,
+    bg: bgColor,
+    _before: {
+      ...secondaryHeadingBase["_before"],
+      bg: bgColor,
+    },
+  },
+});
+// Variant styling
+const primary = {
+  alignItems: "center",
+  display: "flex",
+  flexFlow: {
+    base: "column nowrap",
+    md: "row nowrap",
+  },
+  justifyContent: "center",
+  minHeight: "350px",
+  content: {
+    bg: "ui.black",
+    color: "ui.white",
+    flex: {
+      base: "0 0 100%",
+      md: "0 0 60%",
+    },
+    maxWidth: { md: "960px" },
+    paddingTop: "xxl",
+    paddingBottom: "xxl",
+    paddingRight: "l",
+    paddingLeft: "l",
+    a: {
+      color: "inherit",
+      display: "inline-block",
+    },
+    heading: {
+      marginBottom: "0",
+    },
+    bodyText: {
+      marginBottom: "0",
+    },
+  },
+};
+const secondary = {
+  ...secondaryBase,
+  heading: {
+    ...secondaryHeadingBase,
+  },
+};
+const secondaryBooksAndMore = getSecondaryVariantStyles(
+  "section.books-and-more.primary"
+);
+const secondaryLocations = getSecondaryVariantStyles(
+  "section.locations.primary"
+);
+const secondaryResearch = getSecondaryVariantStyles("section.research.primary");
+const secondaryWhatsOn = getSecondaryVariantStyles("section.whats-on.primary");
+const tertiary = {
+  bg: "ui.gray.xdark",
+  content: {
+    ...wrapperStyles,
+    color: "ui.white",
+    display: "flex",
+    flexFlow: "column nowrap",
+    paddingTop: "l",
+    paddingBottom: "l",
+    paddingRight: "s",
+    paddingLeft: "s",
+    p: {
+      marginBottom: "0",
+    },
+  },
+  heading: {
+    marginBottom: "s",
+    _lastChild: {
+      marginBottom: "0",
+    },
+  },
+  p: {
+    marginBottom: "0",
+  },
+};
+const campaign = {
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  marginBottom: "xxl",
+  minHeight: "300px",
+  overflow: "visible",
+  padding: {
+    base: "l",
+    md: "0",
+  },
+  position: "relative",
+  content: {
+    alignItems: "center",
+    bg: "ui.black",
+    color: "ui.white",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      md: "row nowrap",
+    },
+    minHeight: "320px",
+    flex: { md: "0 0 90%" },
+    maxWidth: { md: "1280px" },
+    position: { md: "relative" },
+    top: { md: "xxl" },
+  },
+  a: {
+    color: "inherit",
+    display: "inline-block",
+  },
+  img: {
+    flex: {
+      base: "1 1 100%",
+      md: "0 0 50%",
+    },
+    minWidth: "0", // https://github.com/philipwalton/flexbugs/issues/41
+    objectFit: "cover",
+    width: "100%",
+    height: { md: "320px" },
+  },
+  interior: {
+    flex: {
+      base: "0 0 100%",
+      md: "0 0 50%",
+    },
+    padding: "l",
+    maxWidth: { md: "960px" },
+  },
+};
+const fiftyfifty = {
+  content: {
+    ...wrapperStyles,
+    alignItems: "center",
+    display: "flex",
+    flexFlow: {
+      base: "column nowrap",
+      lg: "row nowrap",
+    },
+    paddingBottom: "s",
+    paddingRight: "s",
+    paddingLeft: "s",
+    padding: {
+      lg: "unset",
+    },
+  },
+  img: {
+    marginBottom: {
+      base: "s",
+      lg: "unset",
+    },
+    marginRight: {
+      lg: "s",
+    },
+    maxWidth: {
+      base: "fit-content",
+      lg: "50%",
+    },
+  },
+};
+const Hero = {
+  baseStyle: {
+    bg: "ui.gray.x-light-warm",
+  },
+  // Available variants:
+  variants: {
+    primary,
+    secondary,
+    secondaryBooksAndMore,
+    secondaryLocations,
+    secondaryResearch,
+    secondaryWhatsOn,
+    tertiary,
+    campaign,
+    fiftyfifty,
+  },
+};
+
+export default Hero;