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

package/dist/design-system-react-components.esm.js

@@ -1,4 +1,4 @@
-import { useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Link as Link$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input as Input$1, Textarea, extendTheme, ChakraProvider, Radio as Radio$2, useRadioGroup, Select as Select$2, Skeleton as Skeleton$1, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Text as Text$2, useTheme } from '@chakra-ui/react';
+import { useStyleConfig, Icon as Icon$2, Box, Accordion as Accordion$2, AccordionPanel, AccordionItem, AccordionButton, Breadcrumb as Breadcrumb$1, BreadcrumbItem, BreadcrumbLink, Button as Button$2, Link as Link$2, Heading as Heading$2, useMultiStyleConfig, LinkBox, LinkOverlay, Checkbox as Checkbox$2, CheckboxGroup as CheckboxGroup$2, Stack, SimpleGrid as SimpleGrid$1, Input as Input$1, Textarea, extendTheme, ChakraProvider, CircularProgress, CircularProgressLabel, Progress, Radio as Radio$2, useRadioGroup, Select as Select$2, Skeleton as Skeleton$1, RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb, Slider as Slider$1, SliderTrack, SliderFilledTrack, SliderThumb, Tabs as Tabs$1, Tab, TabPanel, TabList, TabPanels, Text as Text$2, useTheme } from '@chakra-ui/react';
 export { Box, ButtonGroup, Center, Circle, Grid, GridItem, HStack, Square, Stack, Tab, TabList, TabPanel, TabPanels, VStack } from '@chakra-ui/react';
 import React__default, { createElement, cloneElement, Fragment, Children, forwardRef, useState, Component, useEffect } from 'react';
 import { v4 } from 'uuid';
@@ -2282,6 +2282,7 @@ function Accordion(props) {
 var ColorVariants;
 
 (function (ColorVariants) {
+  ColorVariants["Blogs"] = "blogs";
   ColorVariants["BooksAndMore"] = "booksAndMore";
   ColorVariants["Locations"] = "locations";
   ColorVariants["Research"] = "research";
@@ -4129,6 +4130,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"
 };
@@ -4217,6 +4227,7 @@ var Breadcrumb = {
   },
   // Available variants:
   variants: {
+    blogs: blogs,
     booksAndMore: booksAndMore,
     locations: locations,
     research: research,
@@ -7351,6 +7362,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 = 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(Box, {
+        __css: styles.circularContainer
+      }, React__default.createElement(CircularProgress, Object.assign({}, progressProps, {
+        sx: styles.circular
+      }), showLabel && !isIndeterminate && size !== ProgressIndicatorSizes.Small && React__default.createElement(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(Box, {
+      __css: styles.linearContainer
+    }, React__default.createElement(Progress, Object.assign({}, progressProps, {
+      sx: styles.linear
+    })), showLabel && !isIndeterminate && React__default.createElement(Box, {
+      __css: styles.linearPercentage
+    }, finalValue, "%")));
+  };
+
+  return React__default.createElement(Box, {
+    __css: styles
+  }, progressComponent(indicatorType));
+};
+
 var Radio$1 = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
       helperText = props.helperText,
@@ -7643,7 +7736,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 && createElement(Select$1, Object.assign({
     id: generateUUID(),
@@ -7660,7 +7754,7 @@ function SearchBar$1(props) {
   var textInputNative = textInputProps && 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: TextInputTypes.text,
@@ -7804,6 +7898,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 = 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 = 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: 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 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 ? createElement(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), createElement(RangeSliderTrack, {
+      sx: styles.track
+    }, createElement(RangeSliderFilledTrack, {
+      sx: styles.filledTrack
+    })), createElement(RangeSliderThumb, {
+      index: 0,
+      sx: styles.thumb
+    }), createElement(RangeSliderThumb, {
+      index: 1,
+      sx: styles.thumb
+    })) : createElement(Slider$1, Object.assign({
+      "aria-label": !showLabel ? labelText : null,
+      "aria-labelledby": id + "-label",
+      value: currentValue,
+      // Make the thumb larger.
+      size: "lg"
+    }, sliderSharedProps), createElement(SliderTrack, {
+      sx: styles.track
+    }, createElement(SliderFilledTrack, {
+      sx: styles.filledTrack
+    })), createElement(SliderThumb, {
+      sx: styles.thumb
+    }));
+  };
+
+  return createElement(Box, {
+    className: className,
+    __css: styles
+  }, showLabel && 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), createElement(Box, {
+    __css: styles.container
+  }, showBoxes && isRangeSlider && getTextInput("start"), showValues && createElement(Box, {
+    __css: styles.leftValue
+  }, min), getSliderType(), showValues && createElement(Box, {
+    __css: styles.rightValue
+  }, max), showBoxes && getTextInput("end")), footnote && showHelperInvalidText && createElement(Box, {
+    __css: styles.helper
+  }, createElement(HelperErrorText, {
+    id: id + "-helperText",
+    isInvalid: finalIsInvalid
+  }, footnote)));
+}
+
 var StatusBadgeTypes;
 
 (function (StatusBadgeTypes) {
@@ -8497,5 +8809,5 @@ function VideoPlayer$1(props) {
   }, embedCode)));
 }
 
-export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardEdition, CardHeading, CardLayouts, Checkbox, CheckboxGroup, CheckboxGroupLayoutTypes, ColorVariants, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, FormRow, GridGaps as FormSpacing, GridGaps, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Input, InputTypes, Label, Link$1 as Link, LinkTypes, List$1 as List, ListTypes, LogoNames, Modal, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupLayoutTypes, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, StatusBadge$1 as StatusBadge, StatusBadgeTypes, Tabs, Template$1 as Template, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextDisplaySizes, TextInput, TextInputTypes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useNYPLTheme };
+export { Accordion, Breadcrumbs, Button, ButtonTypes, Card, CardActions, CardContent, CardEdition, CardHeading, CardLayouts, Checkbox, CheckboxGroup, CheckboxGroupLayoutTypes, ColorVariants, DSProvider, DatePicker, DatePickerTypes, Fieldset, Form, FormField, FormRow, GridGaps as FormSpacing, GridGaps, Heading, HeadingDisplaySizes, HeadingLevels, HelperErrorText, Hero$1 as Hero, HeroTypes, HorizontalRule$1 as HorizontalRule, Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, Image, ImageRatios, ImageSizes, ImageTypes, Input, InputTypes, Label, Link$1 as Link, LinkTypes, List$1 as List, ListTypes, LogoNames, Modal, Notification$1 as Notification, NotificationTypes, Pagination$1 as Pagination, ProgressIndicator$1 as ProgressIndicator, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioGroupLayoutTypes, SearchBar$1 as SearchBar, Select$1 as Select, SimpleGrid, SkeletonLoader$1 as SkeletonLoader, SkeletonLoaderImageRatios, SkeletonLoaderLayouts, Slider, StatusBadge$1 as StatusBadge, StatusBadgeTypes, Tabs, Template$1 as Template, TemplateAppContainer, TemplateBreakout$1 as TemplateBreakout, TemplateContent$1 as TemplateContent, TemplateContentPrimary$1 as TemplateContentPrimary, TemplateContentSidebar$1 as TemplateContentSidebar, TemplateContentTop$1 as TemplateContentTop, TemplateFooter, TemplateHeader$1 as TemplateHeader, Text$1 as Text, TextDisplaySizes, TextInput, TextInputTypes, VideoPlayer$1 as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, useNYPLTheme };
 //# sourceMappingURL=design-system-react-components.esm.js.map