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

package/src/theme/components/notification.ts

@@ -1,132 +0,0 @@
-import { NotificationTypes } from "../../components/Notification/Notification";
-
-interface NotificationBaseStyle {
-  dismissible: boolean;
-  isCentered: boolean;
-  noMargin: boolean;
-  notificationType: NotificationTypes;
-}
-interface NotificationContentBaseStyle {
-  alignText: boolean;
-  icon: boolean;
-  notificationType: NotificationTypes;
-}
-interface NotificationHeadingBaseStyle {
-  icon: boolean;
-  isCentered: boolean;
-  notificationType: NotificationTypes;
-}
-
-const Notification = {
-  parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({
-    dismissible,
-    isCentered,
-    noMargin,
-    notificationType,
-  }: NotificationBaseStyle) => {
-    let bg = "ui.status.primary";
-    if (notificationType === "announcement" || notificationType === "warning") {
-      bg = "ui.gray.x-light-cool";
-    }
-    return {
-      bg,
-      display: "flex",
-      fontSize: "text.caption", // slightly smaller than the default size
-      position: "relative",
-      textAlign: isCentered ? "center" : null,
-      borderRadius: noMargin ? "0" : "4px",
-      margin: noMargin ? "0" : "s",
-      container: {
-        margin: "auto",
-        maxWidth: "var(--nypl-breakpoint-xl)",
-        padding: "inset.default",
-        paddingRight: dismissible ? "l" : null,
-        paddingLeft: isCentered && dismissible ? "l" : null,
-        width: "100%",
-      },
-      dismissibleButton: {
-        border: "none",
-        bgColor: "inherit",
-        alignItems: "center",
-        color: "ui.black",
-        display: "flex",
-        height: "32px",
-        width: "32px",
-        minWidth: "0",
-        position: "absolute",
-        right: "0",
-        top: "0",
-        svg: {
-          marginTop: "0",
-        },
-        _hover: {
-          bg: "inherit",
-        },
-      },
-      icon: {
-        flexShrink: "0",
-        marginRight: "s",
-      },
-    };
-  },
-};
-
-const NotificationContent = {
-  parts: ["content"],
-  baseStyle: ({
-    alignText,
-    icon,
-    notificationType,
-  }: NotificationContentBaseStyle) => ({
-    display: "flex",
-    justifyContent: "center",
-    content: {
-      color: notificationType === "warning" ? "brand.primary" : "currentColor",
-      marginTop: icon ? "xxxs" : "0",
-      paddingLeft: alignText
-        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
-        : null,
-      width: "100%",
-      // Links should always be black and underlined.
-      a: {
-        color: "ui.black",
-        _hover: {
-          color: "ui.black",
-        },
-      },
-    },
-  }),
-};
-
-const NotificationHeading = {
-  parts: ["heading"],
-  baseStyle: ({
-    icon,
-    isCentered,
-    notificationType,
-  }: NotificationHeadingBaseStyle) => {
-    let color = "ui.black";
-    if (notificationType === "announcement") {
-      color = "section.research.secondary";
-    } else if (notificationType === "warning") {
-      color = "brand.primary";
-    }
-    return {
-      display: "flex",
-      marginBottom: "xxs",
-      justifyContent: isCentered ? "center" : null,
-      heading: {
-        marginBottom: "0",
-        marginTop: icon ? "xxxs" : "0",
-        color,
-      },
-    };
-  },
-};
-
-export default {
-  Notification,
-  NotificationContent,
-  NotificationHeading,
-};

package/src/theme/components/pagination.ts

@@ -1,17 +0,0 @@
-const Pagination = {
-  parts: ["link"],
-  baseStyle: {
-    alignItems: "stretch",
-    display: "flex",
-    width: "100%",
-    link: {
-      lineHeight: "1.15",
-      textDecoration: "none",
-    },
-    ul: {
-      marginBottom: "0",
-    },
-  },
-};
-
-export default Pagination;

package/src/theme/components/progressIndicator.ts

@@ -1,67 +0,0 @@
-import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
-
-interface ProgressIndicatorBaseStyle {
-  darkMode: boolean;
-  size: ProgressIndicatorSizes;
-}
-
-const ProgressIndicator = {
-  parts: [
-    "circular",
-    "circularLabel",
-    "linear",
-    "linearContainer",
-    "linearPercentage",
-  ],
-  baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
-    return {
-      color: darkMode ? "ui.white" : "ui.black",
-      circular: {
-        // Note: we have to target the SVG HTMl elements in order
-        // to override the default styles.
-        svg: {
-          height: size === "default" ? "48px" : "24px",
-          width: size === "default" ? "48px" : "24px",
-          display: "block",
-          circle: {
-            _first: {
-              stroke: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
-            },
-            _last: {
-              stroke: darkMode ? "ui.white" : "ui.link.primary",
-            },
-          },
-        },
-      },
-      circularContainer: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        width: "fit-content",
-      },
-      linear: {
-        // Hard to target this specific element without using
-        // "Progress" as the key name in index.ts
-        "> div": {
-          bg: darkMode ? "ui.white" : "ui.link.primary",
-        },
-        flex: 25,
-        bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
-        height: {
-          base: "4px",
-          md: size === "default" ? "8px" : "4px",
-        },
-      },
-      linearContainer: {
-        display: "flex",
-        alignItems: "center",
-      },
-      linearPercentage: {
-        padding: "0 var(--nypl-space-xs)",
-        flex: 1,
-      },
-    };
-  },
-};
-
-export default ProgressIndicator;

package/src/theme/components/radio.ts

@@ -1,103 +0,0 @@
-import {
-  activeFocus,
-  checkboxRadioLabelStyles,
-  checkboxRadioControlSize,
-  checkboxRadioHelperErrorTextStyle,
-} 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: "round",
-  borderColor: "ui.black",
-  color: "ui.white",
-  outline: "none",
-  _checked: {
-    bg: "ui.white",
-    borderColor: "ui.focus",
-    color: "ui.white",
-    _disabled: {
-      borderColor: "ui.disabled.primary",
-      bg: "ui.white",
-      _before: {
-        bg: "ui.disabled.primary",
-      },
-    },
-    _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: "round",
-      bg: "ui.focus",
-    },
-  },
-  _disabled: {
-    borderColor: "ui.disabled.primary",
-    bg: "ui.white",
-  },
-  _focus: {
-    ...activeFocus(),
-    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 baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
-
-const baseStyle = {
-  // Chakra-inserted elements in the Chakra Radio component
-  control: baseStyleControl,
-  label: baseStyleLabel,
-  // Custom element in the DS Radio component.
-  helperErrorText: baseStyleHelperErrorText,
-};
-
-// Sticking to "md" for the default size.
-const sizes = {
-  md: {
-    control: {
-      ...checkboxRadioControlSize,
-    },
-    label: { fontSize: "label.default" },
-  },
-};
-
-const Radio = {
-  parts: ["control", "helperErrorText", "label"],
-  baseStyle,
-  sizes,
-  // Default values
-  defaultProps: {
-    size: "md",
-  },
-};
-
-export default Radio;

package/src/theme/components/radioGroup.ts

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

package/src/theme/components/searchBar.ts

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

package/src/theme/components/select.ts

@@ -1,72 +0,0 @@
-import {
-  selectTextInputDisabledStyles,
-  selectTextInputFocusStyles,
-} from "./global";
-
-interface SelectBaseStyle {
-  labelPosition: string;
-}
-
-const select = {
-  backgroundColor: "ui.white",
-  borderRadius: "sm",
-  borderColor: "ui.gray.medium",
-  fontSize: "text.caption",
-  paddingTop: "inset.narrow",
-  paddingRight: "inset.extrawide",
-  paddingBottom: "inset.narrow",
-  paddingLeft: "inset.default",
-  _hover: {
-    borderColor: "ui.gray.dark",
-  },
-  _active: selectTextInputFocusStyles,
-  _disabled: {
-    ...selectTextInputDisabledStyles,
-  },
-  _focus: selectTextInputFocusStyles,
-  _invalid: {
-    border: "1px solid",
-    borderColor: "ui.error.primary",
-    boxShadow: "none",
-  },
-};
-
-const Select = {
-  parts: ["helperText", "inline", "select"],
-  baseStyle: ({ labelPosition }: SelectBaseStyle) => {
-    return {
-      // The backgroundColor set to "ui.white" hides the arrow SVG icon when
-      // the component is focused. The background is added for dark mode and
-      // so we need to add specific selector.
-      ".chakra-select__icon-wrapper": {
-        zIndex: "9999",
-      },
-      inline: {
-        display: { md: "flex" },
-        gap: { md: "var(--nypl-space-xs)" },
-        alignItems: { md: "flex-end" },
-      },
-      select: {
-        ...select,
-        flex: labelPosition === "inline" ? { md: "1" } : null,
-      },
-    };
-  },
-  variants: {
-    searchbar: {
-      select: {
-        flex: "1 1 20%",
-        borderRightColor: { md: "transparent" },
-        borderRightRadius: { md: "none" },
-        _hover: {
-          borderRightColor: { md: "transparent" },
-        },
-      },
-    },
-  },
-  defaultProps: {
-    size: "md",
-  },
-};
-
-export default Select;

package/src/theme/components/skeletonLoader.ts

@@ -1,113 +0,0 @@
-import { keyframes } from "@chakra-ui/system";
-
-interface SkeletonLoaderBaseStyle {
-  imageAspectRatio: keyof typeof imagePaddingBottomStyles;
-  isBordered: boolean;
-  showImage?: boolean;
-}
-
-const element = {
-  borderRadius: "2px",
-  boxSizing: "border-box",
-  marginBottom: "xs",
-};
-const borderRules = {
-  border: "1px solid",
-  borderColor: "ui.gray.light-cool",
-  padding: "s",
-};
-const imagePaddingBottomStyles = {
-  landscape: "50%",
-  portrait: "133%",
-  square: "100%",
-};
-const imageRowHeightStyles = {
-  landscape: "110px",
-  portrait: "294px",
-  square: "220px",
-};
-// NYPL's skeleton loader component.
-const SkeletonLoader = {
-  parts: ["section", "image", "container", "heading", "content", "button"],
-  baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
-    const borderStyles = isBordered ? { ...borderRules } : {};
-
-    return {
-      margin: "auto",
-      width: "100%",
-      ...borderStyles,
-      section: {
-        marginBottom: "s",
-        _last: {
-          marginBottom: "0",
-        },
-      },
-      image: {
-        ...element,
-        boxSizing: "border-box",
-        flexShrink: "0",
-        height: "0",
-        overflow: "hidden",
-        paddingBottom: imagePaddingBottomStyles[imageAspectRatio],
-        position: "relative",
-        width: "100%",
-      },
-      container: {
-        marginTop: "s",
-        width: "100%",
-      },
-      heading: {
-        ...element,
-        height: "32px",
-      },
-      content: {
-        ...element,
-        height: "20px",
-      },
-      button: {
-        height: "32px",
-        margin: "auto",
-        maxWidth: "160px",
-        width: "100%",
-      },
-    };
-  },
-  variants: {
-    row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => ({
-      alignItems: "flex-start",
-      display: { md: "flex" },
-      image: {
-        overflow: { md: "visible" },
-        paddingBottom: { md: "0" },
-        position: { md: "relative" },
-        width: { md: "220px" },
-        height: { md: imageRowHeightStyles[imageAspectRatio] },
-      },
-      container: {
-        marginLeft: showImage ? { md: "m" } : null,
-        marginTop: { md: "0" },
-      },
-      button: {
-        margin: { md: "0" },
-      },
-    }),
-  },
-};
-
-// Fade animation
-const fade = () =>
-  keyframes({
-    from: { opacity: 0.9 },
-    "50%": { opacity: 0.7 },
-    to: { opacity: 0.9 },
-  });
-// Overriding Chakra's Skeleton animation.
-const Skeleton = {
-  baseStyle: {
-    borderRadius: "2px",
-    background: "ui.gray.light-cool",
-    animation: `${fade()} 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite`,
-  },
-};
-
-export { Skeleton, SkeletonLoader };

package/src/theme/components/skipNavigation.ts

@@ -1,29 +0,0 @@
-const SkipNavigation = {
-  baseStyle: {
-    ul: {
-      margin: "0",
-    },
-    // Don't display links by default...
-    a: {
-      backgroundColor: "ui.white",
-      height: "1px",
-      left: "-10000px",
-      overflow: "hidden",
-      position: "absolute",
-      top: "auto",
-      width: "1px",
-      // Only display when the user focuses on the links.
-      _focus: {
-        border: "1px solid var(—nypl-colors-ui-gray-dark)",
-        height: "auto",
-        left: "2rem",
-        padding:
-          "var(--nypl-space-inset-extranarrow) var(--nypl-space-inset-narrow)",
-        top: "3rem",
-        width: "auto",
-      },
-    },
-  },
-};
-
-export default SkipNavigation;

package/src/theme/components/slider.ts

@@ -1,95 +0,0 @@
-interface CustomSliderBaseStyle {
-  isDisabled: boolean;
-  isInvalid: boolean;
-  showBoxes: boolean;
-  showValues: boolean;
-}
-
-// Margins around the static display values.
-const staticValues = {
-  marginTop: "xs",
-  marginBottom: "xs",
-  marginRight: "s",
-  marginLeft: "0",
-};
-const CustomSlider = {
-  parts: [
-    "container",
-    "leftValue",
-    "rightValue",
-    "textInput",
-    "sliderContainer",
-    "filledTrack",
-    "track",
-    "thumb",
-  ],
-  baseStyle: ({
-    isDisabled,
-    isInvalid,
-    showBoxes,
-    showValues,
-  }: CustomSliderBaseStyle) => {
-    let baseColor = "ui.link.primary";
-    if (isInvalid) {
-      baseColor = "ui.error.primary";
-    } else if (isDisabled) {
-      baseColor = "ui.disabled.primary";
-    }
-
-    return {
-      container: {
-        display: "flex",
-        alignItems: "center",
-      },
-      leftValue: { ...staticValues, color: isDisabled ? "ui.gray.dark" : null },
-      rightValue: {
-        ...staticValues,
-        marginLeft: "s",
-        // If the text input boxes are shown, then there already is
-        // a margin, so we can set this static value to "0".
-        marginRight: showBoxes ? "0" : "s",
-        color: isDisabled ? "ui.gray.dark" : null,
-      },
-      textInput: {
-        // Allows for three or more digits present in the
-        // min or max value text input.
-        minWidth: "65px",
-        color: isInvalid ? "ui.error.primary" : "ui.black",
-      },
-      // This is added to the container so that the slider thumbs don't
-      // overflow past the container when the value boxes or min/max values
-      // are not shown.
-      sliderContainer: {
-        marginLeft: !showValues ? "xs" : null,
-        marginRight: !showBoxes && !showValues ? "xs" : null,
-      },
-      // Filled track doesn't have a _disabled or _invalid state...
-      // so we manually do it through the props.
-      filledTrack: {
-        bgColor: baseColor,
-      },
-      track: {
-        bgColor: "ui.gray.light-cool",
-        _disabled: {
-          bgColor: "ui.disabled.primary",
-        },
-      },
-      thumb: {
-        border: "1px solid",
-        // Thumb doesn't have an _invalid state...
-        // so we manually do it through the props.
-        borderColor: baseColor,
-        boxShadow: "none",
-        _active: {
-          transform: "translateY(-50%) scale(1.0)",
-        },
-        _disabled: {
-          bgColor: "ui.disabled.secondary",
-          borderColor: "ui.disabled.primary",
-        },
-      },
-    };
-  },
-};
-
-export default CustomSlider;

package/src/theme/components/statusBadge.ts

@@ -1,26 +0,0 @@
-const StatusBadge = {
-  baseStyle: {
-    borderRadius: "base",
-    color: "ui.black",
-    display: "block",
-    fontSize: "-1", // slightly smaller than the default size
-    fontStyle: "italic",
-    py: "inset.extranarrow",
-    px: "inset.narrow",
-    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;