@telus-uds/components-web 2.39.0 → 2.40.0

package/CHANGELOG.md

@@ -1,16 +1,31 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 22 Aug 2024 18:17:39 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Sep 2024 12:26:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.40.0
+
+Mon, 16 Sep 2024 12:26:18 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
+
+- `Badge`: Add inverse for Badge propTypes (carlos.jeronimo@telus.com)
+
 ## 2.39.0
 
-Thu, 22 Aug 2024 18:17:39 GMT
+Thu, 22 Aug 2024 18:25:10 GMT
 
 ### Minor changes
 
-- `Card`: `plain` variant added  (35577399+JoshHC@users.noreply.github.com)
+- `Card`: `plain` variant added (35577399+JoshHC@users.noreply.github.com)
 - `FullBleedContent`: add imgCol and position prop to allow for image size adjustment (<tony.eng@telus.com>)
 - `Card`: use ConditionalWrapper on CardContent and FullBleedContent to dynamically set width of full bleed image (<tony.eng@telus.com>)
 - Bump @telus-uds/components-base to v1.92.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

@@ -129,6 +129,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 () {

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, 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, 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.92.0",
+    "@telus-uds/components-base": "1.94.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.63.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.0"
+  "version": "2.40.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

@@ -29,6 +29,7 @@ export {
   ExpandCollapse,
   Feedback,
   FlexGrid,
+  FileUpload,
   Icon,
   InputLabel,
   InputSupports,

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'