@telus-uds/components-base 1.67.1 → 1.69.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Nov 2023 22:28:25 GMT and should not be manually modified.
+This log was last generated on Sat, 18 Nov 2023 02:25:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.69.0
+
+Sat, 18 Nov 2023 02:25:11 GMT
+
+### Minor changes
+
+- updating notification stories (srikanthkhari@gmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.46.0
+
+### Patches
+
+- `TermsAndConditions`: Fix unexpected state handling in `ExpandCollapse.Panel` (shahzaibkhalidmalik@outlook.com)
+- fixes to getIcon method for card variant in TextInput (email not defined)
+- removing koodo rebrand iconset from supports (srikanthkhari@gmail.com)
+
+## 1.68.0
+
+Wed, 15 Nov 2023 18:45:58 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:28:25 GMT
+Fri, 10 Nov 2023 22:37:27 GMT
 
 ### Patches
 

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/ExpandCollapse/Panel.js

@@ -174,7 +174,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) =>
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectContainerStyles(themeTokens),
-          children: children
+          children: isExpanded ? children : null
         })
       })
     })]

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/TextInput/TextInputBase.js

@@ -152,26 +152,29 @@ const getIcon = function () {
     visaIcon,
     masterCardIcon
   } = arguments.length > 1 ? arguments[1] : undefined;
-  const cardType = {
-    1: {
-      icon: visaIcon,
-      testID: 'visa'
-    },
-    2: {
-      icon: amexIcon,
-      testID: 'amex'
-    },
-    4: {
-      icon: masterCardIcon,
-      testID: 'mastercard'
-    }
-  };
-  const firstDigit = cardNumber ? cardNumber[0] : '';
-  const defaultIcon = {
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '');
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4);
+  const number = Number(firstFourDigits);
+  const visaRange = number >= 4000 && number <= 4999;
+  const amexRange = number >= 3400 && number <= 3499 || number >= 3700 && number <= 3799;
+  const masterCardRange = number >= 5100 && number <= 5599 || number >= 2221 && number <= 2720;
+  let selectedIcon = {
     icon: defaultCreditIcon,
     testID: 'default'
   };
-  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  const objVisaIcon = {
+    icon: visaIcon,
+    testID: 'visa'
+  };
+  const objAmexIcon = {
+    icon: amexIcon,
+    testID: 'amex'
+  };
+  const objMasterCardIcon = {
+    icon: masterCardIcon,
+    testID: 'mastercard'
+  };
+  if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     icon: selectedIcon.icon,
     variant: {

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/ExpandCollapse/Panel.js

@@ -166,7 +166,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
         },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
-          children: children
+          children: isExpanded ? children : null
         })
       })
     })]

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/TextInput/TextInputBase.js

@@ -144,26 +144,29 @@ const getIcon = function () {
     visaIcon,
     masterCardIcon
   } = arguments.length > 1 ? arguments[1] : undefined;
-  const cardType = {
-    1: {
-      icon: visaIcon,
-      testID: 'visa'
-    },
-    2: {
-      icon: amexIcon,
-      testID: 'amex'
-    },
-    4: {
-      icon: masterCardIcon,
-      testID: 'mastercard'
-    }
-  };
-  const firstDigit = cardNumber ? cardNumber[0] : '';
-  const defaultIcon = {
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '');
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4);
+  const number = Number(firstFourDigits);
+  const visaRange = number >= 4000 && number <= 4999;
+  const amexRange = number >= 3400 && number <= 3499 || number >= 3700 && number <= 3799;
+  const masterCardRange = number >= 5100 && number <= 5599 || number >= 2221 && number <= 2720;
+  let selectedIcon = {
     icon: defaultCreditIcon,
     testID: 'default'
   };
-  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon;
+  const objVisaIcon = {
+    icon: visaIcon,
+    testID: 'visa'
+  };
+  const objAmexIcon = {
+    icon: amexIcon,
+    testID: 'amex'
+  };
+  const objMasterCardIcon = {
+    icon: masterCardIcon,
+    testID: 'mastercard'
+  };
+  if (visaRange) selectedIcon = objVisaIcon;else if (amexRange) selectedIcon = objAmexIcon;else if (masterCardRange) selectedIcon = objMasterCardIcon;
   return /*#__PURE__*/_jsx(Icon, {
     icon: selectedIcon.icon,
     variant: {

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.1",
+    "@telus-uds/system-theme-tokens": "^2.46.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.1"
+  "version": "1.69.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/ExpandCollapse/Panel.jsx

@@ -168,7 +168,7 @@ const ExpandCollapsePanel = forwardRef(
               })
             }}
           >
-            <View style={selectContainerStyles(themeTokens)}>{children}</View>
+            <View style={selectContainerStyles(themeTokens)}>{isExpanded ? children : null}</View>
           </View>
         </Animated.View>
       </View>

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/TextInput/TextInputBase.jsx

@@ -141,15 +141,23 @@ const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
 })
 
 const getIcon = (cardNumber = '', { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon }) => {
-  const cardType = {
-    1: { icon: visaIcon, testID: 'visa' },
-    2: { icon: amexIcon, testID: 'amex' },
-    4: { icon: masterCardIcon, testID: 'mastercard' }
-  }
+  const sanitizedCardNumber = cardNumber.replace(/[^0-9]/g, '')
+  const firstFourDigits = sanitizedCardNumber.slice(0, 4)
+  const number = Number(firstFourDigits)
+
+  const visaRange = number >= 4000 && number <= 4999
+  const amexRange = (number >= 3400 && number <= 3499) || (number >= 3700 && number <= 3799)
+  const masterCardRange = (number >= 5100 && number <= 5599) || (number >= 2221 && number <= 2720)
+
+  let selectedIcon = { icon: defaultCreditIcon, testID: 'default' }
+  const objVisaIcon = { icon: visaIcon, testID: 'visa' }
+  const objAmexIcon = { icon: amexIcon, testID: 'amex' }
+  const objMasterCardIcon = { icon: masterCardIcon, testID: 'mastercard' }
+
+  if (visaRange) selectedIcon = objVisaIcon
+  else if (amexRange) selectedIcon = objAmexIcon
+  else if (masterCardRange) selectedIcon = objMasterCardIcon
 
-  const firstDigit = cardNumber ? cardNumber[0] : ''
-  const defaultIcon = { icon: defaultCreditIcon, testID: 'default' }
-  const selectedIcon = cardNumber.length > 4 ? cardType[firstDigit] || defaultIcon : defaultIcon
   return <Icon icon={selectedIcon.icon} variant={{ size: 'large' }} testID={selectedIcon.testID} />
 }
 

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'