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

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;

package/src/theme/components/icon.ts

@@ -0,0 +1,79 @@
+const svgBase = {
+  display: "inline-block",
+  fill: "currentColor",
+  width: "24px",
+  height: "24px",
+};
+const align = {
+  none: {},
+  left: { marginRight: "xs" },
+  right: { marginLeft: "xs" },
+};
+const iconRotation = {
+  rotate180: {
+    transform: "rotate(180deg)",
+  },
+  rotate270: {
+    transform: "rotate(270deg)",
+  },
+  rotate0: {
+    transform: "rotate(0deg)",
+  },
+  rotate90: {
+    transform: "rotate(90deg)",
+  },
+};
+const size = {
+  xxxlarge: {
+    height: "var(--space-xxl)",
+    width: "var(--space-xxl)",
+  },
+  xxlarge: {
+    height: "var(--space-xl)",
+    width: "var(--space-xl)",
+  },
+  xlarge: {
+    height: "var(--space-l)",
+    width: "var(--space-l)",
+  },
+  large: {
+    height: "var(--space-m)",
+    width: "var(--space-m)",
+  },
+  medium: {
+    height: "1.125rem",
+    width: "1.125rem",
+  },
+  small: {
+    height: "0.875rem",
+    width: "0.875rem",
+  },
+};
+const Icon = {
+  baseStyle: (props) => {
+    const allStyles = {
+      ...svgBase,
+      ...align[props.align],
+      fill: props.color,
+      ...iconRotation[props.iconRotation],
+      ...size[props.size],
+    };
+    return {
+      ...allStyles,
+      // We still want to style any custom SVG element that was
+      // passed to the `Icon` component.
+      svg: {
+        ...allStyles,
+      },
+    };
+  },
+  variants: {
+    default: {},
+    breadcrumbs: {
+      fill: "var(--ui-white)",
+      display: { md: "none" },
+    },
+  },
+};
+
+export default Icon;

package/src/theme/components/label.ts

@@ -0,0 +1,17 @@
+const Label = {
+  parts: ["helper"],
+  baseStyle: {
+    marginBottom: "xs",
+    alignItems: "baseline",
+    display: "flex",
+    fontWeight: "500",
+    justifyContent: "space-between",
+    fontSize: "14px",
+    helper: {
+      fontWeight: "300",
+      fontSize: "-1",
+    },
+  },
+};
+
+export default Label;

package/src/theme/components/link.ts

@@ -0,0 +1,47 @@
+const variants = {
+  link: {},
+  moreLink: {
+    alignItems: "center",
+    display: "inline-flex",
+    svg: {
+      height: "s",
+      width: "s",
+      textDecoration: "none",
+      fill: "currentColor",
+    },
+    _hover: {
+      textDecoration: "underline",
+    },
+  },
+  button: {
+    width: "100px",
+    borderRadius: "2px",
+    lineHeight: "1.5",
+    display: "flex",
+    cursor: "pointer",
+    color: "ui.white",
+    justifyContent: "center",
+    py: "xs",
+    px: "xs",
+    textDecoration: "none",
+    fontWeight: 500,
+    bg: "ui.link.primary",
+    _hover: {
+      color: "ui.white",
+      bg: "ui.link.secondary",
+      textDecoration: "none",
+    },
+  },
+};
+const Link = {
+  baseStyle: {
+    color: "ui.link.primary",
+    textDecoration: "underline",
+    _hover: {
+      color: "ui.link.secondary",
+    },
+  },
+  variants,
+};
+
+export default Link;

package/src/theme/components/radio.ts

@@ -0,0 +1,106 @@
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperStyle,
+} from "./global";
+
+// Style object for the Radio's "control" or visual icon.
+const baseStyleControl = {
+  verticalAlign: "middle",
+  transitionProperty: "box-shadow",
+  transitionDuration: "normal",
+  border: "2px solid",
+  borderRadius: "50%",
+  borderColor: "ui.black",
+  color: "ui.white",
+  outline: "none",
+  _checked: {
+    bg: "ui.white",
+    borderColor: "ui.focus",
+    color: "ui.white",
+    _disabled: {
+      color: "ui.gray.medium",
+      borderColor: "ui.gray.medium",
+      bg: "ui.white",
+
+      _before: {
+        bg: "ui.gray.medium",
+      },
+    },
+    _invalid: {
+      _hover: {
+        borderColor: "ui.error.primary",
+      },
+      _before: {
+        borderColor: "ui.error.primary",
+        bg: "ui.error.primary",
+      },
+    },
+    _hover: {
+      bg: "ui.white",
+    },
+    _before: {
+      content: `""`,
+      display: "block",
+      w: "3",
+      h: "3",
+      borderRadius: "100%",
+      bg: "ui.focus",
+    },
+  },
+  _disabled: {
+    borderColor: "ui.gray.medium",
+    bg: "ui.white",
+  },
+  _focus: {
+    boxShadow: "outline",
+    borderColor: "ui.focus",
+  },
+  _invalid: {
+    borderColor: "ui.error.primary",
+  },
+  // TODO:
+  // _indeterminate: {
+  //   borderColor: "ui.gray.medium",
+  //   bg: "ui.white",
+  // },
+};
+
+// Style object for the Radio's label
+const baseStyleLabel = {
+  ...checkboxRadioLabelStyles,
+};
+
+// Style object for the Radio's helper text
+const baseStyleHelper = {
+  ...checkboxRadioHelperStyle,
+};
+
+const baseStyle = {
+  // Chakra-inserted elements in the Chakra Radio component
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  // Custom element in the DS Radio component.
+  helper: baseStyleHelper,
+};
+
+// Sticking to "md" for the default size.
+const sizes = {
+  md: {
+    control: {
+      ...checkboxRadioControlSize,
+    },
+  },
+};
+
+const Radio = {
+  parts: ["control", "label", "helper"],
+  baseStyle,
+  sizes,
+  // Default values
+  defaultProps: {
+    size: "md",
+  },
+};
+
+export default Radio;

package/src/theme/components/searchBar.ts

@@ -0,0 +1,21 @@
+const SearchBar = {
+  parts: ["topRow"],
+  baseStyle: {
+    topRow: {
+      display: "flex",
+      marginBottom: {
+        base: "xs",
+        md: "auto",
+      },
+      flexFlow: {
+        base: "column nowrap",
+        md: "row nowrap",
+      },
+    },
+    button: {
+      marginBottom: "auto",
+    },
+  },
+};
+
+export default SearchBar;

package/src/theme/components/select.ts

@@ -0,0 +1,50 @@
+import { activeFocus, helperTextMargin } from "./global";
+
+const select = {
+  borderRadius: "2px",
+  borderColor: "ui.gray.medium",
+  paddingTop: "xs",
+  paddingRight: "xl",
+  paddingBottom: "xs",
+  paddingLeft: "s",
+  _hover: {
+    borderColor: "ui.gray.medium",
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _disabled: {
+    color: "ui.gray.xdark",
+    bg: "ui.gray.xx-light-cool",
+    opacity: "1",
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const Select = {
+  parts: ["select", "helper"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: {
+      ...helperTextMargin,
+    },
+    select,
+  },
+  variants: {
+    searchbar: {
+      select: {
+        flex: "1 1 20%",
+        borderRight: "none",
+        borderRightRadius: "0",
+      },
+    },
+  },
+  defaultProps: {
+    size: "md",
+  },
+};
+
+export default Select;

package/src/theme/components/statusBadge.ts

@@ -0,0 +1,27 @@
+const StatusBadge = {
+  baseStyle: {
+    // Temporary until NYPL-theme radius values are configured.
+    borderRadius: "4px",
+    color: "ui.black",
+    display: "block",
+    fontSize: "-1",
+    fontStyle: "italic",
+    py: "xxs",
+    px: "xs",
+    textAlign: "center",
+    width: "fit-content",
+  },
+  variants: {
+    low: {
+      bg: "ui.gray.light-cool",
+    },
+    medium: {
+      bg: "ui.status.primary",
+    },
+    high: {
+      bg: "ui.status.secondary",
+    },
+  },
+};
+
+export default StatusBadge;

package/src/theme/components/tabs.ts

@@ -0,0 +1,79 @@
+const tab = {
+  color: "black !important",
+  paddingInlineStart: "4",
+  paddingLeft: "4",
+  background: "transparent",
+  border: "0",
+  borderBottom: "1px solid",
+  borderColor: "red",
+  marginRight: {
+    base: "0",
+    md: "1px",
+  },
+  paddingRight: {
+    base: "4",
+    md: "8",
+    lg: "12",
+  },
+  whiteSpace: "nowrap",
+  _hover: {
+    bg: "ui.gray.x-light-warm",
+    borderTopRadius: "2",
+    borderBottom: "1px solid",
+    borderBottomColor: "ui.black",
+  },
+  _selected: {
+    fontWeight: "bold",
+    bg: "ui.gray.light-warm",
+    border: "0",
+    borderTopRadius: "2",
+    borderBottom: "3px solid",
+    borderBottomColor: "ui.black",
+    paddingBottom: "5px",
+  },
+  _focus: {
+    boxShadow: "0",
+  },
+};
+// Only display the previous/next arrow buttons on mobile.
+const buttonArrows = {
+  border: "0",
+  display: {
+    // "inline-block" - hiding until the full "arrow" functionality is built out
+    base: "none",
+    // After 38em/600px, don't display the arrow button anymore.
+    md: "none",
+  },
+  height: "44px",
+  width: "44px !important",
+};
+// Styles to better align the mobile arrow buttons with the tablist.
+const tablistWrapper = {
+  display: "flex",
+  alignItems: "center",
+  borderBottom: {
+    base: "0",
+    md: "1px solid black",
+  },
+  margin: {
+    base: "-4px",
+    md: "0",
+  },
+  overflowX: { base: "auto", md: "visible" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "xxs", md: "0" },
+  paddingRight: { base: "xxs", md: "0" },
+  paddingTop: { base: "xxs", md: "0" },
+};
+
+const CustomTabs = {
+  parts: ["tab", "buttonArrows", "tablistWrapper"],
+  baseStyle: {
+    tab,
+    buttonArrows,
+    tablistWrapper,
+  },
+  defaultProps: {},
+};
+
+export default CustomTabs;