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

package/src/theme/components/hero.ts

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

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

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

@@ -1,135 +0,0 @@
-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",
-      ...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

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

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

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

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