@telus-uds/components-base 1.5.0 → 1.7.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@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 (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 (3426ms).
-@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js
+@telus-uds/components-base:build: cache hit, replaying output 1881992cce187510
+@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 219 files with Babel (6264ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 219 files with Babel (4314ms).
+@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 b72941df2cdfe4ea
+@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,160 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Thu, 07 Apr 2022 20:33:50 GMT",
+      "date": "Tue, 17 May 2022 15:04:41 GMT",
+      "tag": "@telus-uds/components-base_v1.7.0",
+      "version": "1.7.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "align List bullets like icons"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "Add text props to Typography"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "fix(components): support TextInput props"
+          }
+        ],
+        "minor": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "70105ac8b165247e3cd29a78e3247f7a475b287a",
+            "comment": "Allow Search component to be controlled"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 May 2022 15:31:28 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": {

package/CHANGELOG.md

@@ -1,12 +1,57 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 07 Apr 2022 20:33:50 GMT and should not be manually modified.
+This log was last generated on Tue, 17 May 2022 15:04:41 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.7.0
+
+Tue, 17 May 2022 15:04:41 GMT
+
+### Minor changes
+
+- Allow Search component to be controlled (alan.slater@nearform.com)
+
+### Patches
+
+- align List bullets like icons (alan.slater@nearform.com)
+- Add text props to Typography (alan.slater@nearform.com)
+- fix(components): support TextInput props (alan.slater@nearform.com)
+
+## 1.6.1
+
+Fri, 06 May 2022 15:31:28 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:50 GMT
+Thu, 07 Apr 2022 20:33:56 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

@@ -283,7 +283,8 @@
         "paddingBottom": "size",
         "closeIcon": "icon",
         "closeIconColor": "color",
-        "closeIconSize": "size"
+        "closeIconSize": "size",
+        "closePadding": "size"
       },
       "Notification": {
         "backgroundColor": "color",
@@ -3893,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": {
@@ -4757,7 +4765,8 @@
                 "paddingBottom": "size",
                 "closeIcon": "icon",
                 "closeIconColor": "color",
-                "closeIconSize": "size"
+                "closeIconSize": "size",
+                "closePadding": "size"
               }
             },
             "required": false,
@@ -4783,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": {
@@ -5685,28 +5701,6 @@
       "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`.",
         "props": {
-          "initialValue": {
-            "defaultValue": {
-              "value": "''",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
-          },
-          "placeholder": {
-            "defaultValue": {
-              "value": "'Search'",
-              "computed": false
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Label rendered in the search input when it has no value."
-          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -5750,6 +5744,20 @@
             "required": false,
             "description": "Select english or french copy for the accessible labels.\nYou may also pass in a custom dictionary object."
           },
+          "initialValue": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Use this to set the initial value of the search input.\nUpdating `initialValue` will **not** update the actual value."
+          },
+          "placeholder": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Label rendered in the search input when it has no value."
+          },
           "inactive": {
             "type": {
               "name": "bool"
@@ -8493,7 +8501,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": ""
@@ -9443,7 +9473,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,