@telus-uds/components-base 1.4.0 → 1.6.1

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output 875a557dac68c9fc
-@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: $ 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: $ babel-node --plugins=react-docgen-alpha 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

@@ -0,0 +1,13 @@
+@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,146 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Fri, 01 Apr 2022 14:15:14 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": {
+        "minor": [
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add `pattern` prop for `TextInput` (web)"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add unique ids validation to the group components"
+          },
+          {
+            "author": "eugene@michasiw.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "use IconButton for modal close"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add flex prop to FlexGrid.Col"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add handler props whitelisting to the input components"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.5.0",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5"
+          }
+        ],
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "V-align Checkbox/Radio with label first line"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix ExpandCollapse unable to response to window resize"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix: move link underline to the inline pressable becoming the anchor tag on web"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix scenario where `reverse` props might not work when elements wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix input label text wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix Select validation icons"
+          }
+        ],
+        "none": [
+          {
+            "author": "simon.lawrence@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "update babel plugin used for docs generation to maintained fork"
+          },
+          {
+            "author": "cody.zuschlag@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "improve linting"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 07 Apr 2022 20:33:56 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,52 @@
 # 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 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:29 GMT
+
+### Minor changes
+
+- Add `pattern` prop for `TextInput` (web) (shahzaibkhalidmalik@outlook.com)
+- feat: add unique ids validation to the group components (ruslan.bredikhin@nearform.com)
+- use IconButton for modal close (eugene@michasiw.com)
+- Add flex prop to FlexGrid.Col (alan.slater@nearform.com)
+- feat: add handler props whitelisting to the input components (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v1.5.0
+
+### Patches
+
+- V-align Checkbox/Radio with label first line (alan.slater@nearform.com)
+- Fix ExpandCollapse unable to response to window resize (shahzaibkhalidmalik@outlook.com)
+- fix: move link underline to the inline pressable becoming the anchor tag on web (ruslan.bredikhin@nearform.com)
+- Fix scenario where `reverse` props might not work when elements wrap (shahzaibkhalidmalik@outlook.com)
+- Fix input label text wrap (alan.slater@nearform.com)
+- fix Select validation icons (alan.slater@nearform.com)
+
+## 1.5.0
+
+Thu, 07 Apr 2022 20:33:56 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/__tests__/FlexGrid/Row.test.jsx

@@ -151,48 +151,123 @@ describe('FlexGrid Row', () => {
 
   it('applies correct row order for each reverse prop at viewport "xs"', () => {
     const { getByText } = renderEachReverseProp('xs')
-    expect(getByText('xs--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xs--smReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('xs--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xs--smReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "sm"', () => {
     const { getByText } = renderEachReverseProp('sm')
-    expect(getByText('sm--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('sm--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "md"', () => {
     const { getByText } = renderEachReverseProp('md')
-    expect(getByText('md--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('md--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('md--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('md--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "lg"', () => {
     const { getByText } = renderEachReverseProp('lg')
 
-    expect(getByText('lg--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('lg--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "xl"', () => {
     const { getByText } = renderEachReverseProp('xl')
 
-    expect(getByText('xl--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--xlReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
+    expect(getByText('xl--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
   })
 })

package/__tests__/utils/containUniqueFields.test.js

@@ -0,0 +1,25 @@
+import { containUniqueFields } from '../../src'
+
+const unique = [
+  { a: 1, b: 'B' },
+  { a: 2, b: 'A' }
+]
+
+const notUnique = [
+  { a: 1, b: 'B' },
+  { a: 1, b: 'A' }
+]
+
+describe('containUniqueFields util', () => {
+  it('returns true if no specified fields have duplicates', () => {
+    expect(containUniqueFields(unique, ['a', 'b'])).toBe(true)
+  })
+
+  it('returns false if specified fields have duplicates', () => {
+    expect(containUniqueFields(notUnique, ['a'])).toBe(false)
+  })
+
+  it('returns false if fields have duplicates, but not the specified ones', () => {
+    expect(containUniqueFields(notUnique, ['b'])).toBe(true)
+  })
+})

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",
@@ -277,7 +283,8 @@
         "paddingBottom": "size",
         "closeIcon": "icon",
         "closeIconColor": "color",
-        "closeIconSize": "size"
+        "closeIconSize": "size",
+        "closePadding": "size"
       },
       "Notification": {
         "backgroundColor": "color",
@@ -3887,6 +3894,13 @@
               },
               "required": false,
               "description": "Align content horizontally within the column.\n\nAccepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure."
+            },
+            "flex": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "(web only) Stretches the column to fill vertical space using `display: flex`.\nIn native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s)."
             }
           },
           "attributes": {
@@ -4751,7 +4765,8 @@
                 "paddingBottom": "size",
                 "closeIcon": "icon",
                 "closeIconColor": "color",
-                "closeIconSize": "size"
+                "closeIconSize": "size",
+                "closePadding": "size"
               }
             },
             "required": false,
@@ -4777,6 +4792,13 @@
             },
             "required": false,
             "description": ""
+          },
+          "closeButton": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "Pass a react node to override the default close button or pass `null` to hide the close button."
           }
         },
         "attributes": {
@@ -6969,14 +6991,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 +8306,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,
@@ -8475,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": ""
@@ -9425,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/Button/ButtonBase.js

@@ -31,7 +31,7 @@ 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 [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.linkProps, _utils2.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,