@nypl/design-system-react-components 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -8,6 +8,25 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.2.2 (November 10, 2022)
+
+### Adds
+
+- Adds an `isClearable` prop to the `TextInput` component. When set to `true`, a close `Button` component will render on top of the input element. Once clicked, any text value in the input field will be cleared and focus will return to the input element.
+- Adds the `isClearable` property to the `textInputProps` prop object in the `SearchBar` component. This allows the `isClearable` prop to be passed to the `TextInput` component to render the close `Button` component.
+
+### Updates
+
+- Updates the `Icon` and `Logo` documentation to include size values in px.
+- Updates the spacing within the `tertiary` variant of the `Hero` component.
+- Updates the `Buttons Style Guide` to extend the information about button sizes.
+
+### Fixes
+
+- Fixes an invalid TOC link on the `Card` component Storybook page.
+- Fixes the sizing of the `errorFilled` and `errorOutline` icons in the `Icon` component.
+- Adds new props to Chakra's `ToolTip` to more forcefully close the DS `ToolTip`. New props include `closeDelay`, `closeOnClick`, `closeOnEsc`, and `closeOnMouseDown`.
+
 ## 1.2.1 (October 27, 2022)
 
 ### Adds

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

@@ -16,6 +16,7 @@ export interface SelectProps extends BaseProps {
     onChange?: (event: React.FormEvent) => void;
 }
 export interface TextInputProps extends BaseProps {
+    isClearable?: boolean;
     placeholder?: string;
 }
 export interface SearchBarProps {

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

@@ -22,6 +22,8 @@ export interface InputProps {
     id: string;
     /** Populates the HelperErrorText for the error state */
     invalidText?: HelperErrorTextType;
+    /** Adds a button to clear existing text in the input field. */
+    isClearable?: boolean;
     /** Adds the `disabled` and `aria-disabled` prop to the input when true */
     isDisabled?: boolean;
     /** Adds errored styling to the input/textarea and helper text elements */
@@ -48,6 +50,9 @@ export interface InputProps {
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /** Populates the placeholder for the input/textarea elements */
     placeholder?: string;
+    /** Allows the '(Required)' text to be changed for language purposes
+     * Note: Parenthesis will be added automatically by the component */
+    requiredLabelText?: string;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the label onscreen or hide it. Refer to the
@@ -56,9 +61,6 @@ export interface InputProps {
     /** Whether or not to display the "(Required)" text in the label text.
      * True by default. */
     showRequiredLabel?: boolean;
-    /** Allows the '(Required)' text to be changed for language purposes
-     * Note: Parenthesis will be added automatically by the component */
-    requiredLabelText?: string;
     /** The amount to increase or decrease when using the number type. */
     step?: number;
     /** FOR INTERNAL DS USE ONLY: the input variant to display. */

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

@@ -605,7 +605,7 @@ var SvgErrorFilled = function SvgErrorFilled(_ref) {
   }, title) : null, _path$n || (_path$n = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0Zm1.2 13.2h-2.4V6h2.4v7.2ZM10.8 18h2.4v-2.4h-2.4V18Z"
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1.003 11h-2V7h2v6Zm-2 3.998h2v-2h-2v2Z"
   })));
 };
 
@@ -619,7 +619,7 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
     titleId = _ref.titleId,
     props = _objectWithoutProperties$o(_ref, _excluded$o);
   return /*#__PURE__*/React.createElement("svg", _extends$p({
-    viewBox: "0 0 24 25",
+    viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img",
     "aria-labelledby": titleId
@@ -628,7 +628,7 @@ var SvgErrorOutline = function SvgErrorOutline(_ref) {
   }, title) : null, _path$o || (_path$o = /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M11.988.912C5.364.912 0 6.288 0 12.912s5.364 12 11.988 12c6.636 0 12.012-5.376 12.012-12s-5.376-12-12.012-12Zm1.212 13.2v-7.2h-2.4v7.2h2.4Zm0 4.8v-2.4h-2.4v2.4h2.4Zm-10.8-6c0 5.304 4.296 9.6 9.6 9.6 5.304 0 9.6-4.296 9.6-9.6 0-5.304-4.296-9.6-9.6-9.6a9.597 9.597 0 0 0-9.6 9.6Z"
+    d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2Zm1.013 5h-2v6h2V7Zm0 7.998h-2v2h2v-2Zm-9.002-2.996c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8-8 3.58-8 8Z"
   })));
 };
 
@@ -2450,8 +2450,7 @@ var Image = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
     size: size
   }, caption || credit ? {} : rest), imageComponent) : imageComponent;
   return React__default.createElement(react.Box, {
-    ref: finalRefs,
-    "data-testid": "test"
+    ref: finalRefs
   }, caption || credit ? React__default.createElement(react.Box, {
     as: "figure",
     __css: _extends({}, styles.figure, additionalFigureStyles)
@@ -3607,7 +3606,7 @@ var Label = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(function (p
   }, rest), children, isRequired && React__default.createElement("span", null, requiredLabelText ? " (" + requiredLabelText + ")" : " (Required)"));
 }));
 
-var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
+var _excluded$19 = ["className", "defaultValue", "helperText", "id", "invalidText", "isClearable", "isDisabled", "isInvalid", "isRequired", "labelText", "max", "maxLength", "min", "name", "onChange", "onClick", "onFocus", "placeholder", "showHelperInvalidText", "showLabel", "showRequiredLabel", "requiredLabelText", "step", "textInputType", "type", "value"];
 // Only used internally.
 var TextInputFormats = {
   email: "jdoe@domain.com",
@@ -3629,6 +3628,8 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     helperText = props.helperText,
     id = props.id,
     invalidText = props.invalidText,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
     _props$isDisabled = props.isDisabled,
     isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
     _props$isInvalid = props.isInvalid,
@@ -3659,12 +3660,24 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     type = _props$type === void 0 ? "text" : _props$type,
     value = props.value,
     rest = _objectWithoutPropertiesLoose(props, _excluded$19);
+  var _useState = React.useState(value || ""),
+    finalValue = _useState[0],
+    setFinalValue = _useState[1];
+  var closedRef = React.useRef();
+  var mergedRefs = react.useMergeRefs(closedRef, ref);
+  // If a ref is not passed, then merging refs won't work.
+  var finalRef = ref ? mergedRefs : closedRef;
   var styles = react.useMultiStyleConfig("TextInput", {
+    showLabel: showLabel,
     variant: textInputType
   });
   var isTextArea = type === "textarea";
   var isHidden = type === "hidden";
   var finalInvalidText = invalidText ? invalidText : "There is an error related to this field.";
+  var internalOnChange = function internalOnChange(e) {
+    setFinalValue(e.target.value);
+    onChange && onChange(e);
+  };
   var footnote = isInvalid ? finalInvalidText : helperText;
   var ariaAttributes = getAriaAttrs({
     footnote: footnote,
@@ -3673,9 +3686,20 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     name: "TextInput",
     showLabel: showLabel
   });
+  var onClearClick = function onClearClick() {
+    setFinalValue("");
+    // Set focus back to the input element.
+    finalRef.current.focus();
+  };
   var finalIsInvalid = isInvalid;
   var fieldOutput;
+  var clearButtonOutput;
   var options;
+  React.useEffect(function () {
+    if (value && value !== finalValue) {
+      setFinalValue(value);
+    }
+  }, [finalValue, value]);
   if (!id) {
     console.warn("NYPL Reservoir TextInput: This component's required `id` prop was not passed.");
   }
@@ -3693,8 +3717,8 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     id: id,
     "aria-hidden": isHidden,
     name: name,
-    onChange: onChange,
-    ref: ref
+    onChange: internalOnChange,
+    ref: finalRef
   } : _extends({
     "aria-required": isRequired,
     defaultValue: defaultValue,
@@ -3706,11 +3730,11 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     maxLength: maxLength,
     min: min,
     name: name,
-    onChange: onChange,
+    onChange: internalOnChange,
     onClick: onClick,
     onFocus: onFocus,
     placeholder: placeholder,
-    ref: ref,
+    ref: finalRef,
     // The `step` attribute is useful for the number type.
     step: type === "number" ? step : null
   }, ariaAttributes, rest);
@@ -3719,12 +3743,27 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   if (!isTextArea) {
     options = _extends({
       type: type,
-      value: value
+      value: finalValue
     }, options);
     fieldOutput = React__default.createElement(react.Input, Object.assign({}, options, {
       __css: styles.input
     }));
+    if (isClearable && !isHidden) {
+      clearButtonOutput = React__default.createElement(Button, {
+        buttonType: "text",
+        id: id + "-clear-btn",
+        onClick: onClearClick,
+        sx: styles.clearButton
+      }, React__default.createElement(Icon, {
+        color: "ui.black",
+        name: "close",
+        size: "medium"
+      }), React__default.createElement("span", null, "Clear ", labelText));
+    }
   } else {
+    if (isClearable) {
+      console.warn("NYPL Reservoir TextInput: The `isClearable` prop cannot be used with the `textarea` type.");
+    }
     fieldOutput = React__default.createElement(react.Textarea, Object.assign({}, options, {
       __css: styles.textarea
     }), value);
@@ -3742,7 +3781,7 @@ var TextInput = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
     id: id + "-label",
     isRequired: showRequiredLabel && isRequired,
     requiredLabelText: requiredLabelText
-  }, labelText), fieldOutput);
+  }, labelText), fieldOutput, !isHidden && finalValue.length > 0 && clearButtonOutput);
 }));
 
 var _excluded$1a = ["dsRef", "helperText", "id", "invalidText", "isDisabled", "isInvalid", "isRequired", "labelText", "name", "onChange", "onClick", "showLabel", "showHelperInvalidText", "showRequiredLabel", "value"],
@@ -6910,10 +6949,17 @@ var tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    padding: "inset.default",
+    px: "inset.default",
+    py: {
+      base: "inset.default",
+      xl: "inset.wide"
+    },
     p: {
       marginBottom: "0",
-      marginTop: "s"
+      marginTop: {
+        base: "xxs",
+        xl: "xs"
+      }
     }
   }),
   heading: {
@@ -8619,12 +8665,28 @@ var input = {
 };
 var TextInput$1 = {
   parts: ["input", "textarea"],
-  baseStyle: {
-    input: input,
-    textarea: /*#__PURE__*/_extends({}, input, {
-      lineheight: "1.5",
-      minHeight: "xxl"
-    })
+  baseStyle: function baseStyle(_ref) {
+    var showLabel = _ref.showLabel;
+    return {
+      position: "relative",
+      input: input,
+      textarea: _extends({}, input, {
+        lineheight: "1.5",
+        minHeight: "xxl"
+      }),
+      clearButton: {
+        position: "absolute",
+        // When `showLabel` is false, the input field is at the top
+        // which means the clear button should float higher.
+        top: showLabel ? "32px" : "0",
+        px: "xs",
+        right: "0",
+        // Don't visually show the text. This also helps
+        // use the "text" `Button` type.
+        span: screenreaderOnly(),
+        zIndex: "9999"
+      }
+    };
   },
   variants: {
     searchBar: {
@@ -13805,6 +13867,7 @@ var SearchBar$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(funct
   // Render the `TextInput` component.
   var textInputNative = textInputProps && React__default.createElement(TextInput, Object.assign({
     id: (textInputProps == null ? void 0 : textInputProps.id) || "searchbar-textinput-" + id,
+    isClearable: textInputProps == null ? void 0 : textInputProps.isClearable,
     labelText: textInputProps == null ? void 0 : textInputProps.labelText,
     name: textInputProps == null ? void 0 : textInputProps.name,
     onChange: textInputProps == null ? void 0 : textInputProps.onChange,
@@ -14536,12 +14599,16 @@ var Tooltip$1 = /*#__PURE__*/react.chakra( /*#__PURE__*/React.forwardRef(functio
   }, children) : children;
   var styles = react.useMultiStyleConfig("Tooltip", {});
   return React__default.createElement(react.Tooltip, Object.assign({
-    hasArrow: true,
     "aria-label": typeof content !== "string" ? "Tooltip" : undefined,
-    label: content,
+    closeDelay: 750,
+    closeOnClick: true,
+    closeOnEsc: true,
+    closeOnMouseDown: true,
+    hasArrow: true,
     isDisabled: isDisabled,
-    placement: "top",
+    label: content,
     openDelay: 500,
+    placement: "top",
     ref: ref,
     __css: styles
   }, rest), newChildren);