@telus-uds/components-base 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 27 Sep 2022 19:31:35 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Oct 2022 19:26:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.19.0
+
+Fri, 14 Oct 2022 19:26:37 GMT
+
+### Minor changes
+
+- Responsive component implementation and tests (srikanthkhari@gmail.com)
+- Add snapshot tests for base components (evander.owusu@telus.com)
+- feat: add right-side buttons to the TextInputBase (ruslan.bredikhin@nearform.com)
+- Add a `text` variant for `Button` (shahzaibkhalidmalik@outlook.com)
+- Show/Hide Previous and Next on Pagination for larger screens (tiagohldb@gmail.com)
+- Bump @telus-uds/system-constants to v1.1.0
+- Bump @telus-uds/system-theme-tokens to v2.7.0
+
+### Patches
+
+- Fix double-icon bug in Tags (alan.slater@nearform.com)
+- Make initial focus of a Carousel more intuitive when refocus is on (alan.slater@nearform.com)
+- Don't jump focus to next carousel tab on focusing first item in tabs (alan.slater@nearform.com)
+
+## 1.18.1
+
+Wed, 05 Oct 2022 21:32:07 GMT
+
+### Patches
+
+- feat: add passing native / test ID from the search to the input (ruslan.bredikhin@nearform.com)
+
 ## 1.18.0
 
-Tue, 27 Sep 2022 19:31:35 GMT
+Tue, 27 Sep 2022 19:33:40 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -35,7 +35,9 @@
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
-        "outerBackgroundColor": "color"
+        "outerBackgroundColor": "color",
+        "textLine": "textLine",
+        "textLineStyle": "textLineStyle"
       },
       "ButtonGroup": {
         "space": "integer",
@@ -403,7 +405,8 @@
         "iconSize": "size",
         "iconDisplace": "size",
         "width": "size",
-        "textAlign": "flexJustifyContent"
+        "textAlign": "flexJustifyContent",
+        "displayLabel": "show"
       },
       "Progress": {
         "backgroundColor": "color",
@@ -821,6 +824,9 @@
         "borderWidth": "border",
         "borderColor": "color",
         "borderRadius": "radius",
+        "buttonSize": "size",
+        "buttonsGap": "size",
+        "buttonsPaddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
         "paddingLeft": "size",
@@ -1344,6 +1350,13 @@
           ],
           "description": "Determines which way does the button navigate in Pagination's context",
           "type": "state"
+        },
+        "compact": {
+          "values": [
+            true
+          ],
+          "description": "Determines if the \"Next\" and \"Previous\" labels should be omitted",
+          "type": "state"
         }
       },
       "ProgressBar": {
@@ -5496,7 +5509,8 @@
                 "iconSize": "size",
                 "iconDisplace": "size",
                 "width": "size",
-                "textAlign": "flexJustifyContent"
+                "textAlign": "flexJustifyContent",
+                "displayLabel": "show"
               }
             },
             "required": false,
@@ -6409,6 +6423,81 @@
         }
       }
     },
+    "Responsive": {
+      "docs": {
+        "description": "Responsive conditionally renders children based on whether the viewport matches the provided\nmin and max viewports.\n\nIn SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and\nduring first hydration on the client side; then if the viewport is not `xs`, it re-renders\nafter hydration. This may cause a layout shift on devices other than the narrowest.",
+        "props": {
+          "min": {
+            "defaultValue": {
+              "value": "'xs'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'xs'",
+                  "computed": false
+                },
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "max": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Search": {
       "docs": {
         "description": "The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.\nUse `Search` to feature autocomplete interactions.\n\nThis component includes a clear button, which will appear as text is entered and pressing it will\ncause the input's internal state value to be set to an empty string.\n\nThis component may only be used as uncontrolled, as the search value is managed within an internal state.\nYou can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.\n\nUse the following props to supply additional accessibility labels for the input - `accessibilityLabel`,\nclear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.",
@@ -8763,7 +8852,9 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
@@ -9152,7 +9243,9 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
@@ -9571,17 +9664,6 @@
             "required": false,
             "description": "HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that\nassistive technology tools know to intepret the carousel as a list.\n\nNote that if the immediate Carousel children do not all render as `'li'` elements,\nthis should be changed (e.g. pass tag=\"div\") because only 'li' is a valid child of 'ul'."
           },
-          "accessibilityLabel": {
-            "defaultValue": {
-              "value": "title",
-              "computed": true
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Provide custom accessibilityLabel for Carousel container"
-          },
           "accessibilityLiveRegion": {
             "defaultValue": {
               "value": "'polite'",
@@ -9728,6 +9810,13 @@
             },
             "required": false,
             "description": "Provide custom accessibilityRole for Carousel container"
+          },
+          "accessibilityLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityLabel for Carousel container"
           }
         },
         "attributes": {
@@ -11757,6 +11846,9 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -11855,6 +11947,9 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",

package/jest.config-android.js

@@ -0,0 +1,17 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// Run tests so React Native sees Platform as 'android'
+config.haste.defaultPlatform = 'android'
+// Save snapshots with `.android` in filename
+config.snapshotResolver = './jest-snapshots/resolver-android.js'
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.web\\.test\\.',
+  '\\.ios\\.test\\.'
+]
+
+module.exports = config

package/jest.config-ios.js

@@ -0,0 +1,18 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// ios is the React Native Jest default, but let's make it explicit:
+// Run tests so React Native sees Platform as 'ios'
+config.haste.defaultPlatform = 'ios'
+// Save snapshots with `.ios` in filename
+config.snapshotResolver = './jest-snapshots/resolver-ios.js'
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.web\\.test\\.',
+  '\\.android\\.test\\.'
+]
+
+module.exports = config

package/jest.config-web.js

@@ -0,0 +1,31 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// Run tests so React Native sees Platform as 'web'
+config.haste.defaultPlatform = 'web'
+config.haste.platforms = [...config.haste.platforms, 'web']
+
+// Save snapshots with `.web` in filename
+config.snapshotResolver = './jest-snapshots/resolver-web.js'
+// Alias react-native to react-native-web
+config.moduleNameMapper = {
+  '^react-native$': 'react-native-web',
+  ...config.moduleNameMapper
+}
+
+// Don't include the original react native setup file as it doesn't work with web
+// React-native-web no longer has a matching file so it gets lost looking for `..\Libraries\...` etc
+config.setupFiles = config.setupFiles.filter(
+  (file) => !file.match(/[\\/]react-native[\\/]jest[\\/]/)
+)
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.native\\.test\\.',
+  '\\.android\\.test\\.',
+  '\\.ios\\.test\\.'
+]
+
+module.exports = config

package/lib/Button/ButtonBase.js

@@ -163,7 +163,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     lineHeight,
     fontName,
     fontWeight,
-    textAlign
+    textAlign,
+    textLine,
+    textLineStyle
   } = _ref6;
   return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
@@ -172,7 +174,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   });
 };
 

package/lib/Carousel/Carousel.js

@@ -157,6 +157,8 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  */
 
 const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  var _systemProps$accessib;
+
   let {
     tokens,
     variant,
@@ -180,7 +182,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
     tag = 'ul',
     accessibilityRole,
-    accessibilityLabel = title,
+    accessibilityLabel,
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
@@ -451,6 +453,33 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
     items: tabs
   }) : panelNavigation;
+  const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
+
+  const containerRef = element => {
+    // Apply both firstFocusRef to the container
+    firstFocusRef.current = element; // Also apply forwarded ref if there is one (which could be a function ref)
+
+    if (ref) {
+      if (typeof ref === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+      } else if (typeof ref === 'function') {
+        ref(element);
+      }
+    }
+  }; // If container isn't used for focus, give it a label of title if none is passed in,
+  // otherwise read the current position on focus
+
+
+  const containerAccessibilityLabel = ((_systemProps$accessib = systemProps.accessibilityLabel) !== null && _systemProps$accessib !== void 0 ? _systemProps$accessib : isFirstFocusContainer) ? "".concat(title ? "".concat(title, " ") : '').concat(getCopyWithPlaceholders('stepTrackerLabel')) : title;
+  const containerProps = {
+    accessibilityLabel: containerAccessibilityLabel,
+    // If used for focus, attach the ref and draw a focus box around the whole carousel
+    ...(isFirstFocusContainer && {
+      ref: containerRef,
+      focusable: true
+    })
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -466,6 +495,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       onLayout: onContainerLayout,
       ref: ref,
       ...systemProps,
+      ...containerProps,
       children: [showPreviousNextNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
@@ -480,12 +510,10 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // Read the current slide position to screen readers on slide.
+      }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // Read the current slide position to screen readers on slide.
       // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
       , {
-        ref: !skipLinkHref && refocus ? firstFocusRef : null,
         accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
-        focusable: !skipLinkHref && refocus,
         text: getCopyWithPlaceholders('stepTrackerLabel')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -43,16 +43,7 @@ const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const lastTabSelected = activeIndex === items.length - 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      focusable: true,
-      accessible: true,
-      onFocus: event => {
-        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-        // (shift-tab) back into the carousel content, don't interfere.
-        const previousWebFocus = event.relatedTarget;
-        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
       direction: "row",
       space: 3,
       divider: {

package/lib/Pagination/SideButton.js

@@ -34,10 +34,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
 const selectButtonTokens = _ref => {
   let {
     icon: _,
+    displayLabel: __,
     ...rest
   } = _ref;
   return (0, _utils.selectTokens)('Button', rest);
@@ -82,7 +84,8 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy
   });
   const {
-    icon
+    icon,
+    displayLabel
   } = getTokens(tokens, buttonVariant);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
@@ -90,7 +93,6 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
 
@@ -124,7 +126,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: displayLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: textStyles,
           children: label
         })

package/lib/Responsive/Responsive.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = _systemConstants.viewports.keys.indexOf(max);
+
+    const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _utils.useResponsiveProp)(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: _propTypes.default.node.isRequired
+};
+var _default = Responsive;
+exports.default = _default;

package/lib/Responsive/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Responsive = _interopRequireDefault(require("./Responsive"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Responsive.default;
+exports.default = _default;