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

package/src/theme/components/breadcrumb.ts

@@ -0,0 +1,77 @@
+// Variant styling
+const booksAndMore = {
+  bg: "section.books-and-more.secondary",
+};
+const locations = {
+  bg: "section.locations.secondary",
+};
+const research = {
+  bg: "section.research.secondary",
+};
+const whatsOn = {
+  bg: "section.whats-on.secondary",
+};
+
+const Breadcrumb = {
+  baseStyle: {
+    bg: "ui.black",
+    color: "ui.white",
+    fontSize: "-1",
+    fontWeight: "regular",
+    paddingBottom: "xs",
+    paddingTop: "xs",
+    ol: {
+      alignItems: { base: "center", md: "unset" },
+      display: { base: "flex", md: "block" },
+      margin: "auto",
+      maxWidth: "1280px",
+      paddingLeft: "s",
+      paddingRight: "s",
+    },
+    a: {
+      _hover: {
+        color: "ui.gray.light-cool",
+      },
+    },
+    "li:last-child": {
+      fontWeight: { base: "regular", md: "bold" },
+      ".chakra-breadcrumb__link": {
+        _hover: {
+          cursor: "default",
+          textDecoration: "none",
+        },
+      },
+      ".icon": {
+        display: "none",
+      },
+    },
+    "li:not(:last-child)": {
+      display: { base: "none", md: "inline-block" },
+      a: {
+        marginRight: { base: "xs", md: "0" },
+      },
+      ".icon": {
+        display: { base: "inline", md: "none" },
+      },
+      "span:not(.breadcrumb-label)": {
+        marginInlineEnd: "xxs",
+        marginInlineStart: "xxs",
+      },
+    },
+    "li:nth-last-child(2)": {
+      display: "inline-block",
+      span: {
+        display: { base: "none", md: "inline" },
+      },
+    },
+  },
+  // Available variants:
+  variants: {
+    booksAndMore,
+    locations,
+    research,
+    whatsOn,
+  },
+};
+
+export default Breadcrumb;

package/src/theme/components/button.ts

@@ -0,0 +1,125 @@
+// Style object for base or default style
+const baseStyle = {
+  borderRadius: "2px",
+  lineHeight: "1.5",
+  display: "flex",
+  cursor: "pointer",
+  color: "ui.white",
+  justifyContent: "center",
+  py: "xs",
+  px: "s",
+  textDecoration: "none",
+  wordWrap: "normal",
+  svg: {
+    fill: "currentColor",
+    marginTop: "xxs",
+  },
+  _hover: {
+    bg: "ui.link.secondary",
+  },
+  _visited: {
+    color: "ui.white",
+  },
+  _disabled: {
+    bg: "ui.gray.light-cool",
+    color: "ui.gray.dark",
+    pointerEvents: "none",
+    opacity: "1",
+  },
+};
+// Styles for different "lg" size
+const sizes = {
+  lg: {
+    width: "150px",
+  },
+};
+// 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",
+  },
+};
+const link = {
+  bg: "transparent",
+  lineHeight: "2.5",
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _disabled: {
+    bg: "transparent",
+  },
+  _hover: {
+    bg: "transparent",
+    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",
+  },
+};
+const iconOnly = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
+  },
+  paddingInlineStart: "xs",
+  paddingInlineEnd: "xs",
+};
+const callout = {
+  bg: "brand.primary",
+  _hover: {
+    bg: "brand.secondary",
+  },
+  _active: {
+    bg: "brand.secondary",
+  },
+};
+const searchBar = {
+  ...primary,
+  borderLeftRadius: "0",
+};
+
+const Button = {
+  baseStyle,
+  sizes,
+  // Available variants:
+  // primary, secondary, link, pill, icon-only, searchBar
+  variants: {
+    primary,
+    secondary,
+    link,
+    pill,
+    ["icon-only"]: iconOnly,
+    callout,
+    searchBar,
+  },
+  // Default values
+  defaultProps: {
+    size: "md",
+    variant: "primary",
+    colorScheme: "blue",
+  },
+};
+
+export default Button;

package/src/theme/components/checkbox.ts

@@ -0,0 +1,107 @@
+// @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts
+// for available theme override options.
+
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperStyle,
+} from "./global";
+
+// Style object for the Checkbox's visual icon.
+const baseStyleIcon = {
+  transitionProperty: "transform",
+  transitionDuration: "normal",
+  width: "22px",
+  height: "22px",
+};
+
+// Style object for the Checkbox's "control."
+const baseStyleControl = {
+  border: "2px solid",
+  borderRadius: "sm",
+  borderColor: "ui.black",
+  color: "ui.black",
+  outline: "none",
+  transitionProperty: "box-shadow",
+  transitionDuration: "normal",
+
+  _checked: {
+    bg: "ui.white",
+    borderColor: "ui.focus",
+    color: "ui.focus",
+
+    _hover: {
+      bg: "ui.white",
+    },
+
+    _disabled: {
+      bg: "ui.white",
+      borderColor: "ui.gray.medium",
+      color: "ui.gray.medium",
+    },
+  },
+
+  _indeterminate: {
+    bg: "ui.white",
+    borderColor: "ui.gray.medium",
+  },
+
+  _disabled: {
+    bg: "ui.white",
+    borderColor: "ui.gray.medium",
+  },
+
+  _focus: {
+    borderColor: "ui.focus",
+    boxShadow: "none",
+    outlineColor: "ui.focus",
+  },
+
+  _invalid: {
+    borderColor: "ui.error.primary",
+    color: "ui.error.primary",
+  },
+};
+
+// Style object for the Checkbox's label
+const baseStyleLabel = {
+  ...checkboxRadioLabelStyles,
+};
+
+// Style object for the Checkbox's helper text
+const baseStyleHelper = {
+  ...checkboxRadioHelperStyle,
+};
+
+const baseStyle = {
+  icon: baseStyleIcon,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  helper: baseStyleHelper,
+};
+
+// Sticking to "lg" for the default size.
+const sizes = {
+  lg: {
+    // Controls the width/height of the checkbox itself.
+    control: {
+      ...checkboxRadioControlSize,
+      borderRadius: "3px",
+    },
+    // Controls the font-size of the label only.
+    label: { fontSize: "md" },
+  },
+};
+
+const Checkbox = {
+  parts: ["icon", "control", "label", "helper"],
+  baseStyle,
+  sizes,
+  // Default values
+  defaultProps: {
+    size: "lg",
+    colorScheme: "white",
+  },
+};
+
+export default Checkbox;

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

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

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

@@ -0,0 +1,72 @@
+const margins = {
+  marginTop: "0",
+  marginLeft: "0",
+  marginRight: "0",
+  marginBottom: "s",
+};
+
+// Heading Styles
+const headings = {
+  h1: {
+    fontSize: "4", // var(--font-size-4);
+    fontWeight: "light",
+    letterSpacing: "0",
+    lineHeight: "1.1",
+    ...margins,
+    width: "auto",
+  },
+  h2: {
+    fontSize: "3", // var(--font-size-3);
+    fontWeight: "medium",
+    lineHeight: "1.25",
+    ...margins,
+    width: "auto",
+  },
+  h3: {
+    fontSize: "2", // var(--font-size-2);
+    fontWeight: "medium",
+    lineHeight: "1.25",
+    ...margins,
+    width: "auto",
+  },
+  h4: {
+    fontSize: "1", // var(--font-size-1);
+    fontWeight: "medium",
+    lineHeight: "1.15",
+    ...margins,
+    width: "auto",
+  },
+  fallback: {
+    fontSize: "1", // var(--font-size-1);
+    fontWeight: "regular",
+    lineHeight: "1.15",
+    ...margins,
+    width: "auto",
+  },
+};
+
+// Styles for different visual variants
+const variants = {
+  h1: headings.h1,
+  h2: headings.h2,
+  h3: headings.h3,
+  h4: headings.h4,
+  h5: headings.fallback,
+  h6: headings.fallback,
+  primary: headings.h1,
+  secondary: headings.h2,
+  tertiary: headings.h3,
+  callout: headings.h4,
+};
+
+const Heading = {
+  // Available variants:
+  // h1, h2, h3, h4, h5, h6,
+  // primary, secondary, tertiary, callout
+  variants,
+  defaultProps: {
+    variant: "secondary",
+  },
+};
+
+export default Heading;