@telus-uds/components-base 1.6.0 → 1.6.1

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output d1359cc1069914c5
-@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 217 files with Babel (8026ms).
-@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 217 files with Babel (5098ms).
-@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js
+@telus-uds/components-base:build: cache hit, replaying output 5b52d282f98ddfb3
+@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 217 files with Babel (4961ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 217 files with Babel (3447ms).
+@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js

package/.turbo/turbo-lint.log

@@ -1,13 +1,13 @@
-@telus-uds/components-base:lint: cache hit, replaying output 946abc71241dcfa6
-@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
-@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
-@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
-@telus-uds/components-base:lint: 
-@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
-@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: cache hit, replaying output 311834e1773df30e
+@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
+@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
+@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
+@telus-uds/components-base:lint: 

package/CHANGELOG.json

@@ -2,7 +2,28 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Thu, 28 Apr 2022 15:40:15 GMT",
+      "date": "Fri, 06 May 2022 15:31:22 GMT",
+      "tag": "@telus-uds/components-base_v1.6.1",
+      "version": "1.6.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "d0967886e4328b789fd5490f068c74fa24379b87",
+            "comment": "don't throw if no href/onPress in link/button"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "d0967886e4328b789fd5490f068c74fa24379b87",
+            "comment": "fix: allow parsing tokens inherited from multiple components"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 28 Apr 2022 15:40:29 GMT",
       "tag": "@telus-uds/components-base_v1.6.0",
       "version": "1.6.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 28 Apr 2022 15:40:15 GMT and should not be manually modified.
+This log was last generated on Fri, 06 May 2022 15:31:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.1
+
+Fri, 06 May 2022 15:31:22 GMT
+
+### Patches
+
+- don't throw if no href/onPress in link/button (alan.slater@nearform.com)
+- fix: allow parsing tokens inherited from multiple components (ruslan.bredikhin@nearform.com)
+
 ## 1.6.0
 
-Thu, 28 Apr 2022 15:40:15 GMT
+Thu, 28 Apr 2022 15:40:29 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -8509,7 +8509,29 @@
           "tokens": {
             "type": {
               "name": "custom",
-              "raw": "getTokensPropType('ChevronLink', 'Link')"
+              "raw": {
+                "leftIcon": "icon",
+                "rightIcon": "icon",
+                "iconDisplace": "size",
+                "iconSize": "size",
+                "iconSpace": "integer",
+                "textLine": "textLine",
+                "color": "color",
+                "textLineStyle": "textLineStyle",
+                "outerBorderColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderGap": "size",
+                "outerBorderOutline": "borderStyle",
+                "borderRadius": "radius",
+                "blockFontName": "fontName",
+                "blockFontWeight": "fontWeight",
+                "blockFontSize": "fontSize",
+                "blockLineHeight": "lineHeight",
+                "icon": "icon",
+                "iconTranslateX": "size",
+                "iconTranslateY": "size",
+                "alignSelf": "flexAlign"
+              }
             },
             "required": false,
             "description": ""
@@ -9459,7 +9481,29 @@
           "tokens": {
             "type": {
               "name": "custom",
-              "raw": "getTokensPropType('TextArea', 'TextInput')"
+              "raw": {
+                "minLines": "integer",
+                "maxLines": "integer",
+                "backgroundColor": "color",
+                "color": "color",
+                "borderWidth": "border",
+                "borderColor": "color",
+                "borderRadius": "radius",
+                "paddingTop": "size",
+                "paddingBottom": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "outerBackgroundColor": "color",
+                "outerBorderWidth": "border",
+                "outerBorderColor": "color",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight",
+                "icon": "icon",
+                "iconSize": "size",
+                "iconColor": "color"
+              }
             },
             "required": false,
             "description": ""

package/generate-component-docs.js

@@ -23,13 +23,26 @@ const parseComponentDocs = (name, generated) => {
 
     const out = { ...prop }
 
-    // check if this prop references the tokens schema
-    const tokensProp = out.type?.raw?.match(/getTokensPropType\('([A-z]+)'\)/)?.[1]
-    if (tokensProp) {
-      if (!schema.components[tokensProp]) {
-        throw new Error(`Unknown schema component reference: ${tokensProp} from component: ${name}`)
-      }
-      out.type = { ...out.type, raw: schema.components[tokensProp] }
+    // check if this prop references the tokens schema;
+    // this regex extracts unquoted parameter strings from function
+    // calls like `getTokensPropType('ChevronLink', 'Link')` with the result
+    // being an array: `['ChevronLink', 'Link']`
+    const tokensProp = out.type?.raw?.match(/(?<=getTokensPropType\(.*)(\w+)+(?=.*\))/gs)
+
+    // if so, try and read the schema from the base components
+    if (tokensProp && tokensProp.length > 0) {
+      let raw = {}
+
+      tokensProp.forEach((componentName) => {
+        if (!schema.components[componentName]) {
+          // this would be a run-time error in the base components
+          throw new Error(
+            `Unknown schema component reference: ${componentName} from component: ${name}`
+          )
+        }
+        raw = { ...raw, ...schema.components[componentName] }
+      })
+      out.type = { ...out.type, raw }
     }
     props[propName] = out
   })

package/lib/Link/TextButton.js

@@ -15,8 +15,6 @@ var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _TextButton$propTypes;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,8 +31,6 @@ const TextButton = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant,
   tokens,
-  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
 }, ref) => {
@@ -51,11 +47,6 @@ const TextButton = /*#__PURE__*/(0, _react.forwardRef)(({
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ..._LinkBase.default.propTypes,
   onPress: _propTypes.default.func.isRequired
-}; // Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-
-if ((_TextButton$propTypes = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+};
 var _default = TextButton;
 exports.default = _default;

package/lib/utils/props/linkProps.js

@@ -38,20 +38,16 @@ var _default = {
   select: (0, _getPropSelector.default)(linkPropTypes),
 
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({
     onPress,
     href
   }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress');
-    }
-
     return _Platform.default.select({
       web: onPress,
       default: (...args) => {

package/lib-module/Link/TextButton.js

@@ -1,5 +1,3 @@
-var _TextButton$propTypes;
-
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
@@ -16,8 +14,6 @@ const TextButton = /*#__PURE__*/forwardRef(({
   children,
   variant,
   tokens,
-  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
 }, ref) => {
@@ -34,10 +30,5 @@ const TextButton = /*#__PURE__*/forwardRef(({
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ...LinkBase.propTypes,
   onPress: PropTypes.func.isRequired
-}; // Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-
-if ((_TextButton$propTypes = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+};
 export default TextButton;

package/lib-module/utils/props/linkProps.js

@@ -22,20 +22,16 @@ export default {
   select: getPropSelector(linkPropTypes),
 
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({
     onPress,
     href
   }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress');
-    }
-
     return Platform.select({
       web: onPress,
       default: (...args) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Base components",
   "keywords": [
     "base"

package/src/Link/TextButton.jsx

@@ -10,19 +10,7 @@ import LinkBase from './LinkBase'
  * take place on the current page, or for navigation within an app.
  */
 const TextButton = forwardRef(
-  (
-    {
-      onPress,
-      children,
-      variant,
-      tokens,
-      // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-      // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
-      accessibilityRole = 'button',
-      ...linkProps
-    },
-    ref
-  ) => {
+  ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
       <LinkBase
@@ -44,10 +32,4 @@ TextButton.propTypes = {
   onPress: PropTypes.func.isRequired
 }
 
-// Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-if (TextButton.propTypes?.href) delete TextButton.propTypes.href
-
 export default TextButton

package/src/utils/props/linkProps.js

@@ -22,16 +22,13 @@ export default {
    */
   select: getPropSelector(linkPropTypes),
   /**
-   * Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
+   * Turn hrefs into press handlers that open links on Native.
    *
    * @param {({ onPress?: () => void, href?: string })}
-   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
-   * string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
+   * @returns {(() => void)|undefined} Returns a press handler, or undefined on web if no press
+   * handler is provided (expects calling component to render as `<a href={href}>` on web).
    */
   handleHref: ({ onPress, href }) => {
-    if (!href && !onPress) {
-      throw new Error('handleHref requires either href or onPress')
-    }
     return Platform.select({
       web: onPress,
       default: (...args) => {

package/__tests__/Link/LinkBase.test.jsx

@@ -1,22 +0,0 @@
-/* eslint-disable no-console */
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import LinkBase from '../../src/Link/LinkBase'
-
-beforeEach(() => jest.clearAllMocks())
-
-describe('LinkBase', () => {
-  it('throws if neither href nor onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <LinkBase>click me</LinkBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-})