@telus-uds/components-base 1.24.0 → 1.24.1

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 15 Dec 2022 23:06:31 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Jan 2023 03:41:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.24.1
+
+Thu, 05 Jan 2023 03:41:27 GMT
+
+### Patches
+
+- fix the list with headings in docs and storybook (mauricio.batresmontejo@telus.com)
+
 ## 1.24.0
 
-Thu, 15 Dec 2022 23:06:31 GMT
+Thu, 15 Dec 2022 23:08:41 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -3463,17 +3463,6 @@
       "docs": {
         "description": "A feedback box commonly used with form fields.\n\n### Standalone usage\nWhile its primary use is to facilitate feedback states for other form components such as `TextInput`,\nyou may use it standalone.\n\n### Complex content\nYou may pass any React tree as the children of this component, bear in mind that a render function\nis better suited for styling children based on Feedback's variant.\n\n### Using a render function\nWhen a function is passed for rendering content, it will receive the feedback text styles and\nvariant as arguments.\n\n### Accessibility\nAll accessibility props set on this component will be applied to the outer container.",
         "props": {
-          "showFeedbackIcon": {
-            "defaultValue": {
-              "value": "false",
-              "computed": false
-            },
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": ""
-          },
           "title": {
             "type": {
               "name": "string"

package/lib/Feedback/Feedback.js

@@ -105,12 +105,10 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     validation,
     tokens,
     variant,
-    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
-    validation,
-    icon: showFeedbackIcon
+    validation
   });
   const {
     space
@@ -176,8 +174,7 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: _propTypes.default.string,
   tokens: (0, _utils.getTokensPropType)('Feedback'),
-  variant: _utils.variantProp.propType,
-  showFeedbackIcon: _propTypes.default.bool
+  variant: _utils.variantProp.propType
 };
 var _default = Feedback;
 exports.default = _default;

package/lib/Fieldset/Fieldset.js

@@ -78,7 +78,9 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     id: feedbackId,
     title: feedback,
     validation: validation,
-    showFeedbackIcon: showIcon
+    variant: {
+      icon: showIcon
+    }
   }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between

package/lib/List/ListItem.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
+var _Typography = _interopRequireDefault(require("../Typography"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -29,14 +31,20 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     variant,
     children,
+    title,
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemBase.default, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: children
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
   });
 });
 ListItem.displayName = 'ListItem';

package/lib/Radio/RadioGroup.js

@@ -168,8 +168,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {

package/lib-module/Feedback/Feedback.js

@@ -84,12 +84,10 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
     validation,
     tokens,
     variant,
-    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
-    validation,
-    icon: showFeedbackIcon
+    validation
   });
   const {
     space
@@ -155,8 +153,7 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType,
-  showFeedbackIcon: PropTypes.bool
+  variant: variantProp.propType
 };
 export default Feedback;
 const staticStyles = StyleSheet.create({

package/lib-module/Fieldset/Fieldset.js

@@ -59,7 +59,9 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     id: feedbackId,
     title: feedback,
     validation: validation,
-    showFeedbackIcon: showIcon
+    variant: {
+      icon: showIcon
+    }
   }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between

package/lib-module/List/ListItem.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import ListItemBase from './ListItemBase';
+import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
 /**
@@ -7,19 +8,26 @@ import { variantProp } from '../utils';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     children,
+    title,
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  return /*#__PURE__*/_jsx(ListItemBase, {
+  return /*#__PURE__*/_jsxs(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: children
+    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
   });
 });
 ListItem.displayName = 'ListItem';

package/lib-module/Radio/RadioGroup.js

@@ -145,8 +145,8 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: getStackedContent(radios, {

package/package.json

@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.24.0"
+  "version": "1.24.1"
 }

package/src/Feedback/Feedback.jsx

@@ -56,14 +56,10 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * All accessibility props set on this component will be applied to the outer container.
  */
 const Feedback = forwardRef(
-  (
-    { title, children, id, validation, tokens, variant, showFeedbackIcon = false, ...rest },
-    ref
-  ) => {
+  ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,
-      validation,
-      icon: showFeedbackIcon
+      validation
     })
     const { space } = themeTokens
 
@@ -121,8 +117,7 @@ Feedback.propTypes = {
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType,
-  showFeedbackIcon: PropTypes.bool
+  variant: variantProp.propType
 }
 
 export default Feedback

package/src/Fieldset/Fieldset.jsx

@@ -59,7 +59,7 @@ const Fieldset = forwardRef(
         id={feedbackId}
         title={feedback}
         validation={validation}
-        showFeedbackIcon={showIcon}
+        variant={{ icon: showIcon }}
       />
     )
 

package/src/List/ListItem.jsx

@@ -1,16 +1,18 @@
 import React, { forwardRef } from 'react'
 
 import ListItemBase from './ListItemBase'
+import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(({ tokens, variant, children, ...listItemProps }, ref) => {
+const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
     <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
+      {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
       {children}
     </ListItemBase>
   )

package/src/Radio/RadioGroup.jsx

@@ -155,8 +155,8 @@ const RadioGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        showIcon
         showErrorBorder
+        showIcon
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >