@telus-uds/components-web 2.12.0 → 2.14.0

package/lib-module/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
@@ -7,6 +7,7 @@ import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
 import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles } from '@telus-uds/components-base';
 import moment from 'moment';
+import { isUndefined } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -110,6 +111,16 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
+  useEffect(() => {
+    /**
+     * `date` could be passed as `null` to reset the value so explicitly
+     * checking for not being `undefined`
+     */
+    if (!isUndefined(date) && !moment(date).isSame(inputDate)) {
+      setInputDate(date);
+      setInputText(date instanceof moment ? date.format(dateFormat) : '');
+    }
+  }, [date, inputDate]);
 
   const onFocusChange = _ref2 => {
     let {
@@ -147,6 +158,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const onChange = value => {
     setInputDate(value);
     setInputText(value.format(dateFormat));
+    setIsFocused(false);
     if (onDateChange) onDateChange(value);
   };
 

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, Spacer, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
 import NavigationItem from './NavigationItem';
 import Listbox from '../Listbox';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
@@ -98,22 +98,18 @@ const NavigationSubMenu = _ref => {
       onClick: handleClick,
       icon: icoMenu,
       children: _ref2 => {
-        var _textStyles$, _textStyles$2;
+        var _textStyles$;
 
         let {
           textStyles
         } = _ref2;
-        return [children, /*#__PURE__*/_jsx(Spacer, {
-          space: 1,
-          direction: "row"
-        }, `${id}_spacer`), /*#__PURE__*/_jsx(Icon, {
+        return [children, /*#__PURE__*/_jsx(Icon, {
           icon: icoMenu,
           variant: {
-            size: 'small'
+            size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
-            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
           }
         }, `${id}_icon`)];
       }

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { getThemeTokens, Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokens, useTheme } from '@telus-uds/components-base';
-import IconButton from '../IconButton';
-import { InputField, InputWrapper, LeftButtonWrapper, RightButtonWrapper } from './styles';
+import { Box, TextInput, Spacer, Feedback, InputLabel, useInputValue, useCopy, useThemeTokensCallback } from '@telus-uds/components-base';
+import { InputField, InputWrapper } from './styles';
 import defaultDictionary from './dictionary';
+import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
@@ -20,6 +20,7 @@ const QuantitySelector = _ref => {
     minNumber,
     maxNumber,
     defaultValue,
+    value,
     label,
     hint,
     hintPosition,
@@ -33,19 +34,9 @@ const QuantitySelector = _ref => {
     testID
   } = _ref;
   const {
-    components: {
-      QuantitySelector: componentTheme
-    }
-  } = useTheme();
-  const {
-    leftIcon,
-    rightIcon,
-    padding
-  } = useThemeTokens('QuantitySelector', tokens, variant);
-  const [error, setError] = useState('');
-  const {
-    alternative
+    disabled
   } = variant;
+  const [error, setError] = useState('');
   const getCopy = useCopy({
     dictionary,
     copy
@@ -58,17 +49,16 @@ const QuantitySelector = _ref => {
     return numberToEvaluate;
   };
 
-  const initialValue = getValidatedNumber(defaultValue);
   const {
     currentValue: number,
     setValue: setNumber
   } = useInputValue({
-    value: undefined,
-    initialValue,
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
+  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
 
   const updateNumber = (newNumber, originalInputEvent) => {
@@ -100,20 +90,31 @@ const QuantitySelector = _ref => {
     tooltip: tooltip
   }) : null;
 
+  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant);
+
   const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
     nativeID: id,
     value: inputValue,
+    defaultValue: defaultValue,
     tokens: textInputState => {
       const {
+        inputWidth,
+        inputBorderWidth,
         inputBorderColor,
-        inputBackgroundColor
-      } = getThemeTokens(componentTheme, tokens, variant, textInputState);
-      return {
-        borderRadius: 0,
-        margin: 0,
-        padding: 0,
+        textColor,
+        inputBackgroundColor,
+        ...rest
+      } = getTokens({ ...textInputState
+      });
+      return { ...rest,
+        order: 1,
+        borderWidth: inputBorderWidth,
+        backgroundColor: inputBackgroundColor,
+        color: textColor,
+        width: inputWidth,
         borderColor: inputBorderColor,
-        backgroundColor: inputBackgroundColor
+        borderRadius: 0,
+        outerBorderWidth: 0
       };
     },
     onChange: inputChangeHandler // Using title as an accessibility workaround
@@ -127,38 +128,6 @@ const QuantitySelector = _ref => {
     accessibilityValueNow: number
   });
 
-  const getButtonTokens = isEnabled => buttonState => {
-    const disabled = !isEnabled;
-    const { ...buttonTokens
-    } = getThemeTokens(componentTheme, tokens, variant, { ...buttonState,
-      disabled
-    });
-    return { ...buttonTokens,
-      outerBorderGap: 0,
-      padding
-    };
-  };
-
-  const renderLeftButton = () => {
-    return /*#__PURE__*/_jsx(IconButton, {
-      icon: leftIcon,
-      tokens: getButtonTokens(isDecreaseEnabled),
-      onPress: event => updateNumber(number - 1, event),
-      onDoubleClick: event => updateNumber(number - 1, event),
-      accessibilityLabel: getCopy('accessibility').decreaseButton,
-      accessibilityDisabled: !isDecreaseEnabled
-    });
-  };
-
-  const renderRightButton = () => /*#__PURE__*/_jsx(IconButton, {
-    icon: rightIcon,
-    tokens: getButtonTokens(isIncreaseEnabled),
-    onPress: () => updateNumber(number + 1),
-    onDoubleClick: () => updateNumber(number + 1),
-    accessibilityLabel: getCopy('accessibility').increaseButton,
-    accessibilityDisabled: !isIncreaseEnabled
-  });
-
   return /*#__PURE__*/_jsxs(Box, {
     space: 2,
     testID: testID,
@@ -166,14 +135,39 @@ const QuantitySelector = _ref => {
       space: 2
     }), /*#__PURE__*/_jsxs(InputWrapper, {
       children: [/*#__PURE__*/_jsx(InputField, {
-        className: `${alternative ? 'alternative' : ''}`,
         children: renderTextInput()
-      }), /*#__PURE__*/_jsx(RightButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderRightButton()
-      }), /*#__PURE__*/_jsx(LeftButtonWrapper, {
-        className: `${alternative ? 'alternative' : ''}`,
-        children: renderLeftButton()
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          order: 0
+        },
+        children: /*#__PURE__*/_jsx(SideButton, {
+          isEnabled: isDecreaseEnabled,
+          onPress: () => updateNumber(number - 1),
+          onDoubleClick: () => updateNumber(number - 1),
+          tokens: tokens,
+          variant: {
+            decrease: true,
+            ...variant
+          },
+          accessibilityLabel: getCopy('accessibility').decreaseButton,
+          accessibilityDisabled: !isDecreaseEnabled
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          order: 2
+        },
+        children: /*#__PURE__*/_jsx(SideButton, {
+          isEnabled: isIncreaseEnabled,
+          onPress: () => updateNumber(number + 1),
+          onDoubleClick: () => updateNumber(number + 1),
+          accessibilityLabel: getCopy('accessibility').increaseButton,
+          accessibilityDisabled: !isIncreaseEnabled,
+          tokens: tokens,
+          variant: {
+            increase: true,
+            ...variant
+          }
+        })
       })]
     }), error ? /*#__PURE__*/_jsx(Box, {
       vertical: 2,
@@ -224,6 +218,12 @@ QuantitySelector.propTypes = {
    */
   defaultValue: PropTypes.number,
 
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: PropTypes.number,
+
   /**
    * The label of the input field
    */
@@ -262,7 +262,8 @@ QuantitySelector.propTypes = {
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool
+    alternative: PropTypes.bool,
+    disabled: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
 

package/lib-module/QuantitySelector/SideButton.js

@@ -0,0 +1,80 @@
+import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const SideButton = _ref => {
+  let {
+    isEnabled,
+    onPress,
+    onDoubleClick,
+    accessibilityLabel,
+    accessibilityDisabled,
+    tokens,
+    variant
+  } = _ref;
+  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
+
+  const getButtonTokens = _ref2 => {
+    let {
+      buttonState,
+      disabled
+    } = _ref2;
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({ ...buttonState,
+      disabled
+    });
+    return { ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    };
+  };
+
+  return /*#__PURE__*/_jsx(IconButton, {
+    tokens: buttonState => getButtonTokens({
+      disabled: !isEnabled,
+      buttonState
+    }),
+    onPress: onPress,
+    onDoubleClick: onDoubleClick,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityDisabled: accessibilityDisabled
+  });
+};
+
+SideButton.displayName = 'QuantitySelectorSideButton';
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+};
+SideButton.propTypes = {
+  isEnabled: PropTypes.bool,
+  onPress: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  accessibilityLabel: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  tokens: PropTypes.object,
+  variant: PropTypes.object
+};
+export default SideButton;

package/lib-module/QuantitySelector/styles.js

@@ -2,20 +2,8 @@ import styled from 'styled-components';
 export const InputField = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputField",
   componentId: "components-web__sc-1lrz1xk-0"
-})(["order:2;min-width:3.5rem;max-width:5 rem;height:28px;padding:0;width:64px;text-align:center;z-index:10;input{text-align:center;}&.alternative{input{height:40px;}}"]);
-const ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "styles__ButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-1"
-})(["&.alternative{div[role='button']{height:42px;> div{height:40px;> div{padding:12px 16px;}}}}"]);
-export const LeftButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
-  displayName: "styles__LeftButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-2"
-})(["order:0;div[role='button']{border-radius:4px 0px 0px 4px !important;> div{border-right:none;border-radius:4px 0px 0px 4px !important;}}&.alternative{div[role='button']{border-radius:36px 0px 0px 36px !important;> div{border-radius:24px 0px 0px 24px !important;}}}"]);
-export const RightButtonWrapper = /*#__PURE__*/styled(ButtonWrapper).withConfig({
-  displayName: "styles__RightButtonWrapper",
-  componentId: "components-web__sc-1lrz1xk-3"
-})(["order:3;div[role='button']{border-radius:0px 4px 4px 0px !important;> div{border-left:none;border-radius:0px 4px 4px 0px !important;}}&.alternative{div[role='button']{border-radius:0px 36px 36px 0px !important;> div{border-radius:0px 36px 36px 0px !important;}}}"]);
+})(["order:1;text-align:center;z-index:10;input{text-align:center;}"]);
 export const InputWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "styles__InputWrapper",
-  componentId: "components-web__sc-1lrz1xk-4"
-})(["textalign:start;display:flex;flexdirection:row;flexwrap:nowrap;justifycontent:center;"]);
+  componentId: "components-web__sc-1lrz1xk-1"
+})(["text-align:start;display:flex;flex-direction:row;flex-wrap:nowrap;"]);

package/lib-module/Spinner/Spinner.js

@@ -88,6 +88,7 @@ const Spinner = _ref3 => {
     fullScreen = false,
     inline = false,
     label,
+    labelPosition,
     show = false,
     isStatic = false,
     tokens,
@@ -120,6 +121,7 @@ const Spinner = _ref3 => {
           ...selectProps(rest),
           children: /*#__PURE__*/_jsx(SpinnerContent, {
             label: label,
+            labelPosition: labelPosition,
             overlay: true,
             size: size,
             thickness: thickness,
@@ -139,6 +141,7 @@ const Spinner = _ref3 => {
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(SpinnerContent, {
         label: label,
+        labelPosition: labelPosition,
         overlay: true,
         size: size,
         thickness: thickness,
@@ -164,6 +167,7 @@ const Spinner = _ref3 => {
   return /*#__PURE__*/_jsx(SpinnerContainer, { ...selectProps(rest),
     children: /*#__PURE__*/_jsx(SpinnerContent, {
       label: label,
+      labelPosition: labelPosition,
       size: size,
       thickness: thickness,
       sizeVariant: sizeVariant,
@@ -211,6 +215,11 @@ Spinner.propTypes = { ...selectedSystemPropTypes,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: PropTypes.bool
+  isStatic: PropTypes.bool,
+
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: PropTypes.string
 };
 export default Spinner;

package/lib-module/Spinner/SpinnerContent.js

@@ -31,6 +31,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
 const SpinnerContent = _ref2 => {
   let {
     label,
+    labelPosition,
     overlay = false,
     sizeVariant,
     size,
@@ -38,6 +39,12 @@ const SpinnerContent = _ref2 => {
     isStatic,
     ...rest
   } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
   return /*#__PURE__*/_jsx(Container, {
     overlay: overlay,
     children: /*#__PURE__*/_jsxs(StackView, {
@@ -45,6 +52,7 @@ const SpinnerContent = _ref2 => {
       tokens: {
         alignItems: 'center'
       },
+      direction: labelMapping[labelPosition],
       children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         label: label,
         tokens: {