@telus-uds/components-base 1.66.0 → 1.67.1

package/lib-module/Progress/Progress.js

@@ -5,7 +5,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -22,6 +21,7 @@ const selectProgressStyles = _ref => {
     height
   };
 };
+
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -51,8 +51,6 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-
-
 const Progress = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -69,18 +67,16 @@ const Progress = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 Progress.displayName = 'Progress';
-Progress.propTypes = { ...selectedSystemPropTypes,
-
+Progress.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Progress tokens.
    */
   tokens: getTokensPropType('Progress'),
-
   /**
    * Progress variant.
    */

package/lib-module/Progress/ProgressBar.js

@@ -8,7 +8,6 @@ import { useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const selectBarStyles = (_ref, percentage) => {
   let {
     backgroundColor,
@@ -24,6 +23,7 @@ const selectBarStyles = (_ref, percentage) => {
     width: `${percentage}%`
   };
 };
+
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -58,8 +58,6 @@ const selectBarStyles = (_ref, percentage) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-
-
 const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children = null,
@@ -69,13 +67,11 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
-
   if (percentage < 0) {
     throw new Error('ProgressBar: `percentage` must be a positive number');
   } else if (percentage > 100) {
     throw new Error('ProgressBar: `percentage` cannot exceed 100');
   }
-
   const selectedProps = selectProps({
     accessibilityRole: 'progressbar',
     accessibilityValue: {
@@ -96,28 +92,24 @@ const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }) : null;
 });
 ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = { ...selectedSystemPropTypes,
-
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional children that can be used to customize the progress bar filling.
    */
   children: PropTypes.node,
-
   /**
    * Accessibility label for the progress bar.
    */
   accessibilityLabel: PropTypes.string.isRequired,
-
   /**
    * Percentage of completion.
    */
   percentage: PropTypes.number,
-
   /**
    * Progress bar tokens.
    */
   tokens: getTokensPropType('ProgressBar'),
-
   /**
    * Progress bar variant.
    */

package/lib-module/Progress/ProgressBarBackground.js

@@ -10,7 +10,6 @@ const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant
   } = _ref;
   let source = null;
-
   if (variant !== null && variant !== void 0 && variant.inactive) {
     source = inactiveBackground;
   } else if (variant !== null && variant !== void 0 && variant.negative) {
@@ -18,7 +17,6 @@ const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   } else {
     return null;
   }
-
   return /*#__PURE__*/_jsx(ImageBackground, {
     ref: ref,
     source: {

package/lib-module/QuickLinks/QuickLinks.js

@@ -6,13 +6,13 @@ import { getTokensPropType, variantProp } from '../utils';
 import List from '../List';
 import StackWrap from '../StackView/StackWrap';
 import QuickLinksCard from './QuickLinksCard';
+
 /**
  * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
  *  - If the theme returns `list` token as true, it renders an ordered list based on List
  *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -35,7 +35,6 @@ const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = useThemeTokens('QuickLinks', tokens, variant, {
     viewport
   });
-
   const content = list && /*#__PURE__*/_jsx(List, {
     ref: ref,
     tokens: listTokens,
@@ -53,7 +52,6 @@ const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest,
     children: children
   });
-
   return card ? /*#__PURE__*/_jsx(QuickLinksCard, {
     tokens: cardTokens,
     children: content
@@ -62,17 +60,14 @@ const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
 QuickLinks.displayName = 'QuickLinks';
 QuickLinks.propTypes = {
   tokens: getTokensPropType('QuickLinks'),
-
   /**
    * Custom tokens override for `Card`
    */
   cardTokens: getTokensPropType('Card'),
-
   /**
    * Custom tokens override for `QuickLinksList`
    */
   listTokens: getTokensPropType('QuickLinksList'),
-
   /**
    * The HTML tag to render the list as
    */

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -3,15 +3,14 @@ import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import { getTokensPropType, variantProp } from '../utils';
 import CardBase from '../Card/CardBase';
+
 /**
  * Private subcomponent for use within QuickLinks.
  *
  * Restyled Card with identical behaviour to Card, but themed according to the
  * QuickLinksCard theme rather than the Card theme.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const QuickLinksList = _ref => {
   let {
     tokens,
@@ -24,7 +23,6 @@ const QuickLinksList = _ref => {
     children: children
   });
 };
-
 QuickLinksList.propTypes = {
   tokens: getTokensPropType('QuickLinksCard'),
   variant: variantProp.propType,

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -5,12 +5,12 @@ import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import PressableListItemBase from '../List/PressableListItemBase';
 import ButtonBase from '../Button/ButtonBase';
+
 /**
  * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -40,7 +40,8 @@ const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 QuickLinksItem.displayName = 'QuickLinksItem';
-QuickLinksItem.propTypes = { ...withLinkRouter.propTypes,
+QuickLinksItem.propTypes = {
+  ...withLinkRouter.propTypes,
   ...PressableListItemBase.propTypes,
   ...ButtonBase.propTypes,
   tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),

package/lib-module/QuickLinksFeature/QuickLinksFeature.js

@@ -2,23 +2,21 @@ import React, { forwardRef, Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { StackWrap } from '../StackView';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'; // pass through and type relevant system props - add more sets for interactive components
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 
+// pass through and type relevant system props - add more sets for interactive components
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
 const isQuickListItem = element => {
   var _element$type, _element$type2;
-
   const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
   return Boolean(elementName.match(/QuickLinksFeatureItem/));
 };
+
 /**
  * QuickLinksFeature renders a list of interactive items.
  *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
  */
-
-
 const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
@@ -36,7 +34,6 @@ const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (isQuickListItem(child)) {
       return /*#__PURE__*/cloneElement(child, child.props);
     }
-
     return null;
   });
   return /*#__PURE__*/_jsx(StackWrap, {
@@ -52,15 +49,14 @@ const QuickLinksFeature = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 QuickLinksFeature.displayName = 'QuickLinksFeature';
-QuickLinksFeature.propTypes = { ...selectedSystemPropTypes,
+QuickLinksFeature.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('QuickLinksFeature'),
   variant: variantProp.propType,
-
   /**
    * Default wrapper tag, by default it's "ul"
    */
   tag: PropTypes.string,
-
   /**
    * QuickLinksFeature.Item component
    */

package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -8,12 +8,12 @@ import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, s
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
 import { Link } from '../Link';
-import { StackWrap } from '../StackView'; // pass through and type relevant system props - add more sets for interactive components
+import { StackWrap } from '../StackView';
 
+// pass through and type relevant system props - add more sets for interactive components
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
-
 const selectImageStyle = imageDimension => ({
   width: imageDimension,
   height: imageDimension,
@@ -24,7 +24,6 @@ const selectImageStyle = imageDimension => ({
     }
   })
 });
-
 const selectContainerStyle = _ref => {
   let {
     contentMaxDimension,
@@ -37,14 +36,12 @@ const selectContainerStyle = _ref => {
     overflow: 'hidden'
   };
 };
-
 const selectImageContainerStyle = contentMaxDimension => ({
   width: contentMaxDimension,
   height: contentMaxDimension,
   justifyContent: 'center',
   alignItems: 'center'
 });
-
 const selectLinkToken = _ref2 => {
   let {
     outerBorderColor
@@ -53,13 +50,12 @@ const selectLinkToken = _ref2 => {
     outerBorderColor
   };
 };
+
 /**
  * Component export along with QuickLinksFeature to be used as children
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-
-
 const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -96,11 +92,13 @@ const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
         pressed,
         focus
       });
-      const textStyle = { ...applyTextStyles(themeTokens),
+      const textStyle = {
+        ...applyTextStyles(themeTokens),
         textDecorationLine: textLine
       };
       return /*#__PURE__*/_jsx(View, {
-        style: selectContainerStyle({ ...themeTokens,
+        style: selectContainerStyle({
+          ...themeTokens,
           contentMaxDimension
         }),
         children: /*#__PURE__*/_jsxs(StackWrap, {
@@ -128,21 +126,19 @@ const QuickLinksFeatureItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   });
 });
 QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
-QuickLinksFeatureItem.propTypes = { ...withLinkRouter.propTypes,
+QuickLinksFeatureItem.propTypes = {
+  ...withLinkRouter.propTypes,
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('QuickLinksFeatureItem'),
   variant: variantProp.propType,
-
   /**
    * Text which will be rendered within the Link
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Image accessibility label
    */
   imageAccessibilityLabel: PropTypes.string.isRequired,
-
   /**
    * Image node or Image url
    */

package/lib-module/Radio/Radio.js

@@ -12,7 +12,6 @@ import StackView from '../StackView';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-
 const selectContainerStyles = _ref => {
   let {
     containerBackgroundColor,
@@ -35,7 +34,6 @@ const selectContainerStyles = _ref => {
     ...applyShadowToken(containerShadow)
   };
 };
-
 const selectDescriptionStyles = _ref2 => {
   let {
     containerPaddingLeft = 0,
@@ -59,7 +57,6 @@ const selectDescriptionStyles = _ref2 => {
     })
   };
 };
-
 const selectLabelStyles = _ref3 => {
   let {
     labelColor,
@@ -78,6 +75,7 @@ const selectLabelStyles = _ref3 => {
     marginLeft: labelMarginLeft
   });
 };
+
 /**
  * Basic Radio component.
  *
@@ -110,8 +108,6 @@ const selectLabelStyles = _ref3 => {
  * or the internal state in case of uncontrolled radio button.
  *
  */
-
-
 const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     checked,
@@ -143,18 +139,15 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
     error,
     ...variant
   });
-
   const handleChange = event => {
     if (!inactive && !isChecked) {
       setIsChecked(true, event);
     }
   };
-
   const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio is the Space key
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
-
   const uniqueId = useUniqueId('radio');
   const inputId = id ?? uniqueId;
   const selectedProps = selectProps({
@@ -211,7 +204,8 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
             })
           })]
         }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
-          style: selectDescriptionStyles({ ...getTokens(),
+          style: selectDescriptionStyles({
+            ...getTokens(),
             fontColor: labelStyles.color
           }),
           children: description
@@ -221,63 +215,52 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 Radio.displayName = 'Radio';
-Radio.propTypes = { ...selectedSystemPropTypes,
-
+Radio.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
    */
   checked: PropTypes.bool,
-
   /**
    * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
    */
   defaultChecked: PropTypes.bool,
-
   /**
    * An optional radio button description.
    */
   description: PropTypes.string,
-
   /**
    * Radio button ID.
    */
   id: PropTypes.string,
-
   /**
    * Whether the corresponding input is disabled or active.
    */
   inactive: PropTypes.bool,
-
   /**
    * The label.
    */
   label: PropTypes.string,
-
   /**
    * Associate this radio button with a group (set as the name attribute).
    */
   name: PropTypes.string,
-
   /**
    * Whether the underlying input triggered a validation error or not.
    */
   error: PropTypes.bool,
-
   /**
    * The value. Must be unique within the group.
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-
   /**
    * Callback called when a controlled radio button gets interacted with.
    */
   onChange: PropTypes.func,
-
   /**
    * Radio tokens.
    */
   tokens: getTokensPropType('Radio'),
-
   /**
    * Radio variant.
    */

package/lib-module/Radio/RadioButton.js

@@ -8,14 +8,13 @@ import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../Th
 import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // TODO: roll out a standard approach to token sets
-// https://github.com/telus/universal-design-system/issues/782
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
+// TODO: roll out a standard approach to token sets
+// https://github.com/telus/universal-design-system/issues/782
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
 export const selectRadioButtonTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
-
 const getBorderRadius = inputSize => inputSize / 2;
-
 const selectCheckedStyles = _ref => {
   let {
     checkedBackgroundColor,
@@ -28,7 +27,6 @@ const selectCheckedStyles = _ref => {
     width: checkedSize
   };
 };
-
 const selectInputStyles = _ref2 => {
   let {
     inputBackgroundColor,
@@ -54,7 +52,6 @@ const selectInputStyles = _ref2 => {
     })
   };
 };
-
 const selectOuterBorderStyles = _ref3 => {
   let {
     outerBorderColor,
@@ -62,7 +59,8 @@ const selectOuterBorderStyles = _ref3 => {
     outerBorderGap,
     inputSize
   } = _ref3;
-  return { ...applyOuterBorder({
+  return {
+    ...applyOuterBorder({
       outerBorderColor,
       outerBorderWidth,
       outerBorderGap,
@@ -70,12 +68,11 @@ const selectOuterBorderStyles = _ref3 => {
     })
   };
 };
+
 /**
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
-
-
 const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     isChecked,
@@ -116,7 +113,8 @@ const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
   });
 });
 RadioButton.displayName = 'RadioButton';
-RadioButton.propTypes = { ...selectedSystemPropTypes,
+RadioButton.propTypes = {
+  ...selectedSystemPropTypes,
   isChecked: PropTypes.bool,
   tokens: getTokensSetPropType(tokenKeys, {
     allowFunction: true