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

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

@@ -1,3 +1,9 @@
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperStyle,
+} from "./global";
+
 // Style object for the Radio's "control" or visual icon.
 const baseStyleControl = {
   verticalAlign: "middle",
@@ -23,11 +29,11 @@ const baseStyleControl = {
     },
     _invalid: {
       _hover: {
-        borderColor: "ui.error",
+        borderColor: "ui.error.primary",
       },
       _before: {
-        borderColor: "ui.error",
-        bg: "ui.error",
+        borderColor: "ui.error.primary",
+        bg: "ui.error.primary",
       },
     },
     _hover: {
@@ -36,8 +42,8 @@ const baseStyleControl = {
     _before: {
       content: `""`,
       display: "block",
-      w: 3,
-      h: 3,
+      w: "3",
+      h: "3",
       borderRadius: "100%",
       bg: "ui.focus",
     },
@@ -51,7 +57,7 @@ const baseStyleControl = {
     borderColor: "ui.focus",
   },
   _invalid: {
-    borderColor: "ui.error",
+    borderColor: "ui.error.primary",
   },
   // TODO:
   // _indeterminate: {
@@ -62,21 +68,12 @@ const baseStyleControl = {
 
 // Style object for the Radio's label
 const baseStyleLabel = {
-  userSelect: "none",
-  fontSize: 0,
-  fontWeight: "light",
-  marginBottom: 0,
-  marginLeft: 2,
-  verticalAlign: "middle",
+  ...checkboxRadioLabelStyles,
+};
 
-  _disabled: {
-    color: "ui.gray.dark",
-    opacity: 1,
-    fontStyle: "italic",
-  },
-  _invalid: {
-    color: "ui.error",
-  },
+// Style object for the Radio's helper text
+const baseStyleHelper = {
+  ...checkboxRadioHelperStyle,
 };
 
 const baseStyle = {
@@ -84,28 +81,20 @@ const baseStyle = {
   control: baseStyleControl,
   label: baseStyleLabel,
   // Custom element in the DS Radio component.
-  helper: {
-    marginTop: 2, // var(--space-xs)
-    marginBottom: 0,
-    marginLeft: "30px", // calc(22px + var(--space-xs))
-    _disabled: {
-      fontStyle: "italic",
-    },
-  },
+  helper: baseStyleHelper,
 };
 
 // Sticking to "md" for the default size.
 const sizes = {
   md: {
     control: {
-      // Custom values not in the spacing theme.
-      h: "1.375rem",
-      w: "1.375rem",
+      ...checkboxRadioControlSize,
     },
   },
 };
 
 const Radio = {
+  parts: ["control", "label", "helper"],
   baseStyle,
   sizes,
   // Default values

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

@@ -1,74 +1,77 @@
+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: {
-    tablist: {
-      // no custom styles
-    },
-    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.warm-xlight",
-        borderTopRadius: 2,
-        borderBottom: "1px solid",
-        borderBottomColor: "ui.black",
-      },
-      _selected: {
-        fontWeight: "bold",
-        bg: "ui.gray.warm-light",
-        border: "0",
-        borderTopRadius: 2,
-        borderBottom: "3px solid",
-        borderBottomColor: "ui.black",
-        paddingBottom: "5px",
-      },
-      _focus: {
-        boxShadow: 0,
-      },
-    },
-    // Only display the previous/next arrow buttons on mobile.
-    buttonArrows: {
-      border: "0",
-      display: {
-        base: "none", // "inline-block" - hiding until the full "arrow" functionality is built out
-        // After 38em/600px, don't display the arrow button anymore.
-        md: "none",
-      },
-      height: "44px",
-      width: "44px !important",
-    },
-    // Just to better align the mobile arrow buttons with the tablist.
-    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: "4px", md: "0" },
-      paddingRight: { base: "4px", md: "0" },
-      paddingTop: { base: "4px", md: "0" },
-    },
+    tab,
+    buttonArrows,
+    tablistWrapper,
   },
   defaultProps: {},
 };

package/src/theme/components/template.ts

@@ -0,0 +1,114 @@
+// From @mixin breakout:
+// Used for elements that should be edge-to-edge.
+const breakout = {
+  marginLeft: "calc(-50vw + 50%)",
+  marginRight: "calc(-50vw + 50%)",
+};
+// From the `wrapper` SCSS mixin.
+// TODO: Eventually we may be able to put shared JS style objects
+// into a utils file for other mixins that are shared.
+const wrapperStyles = {
+  marginY: 0,
+  marginX: "auto",
+  maxWidth: "1280px",
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingRight: 0,
+  paddingLeft: 0,
+  width: "100%",
+};
+
+const Template = {
+  baseStyle: {
+    boxSizing: "border-box",
+    color: "ui.black",
+    // Users with non-overlay scrollbars have a small horizontal scrollbar from
+    // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
+    overflowX: "hidden",
+    "*": { boxSizing: "inherit" },
+    "*::after": { boxSizing: "inherit" },
+    "*::before": { boxSizing: "inherit" },
+  },
+  sizes: {},
+  defaultProps: {},
+};
+const TemplateHeader = {
+  baseStyle: {
+    marginBottom: 8, // --space-l
+  },
+};
+const TemplateBreakout = {
+  baseStyle: {
+    ...breakout,
+    width: "100vw",
+    marginBottom: 8, // --space-l
+  },
+};
+const TemplateContent = {
+  baseStyle: {
+    ...wrapperStyles,
+    display: "block",
+    marginBottom: 8, // --space-l
+  },
+  variants: {
+    sidebar: {
+      display: "flex",
+      flexFlow: {
+        base: "column nowrap",
+        md: "row wrap",
+      },
+    },
+  },
+};
+const TemplateContentTop = {
+  baseStyle: {
+    flex: "1 0 100%",
+    marginBottom: 8, // --space-l
+  },
+};
+const TemplateContentPrimary = {
+  baseStyle: {
+    flex: "1 1",
+    marginBottom: 8, // --space-l
+  },
+  variants: {
+    left: {
+      display: "flex",
+      flexFlow: "column nowrap",
+      order: "1",
+      marginRight: { md: 0 },
+      minWidth: { md: 0 },
+    },
+  },
+};
+const TemplateContentSidebar = {
+  baseStyle: {
+    flex: "0 0 255px",
+    order: { md: "1" },
+    marginBottom: 8, // --space-l
+  },
+  variants: {
+    left: {
+      marginRight: {
+        base: 0,
+        md: 12, // --space-xl
+      },
+    },
+    right: {
+      marginLeft: {
+        base: 0,
+        md: 12, // --space-xl
+      },
+    },
+  },
+};
+
+export default {
+  Template,
+  TemplateHeader,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateContentTop,
+  TemplateContentPrimary,
+  TemplateContentSidebar,
+};

package/src/theme/components/text.ts

@@ -0,0 +1,31 @@
+const variants = {
+  default: {},
+  caption: {
+    fontSize: "-1",
+  },
+  tag: {
+    fontSize: "-2",
+  },
+  mini: {
+    fontSize: "-3",
+  },
+};
+const Text = {
+  baseStyle: (props) => {
+    const fontWeight = props.isBold
+      ? "bold"
+      : props.variant === "tag" || props.variant === "min"
+      ? "regular"
+      : null;
+    const fontStyle = props.isItalic ? "italic" : null;
+
+    return {
+      fontStyle: fontStyle,
+      fontWeight: fontWeight,
+      marginBottom: props.noSpace ? "0 !important" : null,
+    };
+  },
+  variants,
+};
+
+export default Text;

package/src/theme/components/textInput.ts

@@ -0,0 +1,61 @@
+import { activeFocus, helperTextMargin } from "./global";
+
+const input = {
+  border: "1px solid",
+  borderColor: "ui.gray.medium",
+  borderRadius: "2px",
+  py: "xs",
+  px: "s",
+  _hover: {
+    borderColor: "ui.gray.dark",
+  },
+  _disabled: {
+    bgColor: "ui.gray.xx-light-cool",
+    color: "ui.gray.xdark",
+    opacity: "1",
+  },
+  _active: activeFocus,
+  _focus: activeFocus,
+  _placeholder: {
+    color: "ui.gray.dark",
+    fontStyle: "italic",
+    lineHeight: "21px",
+  },
+  _invalid: {
+    border: "1px solid",
+    borderColor: "ui.error.primary",
+    boxShadow: "none",
+  },
+};
+
+const TextInput = {
+  parts: ["helper", "input", "textarea"],
+  baseStyle: {
+    marginBottom: "xs",
+    helper: {
+      ...helperTextMargin,
+    },
+    input,
+    textarea: {
+      ...input,
+      lineheight: "1.5",
+      minHeight: "xxl",
+    },
+  },
+  variants: {
+    searchBar: {
+      flex: "1 1 80%",
+      input: {
+        borderRightRadius: "0",
+      },
+    },
+    searchBarSelect: {
+      flex: "1 1 80%",
+      input: {
+        borderRadius: "0",
+      },
+    },
+  },
+};
+
+export default TextInput;