@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

package/src/theme/components/card.ts

@@ -1,237 +0,0 @@
-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

@@ -1,110 +0,0 @@
-// @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

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

package/src/theme/components/componentWrapper.ts

@@ -1,14 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-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

@@ -1,91 +0,0 @@
-/** 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

@@ -1,24 +0,0 @@
-/**
- * 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

@@ -1,79 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;