@telus-uds/components-base 1.14.1 → 1.14.2

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 17 Aug 2022 20:48:46 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Aug 2022 19:30:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.14.2
+
+Tue, 23 Aug 2022 19:30:28 GMT
+
+### Patches
+
+- fix: remove extra icons from pagination (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.4.0
+
 ## 1.14.1
 
-Wed, 17 Aug 2022 20:48:46 GMT
+Wed, 17 Aug 2022 20:50:59 GMT
 
 ### Patches
 

package/component-docs.json

@@ -1157,6 +1157,16 @@
             true
           ],
           "type": "state"
+        },
+        "width": {
+          "description": "The width of the modal",
+          "values": [
+            "s",
+            "m",
+            "l",
+            "xl"
+          ],
+          "type": "state"
         }
       },
       "Notification": {

package/lib/Pagination/SideButton.js

@@ -33,12 +33,22 @@ 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; }
 
-const selectIconTokens = (_ref, direction) => {
+// 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
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -50,7 +60,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -59,7 +69,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
   const buttonVariant = {
     direction,
@@ -75,7 +85,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -101,11 +111,11 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib-module/Pagination/SideButton.js

@@ -7,15 +7,25 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
-import useCopy from '../utils/useCopy';
+import useCopy from '../utils/useCopy'; // 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
+
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectIconTokens = (_ref, direction) => {
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return selectTokens('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -27,7 +37,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -36,7 +46,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const buttonVariant = {
     direction,
@@ -52,7 +62,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -76,11 +86,11 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.3.0",
+    "@telus-uds/system-theme-tokens": "^2.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -71,5 +71,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.14.1"
+  "version": "1.14.2"
 }

package/src/Pagination/SideButton.jsx

@@ -12,6 +12,9 @@ import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter }
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
 
+// 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
+const selectButtonTokens = ({ icon: _, ...rest }) => selectTokens('Button', rest)
 const selectIconTokens = ({ color, iconSize, iconDisplace }, direction) => {
   return {
     color,
@@ -35,7 +38,7 @@ const SideButton = forwardRef(
 
     const { icon } = getTokens(tokens, buttonVariant)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
     const getIconTokens = (buttonState) => selectIconTokens(getTokens(buttonState), direction)
 
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')