@telus-uds/components-web 2.39.1 → 2.41.0

package/CHANGELOG.md

@@ -1,16 +1,38 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 26 Aug 2024 16:19:45 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Sep 2024 16:57:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 2.39.1
+## 2.41.0
 
-Mon, 26 Aug 2024 16:19:45 GMT
+Wed, 25 Sep 2024 16:57:49 GMT
+
+### Minor changes
+
+- `TabBar`: new component added (35577399+JoshHC@users.noreply.github.com)
+- `DownloadApp`: add component (Mauricio.BatresMontejo@telus.com)
+- Bump @telus-uds/components-base to v1.95.0
+- Bump @telus-uds/system-theme-tokens to v2.64.0
+
+### Patches
+
+- `Typography`: added strikethrough to components-web typography props as it was missing (chris.tafts@telus.com)
+
+## 2.40.0
+
+Mon, 16 Sep 2024 12:35:38 GMT
+
+### Minor changes
+
+- `Card`: Add `backgroundImage` prop (<tony.eng@telus.com>)
+- `FileUpload`: add component export (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.94.0
+- Bump @telus-uds/system-theme-tokens to v2.63.0
 
 ### Patches
 
-- Bump @telus-uds/components-base to v1.93.0
+- `Badge`: Add inverse for Badge propTypes (carlos.jeronimo@telus.com)
 
 ## 2.39.0
 

package/lib/Badge/Badge.js

@@ -121,7 +121,8 @@ Badge.propTypes = {
   variant: _propTypes.default.exact({
     outline: _propTypes.default.bool,
     purpose: _propTypes.default.oneOf(['offer', 'editorial']),
-    alternative: _propTypes.default.bool
+    alternative: _propTypes.default.bool,
+    inverse: _propTypes.default.bool
   })
 };
 var _default = Badge;

package/lib/Card/Card.js

@@ -78,6 +78,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     interactiveCard,
     onPress,
     dataSet,
+    backgroundImage,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -146,6 +147,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       padding: 'custom'
     },
     tokens: restOfTokens,
+    backgroundImage: backgroundImage,
     ...selectProps(rest),
     children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
       ref: ref,
@@ -242,6 +244,15 @@ Card.propTypes = {
     body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _componentsBase.getTokensPropType)('Card'),
     variant: _componentsBase.variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.shape({
+    // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
 var _default = Card;

package/lib/baseExports.js

@@ -117,6 +117,12 @@ Object.defineProperty(exports, "Divider", {
     return _componentsBase.Divider;
   }
 });
+Object.defineProperty(exports, "DownloadApp", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.DownloadApp;
+  }
+});
 Object.defineProperty(exports, "ExpandCollapse", {
   enumerable: true,
   get: function () {
@@ -129,6 +135,12 @@ Object.defineProperty(exports, "Feedback", {
     return _componentsBase.Feedback;
   }
 });
+Object.defineProperty(exports, "FileUpload", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.FileUpload;
+  }
+});
 Object.defineProperty(exports, "FlexGrid", {
   enumerable: true,
   get: function () {
@@ -297,6 +309,12 @@ Object.defineProperty(exports, "StepTracker", {
     return _componentsBase.StepTracker;
   }
 });
+Object.defineProperty(exports, "TabBar", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TabBar;
+  }
+});
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {

package/lib-module/Badge/Badge.js

@@ -114,7 +114,8 @@ Badge.propTypes = {
   variant: PropTypes.exact({
     outline: PropTypes.bool,
     purpose: PropTypes.oneOf(['offer', 'editorial']),
-    alternative: PropTypes.bool
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
   })
 };
 export default Badge;

package/lib-module/Card/Card.js

@@ -71,6 +71,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     interactiveCard,
     onPress,
     dataSet,
+    backgroundImage,
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     fullBleedContent: {
@@ -139,6 +140,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       padding: 'custom'
     },
     tokens: restOfTokens,
+    backgroundImage: backgroundImage,
     ...selectProps(rest),
     children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
       ref: ref,
@@ -235,6 +237,15 @@ Card.propTypes = {
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
   })
 };
 export default Card;

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, DownloadApp, ExpandCollapse, Feedback, FlexGrid, FileUpload, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Status, Tabs, TabBar, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.93.0",
+    "@telus-uds/components-base": "1.95.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.62.0",
+    "@telus-uds/system-theme-tokens": "^2.64.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.39.1"
+  "version": "2.41.0"
 }

package/src/Badge/Badge.jsx

@@ -96,7 +96,8 @@ Badge.propTypes = {
   variant: PropTypes.exact({
     outline: PropTypes.bool,
     purpose: PropTypes.oneOf(['offer', 'editorial']),
-    alternative: PropTypes.bool
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
   })
 }
 

package/src/Card/Card.jsx

@@ -76,6 +76,7 @@ const Card = React.forwardRef(
       interactiveCard,
       onPress,
       dataSet,
+      backgroundImage,
       ...rest
     } = {
       fullBleedContent: { position: null }
@@ -142,6 +143,7 @@ const Card = React.forwardRef(
         ref={ref}
         variant={{ ...variant, padding: 'custom' }}
         tokens={restOfTokens}
+        backgroundImage={backgroundImage}
         {...selectProps(rest)}
       >
         {interactiveCard?.body ? (
@@ -254,6 +256,17 @@ Card.propTypes = {
     body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: PropTypes.shape({
+    // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(
+      PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
+    )
   })
 }
 

package/src/baseExports.js

@@ -26,9 +26,11 @@ export {
   ChevronLink,
   ColourToggle,
   Divider,
+  DownloadApp,
   ExpandCollapse,
   Feedback,
   FlexGrid,
+  FileUpload,
   Icon,
   InputLabel,
   InputSupports,
@@ -57,6 +59,7 @@ export {
   StepTracker,
   Status,
   Tabs,
+  TabBar,
   Tags,
   TextButton,
   TextArea,

package/types/Typography.d.ts

@@ -18,6 +18,7 @@ export interface TypographyProps extends A11yProps, TextProps, ViewProps {
   tag?: 'blockquote' | 'code' | 'del' | 'em' | 'ins' | 'li' | 'strong' | 'label' | HeadingTag
   block?: boolean
   align?: TextAlign
+  strikeThrough?: boolean
   children?: ReactNode
   skeleton?: SkeletonProps
 }

package/types/common.d.ts

@@ -154,7 +154,7 @@ export interface PressableState {
 }
 
 // TODO: Make this more specific:
-// https://telus.github.io/universal-design-system/components/allium/skeleton/#props
+// https://telus.com/universal-design-system/components/allium/skeleton/#props
 export type SkeletonProps = Record<string, any>
 
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'