@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/theme/components/card.ts

@@ -0,0 +1,237 @@
+interface CardBaseStyleProps {
+  hasImage: boolean;
+  imageIsAtEnd: boolean;
+  isAlignedRightActions: boolean;
+  isBordered: boolean;
+  isCentered: boolean;
+  layout: string;
+  mainActionLink: boolean;
+}
+interface BodyPaddingProps {
+  hasImage: boolean;
+  imageIsAtEnd: boolean;
+  isBordered: boolean;
+  isRow: boolean;
+}
+interface CardImageBaseStyleProps {
+  imageIsAtEnd: boolean;
+  isCentered: boolean;
+  size: keyof typeof imageSizes;
+  layout: string;
+}
+interface CardActionsBaseStyleProps {
+  bottomBorder: boolean;
+  isCentered: boolean;
+  layout: string;
+  topBorder: boolean;
+}
+
+const imageSizes = {
+  xxsmall: { flex: { base: "0 0 100%", md: "0 0 64px" }, width: "100%" },
+  xsmall: { flex: { md: "0 0 96px" } },
+  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 = ({
+  hasImage,
+  imageIsAtEnd,
+  isBordered,
+  isRow,
+}: BodyPaddingProps) => {
+  let bodyPadding = null;
+  if (isBordered) {
+    bodyPadding = "inset.default";
+    if (hasImage) {
+      bodyPadding =
+        "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)";
+    }
+  }
+  if (isRow && isBordered) {
+    bodyPadding = "inset.default";
+  }
+  if (isRow && isBordered && hasImage) {
+    bodyPadding = {
+      base: "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
+      md: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
+    };
+    if (imageIsAtEnd) {
+      bodyPadding = {
+        base: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
+        md: "var(--nypl-space-inset-default) 0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
+      };
+    }
+  }
+  return bodyPadding;
+};
+const Card = {
+  parts: ["actions", "body", "heading"],
+  baseStyle: ({
+    hasImage,
+    imageIsAtEnd,
+    isAlignedRightActions,
+    isBordered,
+    isCentered,
+    layout,
+    mainActionLink,
+  }: CardBaseStyleProps) => {
+    const isRow = layout === "row";
+    const layoutStyles = isRow
+      ? {
+          display: "flex",
+          flexFlow: {
+            base: "column nowrap",
+            md: "row",
+          },
+          maxWidth: "100%",
+          textAlign: "left",
+          alignItems: isCentered ? "center" : null,
+        }
+      : {};
+    const baseBorderStyles = isBordered
+      ? {
+          border: "1px solid",
+          borderColor: "ui.gray.medium",
+        }
+      : {};
+    const bodyPadding = getBodyPaddingStyles({
+      isBordered,
+      hasImage,
+      imageIsAtEnd,
+      isRow,
+    });
+    let bodyMargin = null;
+    if (isCentered) {
+      bodyMargin = "auto";
+      if (isRow) {
+        bodyMargin = "0";
+      }
+    }
+    return {
+      alignItems: "flex-start",
+      display: "flex",
+      flexFlow: "column wrap",
+      textAlign: isCentered ? "center" : null,
+      actions: {
+        flexShrink: { base: isAlignedRightActions ? "0" : null, md: "0" },
+        marginLeft: { base: "0", md: "m" },
+        marginTop: { base: "xs", md: "0" },
+        maxWidth: { base: "100%", md: "180px" },
+        width: "100%",
+      },
+      body: {
+        display: { md: "block" },
+        flexBasis: { sm: isRow ? "100%" : null },
+        flexFlow: { md: "row nowrap" },
+        margin: bodyMargin,
+        padding: bodyPadding,
+        width: { base: "100%", md: "auto" },
+      },
+      heading: {
+        marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
+      },
+      ...baseBorderStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+const CardActions = {
+  baseStyle: ({
+    bottomBorder,
+    isCentered,
+    layout,
+    topBorder,
+  }: CardActionsBaseStyleProps) => {
+    let justifyContent = null;
+    // Only center in the column layout.
+    if (layout === "row") {
+      justifyContent = "left";
+    } else if (isCentered) {
+      justifyContent = "center";
+    }
+
+    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: ({
+    imageIsAtEnd,
+    isCentered,
+    layout,
+    size,
+  }: CardImageBaseStyleProps) => {
+    // These sizes are only for the "row" layout.
+    const imageSize = size ? imageSizes[size] : {};
+    const layoutStyles =
+      layout === "row"
+        ? {
+            flex: { md: "0 0 225px" },
+            maxWidth: { base: "100%", md: "50%" },
+            textAlign: "left",
+            alignItems: isCentered ? "center" : null,
+            margin: {
+              base: imageIsAtEnd ? "var(--nypl-space-m) 0 0" : null,
+              md: imageIsAtEnd
+                ? "0 0 0 var(--nypl-space-m)"
+                : "0 var(--nypl-space-m) 0 0",
+            },
+            width: { base: "100%", md: null },
+            marginBottom: ["xs", "xs"],
+            ...imageSize,
+          }
+        : {
+            marginBottom: "xs",
+            width: "100%",
+          };
+    const imageIsAtEndStyles = imageIsAtEnd
+      ? {
+          marginBottom: "0",
+          marginTop: "s",
+          order: "2",
+        }
+      : {};
+
+    return {
+      ...imageIsAtEndStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+export default { Card, CardActions, CardContent, CardImage };

package/src/theme/components/checkbox.ts

@@ -0,0 +1,110 @@
+// @see https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/checkbox.ts
+// for available theme override options.
+
+import {
+  checkboxRadioLabelStyles,
+  checkboxRadioControlSize,
+  checkboxRadioHelperErrorTextStyle,
+} 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.disabled.primary",
+      svg: {
+        color: "ui.disabled.primary",
+      },
+    },
+
+    _indeterminate: {
+      color: "ui.focus",
+      borderColor: "ui.focus",
+    },
+  },
+
+  _indeterminate: {
+    color: "ui.focus",
+    borderColor: "ui.focus",
+  },
+
+  _disabled: {
+    bg: "ui.white",
+    borderColor: "ui.disabled.primary",
+  },
+
+  _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 baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
+
+const baseStyle = {
+  icon: baseStyleIcon,
+  control: baseStyleControl,
+  label: baseStyleLabel,
+  helperErrorText: baseStyleHelperErrorText,
+};
+
+// Sticking to "lg" for the default size.
+const sizes = {
+  lg: {
+    // Controls the width/height of the checkbox itself.
+    control: {
+      ...checkboxRadioControlSize,
+      borderRadius: "checkbox",
+    },
+    // Controls the font-size of the label only.
+    label: { fontSize: "label.default" },
+  },
+};
+
+const Checkbox = {
+  parts: ["helperErrorText", "icon", "control", "label"],
+  baseStyle,
+  sizes,
+  // Default values
+  defaultProps: {
+    size: "lg",
+    colorScheme: "white",
+  },
+};
+
+export default Checkbox;

package/src/theme/components/checkboxGroup.ts

@@ -0,0 +1,10 @@
+import { checkboxRadioGroupStyles } from "./global";
+
+const CheckboxGroup = {
+  parts: ["helperErrorText", "stack"],
+  baseStyle: ({ isFullWidth = false }) => ({
+    ...checkboxRadioGroupStyles(isFullWidth),
+  }),
+};
+
+export default CheckboxGroup;

package/src/theme/components/componentWrapper.ts

@@ -0,0 +1,14 @@
+interface ComponentWrapperProps {
+  hasChildren: boolean;
+}
+
+const ComponentWrapper = {
+  parts: ["helperErrorText"],
+  baseStyle: ({ hasChildren }: ComponentWrapperProps) => ({
+    helperErrorText: {
+      marginTop: hasChildren ? null : "0",
+    },
+  }),
+};
+
+export default ComponentWrapper;

package/src/theme/components/customTable.ts

@@ -0,0 +1,77 @@
+interface BaseStyleProps {
+  columnHeadersTextColor?: string;
+  showRowDividers?: boolean;
+  useRowHeaders?: boolean;
+}
+
+export const baseTHStyles = (
+  showRowDividers = false,
+  columnHeadersTextColor = ""
+) => ({
+  border: showRowDividers ? undefined : "none",
+  borderBottom: showRowDividers ? undefined : "0px",
+  color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
+  fontSize: "0",
+  fontWeight: "bold",
+  letterSpacing: "0",
+  paddingLeft: 0,
+  paddingRight: "m",
+  textTransform: "capitalize",
+  _first: {
+    paddingLeft: showRowDividers ? "m" : null,
+  },
+  _last: {
+    paddingRight: showRowDividers ? "m" : "0",
+  },
+});
+export const baseTDStyles = (
+  showRowDividers = false,
+  useRowHeaders = false
+) => ({
+  border: showRowDividers ? undefined : "none",
+  borderBottom: showRowDividers ? undefined : "0px",
+  letterSpacing: "0",
+  paddingLeft: 0,
+  paddingRight: "m",
+  _first: {
+    paddingLeft: showRowDividers && !useRowHeaders ? "m" : null,
+  },
+  _last: {
+    paddingRight: showRowDividers ? "m" : "0",
+  },
+});
+export const baseStyle = ({
+  columnHeadersTextColor,
+  showRowDividers,
+  useRowHeaders,
+}: BaseStyleProps) => ({
+  // Headers `th` can be rendered as the first cell in every row through the
+  // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
+  // with a custom color, the row header `th` in the `tbody` should always
+  // have text color black.
+  tbody: {
+    th: {
+      color: "var(--nypl-colors-ui-black)",
+    },
+  },
+  th: baseTHStyles(showRowDividers, columnHeadersTextColor),
+  td: baseTDStyles(showRowDividers, useRowHeaders),
+  caption: {
+    captionSide: "top",
+    color: "ui.black",
+    fontSize: "heading.secondary",
+    fontWeight: "heading.secondary",
+    marginBottom: "s",
+    marginLeft: "0",
+    marginRight: "0",
+    marginTop: "0",
+    padding: "0",
+    textAlign: "left",
+  },
+});
+
+const CustomTable = {
+  baseStyle,
+};
+
+export default CustomTable;

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: "label.secondary",
+        marginBottom: "0",
+      },
+    },
+  },
+};
+
+export default DatePicker;

package/src/theme/components/fieldset.ts

@@ -0,0 +1,23 @@
+import { labelLegendText } from "./global";
+import { screenreaderOnly } from "./globalMixins";
+
+interface FieldSetProps {
+  isLegendHidden?: boolean;
+}
+
+const Fieldset = {
+  baseStyle: ({ isLegendHidden }: FieldSetProps) => {
+    const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+
+    return {
+      border: 0,
+      padding: 0,
+      legend: {
+        ...labelLegendText,
+        ...screenreaderStyles,
+      },
+    };
+  },
+};
+
+export default Fieldset;

package/src/theme/components/global.ts

@@ -0,0 +1,91 @@
+/** Export "mixin" styles. */
+export { wrapperStyles } from "./globalMixins";
+
+/** Reusable component styles. */
+
+// Used in `Select` and `TextInput`.
+const activeFocus = (darkMode = false) => ({
+  boxShadow: "none",
+  outline: "2px solid",
+  outlineOffset: "2px",
+  outlineColor: darkMode ? "ui.white" : "ui.focus",
+  zIndex: "9999",
+});
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioLabelStyles = {
+  userSelect: "none",
+  fontWeight: "text.default",
+  marginBottom: "0",
+  marginLeft: "xs",
+  width: "100%",
+  _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 checkboxRadioHelperErrorTextStyle = {
+  marginLeft: "30px", // calc(22px + var(--nypl-space-xs))
+  _disabled: {
+    color: "ui.gray.dark",
+    fontStyle: "italic",
+  },
+};
+const checkboxRadioGroupStyles = (isFullWidth = false) => ({
+  helperErrorText: {
+    marginTop: "xs",
+  },
+  label: {
+    width: isFullWidth ? "100%" : "fit-content",
+  },
+});
+// Used in `Label` and `Fieldset`.
+const labelLegendText = {
+  display: "inline-block",
+  fontSize: "label.default",
+  fontWeight: "label.default",
+  marginBottom: "xs",
+  width: "100%",
+  span: {
+    fontWeight: "regular",
+  },
+};
+// Used for the disabled state of Select and TextInput
+const selectTextInputDisabledStyles = {
+  bg: "ui.disabled.secondary",
+  borderColor: "ui.disabled.primary",
+  color: "ui.gray.dark",
+  opacity: "1",
+};
+// Used for the focus state of Select and TextInput
+const selectTextInputFocusStyles = {
+  ...activeFocus(),
+  borderColor: "ui.focus",
+};
+// Used for p, ul, and ol
+const textMargin = {
+  margin: "0",
+  marginBottom: "s",
+};
+
+export {
+  activeFocus,
+  checkboxRadioControlSize,
+  checkboxRadioGroupStyles,
+  checkboxRadioHelperErrorTextStyle,
+  checkboxRadioLabelStyles,
+  labelLegendText,
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
+  textMargin,
+};

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 screenreaderOnly = {
+  clip: "rect(1px, 1px, 1px, 1px)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute !important",
+  width: "1px",
+  wordWrap: "normal",
+};
+const wrapperStyles = {
+  marginY: "0",
+  marginX: "auto",
+  maxWidth: "1280px",
+  paddingTop: "0",
+  paddingBottom: "0",
+  paddingRight: "0",
+  paddingLeft: "0",
+  width: "100%",
+};
+
+export { screenreaderOnly, wrapperStyles };

package/src/theme/components/heading.ts

@@ -0,0 +1,79 @@
+import { baseLinkStyles } from "./link";
+
+const margins = {
+  marginTop: "0",
+  marginLeft: "0",
+  marginRight: "0",
+};
+
+// Heading Styles
+export const headings = {
+  h1: {
+    fontSize: "heading.primary", // var(--nypl-fontSizes-4);
+    fontWeight: "heading.primary",
+    letterSpacing: "0",
+    lineHeight: "1.1",
+    ...margins,
+    width: "auto",
+  },
+  h2: {
+    fontSize: "heading.secondary", // var(--nypl-fontSizes-3);
+    fontWeight: "heading.secondary",
+    lineHeight: "1.25",
+    ...margins,
+    width: "auto",
+  },
+  h3: {
+    fontSize: "heading.tertiary", // var(--nypl-fontSizes-2);
+    fontWeight: "heading.tertiary",
+    lineHeight: "1.25",
+    ...margins,
+    width: "auto",
+  },
+  h4: {
+    fontSize: "heading.callout", // var(--nypl-fontSizes-1);
+    fontWeight: "heading.callout",
+    lineHeight: "1.15",
+    ...margins,
+    width: "auto",
+  },
+  fallback: {
+    fontSize: "1", // var(--nypl-fontSizes-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 = {
+  baseStyle: ({ noSpace }) => ({
+    // This is to help target custom anchor elements
+    // passed as children to the Heading component.
+    a: baseLinkStyles,
+    marginBottom: noSpace ? "0" : "s",
+  }),
+  // Available variants:
+  // h1, h2, h3, h4, h5, h6,
+  // primary, secondary, tertiary, callout
+  variants,
+  defaultProps: {
+    variant: "secondary",
+  },
+};
+
+export default Heading;

package/src/theme/components/helperErrorText.ts

@@ -0,0 +1,14 @@
+interface HelperErrorTextBaseStyle {
+  isInvalid: boolean;
+}
+
+const helperErrorText = {
+  baseStyle: ({ isInvalid }: HelperErrorTextBaseStyle) => ({
+    marginTop: "xxs",
+    marginBottom: "0",
+    fontSize: "helper.default",
+    color: isInvalid ? "ui.error.primary" : "ui.black",
+  }),
+};
+
+export default helperErrorText;