@nypl/design-system-react-components 1.0.6 → 1.0.7

package/CHANGELOG.md

@@ -8,6 +8,15 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.7 (July 29, 2022)
+
+### Updates
+
+- Updates border color in the `Description` variant of the `List` component.
+- Updates how options are passed to the `SearchBar` component for its internal `Select` component.
+- Updates how style props are passed to the `Link` component when using with third-party libraries, such as React Router.
+- Updates the layout of the `Image` in the `Hero` "secondary" and "fiftyFifty" variants for mobile and desktop.
+
 ## 1.0.6 (July 21, 2022)
 
 ### Adds

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,13 +1,18 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 interface BaseProps {
+    id?: string;
     labelText: string;
     name: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     value?: string;
 }
+interface SelectOptionsProps {
+    text: string;
+    value: string;
+}
 export interface SelectProps extends BaseProps {
-    optionsData: string[];
+    optionsData: SelectOptionsProps[];
     onChange?: (event: React.FormEvent) => void;
 }
 export interface TextInputProps extends BaseProps {

package/dist/design-system-react-components.cjs.development.js

@@ -2117,7 +2117,7 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
   var variant = "link";
 
   if (typeof children === "string" && !href) {
-    throw new Error("`Link` needs the `href` prop.");
+    throw new Error("NYPL Reservoir Link: The `Link` component needs the `href` prop if its child element is a string.");
   }
 
   if (type === "action" || type === "forwards" || type === "backwards" || type === "external") {
@@ -2141,15 +2141,15 @@ var Link = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (pr
     // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32832
     // let children = React.Children.only(children);
     if (React__default.Children.count(children) > 1) {
-      throw new Error("Please pass only one child into `Link`.");
+      throw new Error("NYPL Reservoir Link: Please pass only one child into the `Link` component.");
     }
 
     var childrenToClone = children[0] ? children[0] : children;
     var childProps = childrenToClone.props;
-    return React__default.createElement(react.Box, {
+    return React__default.createElement(react.Box, Object.assign({
       as: "span",
       __css: style
-    }, React__default.cloneElement(childrenToClone, _extends({
+    }, rest), React__default.cloneElement(childrenToClone, _extends({
       className: className
     }, linkProps, childProps, {
       ref: ref,
@@ -2365,9 +2365,9 @@ var Image = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     className: className,
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
-  return React__default.createElement(react.Box, {
+  return React__default.createElement(react.Box, Object.assign({
     ref: finalRefs
-  }, caption || credit ? React__default.createElement(react.Box, Object.assign({
+  }, rest), caption || credit ? React__default.createElement(react.Box, Object.assign({
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
   }, rest), finalImage, React__default.createElement(react.Box, {
@@ -2378,7 +2378,11 @@ var Image = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, caption), credit && React__default.createElement(react.Box, {
     __css: styles.captionWrappers
   }, credit))) : finalImage);
-}));
+}), {
+  shouldForwardProp: function shouldForwardProp() {
+    return true;
+  }
+});
 
 var _excluded$Y = ["children"],
     _excluded2$1 = ["bottomBorder", "children", "isCentered", "layout", "topBorder"],
@@ -5508,21 +5512,32 @@ var secondaryBase = {
     flexFlow: {
       base: "column nowrap",
       md: "row wrap"
+    }
+  }),
+  imgWrapper: {
+    marginEnd: {
+      base: "calc(-50vw + 50%)",
+      md: "0"
+    },
+    marginStart: {
+      base: "calc(-50vw + 50%)",
+      md: "0"
+    },
+    flex: {
+      base: "1 1 100%",
+      md: "0 0 250px"
+    },
+    order: {
+      base: "2",
+      md: "3"
     },
     img: {
-      flex: {
-        base: "1 1 100%",
-        md: "0 0 250px"
-      },
-      order: {
-        md: "3"
-      },
       height: "150px",
       minWidth: "0",
       objectFit: "cover",
       width: "100%"
     }
-  }),
+  },
   bodyText: {
     paddingBottom: "inset.default",
     paddingEnd: {
@@ -5533,6 +5548,7 @@ var secondaryBase = {
       md: "1 1 50%"
     },
     order: {
+      base: "3",
       md: "2"
     }
   }
@@ -5540,18 +5556,14 @@ var secondaryBase = {
 
 var secondaryHeadingBase = {
   marginBottom: "0",
-  bg: "ui.black",
   color: "ui.white",
   flex: "1 1 100%",
   marginTop: "0",
   paddingBottom: "xxs",
   position: "relative",
   zIndex: "0",
-  order: {
-    md: "1"
-  },
+  order: "1",
   _before: {
-    bg: "ui.black",
     content: "\"\"",
     height: "100%",
     left: "-2000px",
@@ -5563,6 +5575,10 @@ var secondaryHeadingBase = {
 // update the background color.
 
 var getSecondaryVariantStyles = function getSecondaryVariantStyles(bgColor) {
+  if (bgColor === void 0) {
+    bgColor = "ui.black";
+  }
+
   return _extends({}, secondaryBase, {
     heading: _extends({}, secondaryHeadingBase, {
       bg: bgColor,
@@ -5609,11 +5625,7 @@ var primary$1 = {
     }
   }
 };
-
-var secondary$1 = /*#__PURE__*/_extends({}, secondaryBase, {
-  heading: /*#__PURE__*/_extends({}, secondaryHeadingBase)
-});
-
+var secondary$1 = /*#__PURE__*/getSecondaryVariantStyles();
 var secondaryBooksAndMore = /*#__PURE__*/getSecondaryVariantStyles("section.books-and-more.primary");
 var secondaryLocations = /*#__PURE__*/getSecondaryVariantStyles("section.locations.primary");
 var secondaryResearch = /*#__PURE__*/getSecondaryVariantStyles("section.research.primary");
@@ -5717,18 +5729,22 @@ var fiftyFifty = {
       lg: "unset"
     }
   }),
-  img: {
+  imgWrapper: {
     marginBottom: {
       base: "s",
       lg: "unset"
     },
     marginEnd: {
+      base: "-15px",
       lg: "s"
     },
+    marginStart: {
+      base: "-15px"
+    },
     maxWidth: {
-      base: "fit-content",
       lg: "50%"
-    }
+    },
+    width: "auto"
   }
 };
 var Hero = {
@@ -5904,18 +5920,18 @@ var baseUnorderedStyles = function baseUnorderedStyles(noStyling) {
     }
   });
 };
-var baseSectionDefinitionStyles = {
+var baseSectionDescriptionStyles = {
   borderBottom: "1px solid",
   borderColor: "ui.gray.light-cool",
   paddingStart: "0",
   h2: {
     borderTop: "3px solid",
-    borderColor: "section.research.primary",
+    borderColor: "ui.gray.medium",
     margin: "0",
     padding: "var(--nypl-space-xs) 0 0"
   }
 };
-var baseDefinitionStyles = /*#__PURE__*/_extends({}, baseSectionDefinitionStyles, {
+var baseDescriptionStyles = /*#__PURE__*/_extends({}, baseSectionDescriptionStyles, {
   dl: {
     display: "grid",
     gridTemplateColumns: {
@@ -5965,7 +5981,7 @@ var List = {
       return baseUnorderedStyles(noStyling);
     },
     ol: textMargin,
-    dl: baseDefinitionStyles
+    dl: baseDescriptionStyles
   }
 };
 
@@ -6882,10 +6898,10 @@ var StructuredContent = {
       }, baseUnorderedStyles()),
       ol: _extends({}, baseListStyles(), textMargin),
       // For section, h2 in the definition list.
-      section: baseSectionDefinitionStyles,
-      dl: baseDefinitionStyles.dl,
-      dt: baseDefinitionStyles.dt,
-      dd: baseDefinitionStyles.dd,
+      section: baseSectionDescriptionStyles,
+      dl: baseDescriptionStyles.dl,
+      dt: baseDescriptionStyles.dt,
+      dd: baseDescriptionStyles.dd,
       table: {
         width: "100%",
         th: _extends({
@@ -7623,7 +7639,8 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
     __css: styles.interior
   }, finalHeading, subHeaderText)) : React__default.createElement(React__default.Fragment, null, heroType !== "primary" && heroType !== "tertiary" && React__default.createElement(Image, {
     alt: imageProps.alt,
-    src: imageProps.src
+    src: imageProps.src,
+    __css: styles.imgWrapper
   }), finalHeading, heroType === "tertiary" && subHeaderText ? React__default.createElement("p", null, subHeaderText) : React__default.createElement(react.Box, {
     __css: styles.bodyText
   }, subHeaderText));
@@ -11222,7 +11239,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
 
 
   var selectElem = selectProps && React__default.createElement(Select$1, Object.assign({
-    id: "searchbar-select-" + id,
+    id: (selectProps == null ? void 0 : selectProps.id) || "searchbar-select-" + id,
     labelText: selectProps == null ? void 0 : selectProps.labelText,
     name: selectProps == null ? void 0 : selectProps.name,
     onChange: selectProps == null ? void 0 : selectProps.onChange,
@@ -11231,13 +11248,13 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
     __css: styles.select
   }, stateProps), selectProps == null ? void 0 : selectProps.optionsData.map(function (option) {
     return React__default.createElement("option", {
-      key: option,
-      value: option
-    }, option);
+      key: option.value,
+      value: option.value
+    }, option.text);
   })); // Render the `TextInput` component.
 
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
-    id: "searchbar-textinput-" + id,
+    id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
     name: textInputProps == null ? void 0 : textInputProps.name,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,