@telus-uds/components-base 2.0.2 → 2.1.0

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -1,12 +1,18 @@
 import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
 import { useCarousel } from '../CarouselContext';
 import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
+import Spacer from '../../Spacer';
+import Progress from '../../Progress';
 import { variantProp } from '../../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    variant
+    variant,
+    enableDisplayMultipleItemsPerSlide
   } = _ref;
   const {
     activeIndex,
@@ -30,6 +36,32 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
   };
   const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
+  if (enableDisplayMultipleItemsPerSlide) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(StackView, {
+        direction: "row",
+        tokens: stackViewTokens,
+        ref: ref,
+        children: /*#__PURE__*/_jsx(View, {
+          style: staticStyles.progress,
+          children: /*#__PURE__*/_jsx(Progress, {
+            children: /*#__PURE__*/_jsx(Progress.Bar, {
+              offset: {
+                items: totalItems,
+                current: activeIndex + 1
+              },
+              variant: {
+                style: 'subtle'
+              },
+              accessibilityLabel: getCopyWithPlaceholders('stepTrackerLabel')
+            })
+          })
+        })
+      })]
+    });
+  }
   return /*#__PURE__*/_jsx(StackView, {
     direction: "row",
     tokens: stackViewTokens,
@@ -38,7 +70,6 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       current: activeIndex,
       steps: steps,
       copy: {
-        // Give StepTracker copy from Carousel's language and dictionary
         stepLabel: getCopyWithPlaceholders('stepLabel'),
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
@@ -49,6 +80,12 @@ const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 CarouselStepTracker.displayName = 'CarouselStepTracker';
 CarouselStepTracker.propTypes = {
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool
 };
+const staticStyles = StyleSheet.create({
+  progress: {
+    width: 288
+  }
+});
 export default CarouselStepTracker;

package/lib/Carousel/Constants.js

@@ -0,0 +1,3 @@
+export const ITEMS_PER_VIEWPORT_MD = 2;
+export const ITEMS_PER_VIEWPORT_LG_XL = 3;
+export const GAP_BETWEEN_ITEMS = 16;

package/lib/Checkbox/CheckboxGroup.js

@@ -119,6 +119,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       id,
       onChange: itemOnChange,
       ref: itemRef,
+      inactive: itemInactive,
       ...itemRest
     } = _ref2;
     const checkboxId = id || `Checkbox[${index}]`;
@@ -131,7 +132,7 @@ const CheckboxGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       id: checkboxId,
       checked: currentValues.includes(checkboxId),
       onChange: handleChange,
-      inactive: inactive,
+      inactive: itemInactive,
       label: label,
       name: inputGroupName,
       tokens: radioTokens,
@@ -183,7 +184,8 @@ CheckboxGroup.propTypes = {
     label: PropTypes.string,
     id: PropTypes.string,
     onChange: PropTypes.func,
-    ref: ABBPropTypes.ref()
+    ref: ABBPropTypes.ref(),
+    inactive: PropTypes.bool
   })),
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -11,6 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
 export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
+const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
+  borderBottomWidth,
+  borderBottomColor
+});
 
 /**
  * Base component that scrolls horizontally and displays left and right buttons if
@@ -114,19 +118,19 @@ const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   return /*#__PURE__*/_jsxs(View, {
     ref: ref,
     style: staticStyles.container,
-    children: [/*#__PURE__*/_jsx(ScrollViewEnd, {
-      onScrollEnd: handleScrollEnd,
-      ref: scrollRef,
-      horizontal: true,
-      onContentSizeChange: handleContentWidth,
-      onLayout: handleContainerLayout,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [staticStyles.scrollContainer, {
-        borderBottomWidth,
-        borderBottomColor
-      }],
-      ...selectProps(rest),
-      children: children
+    children: [/*#__PURE__*/_jsx(View, {
+      style: selectBorderStyles(borderBottomWidth, borderBottomColor),
+      children: /*#__PURE__*/_jsx(ScrollViewEnd, {
+        onScrollEnd: handleScrollEnd,
+        ref: scrollRef,
+        horizontal: true,
+        onContentSizeChange: handleContentWidth,
+        onLayout: handleContainerLayout,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: staticStyles.scrollContainer,
+        ...selectProps(rest),
+        children: children
+      })
     }), showPreviousButton && /*#__PURE__*/_jsx(ScrollButton, {
       icon: previousIcon,
       onPress: scrollPrevious,

package/lib/Icon/Icon.js

@@ -53,6 +53,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       ...style,
       backgroundColor: themeTokens.backgroundColor,
       borderRadius: themeTokens.borderRadius,
+      paddingTop: themeTokens.paddingTop,
       ...paddingStyles
     },
     dataSet: dataSet,

package/lib/InputSupports/InputSupports.js

@@ -55,6 +55,9 @@ const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       title: feedback,
       validation: validation,
       tokens: feedbackTokens,
+      variant: {
+        icon: feedbackProps.showFeedbackIcon
+      },
       ...feedbackProps
     }) : null]
   });

package/lib/Link/LinkBase.js

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Text from "react-native-web/dist/exports/Text";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils/props';
+import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps, contentfulProps } from '../utils/props';
 import { resolvePressableTokens } from '../utils/pressability';
 import { withLinkRouter } from '../utils';
 import InlinePressable from './InlinePressable';
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps, contentfulProps]);
 const selectOuterBorderStyles = _ref => {
   let {
     outerBorderColor,

package/lib/Modal/Modal.js

@@ -37,7 +37,9 @@ const selectContainerStyles = _ref => {
 const selectModalStyles = _ref2 => {
   let {
     backgroundColor,
+    borderColor,
     borderRadius,
+    borderWidth,
     height,
     paddingLeft,
     paddingRight,
@@ -47,7 +49,9 @@ const selectModalStyles = _ref2 => {
   } = _ref2;
   return {
     backgroundColor,
+    borderColor,
     borderRadius,
+    borderWidth,
     height,
     paddingLeft,
     paddingRight,

package/lib/Modal/ModalContent.js

@@ -55,7 +55,29 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const hasConfirmButton = confirmButtonText !== undefined && onConfirm !== undefined;
   const hasCancelButton = cancelButtonText !== undefined && onCancel !== undefined;
   const hasHeadingSection = Boolean(heading || subHeading);
-  const selectFooterContainerStyles = _ref3 => {
+  const selectHeadingContainerStyles = _ref3 => {
+    let {
+      paddingLeft,
+      paddingRight,
+      marginLeft,
+      marginRight,
+      borderColor,
+      headingBorderBottomWidth,
+      headingPaddingRight,
+      headingPaddingTop
+    } = _ref3;
+    return {
+      flexDirection: 'column',
+      marginLeft: -marginLeft,
+      marginRight: -marginRight,
+      paddingLeft,
+      paddingTop: headingPaddingTop,
+      paddingRight: paddingRight + headingPaddingRight,
+      borderBottomColor: borderColor,
+      borderBottomWidth: headingBorderBottomWidth
+    };
+  };
+  const selectFooterContainerStyles = _ref4 => {
     let {
       paddingLeft,
       paddingRight,
@@ -67,7 +89,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       direction,
       footerTopWidth,
       hasBorder
-    } = _ref3;
+    } = _ref4;
     return {
       flexDirection: direction,
       alignItems: 'center',
@@ -81,11 +103,6 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       borderTopColor: borderColor
     };
   };
-  const headingStyles = {
-    flexDirection: 'column',
-    paddingTop: 8,
-    paddingRight: themeTokens.headingPaddingRight
-  };
   const subheadingStyles = {
     marginTop: themeTokens.subHeadingMarginTop
   };
@@ -93,7 +110,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: styles.modalContent,
     ref: ref,
     children: [hasHeadingSection && /*#__PURE__*/_jsxs(View, {
-      style: headingStyles,
+      style: selectHeadingContainerStyles(themeTokens),
       children: [heading && /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: headingLevel
@@ -120,6 +137,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         showsVerticalScrollIndicator: true
       },
       onLayout: handleContainerLayout,
+      top: themeTokens.contentPaddingTop,
+      bottom: themeTokens.contentPaddingBottom,
       children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })