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

package/src/theme/components/hero.ts

@@ -0,0 +1,240 @@
+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: "m",
+    paddingBottom: "m",
+    paddingRight: "s",
+    paddingLeft: "s",
+    p: {
+      marginBottom: "0",
+      marginTop: "s",
+    },
+  },
+  heading: {
+    marginBottom: "0",
+    _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/horizontalRule.ts

@@ -0,0 +1,13 @@
+const HorizontalRule = {
+  baseStyle: ({ align }) => ({
+    bg: "ui.gray.light-cool",
+    border: "0",
+    height: "2px",
+    marginBottom: "s",
+    marginTop: "s",
+    marginLeft: align === "left" ? 0 : "auto",
+    marginRight: align === "right" ? 0 : "auto",
+  }),
+};
+
+export default HorizontalRule;

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(--nypl-space-xxl)",
+    width: "var(--nypl-space-xxl)",
+  },
+  xxlarge: {
+    height: "var(--nypl-space-xl)",
+    width: "var(--nypl-space-xl)",
+  },
+  xlarge: {
+    height: "var(--nypl-space-l)",
+    width: "var(--nypl-space-l)",
+  },
+  large: {
+    height: "var(--nypl-space-m)",
+    width: "var(--nypl-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(--nypl-colors-ui-white)",
+      display: { md: "none" },
+    },
+  },
+};
+
+export default Icon;

package/src/theme/components/image.ts

@@ -0,0 +1,116 @@
+const imageWrap = {
+  position: "relative",
+  width: "100%",
+  height: "auto",
+  overflow: "hidden",
+};
+const sideMarginsAuto = {
+  marginLeft: "auto",
+  marginRight: "auto",
+};
+const imageSizes = {
+  default: {
+    maxWidth: "100%",
+  },
+  small: {
+    ...sideMarginsAuto,
+    maxWidth: "165px",
+  },
+  medium: {
+    ...sideMarginsAuto,
+    maxWidth: "225px",
+  },
+  large: {
+    ...sideMarginsAuto,
+    maxWidth: "360px",
+  },
+};
+const imageRatios = {
+  fourByThree: {
+    ...imageWrap,
+    paddingBottom: "75%",
+  },
+  oneByTwo: {
+    ...imageWrap,
+    paddingBottom: "200%",
+  },
+  original: {
+    ...imageWrap,
+  },
+  sixteenByNine: {
+    ...imageWrap,
+    paddingBottom: "56.25%",
+  },
+  square: {
+    ...imageWrap,
+    paddingBottom: "100%",
+  },
+  threeByFour: {
+    ...imageWrap,
+    paddingBottom: "133.33%",
+  },
+  threeByTwo: {
+    ...imageWrap,
+    paddingBottom: "66.66%",
+  },
+  twoByOne: {
+    ...imageWrap,
+    paddingBottom: "50%",
+  },
+};
+const CustomImage = {
+  parts: ["captionWrappers"],
+  variants: {
+    circle: {
+      img: {
+        borderRadius: "50%",
+      },
+    },
+  },
+  baseStyle: ({ size = "default" }) => ({
+    figure: {
+      margin: "auto",
+      ...imageSizes[size],
+      img: {
+        marginBottom: "xxs",
+      },
+    },
+    figcaption: {
+      fontStyle: "italic",
+    },
+    img: {
+      display: "block",
+      boxSizing: "border-box",
+      objectFit: "cover",
+      position: "relative",
+      width: "100%",
+      ...imageSizes[size],
+    },
+    captionWrappers: {
+      marginBottom: "xxs",
+      fontSize: "-1",
+    },
+  }),
+};
+const CustomImageWrapper = {
+  parts: ["crop"],
+  baseStyle: ({ ratio = "original", size = "default" }) => ({
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "100%",
+    ...imageSizes[size],
+    crop: {
+      ...imageRatios[ratio],
+    },
+    img: {
+      height: "100%",
+      left: "0",
+      maxWidth: "100%",
+      position: "absolute",
+      top: "0",
+      width: "100%",
+    },
+  }),
+};
+
+export { CustomImage, CustomImageWrapper };

package/src/theme/components/label.ts

@@ -0,0 +1,10 @@
+import { labelLegendText } from "./global";
+
+const Label = {
+  parts: ["helper"],
+  baseStyle: {
+    ...labelLegendText,
+  },
+};
+
+export default Label;

package/src/theme/components/link.ts

@@ -0,0 +1,51 @@
+const variants = {
+  link: {},
+  disabled: {
+    color: "ui.gray.dark",
+    pointerEvents: "none",
+  },
+  moreLink: {
+    alignItems: "center",
+    display: "inline-flex",
+    svg: {
+      height: "s",
+      width: "s",
+      textDecoration: "none",
+      fill: "currentColor",
+    },
+    _hover: {
+      textDecoration: "underline",
+    },
+  },
+  button: {
+    width: "100px",
+    borderRadius: "sm",
+    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/list.ts

@@ -0,0 +1,73 @@
+const List = {
+  baseStyle: ({ inline, noStyling }) => ({
+    // Browser automatically applies margin, so by default we unset it.
+    margin: noStyling ? "0" : "unset",
+    listStyle: noStyling ? "none" : null,
+    marginInlineStart: "unset",
+    paddingLeft: noStyling ? "0" : "l",
+    padding: noStyling ? "0" : null,
+    display: inline ? "flex" : null,
+    li: {
+      marginRight: inline ? "xs" : null,
+      listStyleType: inline ? "none" : null,
+      _notFirst: {
+        marginTop: "xxs",
+      },
+    },
+  }),
+  variants: {
+    ul: ({ noStyling }) => ({
+      listStyle: "none",
+      li: {
+        _before: {
+          color: "ui.gray.medium",
+          // \2022 is the CSS Code/unicode for a bullet.
+          content: noStyling ? "unset" : `"\\2022"`,
+          // Needed to add space between the bullet and the text.
+          display: "inline-block",
+          fontWeight: "bold",
+          fontSize: "2",
+          lineHeight: "0.9",
+          marginLeft: "-1rem",
+          width: "1rem",
+        },
+      },
+    }),
+    dl: {
+      borderBottom: "1px solid",
+      borderColor: "ui.gray.light-cool",
+      paddingLeft: "0",
+      h2: {
+        borderTop: "3px solid",
+        borderColor: "section.research.primary",
+        margin: "0",
+        padding: "var(--nypl-space-xs) 0 0",
+      },
+      dl: {
+        display: "grid",
+        gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
+        gridTemplateRows: "1fr",
+        margin: "var(--nypl-space-xs) 0 0",
+      },
+      dt: {
+        borderTop: "1px solid",
+        borderColor: "ui.gray.light-cool",
+        fontSize: "0",
+        fontWeight: "bold",
+        paddingBottom: { base: "0", md: "s" },
+        paddingTop: "s",
+        paddingRight: { md: "m" },
+      },
+      dd: {
+        fontSize: "0",
+        margin: "0",
+        paddingBottom: "s",
+        borderTop: { base: "none", md: "1px solid" },
+        borderColor: { md: "ui.gray.light-cool" },
+        paddingTop: { md: "s" },
+      },
+    },
+  },
+};
+
+export default List;

package/src/theme/components/notification.ts

@@ -0,0 +1,93 @@
+import { NotificationTypes } from "../../components/Notification/NotificationTypes";
+
+const Notification = {
+  parts: ["container", "dismissibleButton", "icon"],
+  baseStyle: ({ centered, noMargin, notificationType }) => {
+    let bg = "ui.status.primary";
+    if (notificationType === NotificationTypes.Announcement) {
+      bg = "ui.gray.light-cool";
+    } else if (notificationType === NotificationTypes.Warning) {
+      bg = "ui.gray.xx-light-cool";
+    }
+    return {
+      bg,
+      display: "flex",
+      fontSize: "-1",
+      padding: "var(--nypl-space-s) var(--nypl-space-l)",
+      position: "relative",
+      textAlign: centered ? "center" : null,
+      borderRadius: noMargin ? "0" : "4px",
+      margin: noMargin ? "0" : "s",
+      container: {
+        margin: "auto",
+        width: "100%",
+        maxWidth: "var(--nypl-breakpoint-large)",
+      },
+      dismissibleButton: {
+        border: "none",
+        alignItems: "center",
+        bgColor: "inherit",
+        color: "ui.black",
+        display: "flex",
+        height: "32px",
+        width: "32px",
+        minWidth: "0",
+        position: "absolute",
+        right: "0",
+        top: "0",
+        _hover: {
+          bg: "inherit",
+        },
+      },
+      icon: {
+        flexShrink: "0",
+        marginRight: "s",
+      },
+    };
+  },
+};
+
+const NotificationContent = {
+  parts: ["content"],
+  baseStyle: ({ alignText, notificationType }) => ({
+    display: "flex",
+    justifyContent: "center",
+    content: {
+      width: "100%",
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
+      color:
+        notificationType === NotificationTypes.Warning
+          ? "brand.primary"
+          : "currentColor",
+    },
+  }),
+};
+
+const NotificationHeading = {
+  parts: ["heading"],
+  baseStyle: ({ centered, notificationType }) => {
+    let color = "ui.black";
+    if (notificationType === NotificationTypes.Announcement) {
+      color = "section.research.secondary";
+    } else if (notificationType === NotificationTypes.Warning) {
+      color = "brand.primary";
+    }
+    return {
+      display: "flex",
+      marginBottom: "xxs",
+      justifyContent: centered ? "center" : null,
+      heading: {
+        marginBottom: "0",
+        color,
+      },
+    };
+  },
+};
+
+export default {
+  Notification,
+  NotificationContent,
+  NotificationHeading,
+};

package/src/theme/components/pagination.ts

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