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

package/README.md

@@ -6,8 +6,6 @@
 
 The Reservoir Design System (DS) is NYPL’s open-source extensible React library for products and experiences with the accessibility as its foundation. It ships functional, stateless components with consistent NYPL styling. You can learn more about the project and its goals [on the project's wiki](https://github.com/NYPL/nypl-design-system/wiki).
 
-_Note: This library is still in beta. Until we release the stable `1.0.0` version, we are loosely using semantic versioning._
-
 Storybook documentation
 
 - [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page)

package/dist/components/Slider/Slider.d.ts

@@ -4,8 +4,7 @@ export interface SliderProps {
     /** Additional class name for the Slider component. */
     className?: string;
     /** The initial value for the single `Slider` or an array of two number
-     * values for the `isRangeSlider` case.
-     */
+     * values for the `isRangeSlider` case. */
     defaultValue?: number | number[];
     /** Optional string to populate the HelperErrorText for standard state */
     helperText?: HelperErrorTextType;

package/dist/components/TextInput/TextInput.d.ts

@@ -33,7 +33,8 @@ export interface InputProps {
     labelText: string;
     /** The max number for a `number` TextInput type. */
     max?: number;
-    /** The max length of the input field. */
+    /** The max length of the input field. This prop is for all input types
+     * except for the `number` type. */
     maxLength?: number;
     /** The min number for a `number` TextInput type. */
     min?: number;

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

@@ -2618,6 +2618,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     name: "TextInput",
     showLabel: showLabel
   });
+  var finalIsInvalid = isInvalid;
   var fieldOutput;
   var options;
 
@@ -2625,6 +2626,11 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     console.warn("NYPL Reservoir TextInput: This component's required `id` prop was not passed.");
   }
 
+  if (type === "number" && max && min && min > max) {
+    finalIsInvalid = true;
+    console.warn("NYPL Reservoir TextInput: The `min` prop is greater than the `max` prop.");
+  }
+
   if (type === "tel" || type === "url" || type === "email") {
     var example = TextInputFormats[type] || "";
     footnote = React.createElement(React.Fragment, null, "Ex: ", example, React.createElement("br", null), footnote);
@@ -2643,7 +2649,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     id: id,
     isDisabled: isDisabled,
     isRequired: isRequired,
-    isInvalid: isInvalid,
+    isInvalid: finalIsInvalid,
     max: max,
     maxLength: maxLength,
     min: min,
@@ -2674,10 +2680,10 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
 
   return React.createElement(ComponentWrapper, Object.assign({
     className: className,
-    helperText: helperText,
+    helperText: !finalIsInvalid ? footnote : helperText,
     id: id,
     invalidText: finalInvalidText,
-    isInvalid: isInvalid,
+    isInvalid: finalIsInvalid,
     showHelperInvalidText: showHelperInvalidText && !isHidden,
     __css: styles
   }, rest), labelText && showLabel && !isHidden && React.createElement(Label, {
@@ -5246,7 +5252,8 @@ var baseStyle$2 = {
   control: baseStyleControl$1,
   label: baseStyleLabel$1,
   // Custom element in the DS Radio component.
-  helperErrorText: baseStyleHelperErrorText$1
+  helperErrorText: baseStyleHelperErrorText$1,
+  hiddenLabel: screenreaderOnly
 }; // Sticking to "md" for the default size.
 
 var sizes$1 = {
@@ -5258,7 +5265,7 @@ var sizes$1 = {
   }
 };
 var Radio = {
-  parts: ["control", "helperErrorText", "label"],
+  parts: ["control", "helperErrorText", "hiddenLabel", "label"],
   baseStyle: baseStyle$2,
   sizes: sizes$1,
   // Default values
@@ -5966,7 +5973,10 @@ var TemplateContentPrimary = {
 };
 var TemplateContentSidebar = {
   baseStyle: {
-    flex: "0 0 255px",
+    flex: {
+      base: "0 0 auto",
+      md: "0 0 255px"
+    },
     order: {
       md: "page.vstack"
     },
@@ -9447,7 +9457,9 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
       value = props.value,
       rest = _objectWithoutPropertiesLoose(props, _excluded$1A);
 
-  var styles = react.useMultiStyleConfig("Radio", {});
+  var styles = react.useMultiStyleConfig("Radio", {
+    showLabel: showLabel
+  });
   var footnote = isInvalid ? invalidText : helperText;
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
@@ -9455,7 +9467,10 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     labelText: labelText,
     name: "Radio",
     showLabel: showLabel
-  });
+  }); // We can't use the aria-label because of how Chakra renders its
+  // Radio component. Instead, we'll visually hide the label.
+
+  delete ariaAttributes["aria-label"];
 
   if (!id) {
     console.warn("NYPL Reservoir Radio: This component's required `id` prop was not passed.");
@@ -9481,7 +9496,10 @@ var Radio$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function
     value: value,
     alignItems: "flex-start",
     __css: styles
-  }, ariaAttributes), showLabel && labelText));
+  }, ariaAttributes), React.createElement(react.Box, {
+    as: "span",
+    __css: showLabel ? {} : styles.hiddenLabel
+  }, labelText)));
 }));
 
 var _excluded$1B = ["children", "className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isFullWidth", "isInvalid", "isRequired", "labelText", "layout", "name", "onChange", "showHelperInvalidText", "showLabel", "showRequiredLabel"];
@@ -10016,8 +10034,13 @@ var Slider = /*#__PURE__*/react.chakra(function (props) {
 
   if (isRangeSlider && currentValue[0] > currentValue[1]) {
     finalIsInvalid = true;
-  } // const footnote = finalIsInvalid ? invalidText : helperText;
+    console.warn("NYPL Reservoir Slider: The RangeSlider's first value is greater than the second value.");
+  }
 
+  if (min > max) {
+    finalIsInvalid = true;
+    console.warn("NYPL Reservoir Slider: The `min` prop is greater than the `max` prop.");
+  }
 
   var styles = react.useMultiStyleConfig("CustomSlider", {
     isDisabled: isDisabled,