@nypl/design-system-react-components 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -8,6 +8,22 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.5.1 (March 23, 2023)
+
+### Updates
+
+- Updates the `Button` component to use a transparent background for the default state of the "secondary" variant.
+- Updates the `Hero` component so that the height of the image in the "campaign" and "fiftyFifty" variants will grow and shrink based on the text content.
+- Updates the `SearchBar` component to include `defaultValue` as a prop in `textInputProps`.
+
+### Removes
+
+- Removes the `Color Mode` docs page from Storybook due to the addition of the `Supporting Dark Mode` docs page.
+
+### Fixes
+
+- Removes the `Slider` component's internal state update function (`setCurrentValue`) from Chakra's own `RangeSlider` component's `onChangeEnd` prop function. This fixes an issue where both Chakra's `onChange` and `onChangeEnd` prop functions were being called regardless of whether they were passed to the DS `Slider` component or not. Since Chakra's `onChange` function will always be called, the internal state function is kept. This ensures that there is no multiple calls or loop of state update calls when using keyboard controls to change the range slider's value.
+
 ## 1.5.0 (March 16, 2023)
 
 ### Adds

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

@@ -9,7 +9,7 @@ interface SelectOptionsProps {
 export declare type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
     optionsData: SelectOptionsProps[];
 };
-export declare type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
+export declare type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "defaultValue" | "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
     action?: string;

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

@@ -5193,7 +5193,6 @@ var secondary = function secondary(_ref2) {
   var _ref2$buttonSize = _ref2.buttonSize,
     buttonSize = _ref2$buttonSize === void 0 ? "medium" : _ref2$buttonSize;
   return _extends({
-    bg: "ui.white",
     border: "1px solid",
     borderColor: "ui.link.primary",
     color: "ui.link.primary"
@@ -7702,13 +7701,13 @@ var campaign = {
   },
   position: "relative",
   content: {
-    alignItems: "center",
+    alignItems: "stretch",
     bg: "ui.black",
     color: "ui.white",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
-      md: "row nowrap"
+      lg: "row nowrap"
     },
     minHeight: "320px",
     flex: {
@@ -7732,60 +7731,63 @@ var campaign = {
     color: "inherit",
     display: "inline-block"
   },
-  img: {
-    flex: {
-      base: "1 1 100%",
-      md: "0 0 50%"
-    },
-    minWidth: "0",
-    objectFit: "cover",
-    width: "100%",
-    height: {
-      md: "320px"
+  img: /*#__PURE__*/screenreaderOnly(),
+  imgWrapper: {
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    minHeight: "230px",
+    width: {
+      base: "100%",
+      lg: "50%"
     }
   },
   interior: {
-    flex: {
-      base: "0 0 100%",
-      md: "0 0 50%"
-    },
-    padding: "inset.wide",
+    alignSelf: "center",
     maxWidth: {
       md: "960px"
+    },
+    padding: {
+      base: "inset.default",
+      md: "inset.wide"
+    },
+    width: {
+      base: "100%",
+      lg: "50%"
     }
   }
 };
 var fiftyFifty = {
   content: /*#__PURE__*/_extends({}, wrapperStyles, {
-    alignItems: "center",
+    alignItems: "stretch",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
       lg: "row nowrap"
-    },
-    paddingBottom: "s",
-    paddingEnd: "s",
-    paddingStart: "s",
-    padding: {
-      lg: "unset"
     }
   }),
   imgWrapper: {
-    marginBottom: {
-      base: "s",
-      lg: "unset"
-    },
-    marginEnd: {
-      base: "-15px",
-      lg: "s"
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    minHeight: "160px",
+    width: {
+      base: "100%",
+      lg: "50%"
+    }
+  },
+  img: /*#__PURE__*/screenreaderOnly(),
+  bodyText: {
+    alignSelf: "center",
+    maxWidth: {
+      md: "960px"
     },
-    marginStart: {
-      base: "-15px"
+    padding: {
+      base: "inset.default",
+      md: "inset.wide"
     },
-    maxWidth: {
+    width: {
+      base: "100%",
       lg: "50%"
-    },
-    width: "auto"
+    }
   }
 };
 var Hero = {
@@ -15541,13 +15543,19 @@ var Hero$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
   } else if (foregroundColor || backgroundColor) {
     console.warn("NYPL Reservoir Hero: The `foregroundColor` and/or `backgroundColor` " + "props have been passed, but the `'secondary'` `heroType` " + "variant will not use them.");
   }
-  var childrenToRender = heroType === "campaign" ? React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
+  var childrenToRender = heroType === "campaign" ? React__default.createElement(React__default.Fragment, null, React__default.createElement(react.Box, {
+    __css: _extends({}, styles.imgWrapper, {
+      backgroundImage: "url(" + imageProps.src + ")"
+    })
+  }, React__default.createElement(Image, {
     alt: imageProps.alt,
     src: imageProps.src
-  }), React__default.createElement(react.Box, {
+  })), React__default.createElement(react.Box, {
     __css: styles.interior
   }, finalHeading, subHeaderText)) : React__default.createElement(React__default.Fragment, null, heroType !== "primary" && heroType !== "tertiary" && React__default.createElement(react.Box, {
-    __css: styles.imgWrapper
+    __css: _extends({}, styles.imgWrapper, {
+      backgroundImage: heroType === "fiftyFifty" ? "url(" + imageProps.src + ")" : undefined
+    })
   }, React__default.createElement(Image, {
     alt: imageProps.alt,
     src: imageProps.src
@@ -16139,6 +16147,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
   }));
   // Render the `TextInput` component.
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
+    defaultValue: textInputProps == null ? void 0 : textInputProps.defaultValue,
     id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
     isClearable: textInputProps == null ? void 0 : textInputProps.isClearable,
     isClearableCallback: textInputProps == null ? void 0 : textInputProps.isClearableCallback,
@@ -16363,7 +16372,6 @@ var Slider = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (
       _onChange && _onChange(val);
     },
     onChangeEnd: function onChangeEnd(val) {
-      setCurrentValue(val);
       _onChangeEnd && _onChangeEnd(val);
     },
     step: step,