@telus-uds/components-base 1.88.0 → 1.89.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 04 Jul 2024 19:28:59 GMT and should not be manually modified.
+This log was last generated on Fri, 19 Jul 2024 18:14:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.89.0
+
+Fri, 19 Jul 2024 18:14:09 GMT
+
+### Minor changes
+
+- `PriceLockup`: Add `micro` option to `size` variant (tim.hysniu@telus.com)
+- Add type definitions for `Checkbox` and `CheckboxCardGroup` (evander.owusu@telus.com)
+
+### Patches
+
+- `Carousel`: add accessibilityLabel to autoplay button to resolve accessibility issue (<tony.eng@telus.com>)
+- `TextInput`: make feedback tokens and props work (guillermo.peitzner@telus.com)
+- `CarouselTabsPanel`: add accessibilityRole to resolve accessibility issue (<tony.eng@telus.com>)
+
 ## 1.88.0
 
-Thu, 04 Jul 2024 19:28:59 GMT
+Thu, 04 Jul 2024 19:35:15 GMT
 
 ### Minor changes
 

package/lib/Carousel/Carousel.js

@@ -610,6 +610,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
+          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -50,6 +50,7 @@ const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         variant: dividerVariant
       },
       ref: ref,
+      accessibilityRole: "tablist",
       children: items.map((_ref2, index) => {
         let {
           title,

package/lib/Carousel/dictionary.js

@@ -11,7 +11,9 @@ var _default = {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -19,7 +21,9 @@ var _default = {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 };
 exports.default = _default;

package/lib/InputSupports/InputSupports.js

@@ -23,6 +23,7 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     feedbackTokens = {},
+    feedbackProps = {},
     tooltip,
     validation,
     nativeID
@@ -60,7 +61,8 @@ const InputSupports = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       id: feedbackId,
       title: feedback,
       validation: validation,
-      tokens: feedbackTokens
+      tokens: feedbackTokens,
+      ...feedbackProps
     }) : null]
   });
 });
@@ -92,6 +94,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: (0, _utils.getTokensPropType)('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: _propTypes.default.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib/utils/props/inputSupportsProps.js

@@ -29,6 +29,14 @@ var _default = {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: _propTypes.default.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: _propTypes.default.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: _propTypes.default.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -45,6 +53,8 @@ var _default = {
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     } = _ref;
@@ -55,6 +65,8 @@ var _default = {
         hint,
         hintPosition,
         feedback,
+        feedbackTokens,
+        feedbackProps,
         tooltip,
         validation
       }

package/lib-module/Carousel/Carousel.js

@@ -604,6 +604,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         })],
         children: /*#__PURE__*/_jsx(IconButton, {
           icon: isCarouselPlaying ? pauseIcon : playIcon,
+          accessibilityLabel: isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel'),
           variant: previousNextIconButtonVariants,
           onPress: onAnimationControlButtonPress
         })

package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -44,6 +44,7 @@ const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         variant: dividerVariant
       },
       ref: ref,
+      accessibilityRole: "tablist",
       children: items.map((_ref2, index) => {
         let {
           title,

package/lib-module/Carousel/dictionary.js

@@ -5,7 +5,9 @@ export default {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -13,6 +15,8 @@ export default {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 };

package/lib-module/InputSupports/InputSupports.js

@@ -17,6 +17,7 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     feedback,
     feedbackTokens = {},
+    feedbackProps = {},
     tooltip,
     validation,
     nativeID
@@ -54,7 +55,8 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       id: feedbackId,
       title: feedback,
       validation: validation,
-      tokens: feedbackTokens
+      tokens: feedbackTokens,
+      ...feedbackProps
     }) : null]
   });
 });
@@ -86,6 +88,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: getTokensPropType('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: PropTypes.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/lib-module/utils/props/inputSupportsProps.js

@@ -22,6 +22,14 @@ export default {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: PropTypes.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: PropTypes.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -38,6 +46,8 @@ export default {
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     } = _ref;
@@ -48,6 +58,8 @@ export default {
         hint,
         hintPosition,
         feedback,
+        feedbackTokens,
+        feedbackProps,
         tooltip,
         validation
       }

package/package.json

@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.88.0",
+  "version": "1.89.0",
   "types": "types/index.d.ts"
 }

package/src/Carousel/Carousel.jsx

@@ -687,6 +687,9 @@ const Carousel = React.forwardRef(
             >
               <IconButton
                 icon={isCarouselPlaying ? pauseIcon : playIcon}
+                accessibilityLabel={
+                  isCarouselPlaying ? getCopy('pauseButtonLabel') : getCopy('playButtonLabel')
+                }
                 variant={previousNextIconButtonVariants}
                 onPress={onAnimationControlButtonPress}
               />

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -32,7 +32,13 @@ const CarouselTabsPanel = React.forwardRef(({ items }, ref) => {
 
   return (
     <View style={selectTabPanelStyle()}>
-      <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
+      <StackView
+        direction="row"
+        space={3}
+        divider={{ variant: dividerVariant }}
+        ref={ref}
+        accessibilityRole="tablist"
+      >
         {items.map(({ title, onPress, inverse, ...panelItemProps }, index) => {
           const selected = index === activeIndex
           const isNext = index === activeIndex + 1

package/src/Carousel/dictionary.js

@@ -5,7 +5,9 @@ export default {
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
-    skipLink: 'Skip %{title}'
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
   },
   fr: {
     // French translations
@@ -13,6 +15,8 @@ export default {
     iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
     stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
-    skipLink: 'Passer %{title}'
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
   }
 }

package/src/InputSupports/InputSupports.jsx

@@ -18,6 +18,7 @@ const InputSupports = React.forwardRef(
       hintPosition = 'inline',
       feedback,
       feedbackTokens = {},
+      feedbackProps = {},
       tooltip,
       validation,
       nativeID
@@ -54,6 +55,7 @@ const InputSupports = React.forwardRef(
             title={feedback}
             validation={validation}
             tokens={feedbackTokens}
+            {...feedbackProps}
           />
         ) : null}
       </StackView>
@@ -89,6 +91,10 @@ InputSupports.propTypes = {
    * Additional tokens to override the default feedback tokens.
    */
   feedbackTokens: getTokensPropType('Feedback'),
+  /**
+   * Additional props to pass to the `Feedback` component.
+   */
+  feedbackProps: PropTypes.object,
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/src/utils/props/inputSupportsProps.js

@@ -23,6 +23,14 @@ export default {
      * Visual variant is determined based on the `validation` prop.
      */
     feedback: PropTypes.string,
+    /**
+     * Tokens to be passed to the feedback component.
+     */
+    feedbackTokens: PropTypes.object,
+    /**
+     * Props to be passed to the feedback component.
+     */
+    feedbackProps: PropTypes.object,
     /**
      * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
      */
@@ -32,13 +40,25 @@ export default {
      */
     validation: PropTypes.oneOf(['error', 'success'])
   },
-  select: ({ copy, label, hint, hintPosition, feedback, tooltip, validation }) => ({
+  select: ({
+    copy,
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    feedbackTokens,
+    feedbackProps,
+    tooltip,
+    validation
+  }) => ({
     supportsProps: {
       copy,
       label,
       hint,
       hintPosition,
       feedback,
+      feedbackTokens,
+      feedbackProps,
       tooltip,
       validation
     }

package/types/Checkbox.d.ts

@@ -0,0 +1,47 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native'
+import { Tokens, Variant } from '../ThemeProvider'
+
+type CheckboxProps = {
+  checked?: boolean
+  defaultChecked?: boolean
+  error?: boolean
+  feedback?: string
+  id?: string
+  inactive?: boolean
+  label?: string
+  name?: string
+  onChange?: (value: boolean, event: any) => void
+  tokens?: Tokens
+  value?: string | number | boolean
+  variant?: Variant
+  style?: StyleProp<ViewStyle>
+  labelStyle?: StyleProp<TextStyle>
+  containerStyle?: StyleProp<ViewStyle>
+}
+
+type CheckboxTokens = {
+  containerBackgroundColor?: string
+  feedbackMarginBottom?: number
+  feedbackMarginTop?: number
+  feedbackPosition?: string
+  icon?: string
+  iconBackgroundColor?: string
+  iconColor?: string
+  iconSize?: number
+  inputBackgroundColor?: string
+  inputBorderColor?: string
+  inputBorderRadius?: number | string
+  inputBorderWidth?: number | string
+  inputHeight?: number
+  inputOutlineColor?: string
+  inputOutlineOffset?: number
+  inputOutlineWidth?: number | string
+  inputShadow?: string
+  inputWidth?: number
+  labelColor?: string
+  labelFontName?: string
+  labelFontSize?: number
+  labelFontWeight?: number
+  labelLineHeight?: number
+  labelMarginLeft?: number
+}

package/types/CheckboxCardGroup.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { Direction, ResponsiveDirection } from './Common'
+
+type CheckboxCardGroupProps = {
+  copy?: 'en' | 'fr'
+  variant?: 'fullWidth'
+  legend?: string
+  tooltip?: string
+  hint?: string
+  hintPosition?: 'inline' | 'below'
+  validation?: 'error' | 'success'
+  feedback?: string
+  initialCheckedIds?: string[]
+  checkedIds?: string[]
+  onChange?: (checkedIds: string[]) => void
+  readOnly?: boolean
+  inactive?: boolean
+}
+
+type CheckboxCardGroupTokens = {
+  borderBottomLeftRadius?: number
+  borderBottomRightRadius?: number
+  borderTopLeftRadius?: number
+  borderTopRightRadius?: number
+  direction?: Direction | ResponsiveDirection
+  fieldSpace?: number
+  outlineOffset?: number
+  outlineWidth?: number
+  showIcon?: boolean
+  space?: number
+}
+
+type checkboxCardTokens = {
+  outerBorderColer?: string
+  outerBorderWidth?: number
+  outerBorderGap?: number
+  flex?: number
+  backgroundColor?: string
+  borderColor?: string
+  borderRadius?: number
+  borderWidth?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  minWidth?: number
+  shadow?: string
+  contentAlignItems?: string
+  contentJustifyContent?: string
+  contentFlexGrow?: number
+  contentFlexShrink?: number
+  checkboxCheckedBackgroundColor?: string
+  checkboxCheckedSize?: number
+  checkboxInputBackgroundColor?: string
+  checkboxInputBorderColor?: string
+  checkboxInputBorderWidth?: number
+  checkboxInputOutlineColor?: string
+  checkboxInputOutlineWidth?: number
+  checkboxInputSize?: number
+  checkboxOuterBorderColor?: string
+  checkboxOuterBorderWidth?: number
+  checkboxOuterBorderGap?: number
+  fontSize?: number
+  fontName?: string
+  lineHeight?: number
+  color?: string
+  letterSpacing?: string
+  textTransform?: string
+  fontWeight?: number
+  checkboxSpace?: number
+  contentSpace?: number
+}

package/types/index.d.ts

@@ -7,6 +7,16 @@ export type { BoxVariants, BoxTokens, BoxProps } from './Box'
 export { default as ChevronLink } from './ChevronLink'
 export { ChevronLinkTokens, ChevronLinkProps, HrefProps } from './ChevronLink'
 
+export { default as Checkbox } from './Checkbox'
+export { CheckboxProps, CheckboxTokens } from './Checkbox'
+
+export { default as CheckboxCardGroup } from './CheckboxCardGroup'
+export {
+  CheckboxCardGroupProps,
+  CheckboxCardGroupTokens,
+  checkboxCardTokens
+} from './CheckboxCardGroup'
+
 export { default as Divider } from './Divider'
 export { DividerVariants, DividerProps, DividerTokens } from './Divider'