@telus-uds/components-base 1.67.0 → 1.68.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 07 Nov 2023 16:20:19 GMT and should not be manually modified.
+This log was last generated on Wed, 15 Nov 2023 18:34:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.68.0
+
+Wed, 15 Nov 2023 18:34:44 GMT
+
+### Minor changes
+
+- refactor badge component for multiplatform (guillermo.peitzner@telus.com)
+- Changes to improve alignment and icon sizing (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.45.0
+
+## 1.67.1
+
+Fri, 10 Nov 2023 22:37:27 GMT
+
+### Patches
+
+- Add new stories for quiet variant for Link component (email not defined)
+- fixes for error border validation to checkboxgroup, checkboxcardgroup, radiogroup and radiocardgroup (email not defined)
+- Bump @telus-uds/system-theme-tokens to v2.44.1
+
 ## 1.67.0
 
-Tue, 07 Nov 2023 16:20:19 GMT
+Tue, 07 Nov 2023 16:32:21 GMT
 
 ### Minor changes
 

package/lib/Badge/Badge.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const selectContainerBackground = _ref => {
+  let {
+    backgroundColor
+  } = _ref;
+  return {
+    backgroundColor
+  };
+};
+const selectContainerBorder = _ref2 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref2;
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius
+  };
+};
+const selectContainerPadding = _ref3 => {
+  let {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = _ref3;
+  return {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  };
+};
+const getTypographyTokens = _ref4 => {
+  let {
+    fontName,
+    fontWeight,
+    color
+  } = _ref4;
+  return {
+    fontName,
+    fontWeight,
+    color
+  };
+};
+const getTypographyVariant = _ref5 => {
+  let {
+    fontSize
+  } = _ref5;
+  return {
+    size: fontSizeMapping[fontSize]
+  };
+};
+const Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Badge', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: _Platform.default.select({
+      native: {
+        ...staticStyles.container,
+        ...selectContainerBackground(themeTokens),
+        ...selectContainerBorder(themeTokens),
+        ...selectContainerPadding(themeTokens)
+      },
+      web: {}
+    }),
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      tokens: getTypographyTokens(themeTokens),
+      variant: getTypographyVariant(themeTokens),
+      children: children
+    })
+  });
+});
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.node,
+  tokens: (0, _utils.getTokensPropType)('Badge'),
+  variant: _utils.variantProp.propType
+};
+Badge.displayName = 'Badge';
+var _default = Badge;
+exports.default = _default;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'flex-start'
+  }
+});

package/lib/Badge/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Badge = _interopRequireDefault(require("./Badge"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Badge.default;
+exports.default = _default;

package/lib/Checkbox/CheckboxGroup.js

@@ -101,6 +101,14 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _ThemeProvider.useThemeTokens)('CheckboxGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValues,
     toggleOneValue
@@ -152,14 +160,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     showErrorBorder: true,
-    tokens: {
-      outlineWidth,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outlineOffset
-    },
+    tokens: borderTokens,
     showIcon: showIcon,
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(checkboxes, {

package/lib/CheckboxCardGroup/CheckboxCardGroup.js

@@ -44,6 +44,7 @@ const CheckboxCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     space,
     fieldSpace,
     direction,
+    showIcon,
     outlineWidth,
     borderTopLeftRadius,
     borderTopRightRadius,
@@ -93,7 +94,7 @@ const CheckboxCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     validation: validation,
     tokens: borderTokens,
     showErrorBorder: true,
-    showIcon: true,
+    showIcon: showIcon,
     accessibilityRole: "checkbox",
     ...selectProps(rest),
     children: checkboxCardProperties => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {

package/lib/List/ListItemContent.js

@@ -67,7 +67,8 @@ const ListItemContent = _ref2 => {
 };
 const staticStyles = _StyleSheet.default.create({
   wrap: {
-    flex: 1
+    flex: 1,
+    justifyContent: 'center'
   }
 });
 ListItemContent.propTypes = {

package/lib/List/ListItemMark.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const tokenTypes = {
@@ -48,24 +49,11 @@ const selectBulletPositioningStyles = _ref3 => {
     height: itemIconSize
   };
 };
-const selectBulletStyles = _ref4 => {
-  let {
-    itemBulletWidth,
-    itemBulletHeight,
-    itemBulletColor
-  } = _ref4;
-  return {
-    width: itemBulletWidth,
-    height: itemBulletHeight,
-    borderRadius: itemBulletHeight / 2,
-    backgroundColor: itemBulletColor
-  };
-};
-const selectBulletContainerStyles = _ref5 => {
+const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
     itemBulletContainerAlign
-  } = _ref5;
+  } = _ref4;
   return {
     width: itemBulletContainerWidth,
     alignItems: itemBulletContainerAlign
@@ -79,13 +67,13 @@ const selectBulletContainerStyles = _ref5 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = _ref6 => {
+const ListItemMark = _ref5 => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
-  } = _ref6;
+  } = _ref5;
   const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
@@ -99,16 +87,22 @@ const ListItemMark = _ref6 => {
       })
     });
   }
+  const bulletColor = themeTokens.itemBulletColor;
+  const {
+    bulletIcon
+  } = themeTokens;
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+      testID: "unordered-item-bullet",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: bulletIcon,
+        tokens: {
+          color: bulletColor
+        }
       })
     })
   });

package/lib/RadioCard/RadioCardGroup.js

@@ -94,10 +94,25 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     space,
     fieldSpace,
-    direction
+    direction,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = (0, _ThemeProvider.useThemeTokens)('RadioCardGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValue,
     setValue
@@ -129,7 +144,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive: inactive || readOnly,
     validation: validation,
     showErrorBorder: true,
-    showIcon: true,
+    tokens: borderTokens,
+    showIcon: showIcon,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {

package/lib/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   ActivityIndicator: true,
   Autocomplete: true,
   Box: true,
+  Badge: true,
   Card: true,
   PressableCardBase: true,
   Listbox: true,
@@ -101,6 +102,12 @@ Object.defineProperty(exports, "Autocomplete", {
     return _Autocomplete.default;
   }
 });
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
 Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
@@ -471,6 +478,7 @@ var _A11yText = _interopRequireDefault(require("./A11yText"));
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
 var _Box = _interopRequireDefault(require("./Box"));
+var _Badge = _interopRequireDefault(require("./Badge"));
 var _Button = require("./Button");
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib-module/Badge/Badge.js

@@ -0,0 +1,111 @@
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import Typography from '../Typography';
+import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
+const selectContainerBackground = _ref => {
+  let {
+    backgroundColor
+  } = _ref;
+  return {
+    backgroundColor
+  };
+};
+const selectContainerBorder = _ref2 => {
+  let {
+    borderWidth,
+    borderColor,
+    borderRadius
+  } = _ref2;
+  return {
+    borderWidth,
+    borderColor,
+    borderRadius
+  };
+};
+const selectContainerPadding = _ref3 => {
+  let {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  } = _ref3;
+  return {
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  };
+};
+const getTypographyTokens = _ref4 => {
+  let {
+    fontName,
+    fontWeight,
+    color
+  } = _ref4;
+  return {
+    fontName,
+    fontWeight,
+    color
+  };
+};
+const getTypographyVariant = _ref5 => {
+  let {
+    fontSize
+  } = _ref5;
+  return {
+    size: fontSizeMapping[fontSize]
+  };
+};
+const Badge = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const themeTokens = useThemeTokens('Badge', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: Platform.select({
+      native: {
+        ...staticStyles.container,
+        ...selectContainerBackground(themeTokens),
+        ...selectContainerBorder(themeTokens),
+        ...selectContainerPadding(themeTokens)
+      },
+      web: {}
+    }),
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Typography, {
+      tokens: getTypographyTokens(themeTokens),
+      variant: getTypographyVariant(themeTokens),
+      children: children
+    })
+  });
+});
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: variantProp.propType
+};
+Badge.displayName = 'Badge';
+export default Badge;
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'flex-start'
+  }
+});

package/lib-module/Badge/index.js

@@ -0,0 +1,2 @@
+import Badge from './Badge';
+export default Badge;

package/lib-module/Checkbox/CheckboxGroup.js

@@ -92,6 +92,14 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useThemeTokens('CheckboxGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValues,
     toggleOneValue
@@ -143,14 +151,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     showErrorBorder: true,
-    tokens: {
-      outlineWidth,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outlineOffset
-    },
+    tokens: borderTokens,
     showIcon: showIcon,
     ...selectProps(rest),
     children: getStackedContent(checkboxes, {

package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js

@@ -35,6 +35,7 @@ const CheckboxCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     space,
     fieldSpace,
     direction,
+    showIcon,
     outlineWidth,
     borderTopLeftRadius,
     borderTopRightRadius,
@@ -84,7 +85,7 @@ const CheckboxCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     validation: validation,
     tokens: borderTokens,
     showErrorBorder: true,
-    showIcon: true,
+    showIcon: showIcon,
     accessibilityRole: "checkbox",
     ...selectProps(rest),
     children: checkboxCardProperties => /*#__PURE__*/_jsx(StackContainer, {

package/lib-module/List/ListItemContent.js

@@ -59,7 +59,8 @@ const ListItemContent = _ref2 => {
 };
 const staticStyles = StyleSheet.create({
   wrap: {
-    flex: 1
+    flex: 1,
+    justifyContent: 'center'
   }
 });
 ListItemContent.propTypes = {

package/lib-module/List/ListItemMark.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Icon from '../Icon';
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const tokenTypes = {
@@ -41,24 +42,11 @@ const selectBulletPositioningStyles = _ref3 => {
     height: itemIconSize
   };
 };
-const selectBulletStyles = _ref4 => {
-  let {
-    itemBulletWidth,
-    itemBulletHeight,
-    itemBulletColor
-  } = _ref4;
-  return {
-    width: itemBulletWidth,
-    height: itemBulletHeight,
-    borderRadius: itemBulletHeight / 2,
-    backgroundColor: itemBulletColor
-  };
-};
-const selectBulletContainerStyles = _ref5 => {
+const selectBulletContainerStyles = _ref4 => {
   let {
     itemBulletContainerWidth,
     itemBulletContainerAlign
-  } = _ref5;
+  } = _ref4;
   return {
     width: itemBulletContainerWidth,
     alignItems: itemBulletContainerAlign
@@ -72,13 +60,13 @@ const selectBulletContainerStyles = _ref5 => {
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = _ref6 => {
+const ListItemMark = _ref5 => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
-  } = _ref6;
+  } = _ref5;
   const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
@@ -92,16 +80,22 @@ const ListItemMark = _ref6 => {
       })
     });
   }
+  const bulletColor = themeTokens.itemBulletColor;
+  const {
+    bulletIcon
+  } = themeTokens;
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   return /*#__PURE__*/_jsx(View, {
     style: [sideItemContainerStyles, itemBulletContainerStyles],
     children: /*#__PURE__*/_jsx(View, {
       style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      children: /*#__PURE__*/_jsx(View, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+      testID: "unordered-item-bullet",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: bulletIcon,
+        tokens: {
+          color: bulletColor
+        }
       })
     })
   });

package/lib-module/RadioCard/RadioCardGroup.js

@@ -85,10 +85,25 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     space,
     fieldSpace,
-    direction
+    direction,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = useThemeTokens('RadioCardGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValue,
     setValue
@@ -120,7 +135,8 @@ const RadioCardGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive: inactive || readOnly,
     validation: validation,
     showErrorBorder: true,
-    showIcon: true,
+    tokens: borderTokens,
+    showIcon: showIcon,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: props => /*#__PURE__*/_jsx(StackContainer, {

package/lib-module/index.js

@@ -2,6 +2,7 @@ export { default as A11yText } from './A11yText';
 export { default as ActivityIndicator } from './ActivityIndicator';
 export { default as Autocomplete } from './Autocomplete';
 export { default as Box } from './Box';
+export { default as Badge } from './Badge';
 export * from './Button';
 export { default as Card, PressableCardBase } from './Card';
 export * from './Carousel';

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.44.0",
+    "@telus-uds/system-theme-tokens": "^2.45.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -73,5 +73,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.67.0"
+  "version": "1.68.0"
 }

package/src/Badge/Badge.jsx

@@ -0,0 +1,79 @@
+import React, { forwardRef } from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import { useThemeTokens } from '../ThemeProvider'
+import Typography from '../Typography'
+import { htmlAttrs, selectSystemProps, getTokensPropType, variantProp, viewProps } from '../utils'
+
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+}
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+const selectContainerBackground = ({ backgroundColor }) => ({ backgroundColor })
+
+const selectContainerBorder = ({ borderWidth, borderColor, borderRadius }) => ({
+  borderWidth,
+  borderColor,
+  borderRadius
+})
+
+const selectContainerPadding = ({ paddingTop, paddingRight, paddingBottom, paddingLeft }) => ({
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+})
+
+const getTypographyTokens = ({ fontName, fontWeight, color }) => ({ fontName, fontWeight, color })
+
+const getTypographyVariant = ({ fontSize }) => ({ size: fontSizeMapping[fontSize] })
+
+const Badge = forwardRef(({ children, tokens, variant = {}, ...rest }, ref) => {
+  const themeTokens = useThemeTokens('Badge', tokens, variant)
+
+  return (
+    <View
+      ref={ref}
+      style={Platform.select({
+        native: {
+          ...staticStyles.container,
+          ...selectContainerBackground(themeTokens),
+          ...selectContainerBorder(themeTokens),
+          ...selectContainerPadding(themeTokens)
+        },
+        web: {}
+      })}
+      {...selectProps(rest)}
+    >
+      <Typography
+        tokens={getTypographyTokens(themeTokens)}
+        variant={getTypographyVariant(themeTokens)}
+      >
+        {children}
+      </Typography>
+    </View>
+  )
+})
+
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: variantProp.propType
+}
+
+Badge.displayName = 'Badge'
+
+export default Badge
+
+const staticStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignSelf: 'flex-start'
+  }
+})

package/src/Badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './Badge'
+
+export default Badge

package/src/Checkbox/CheckboxGroup.jsx

@@ -112,6 +112,15 @@ const CheckboxGroup = forwardRef(
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       values: checkedIds,
       initialValues: initialCheckedIds,
@@ -163,14 +172,7 @@ const CheckboxGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         showErrorBorder
-        tokens={{
-          outlineWidth,
-          borderTopLeftRadius,
-          borderTopRightRadius,
-          borderBottomLeftRadius,
-          borderBottomRightRadius,
-          outlineOffset
-        }}
+        tokens={borderTokens}
         showIcon={showIcon}
         {...selectProps(rest)}
       >

package/src/CheckboxCardGroup/CheckboxCardGroup.jsx

@@ -53,6 +53,7 @@ const CheckboxCardGroup = forwardRef(
       space,
       fieldSpace,
       direction,
+      showIcon,
       outlineWidth,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -104,7 +105,7 @@ const CheckboxCardGroup = forwardRef(
         validation={validation}
         tokens={borderTokens}
         showErrorBorder
-        showIcon
+        showIcon={showIcon}
         accessibilityRole="checkbox"
         {...selectProps(rest)}
       >

package/src/List/ListItemContent.jsx

@@ -54,7 +54,8 @@ const ListItemContent = ({ tokens, children }) => {
 
 const staticStyles = StyleSheet.create({
   wrap: {
-    flex: 1
+    flex: 1,
+    justifyContent: 'center'
   }
 })
 

package/src/List/ListItemMark.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { View, StyleSheet } from 'react-native'
+import Icon from '../Icon'
 
 export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
@@ -26,13 +27,6 @@ const selectBulletPositioningStyles = ({ itemIconSize }) => ({
   height: itemIconSize
 })
 
-const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-})
-
 const selectBulletContainerStyles = ({ itemBulletContainerWidth, itemBulletContainerAlign }) => ({
   width: itemBulletContainerWidth,
   alignItems: itemBulletContainerAlign
@@ -61,13 +55,18 @@ const ListItemMark = ({ icon, iconColor, iconSize, tokens = {} }) => {
     )
   }
 
+  const bulletColor = themeTokens.itemBulletColor
+  const { bulletIcon } = themeTokens
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-  const itemBulletStyles = selectBulletStyles(themeTokens)
   const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+
   return (
     <View style={[sideItemContainerStyles, itemBulletContainerStyles]}>
-      <View style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}>
-        <View style={itemBulletStyles} testID="unordered-item-bullet" />
+      <View
+        style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
+        testID="unordered-item-bullet"
+      >
+        <Icon icon={bulletIcon} tokens={{ color: bulletColor }} />
       </View>
     </View>
   )

package/src/RadioCard/RadioCardGroup.jsx

@@ -99,10 +99,30 @@ const RadioCardGroup = forwardRef(
     ref
   ) => {
     const viewport = useViewport()
-    const { space, fieldSpace, direction } = useThemeTokens('RadioCardGroup', tokens, variant, {
+    const {
+      space,
+      fieldSpace,
+      direction,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('RadioCardGroup', tokens, variant, {
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValue, setValue } = useInputValue({
       value: checkedId,
       initialValue: initialCheckedId,
@@ -134,7 +154,8 @@ const RadioCardGroup = forwardRef(
         inactive={inactive || readOnly}
         validation={validation}
         showErrorBorder
-        showIcon
+        tokens={borderTokens}
+        showIcon={showIcon}
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >

package/src/index.js

@@ -2,6 +2,7 @@ export { default as A11yText } from './A11yText'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'
+export { default as Badge } from './Badge'
 export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export * from './Carousel'