@telus-uds/components-base 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 08 Nov 2022 01:32:09 GMT and should not be manually modified.
+This log was last generated on Wed, 07 Dec 2022 15:09:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.22.0
+
+Wed, 07 Dec 2022 15:09:47 GMT
+
+### Minor changes
+
+- QuickLinksFeature component implementation (tiagohldb@gmail.com)
+- Adding iconPosition for ButtonGroup (tiagohldb@gmail.com)
+- chore: new design for error feedback for radio card group (mauricio.batresmontejo@telus.com)
+- feat: add inverse variant for StepTracker (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v2.9.0
+
+### Patches
+
+- fix expand collapse icon size (mauricio.batresmontejo@telus.com)
+
+## 1.21.0
+
+Wed, 23 Nov 2022 21:42:51 GMT
+
+### Minor changes
+
+- Export useHydrationContext, add enableHelmetSSR opt-out (alan.slater@nearform.com)
+
+### Patches
+
+- fix: enforce specific font weight rule application (ruslan.bredikhin@nearform.com)
+
 ## 1.20.0
 
-Tue, 08 Nov 2022 01:32:09 GMT
+Tue, 08 Nov 2022 01:35:30 GMT
 
 ### Minor changes
 

package/__tests17__/ThemeProvider/ThemeProvider.test.jsx

@@ -17,6 +17,7 @@ const theme = {
   },
   components: {},
   themeOptions: {
+    enableHelmetSSR: true,
     forceAbsoluteFontSizing: true,
     forceZIndex: true
   }

package/component-docs.json

@@ -108,7 +108,9 @@
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
-        "outerBackgroundColor": "color"
+        "outerBackgroundColor": "color",
+        "iconSpace": "integer",
+        "iconSize": "size"
       },
       "Card": {
         "flex": "integer",
@@ -212,6 +214,7 @@
         "iconColor": "color",
         "iconSize": "size",
         "iconGap": "size",
+        "iconPaddingTop": "size",
         "iconPosition": "position",
         "verticalAlign": "verticalAlign",
         "justifyContent": "flexJustifyContent",
@@ -534,6 +537,22 @@
         "iconSize": "size",
         "iconSpace": "integer"
       },
+      "QuickLinksFeature": {
+        "stackSpace": "integer",
+        "stackGap": "integer",
+        "stackJustify": "flexJustifyContent"
+      },
+      "QuickLinksFeatureItem": {
+        "color": "color",
+        "textLine": "textLine",
+        "imageDimension": "size",
+        "contentMaxDimension": "size",
+        "contentDirection": "direction",
+        "contentSpace": "integer",
+        "contentAlignItems": "flexAlign",
+        "textAlign": "textAlign",
+        "outerBorderColor": "color"
+      },
       "Radio": {
         "checkedBackgroundColor": "color",
         "checkedSize": "size",
@@ -1997,6 +2016,247 @@
           ]
         }
       }
+    },
+    "tokens": {
+      "size": {
+        "default": 0,
+        "type": "Number|String|null",
+        "nullable": true,
+        "values": {
+          "none": null,
+          "full": "100%",
+          "twoThirds": "66.67%",
+          "zero": 0,
+          "viewportXs": 0,
+          "viewportSm": 576,
+          "viewportMd": 768,
+          "viewportLg": 992,
+          "viewportXl": 1200
+        }
+      },
+      "border": {
+        "default": 0,
+        "nullable": false,
+        "values": {
+          "zero": 0
+        }
+      },
+      "color": {
+        "default": null,
+        "nullable": true,
+        "type": "String|null",
+        "values": {
+          "transparent": "transparent",
+          "none": null
+        }
+      },
+      "radius": {
+        "default": 0,
+        "nullable": true,
+        "type": "undefined|null",
+        "values": {
+          "zero": 0,
+          "round": 99999999999999
+        }
+      },
+      "shadow": {
+        "default": null,
+        "nullable": true,
+        "type": "null|{\"blur\": Number, \"color\": String, \"inset\": Boolean, \"offsetX\": Number, \"offsetY\": Number, \"spread\": Number}|null",
+        "values": {
+          "none": null
+        }
+      },
+      "fontSize": {
+        "default": 16,
+        "nullable": false,
+        "type": "Number"
+      },
+      "lineHeight": {
+        "default": 1,
+        "nullable": false,
+        "type": "Number"
+      },
+      "flexJustifyContent": {
+        "default": "flex-start",
+        "type": "'center'|'flex-start'|'space-between'",
+        "nullable": false,
+        "values": {
+          "center": "center",
+          "flexStart": "flex-start",
+          "spaceBetween": "space-between"
+        }
+      },
+      "flexAlign": {
+        "default": "flex-start",
+        "type": "'center'|'flex-start'|'stretch'",
+        "nullable": false,
+        "values": {
+          "center": "center",
+          "flexStart": "flex-start",
+          "stretch": "stretch"
+        }
+      },
+      "fontName": {
+        "default": null,
+        "nullable": true,
+        "type": "null|String|null"
+      },
+      "fontWeight": {
+        "default": "400",
+        "nullable": false,
+        "type": "String"
+      },
+      "fontStyle": {
+        "default": "normal",
+        "nullable": false,
+        "type": "'normal'|'italic'",
+        "values": {
+          "normal": "normal",
+          "italic": "italic"
+        }
+      },
+      "opacity": {
+        "default": 1,
+        "nullable": false,
+        "type": "Number",
+        "values": {
+          "opaque": 1
+        }
+      },
+      "integer": {
+        "default": null,
+        "nullable": true,
+        "type": "Number|null",
+        "values": {}
+      },
+      "icon": {
+        "default": null,
+        "nullable": true,
+        "type": "String|ReactNativeSVGComponent|null",
+        "values": {
+          "none": null
+        }
+      },
+      "textLine": {
+        "default": "none",
+        "nullable": false,
+        "type": "'none'|'underline'|'strikethrough'",
+        "values": {
+          "none": "none",
+          "underline": "underline",
+          "strikethrough": "strikethrough"
+        }
+      },
+      "textLineStyle": {
+        "default": "solid",
+        "nullable": false,
+        "type": "'solid'",
+        "values": {
+          "solid": "solid"
+        }
+      },
+      "position": {
+        "default": null,
+        "nullable": true,
+        "type": "'bottom'|'left'|'right'|'top'|null",
+        "values": {
+          "bottom": "bottom",
+          "left": "left",
+          "right": "right",
+          "top": "top"
+        }
+      },
+      "direction": {
+        "default": "column",
+        "nullable": false,
+        "type": "'column'|'row'",
+        "values": {
+          "column": "column",
+          "row": "row"
+        }
+      },
+      "show": {
+        "default": true,
+        "nullable": false,
+        "type": "Boolean",
+        "values": {
+          "true": true,
+          "false": false
+        }
+      },
+      "borderStyle": {
+        "default": "solid",
+        "nullable": false,
+        "type": "'none'|'solid'",
+        "values": {
+          "none": "none",
+          "solid": "solid"
+        }
+      },
+      "letterSpacing": {
+        "default": 0,
+        "nullable": false,
+        "type": "Number",
+        "values": {
+          "none": 0
+        }
+      },
+      "verticalAlign": {
+        "default": "baseline",
+        "nullable": false,
+        "type": "'top'|'middle'|'baseline'",
+        "values": {
+          "top": "top",
+          "middle": "middle",
+          "baseline": "baseline"
+        }
+      },
+      "duration": {
+        "default": 0,
+        "nullable": false,
+        "type": "Number",
+        "values": {
+          "zero": 0
+        }
+      },
+      "iconScale": {
+        "default": 1,
+        "nullable": false,
+        "type": "Number",
+        "values": {
+          "scale1": 1,
+          "scale1_10": 1.1,
+          "scale1_25": 1.25
+        }
+      },
+      "textAlign": {
+        "default": "left",
+        "nullable": false,
+        "type": "'left'|'center'|'right'",
+        "values": {
+          "left": "left",
+          "center": "center",
+          "right": "right"
+        }
+      },
+      "gradient": {
+        "default": null,
+        "nullable": true,
+        "type": "{\"type\": [\"linear\"|\"radial\"], \"angle\": Number, \"stops\": Array<{\"stop\": Number, \"color\": String }>}|null",
+        "values": {
+          "none": null
+        }
+      },
+      "textTransform": {
+        "default": "none",
+        "type": "'none'|'uppercase'",
+        "nullable": false,
+        "values": {
+          "none": "none",
+          "uppercase": "uppercase"
+        }
+      }
     }
   },
   "components": {
@@ -2246,6 +2506,7 @@
                   "iconColor": "color",
                   "iconSize": "size",
                   "iconGap": "size",
+                  "iconPaddingTop": "size",
                   "iconPosition": "position",
                   "verticalAlign": "verticalAlign",
                   "justifyContent": "flexJustifyContent",
@@ -3156,6 +3417,7 @@
                   "iconColor": "color",
                   "iconSize": "size",
                   "iconGap": "size",
+                  "iconPaddingTop": "size",
                   "iconPosition": "position",
                   "verticalAlign": "verticalAlign",
                   "justifyContent": "flexJustifyContent",
@@ -3333,6 +3595,28 @@
             "required": false,
             "description": "Position of the feedback block relative to the fieldset's content."
           },
+          "showIcon": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Use to show error or success icon in the feedback"
+          },
+          "showErrorBorder": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "Use to show border in case of error for a group of components"
+          },
           "children": {
             "type": {
               "name": "union",
@@ -6519,6 +6803,159 @@
         }
       }
     },
+    "QuickLinksFeature": {
+      "docs": {
+        "description": "QuickLinksFeature renders a list of interactive items.\n - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`",
+        "props": {
+          "tag": {
+            "defaultValue": {
+              "value": "'ul'",
+              "computed": false
+            },
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Default wrapper tag, by default it's \"ul\""
+          },
+          "tokens": {
+            "type": {
+              "name": "custom",
+              "raw": {
+                "stackSpace": "integer",
+                "stackGap": "integer",
+                "stackJustify": "flexJustifyContent"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "QuickLinksFeature.Item component"
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      },
+      "Item": {
+        "docs": {
+          "description": "Component export along with QuickLinksFeature to be used as children\n\nIt will receive a image source and a accessibility label and will render a link accordingly with the theme tokens",
+          "props": {
+            "LinkRouter": {
+              "type": {
+                "name": "elementType"
+              },
+              "required": false,
+              "description": ""
+            },
+            "linkRouterProps": {
+              "type": {
+                "name": "object"
+              },
+              "required": false,
+              "description": ""
+            },
+            "tokens": {
+              "type": {
+                "name": "custom",
+                "raw": {
+                  "color": "color",
+                  "textLine": "textLine",
+                  "imageDimension": "size",
+                  "contentMaxDimension": "size",
+                  "contentDirection": "direction",
+                  "contentSpace": "integer",
+                  "contentAlignItems": "flexAlign",
+                  "textAlign": "textAlign",
+                  "outerBorderColor": "color"
+                }
+              },
+              "required": false,
+              "description": ""
+            },
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
+              },
+              "required": false,
+              "description": ""
+            },
+            "children": {
+              "type": {
+                "name": "node"
+              },
+              "required": true,
+              "description": "Text which will be rendered within the Link"
+            },
+            "imageAccessibilityLabel": {
+              "type": {
+                "name": "string"
+              },
+              "required": true,
+              "description": "Image accessibility label"
+            },
+            "imageSource": {
+              "type": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "node"
+                  }
+                ]
+              },
+              "required": true,
+              "description": "Image node or Image url"
+            }
+          },
+          "attributes": {
+            "acceptsRNA11yProps": false
+          }
+        }
+      }
+    },
     "Radio": {
       "docs": {
         "description": "Basic Radio component.\n\n## Component API\n\nUse `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.\n\n### Controlled version\n\nIf the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.\n\n### Uncontrolled version\n\nIn case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.\nWhenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).\n\n### Using within forms\n\nYou can pass `name` and `value` props if you need a particular radio button to be a part of a radio group\non a form.\n\n### Validation\n\nYou can mark a radio button as failing validation by setting the `error` prop to `true`.\n\n## A11y guidelines\n\nRadio component accepts all the common accessibility props, but also sets some defaults, including\naccessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)\nor the internal state in case of uncontrolled radio button.",
@@ -8500,7 +8937,7 @@
         "props": {
           "themeOptions": {
             "defaultValue": {
-              "value": "{ forceAbsoluteFontSizing: true, forceZIndex: true }",
+              "value": "{}",
               "computed": false
             },
             "type": {
@@ -8514,6 +8951,10 @@
                   "name": "bool",
                   "required": false
                 },
+                "enableHelmetSSR": {
+                  "name": "bool",
+                  "required": false
+                },
                 "contentMaxWidth": {
                   "name": "custom",
                   "raw": "responsiveProps.getTypeOptionallyByViewport(PropTypes.number)",
@@ -8522,7 +8963,7 @@
               }
             },
             "required": false,
-            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width\n- `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`\n  and when true, sets zIndex to be `0` (the default from `react-native-web`)"
+            "description": "An object containing options allowing to customize the theming experience:\n\n- `forceAbsoluteFontSizing`: available on web only; when set to true, allows\n  using absolute font sizing (in pixels, doesn't scale) instead of the\n  relative sizing (in `rem`, scales depending on the browser settings)\n- `contentMaxWidth`: allows configuration of the content max width to be used in components\n  such as Footnote and Notification to avoid content to stretch width more then the page's width\n- `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`\n  and when true, sets zIndex to be `0` (the default from `react-native-web`)\n- `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be\n  disabled unless a web app has been specifically configured to stop React Helmet accumulating\n  instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet"
           },
           "children": {
             "type": {
@@ -9772,6 +10213,23 @@
             "required": false,
             "description": "If `values` is not passed, making the ButtonGroup an \"uncontrolled\" component\nmanaging its own selected state, a default set of selections may be provided.\nChanging the `initialValues` does not change the user's selections."
           },
+          "iconPosition": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'left'",
+                  "computed": false
+                },
+                {
+                  "value": "'right'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": "Defines if the icon will be displayed on the right or left side of the label."
+          },
           "legend": {
             "type": {
               "name": "string"

package/lib/Button/ButtonGroup.js

@@ -56,6 +56,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback,
     name: inputGroupName,
     copy,
+    iconPosition,
     accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
     : _Platform.default.select({
       web: 'group',
@@ -138,6 +139,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           toggleOneValue(id, event);
         };
 
+        const iconProp = itemRest.icon || undefined;
         const itemA11y = {
           accessibilityState: {
             checked: isSelected
@@ -155,9 +157,11 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           tokens: getButtonTokens,
           selected: isSelected,
           inactive: inactive,
+          icon: iconProp,
           ...selectItemProps({ ...itemRest,
             ...itemA11y
           }),
+          iconPosition: iconPosition,
           children: label
         }, id);
       })
@@ -226,6 +230,11 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    */
   initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
 
+  /**
+   * Defines if the icon will be displayed on the right or left side of the label.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */

package/lib/ExpandCollapse/Control.js

@@ -59,11 +59,13 @@ function selectContainerStyles(_ref) {
 function selectIconContainerStyles(_ref2) {
   let {
     iconGap,
+    iconPaddingTop,
     iconPosition
   } = _ref2;
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
-    [paddingSide]: iconGap
+    [paddingSide]: iconGap,
+    paddingTop: iconPaddingTop
   };
 }
 

package/lib/Feedback/Feedback.js

@@ -105,10 +105,12 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     validation,
     tokens,
     variant,
+    icon,
     ...rest
   } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
-    validation
+    validation,
+    icon
   });
   const {
     space