@nypl/design-system-react-components 0.25.5 → 0.25.6

package/CHANGELOG.md

@@ -8,6 +8,17 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.6 (December 16, 2021)
+
+### Adds
+
+- Adds export statements for `ProgressIndicator` and `Slider` components to `index.ts`.
+- Adds `Blogs` variant to `Breadcrumbs` component.
+
+### Changes
+
+- Adds "(Required)" text to the placeholder in the `SearchBar` component when `isRequired` is true.
+
 ## 0.25.5 (December 9, 2021)
 
 ### Fixes

package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,4 +1,5 @@
 export declare enum ColorVariants {
+    Blogs = "blogs",
     BooksAndMore = "booksAndMore",
     Locations = "locations",
     Research = "research",

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

@@ -2273,6 +2273,7 @@ function Accordion(props) {
 }
 
 (function (ColorVariants) {
+  ColorVariants["Blogs"] = "blogs";
   ColorVariants["BooksAndMore"] = "booksAndMore";
   ColorVariants["Locations"] = "locations";
   ColorVariants["Research"] = "research";
@@ -4099,6 +4100,15 @@ var Accordion$1 = {
 };
 
 // Variant styling
+var blogs = {
+  bg: "section.blogs.secondary",
+  color: "ui.black",
+  a: {
+    _hover: {
+      color: "ui.gray.xdark"
+    }
+  }
+};
 var booksAndMore = {
   bg: "section.books-and-more.secondary"
 };
@@ -4187,6 +4197,7 @@ var Breadcrumb = {
   },
   // Available variants:
   variants: {
+    blogs: blogs,
     booksAndMore: booksAndMore,
     locations: locations,
     research: research,
@@ -7312,6 +7323,88 @@ var Pagination$1 = function Pagination(props) {
   }, previousLiLink, getPaginationNumbers(currentPage), nextLiLink));
 };
 
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+
+var ProgressIndicator$1 = function ProgressIndicator(props) {
+  var _props$darkMode = props.darkMode,
+      darkMode = _props$darkMode === void 0 ? false : _props$darkMode,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      _props$indicatorType = props.indicatorType,
+      indicatorType = _props$indicatorType === void 0 ? ProgressIndicatorTypes.Linear : _props$indicatorType,
+      _props$isIndeterminat = props.isIndeterminate,
+      isIndeterminate = _props$isIndeterminat === void 0 ? false : _props$isIndeterminat,
+      labelText = props.labelText,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      _props$size = props.size,
+      size = _props$size === void 0 ? ProgressIndicatorSizes.Default : _props$size,
+      _props$value = props.value,
+      value = _props$value === void 0 ? 0 : _props$value;
+  var styles = react.useMultiStyleConfig("ProgressIndicator", {
+    darkMode: darkMode,
+    size: size
+  });
+  var finalValue = value;
+
+  if (finalValue < 0 || finalValue > 100) {
+    console.warn("ProgressIndicator: pass in a `value` between 0 and 100. Defaulting to 0.");
+    finalValue = 0;
+  }
+
+  var progressProps = {
+    id: id,
+    // If the label is visually shown, associate it with the progress indicator.
+    // Otherwise, the `aria-label` will be added.
+    "aria-label": showLabel ? null : labelText,
+    "aria-labelledby": showLabel ? id + "-label" : null,
+    // If `isIndeterminate` is true, then it overrides the `value` prop.
+    isIndeterminate: isIndeterminate || null,
+    value: isIndeterminate ? null : finalValue
+  };
+
+  var progressComponent = function progressComponent(indicatorType) {
+    // Only display the percentage text for the default size, not in the
+    // indeterminate state, and when `showLabel` is true.
+    if (indicatorType === ProgressIndicatorTypes.Circular) {
+      // For the small size, since the label won't be visible, we need to add
+      // it to the parent component's `aria-label` attribute.
+      if (size === ProgressIndicatorSizes.Small) {
+        progressProps["aria-label"] = labelText;
+      }
+
+      return React__default.createElement(react.Box, {
+        __css: styles.circularContainer
+      }, React__default.createElement(react.CircularProgress, Object.assign({}, progressProps, {
+        sx: styles.circular
+      }), showLabel && !isIndeterminate && size !== ProgressIndicatorSizes.Small && React__default.createElement(react.CircularProgressLabel, null, finalValue, "%")), showLabel && size !== ProgressIndicatorSizes.Small && React__default.createElement(Label, {
+        id: id + "-label",
+        htmlFor: id
+      }, labelText));
+    } // The Linear progress indicator is the default.
+
+
+    return React__default.createElement(React__default.Fragment, null, showLabel && React__default.createElement(Label, {
+      id: id + "-label",
+      htmlFor: id
+    }, labelText), React__default.createElement(react.Box, {
+      __css: styles.linearContainer
+    }, React__default.createElement(react.Progress, Object.assign({}, progressProps, {
+      sx: styles.linear
+    })), showLabel && !isIndeterminate && React__default.createElement(react.Box, {
+      __css: styles.linearPercentage
+    }, finalValue, "%")));
+  };
+
+  return React__default.createElement(react.Box, {
+    __css: styles
+  }, progressComponent(indicatorType));
+};
+
 var Radio$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -7602,7 +7695,8 @@ function SearchBar$1(props) {
   var helperErrorTextID = generateUUID();
   var ariaDescribedby = helperErrorTextID;
   var footnote = isInvalid ? invalidText : helperErrorText;
-  var finalAriaLabel = footnote ? labelText + " - " + footnote : labelText; // Render the `Select` component.
+  var finalAriaLabel = footnote ? labelText + " - " + footnote : labelText;
+  var textInputPlaceholder = (textInputProps == null ? void 0 : textInputProps.placeholder) + " " + (isRequired ? "(Required)" : ""); // Render the `Select` component.
 
   var selectElem = selectProps && React.createElement(Select$1, Object.assign({
     id: generateUUID(),
@@ -7619,7 +7713,7 @@ function SearchBar$1(props) {
   var textInputNative = textInputProps && React.createElement(TextInput, Object.assign({
     id: generateUUID(),
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
-    placeholder: textInputProps == null ? void 0 : textInputProps.placeholder,
+    placeholder: textInputPlaceholder,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,
     name: textInputProps == null ? void 0 : textInputProps.name,
     type: exports.TextInputTypes.text,
@@ -7759,6 +7853,224 @@ function SkeletonLoader$1(props) {
   })))));
 }
 
+/**
+ * The `Slider` component renders a singular value slider or a range slider
+ * with a min and max value. The value(s) can be updated through the slider
+ * thumb(s) or through the text input(s) elements.
+ */
+
+function Slider(props) {
+  var className = props.className,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,
+      helperText = props.helperText,
+      _props$id = props.id,
+      id = _props$id === void 0 ? generateUUID() : _props$id,
+      invalidText = props.invalidText,
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$isInvalid = props.isInvalid,
+      isInvalid = _props$isInvalid === void 0 ? false : _props$isInvalid,
+      _props$isRangeSlider = props.isRangeSlider,
+      isRangeSlider = _props$isRangeSlider === void 0 ? false : _props$isRangeSlider,
+      _props$isRequired = props.isRequired,
+      isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+      labelText = props.labelText,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      name = props.name,
+      _onChange = props.onChange,
+      _props$optReqFlag = props.optReqFlag,
+      optReqFlag = _props$optReqFlag === void 0 ? true : _props$optReqFlag,
+      _props$showBoxes = props.showBoxes,
+      showBoxes = _props$showBoxes === void 0 ? true : _props$showBoxes,
+      _props$showHelperInva = props.showHelperInvalidText,
+      showHelperInvalidText = _props$showHelperInva === void 0 ? true : _props$showHelperInva,
+      _props$showLabel = props.showLabel,
+      showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
+      _props$showValues = props.showValues,
+      showValues = _props$showValues === void 0 ? true : _props$showValues,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step;
+
+  var _React$useState = React.useState(defaultValue),
+      currentValue = _React$useState[0],
+      setCurrentValue = _React$useState[1];
+
+  var finalIsInvalid = isInvalid; // In the Range Slider, if the first value is bigger than the second value,
+  // then set the invalid state.
+
+  if (isRangeSlider && currentValue[0] > currentValue[1]) {
+    finalIsInvalid = true;
+  }
+
+  var optReqText = isRequired ? "Required" : "Optional";
+  var footnote = finalIsInvalid ? invalidText : helperText;
+  var styles = react.useMultiStyleConfig("CustomSlider", {
+    isDisabled: isDisabled,
+    isInvalid: finalIsInvalid,
+    isRangeSlider: isRangeSlider,
+    showBoxes: showBoxes
+  }); // Props that the `Slider` and `RangeSlider` Chakra
+  // components both use.
+
+  var sliderSharedProps = {
+    // Don't focus on the thumbs for every small change.
+    focusThumbOnChange: false,
+    id: id,
+    isDisabled: isDisabled,
+    max: max,
+    min: min,
+    name: name,
+    onChange: function onChange(val) {
+      return setCurrentValue(val);
+    },
+    // Call the passed in `onChange` function prop to get the
+    // *final* value once a user stops dragging the slider.
+    onChangeEnd: function onChangeEnd(val) {
+      return _onChange(val);
+    },
+    step: step
+  }; // Props that the two `TextInput` components use.
+
+  var textInputSharedProps = {
+    attributes: {
+      max: max,
+      min: min
+    },
+    isDisabled: isDisabled,
+    isInvalid: finalIsInvalid,
+    isRequired: isRequired,
+    // Never show the label or helper text for the `TextInput` component.
+    showHelperInvalidText: false,
+    showLabel: false,
+    step: step,
+    type: exports.TextInputTypes.number
+  };
+  /**
+   * This returns either the "start" or "end" `TextInput` component. Note that
+   * the "end" `TextInput` component is always rendered but the "start" is
+   * only used for the `isRangeSlider` case.
+   */
+
+  var getTextInput = function getTextInput(type) {
+    var inputProps = {
+      start: _extends({
+        // We only want the value for this box in the `isRangeSlider` case.
+        value: isRangeSlider ? currentValue[0].toString() : "",
+        onChange: function onChange(val) {
+          // If the value is empty, set it to 0.
+          var nextValue = parseInt(val.target.value, 10) ? parseInt(val.target.value, 10) : 0; // Only update the first value in the range.
+
+          var newValue = [nextValue, currentValue[1]];
+          setCurrentValue(newValue); // If the text input was updated directly,
+          // send the data back to the user.
+
+          _onChange && _onChange(newValue);
+        }
+      }, textInputSharedProps),
+      end: _extends({
+        // This text input *always* shows. In the default case, we only
+        // keep track of one value. For the `isRangeSlider` case, we keep
+        // track of an array but only want the second value.
+        value: isRangeSlider ? currentValue[1].toString() : currentValue.toString(),
+        onChange: function onChange(val) {
+          // If the value is empty, set it to 0.
+          var nextValue = parseInt(val.target.value, 10) ? parseInt(val.target.value, 10) : 0; // If the value entered is bigger than the max value,
+          // then set it to the max value.
+
+          if (nextValue > max) {
+            nextValue = max;
+          } // Only update the second value in the `isRangeSlider` case,
+          // or the single value in the default case.
+
+
+          var newValue = isRangeSlider ? [currentValue[0], nextValue] : nextValue;
+          setCurrentValue(newValue); // If the text input was updated directly,
+          // send the data back to the user.
+
+          _onChange && _onChange(newValue);
+        }
+      }, textInputSharedProps)
+    };
+    var updatedLabel = !isRangeSlider ? labelText : labelText + " - " + type + " value";
+    return React.createElement(TextInput, Object.assign({
+      id: id + "-textInput-" + type,
+      labelText: updatedLabel,
+      additionalStyles: _extends({}, styles.textInput, {
+        // Specific margins for each text input to
+        // push the elements inside.
+        marginRight: type === "start" ? "s" : null,
+        marginLeft: type === "end" ? "s" : null
+      })
+    }, inputProps[type]));
+  };
+  /**
+   * Returns a Chakra `Slider` or `RangeSlider` component based on the
+   * `isRangeSlider` prop from the DS `Slider` component.
+   */
+
+
+  var getSliderType = function getSliderType() {
+    return isRangeSlider ? React.createElement(react.RangeSlider // Both slider thumbs need values and should be in an array.
+    , Object.assign({
+      "aria-label": !showLabel ? [labelText + " - start value", labelText + " - end value"] : null,
+      "aria-labelledby": showLabel ? [id + "-label", id + "-label"] : null,
+      value: currentValue,
+      // Make the thumbs larger.
+      size: "lg"
+    }, sliderSharedProps), React.createElement(react.RangeSliderTrack, {
+      sx: styles.track
+    }, React.createElement(react.RangeSliderFilledTrack, {
+      sx: styles.filledTrack
+    })), React.createElement(react.RangeSliderThumb, {
+      index: 0,
+      sx: styles.thumb
+    }), React.createElement(react.RangeSliderThumb, {
+      index: 1,
+      sx: styles.thumb
+    })) : React.createElement(react.Slider, Object.assign({
+      "aria-label": !showLabel ? labelText : null,
+      "aria-labelledby": id + "-label",
+      value: currentValue,
+      // Make the thumb larger.
+      size: "lg"
+    }, sliderSharedProps), React.createElement(react.SliderTrack, {
+      sx: styles.track
+    }, React.createElement(react.SliderFilledTrack, {
+      sx: styles.filledTrack
+    })), React.createElement(react.SliderThumb, {
+      sx: styles.thumb
+    }));
+  };
+
+  return React.createElement(react.Box, {
+    className: className,
+    __css: styles
+  }, showLabel && React.createElement(Label, {
+    id: id + "-label",
+    // We can't target the slider thumbs since those are divs and we
+    // should link the label somewhere. So either target the first
+    // input box in a `RangeSlider` or the only input box in a `Slider`.
+    // When the input fields are not visible, remove this attribute.
+    htmlFor: showBoxes ? id + "-textInput-" + (isRangeSlider ? "start" : "end") : null,
+    optReqFlag: optReqFlag && optReqText
+  }, labelText), React.createElement(react.Box, {
+    __css: styles.container
+  }, showBoxes && isRangeSlider && getTextInput("start"), showValues && React.createElement(react.Box, {
+    __css: styles.leftValue
+  }, min), getSliderType(), showValues && React.createElement(react.Box, {
+    __css: styles.rightValue
+  }, max), showBoxes && getTextInput("end")), footnote && showHelperInvalidText && React.createElement(react.Box, {
+    __css: styles.helper
+  }, React.createElement(HelperErrorText, {
+    id: id + "-helperText",
+    isInvalid: finalIsInvalid
+  }, footnote)));
+}
+
 (function (StatusBadgeTypes) {
   StatusBadgeTypes["Low"] = "low";
   StatusBadgeTypes["Medium"] = "medium";
@@ -8558,12 +8870,14 @@ exports.List = List$1;
 exports.Modal = Modal;
 exports.Notification = Notification$1;
 exports.Pagination = Pagination$1;
+exports.ProgressIndicator = ProgressIndicator$1;
 exports.Radio = Radio$1;
 exports.RadioGroup = RadioGroup$1;
 exports.SearchBar = SearchBar$1;
 exports.Select = Select$1;
 exports.SimpleGrid = SimpleGrid;
 exports.SkeletonLoader = SkeletonLoader$1;
+exports.Slider = Slider;
 exports.StatusBadge = StatusBadge$1;
 exports.Tabs = Tabs;
 exports.Template = Template$1;