@telus-uds/components-base 1.36.0 → 1.37.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 20 Apr 2023 19:05:54 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Apr 2023 21:33:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.37.0
+
+Mon, 24 Apr 2023 21:33:59 GMT
+
+### Minor changes
+
+- conditionally render Icon based on it being defined (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.22.0
+
 ## 1.36.0
 
-Thu, 20 Apr 2023 19:05:54 GMT
+Thu, 20 Apr 2023 19:13:33 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -119,6 +119,16 @@
         "paddingTop": "size",
         "paddingBottom": "size"
       },
+      "BlockQuote": {
+        "color": "color",
+        "backgroundGradient": "gradient",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "marginBottom": "size",
+        "width": "size"
+      },
       "Box": {
         "backgroundColor": "color",
         "gradient": "gradient"
@@ -496,6 +506,7 @@
         "space": "integer"
       },
       "IconButton": {
+        "icon": "icon",
         "backgroundColor": "color",
         "borderRadius": "radius",
         "borderColor": "color",
@@ -550,6 +561,38 @@
         "itemIconColor": "color",
         "listGutter": "size"
       },
+      "ListBox": {
+        "groupBorderRadius": "radius",
+        "groupBorderWidth": "border",
+        "groupFontSize": "size",
+        "groupFontName": "fontName",
+        "groupFontWeight": "fontWeight",
+        "groupColor": "color",
+        "groupBorderColor": "color",
+        "groupBackgroundColor": "color",
+        "groupPaddingTop": "size",
+        "groupPaddingBottom": "size",
+        "groupPaddingLeft": "size",
+        "groupPaddingRight": "size",
+        "groupIcon": "icon",
+        "itemDisplay": "show",
+        "itemFontName": "fontName",
+        "itemFontWeight": "fontWeight",
+        "itemFontSize": "size",
+        "itemPaddingTop": "size",
+        "itemPaddingBottom": "size",
+        "itemPaddingLeft": "size",
+        "itemPaddingRight": "size",
+        "itemColor": "color",
+        "itemBackgroundColor": "color",
+        "itemBorderBackgroundColor": "color",
+        "itemBorderLeftColor": "color",
+        "itemBorderLeftWidth": "border",
+        "itemBorderWidth": "border",
+        "itemTextDecoration": "textLine",
+        "itemOutline": "border",
+        "shadow": "shadow"
+      },
       "OrderedList": {
         "headerFontWeight": "fontWeight",
         "headerFontName": "fontName",
@@ -1714,6 +1757,56 @@
           "type": "state"
         }
       },
+      "ListBox": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "current": {
+          "description": "When the current item is selected",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "isChild": {
+          "description": "when the item is child of another child",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "Modal": {
         "maxWidth": {
           "description": "Whether a modal should expand responsively to the maximum of 8 layout columns width",
@@ -5155,14 +5248,11 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
-          "accessibilityRole": {
+          "variant": {
             "defaultValue": {
-              "value": "href ? 'link' : 'button'",
+              "value": "{}",
               "computed": false
             },
-            "required": false
-          },
-          "variant": {
             "type": {
               "name": "objectOf",
               "value": {
@@ -5183,10 +5273,18 @@
             "required": false,
             "description": ""
           },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : 'button'",
+              "computed": false
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
               "raw": {
+                "icon": "icon",
                 "backgroundColor": "color",
                 "borderRadius": "radius",
                 "borderColor": "color",

package/lib/IconButton/IconButton.js

@@ -86,7 +86,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -134,7 +134,8 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }

package/lib-module/IconButton/IconButton.js

@@ -63,7 +63,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -109,7 +109,8 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon')
+          tokens: selectTokens('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.21.0",
+    "@telus-uds/system-theme-tokens": "^2.22.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.36.0"
+  "version": "1.37.0"
 }

package/src/IconButton/IconButton.jsx

@@ -54,7 +54,7 @@ const IconButton = forwardRef(
   (
     {
       tokens,
-      variant,
+      variant = {},
       icon: IconComponent,
       href,
       hrefAttrs,
@@ -93,6 +93,7 @@ const IconButton = forwardRef(
                 icon={IconComponent}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
+                variant={variant}
               />
             </View>
           )