@telus-uds/components-base 1.4.0 → 1.5.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output 875a557dac68c9fc
+@telus-uds/components-base:build: cache hit, replaying output 6a69e9bf21c07998
 @telus-uds/components-base:build: $ yarn build:code && yarn build:docs
 @telus-uds/components-base:build: $ yarn build:main && yarn build:module
 @telus-uds/components-base:build: $ babel src -d lib
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (7019ms).
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (4882ms).
 @telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (5391ms).
+@telus-uds/components-base:build: Successfully compiled 215 files with Babel (3426ms).
 @telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Fri, 01 Apr 2022 14:15:14 GMT",
+      "date": "Thu, 07 Apr 2022 20:33:50 GMT",
+      "tag": "@telus-uds/components-base_v1.5.0",
+      "version": "1.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "63472330f9144ba99c34c7524dcc2d2f4f716e69",
+            "comment": "extend HorizontalScrollButton via IconButton"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.4.0",
+            "commit": "63472330f9144ba99c34c7524dcc2d2f4f716e69"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 01 Apr 2022 14:15:21 GMT",
       "tag": "@telus-uds/components-base_v1.4.0",
       "version": "1.4.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 01 Apr 2022 14:15:14 GMT and should not be manually modified.
+This log was last generated on Thu, 07 Apr 2022 20:33:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.5.0
+
+Thu, 07 Apr 2022 20:33:50 GMT
+
+### Minor changes
+
+- extend HorizontalScrollButton via IconButton (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v1.4.0
+
 ## 1.4.0
 
-Fri, 01 Apr 2022 14:15:14 GMT
+Fri, 01 Apr 2022 14:15:21 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -172,14 +172,20 @@
         "iconGap": "size"
       },
       "HorizontalScrollButton": {
-        "borderRadius": "radius",
         "backgroundColor": "color",
+        "borderRadius": "radius",
         "borderColor": "color",
         "borderWidth": "border",
-        "padding": "size",
-        "shadow": "shadow",
+        "iconColor": "color",
         "iconSize": "size",
-        "iconColor": "color"
+        "iconScale": "iconScale",
+        "iconTranslateX": "size",
+        "iconTranslateY": "size",
+        "outerBorderWidth": "border",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "padding": "size",
+        "shadow": "shadow"
       },
       "Icon": {
         "size": "size",
@@ -6969,14 +6975,20 @@
             "type": {
               "name": "custom",
               "raw": {
-                "borderRadius": "radius",
                 "backgroundColor": "color",
+                "borderRadius": "radius",
                 "borderColor": "color",
                 "borderWidth": "border",
-                "padding": "size",
-                "shadow": "shadow",
+                "iconColor": "color",
                 "iconSize": "size",
-                "iconColor": "color"
+                "iconScale": "iconScale",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "outerBorderGap": "size",
+                "padding": "size",
+                "shadow": "shadow"
               }
             },
             "required": false,
@@ -8278,14 +8290,20 @@
             "type": {
               "name": "custom",
               "raw": {
-                "borderRadius": "radius",
                 "backgroundColor": "color",
+                "borderRadius": "radius",
                 "borderColor": "color",
                 "borderWidth": "border",
-                "padding": "size",
-                "shadow": "shadow",
+                "iconColor": "color",
                 "iconSize": "size",
-                "iconColor": "color"
+                "iconScale": "iconScale",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "outerBorderGap": "size",
+                "padding": "size",
+                "shadow": "shadow"
               }
             },
             "required": false,

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -154,7 +154,6 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
       onLayout: handleContainerLayout,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [staticStyles.scrollContainer, {
-        marginBottom: gutter,
         borderBottomWidth,
         borderBottomColor
       }],

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -9,17 +9,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _ThemeProvider = require("../ThemeProvider");
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _utils = require("../utils");
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _ThemeProvider = require("../ThemeProvider");
 
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
@@ -31,19 +29,11 @@ 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 selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -57,47 +47,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ..._utils.a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = (0, _utils.selectTokens)('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ..._utils.a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';

package/lib-module/HorizontalScroll/HorizontalScroll.js

@@ -129,7 +129,6 @@ const HorizontalScroll = /*#__PURE__*/forwardRef(({
       onLayout: handleContainerLayout,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [staticStyles.scrollContainer, {
-        marginBottom: gutter,
         borderBottomWidth,
         borderBottomColor
       }],

package/lib-module/HorizontalScroll/HorizontalScrollButton.js

@@ -1,27 +1,18 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { resolvePressableTokens, selectTokens, variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
+import View from "react-native-web/dist/exports/View";
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -35,47 +26,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/forwardRef(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = useThemeTokensCallback('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => resolvePressableTokens(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant);
   const getCopy = useCopy({
     dictionary,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ...a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/_jsx(Typography, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ...a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Base components",
   "keywords": [
     "base"
@@ -59,7 +59,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.16.0",
     "@telus-uds/system-constants": "^1.0.2",
-    "@telus-uds/system-theme-tokens": "^1.3.0",
+    "@telus-uds/system-theme-tokens": "^1.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -129,7 +129,7 @@ const HorizontalScroll = forwardRef(
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={[
             staticStyles.scrollContainer,
-            { marginBottom: gutter, borderBottomWidth, borderBottomColor }
+            { borderBottomWidth, borderBottomColor }
           ]}
           {...selectProps(rest)}
         >

package/src/HorizontalScroll/HorizontalScrollButton.jsx

@@ -1,35 +1,14 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { Pressable, StyleSheet } from 'react-native'
-
-import { useThemeTokensCallback } from '../ThemeProvider'
-import {
-  resolvePressableTokens,
-  selectTokens,
-  variantProp,
-  getTokensPropType,
-  useCopy,
-  copyPropTypes,
-  a11yProps
-} from '../utils'
-import Icon from '../Icon'
-import Typography from '../Typography'
+import { StyleSheet, View } from 'react-native'
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils'
+import { useThemeTokens } from '../ThemeProvider'
+import IconButton from '../IconButton'
 import dictionary from './dictionary'
 
-const selectButtonStyles = (
-  { borderRadius, backgroundColor, borderColor, borderWidth, padding },
-  direction
-) => [
-  staticStyles.absolute,
-  staticStyles[direction],
-  {
-    borderRadius,
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    padding
-  }
-]
+const selectContainerStyles = ({ offset }) => ({
+  marginTop: offset ? -offset : 0
+})
 
 /**
  * Button within a Tabs component showing users that content is available to the left or
@@ -40,41 +19,25 @@ const selectButtonStyles = (
  * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
  */
 const HorizontalScrollButton = forwardRef(
-  ({ direction = 'next', icon, onPress, offset, variant, tokens, copy }, ref) => {
-    const getTokens = useThemeTokensCallback('HorizontalScrollButton', tokens, variant)
-    const resolveButtonTokens = (pressableState) =>
-      resolvePressableTokens(getTokens, pressableState)
-    const getPressableStyle = (pressableState) => [
-      selectButtonStyles(resolveButtonTokens(pressableState), direction),
-      { marginTop: -1 * (offset || 0) }
-    ]
-
+  ({ direction = 'next', icon, offset, onPress, variant, tokens, copy }, ref) => {
+    const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant)
     const getCopy = useCopy({ dictionary, copy })
     const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
 
     return (
-      <Pressable
-        ref={ref}
-        style={getPressableStyle}
-        onPress={onPress}
-        accessibilityLabel={label}
-        accessibilityRole="button"
-        // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-        {...a11yProps.nonFocusableProps}
+      <View
+        style={[staticStyles.absolute, staticStyles[direction], selectContainerStyles({ offset })]}
       >
-        {(pressableState) => {
-          const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon')
-          return icon ? (
-            <Icon icon={icon} tokens={iconTokens} />
-          ) : (
-            <Typography
-              tokens={{ fontSize: iconTokens.size, lineHeight: 1, color: iconTokens.color }}
-            >
-              {direction === 'next' ? '→' : '←'}
-            </Typography>
-          )
-        }}
-      </Pressable>
+        <IconButton
+          accessibilityLabel={label}
+          icon={icon}
+          onPress={onPress}
+          ref={ref}
+          tokens={themeTokens}
+          variant={variant}
+          {...a11yProps.nonFocusableProps}
+        />
+      </View>
     )
   }
 )