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

package/src/theme/components/hero.ts

@@ -0,0 +1,238 @@
+import { wrapperStyles } from "./global";
+
+// Used for all "secondary" variants.
+const secondaryBase = {
+  overflowX: "hidden",
+  content: {
+    ...wrapperStyles,
+    paddingRight: "inset.default",
+    paddingLeft: "inset.default",
+    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: {
+    paddingBottom: "inset.default",
+    paddingTop: "inset.default",
+    paddingRight: { md: "inset.default" },
+    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: "inset.extrawide",
+    paddingBottom: "inset.extrawide",
+    paddingRight: "inset.wide",
+    paddingLeft: "inset.wide",
+    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",
+    padding: "inset.default",
+    p: {
+      marginBottom: "0",
+      marginTop: "s",
+    },
+  },
+  heading: {
+    marginBottom: "0",
+    _lastChild: {
+      marginBottom: "0",
+    },
+  },
+  p: {
+    marginBottom: "0",
+  },
+};
+const campaign = {
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "center",
+  marginBottom: ["0", "0", "xxl"],
+  minHeight: "300px",
+  overflow: "visible",
+  padding: {
+    base: "inset.wide",
+    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: "inset.wide",
+    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-cool",
+  },
+  // Available variants:
+  variants: {
+    primary,
+    secondary,
+    secondaryBooksAndMore,
+    secondaryLocations,
+    secondaryResearch,
+    secondaryWhatsOn,
+    tertiary,
+    campaign,
+    fiftyFifty,
+  },
+};
+
+export default Hero;

package/src/theme/components/horizontalRule.ts

@@ -0,0 +1,17 @@
+interface HorizontalRuleBaseStyle {
+  align: string;
+}
+
+const HorizontalRule = {
+  baseStyle: ({ align }: HorizontalRuleBaseStyle) => ({
+    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,88 @@
+const svgBase = {
+  display: "inline-block",
+  fill: "currentColor",
+  width: "auto",
+  height: "100%",
+};
+const align = {
+  none: {},
+  left: { marginRight: "xxs" },
+  right: { marginLeft: "xxs" },
+};
+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)",
+  },
+  default: {
+    width: "100%",
+  },
+  medium: {
+    height: "1.125rem",
+    width: "1.125rem",
+  },
+  small: {
+    height: "0.875rem",
+    width: "0.875rem",
+  },
+};
+interface IconBaseStyle {
+  align: keyof typeof align;
+  color: string;
+  iconRotation: keyof typeof iconRotation;
+  size: keyof typeof size;
+}
+const Icon = {
+  baseStyle: (props: IconBaseStyle) => {
+    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,136 @@
+interface CustomImageBaseStyle {
+  size: keyof typeof imageSizes;
+}
+interface CustomImageWrapperBaseStyle {
+  ratio: keyof typeof imageRatios;
+  size: keyof typeof imageSizes;
+}
+
+const imageWrap = {
+  position: "relative",
+  width: "100%",
+  height: "auto",
+  overflow: "hidden",
+};
+const sideMarginsAuto = {
+  marginLeft: "auto",
+  marginRight: "auto",
+};
+const imageSizes = {
+  default: {
+    maxWidth: "100%",
+  },
+  xxsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "64px",
+  },
+  xsmall: {
+    ...sideMarginsAuto,
+    maxWidth: "96px",
+  },
+  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" }: CustomImageBaseStyle) => ({
+    figure: {
+      margin: "auto",
+      width: "100%",
+      ...imageSizes[size],
+      img: {
+        marginBottom: "xxs",
+      },
+    },
+    figcaption: {
+      fontStyle: "italic",
+      fontSize: "text.tag",
+    },
+    img: {
+      display: "block",
+      boxSizing: "border-box",
+      objectFit: "cover",
+      position: "relative",
+      width: "100%",
+      ...imageSizes[size],
+    },
+    captionWrappers: {
+      marginTop: "xxs",
+    },
+  }),
+};
+const CustomImageWrapper = {
+  parts: ["crop"],
+  baseStyle: ({
+    ratio = "original",
+    size = "default",
+  }: CustomImageWrapperBaseStyle) => ({
+    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,15 @@
+import { labelLegendText } from "./global";
+
+interface LabelBaseStyle {
+  isInlined: boolean;
+}
+
+const Label = {
+  baseStyle: ({ isInlined }: LabelBaseStyle) => ({
+    ...labelLegendText,
+    flex: isInlined ? "1" : null,
+    whiteSpace: isInlined ? "nowrap" : null,
+  }),
+};
+
+export default Label;

package/src/theme/components/link.ts

@@ -0,0 +1,63 @@
+export const baseLinkStyles = {
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _hover: {
+    color: "ui.link.secondary",
+  },
+};
+
+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: {
+      color: "ui.link.secondary",
+      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: "button.default",
+    bg: "ui.link.primary",
+    _hover: {
+      color: "ui.white",
+      bg: "ui.link.secondary",
+      textDecoration: "none",
+    },
+  },
+};
+const Link = {
+  baseStyle: {
+    ...baseLinkStyles,
+    // This is needed for custom anchor elements or link components
+    // that are passed as children to the `Link` component.
+    a: {
+      _hover: {
+        color: "ui.link.secondary",
+      },
+    },
+  },
+  variants,
+};
+
+export default Link;

package/src/theme/components/list.ts

@@ -0,0 +1,88 @@
+import { textMargin } from "./global";
+
+interface ListBaseStyle {
+  inline?: boolean;
+  noStyling: boolean;
+}
+
+export const baseListStyles = (inline = false, noStyling = false) => ({
+  // 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: inline ? null : "xxs",
+    },
+  },
+});
+export const baseUnorderedStyles = (noStyling = false) => ({
+  ...textMargin,
+  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",
+    },
+  },
+});
+export const baseSectionDefinitionStyles = {
+  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",
+  },
+};
+export const baseDefinitionStyles = {
+  ...baseSectionDefinitionStyles,
+  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",
+    fontWeight: "label.default",
+    paddingBottom: { base: "0", md: "s" },
+    paddingTop: "s",
+    paddingRight: { md: "table.column" },
+  },
+  dd: {
+    margin: "0",
+    paddingBottom: "s",
+    borderTop: { base: "none", md: "1px solid" },
+    borderColor: { md: "ui.gray.light-cool" },
+    paddingTop: { md: "s" },
+  },
+};
+
+const List = {
+  baseStyle: ({ inline, noStyling }: ListBaseStyle) =>
+    baseListStyles(inline, noStyling),
+  variants: {
+    ul: ({ noStyling }: ListBaseStyle) => baseUnorderedStyles(noStyling),
+    ol: textMargin,
+    dl: baseDefinitionStyles,
+  },
+};
+
+export default List;

package/src/theme/components/logo.ts

@@ -0,0 +1,58 @@
+interface LogoBaseStyle {
+  size: keyof typeof size;
+}
+
+const svgBase = {
+  display: "inline-block",
+  height: "auto",
+  width: "100%",
+};
+const size = {
+  default: {
+    maxWidth: "100%",
+  },
+  xxsmall: {
+    maxWidth: "64px",
+  },
+  xsmall: {
+    maxWidth: "96px",
+  },
+  small: {
+    maxWidth: "165px",
+  },
+  medium: {
+    maxWidth: "225px",
+  },
+  large: {
+    maxWidth: "360px",
+  },
+  xlarge: {
+    maxWidth: "360px",
+  },
+  xxlarge: {
+    height: "var(--nypl-space-xl)",
+    width: "var(--nypl-space-xl)",
+  },
+  xxxlarge: {
+    height: "var(--nypl-space-xxl)",
+    width: "var(--nypl-space-xxl)",
+  },
+};
+const Logo = {
+  baseStyle: (props: LogoBaseStyle) => {
+    const allStyles = {
+      ...svgBase,
+      ...size[props.size],
+    };
+    return {
+      ...allStyles,
+      // We still want to style any custom SVG element that was
+      // passed to the `Logo` component.
+      svg: {
+        ...allStyles,
+      },
+    };
+  },
+};
+
+export default Logo;