@telus-uds/components-web 2.31.0 → 2.31.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +13 -2
  2. package/lib/Card/Card.js +27 -33
  3. package/lib-module/Card/Card.js +27 -33
  4. package/package.json +3 -3
  5. package/src/Card/Card.jsx +19 -20
package/CHANGELOG.md CHANGED
@@ -1,12 +1,23 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Wed, 07 Feb 2024 19:09:40 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 2.31.1
8
+
9
+ Wed, 14 Feb 2024 02:21:15 GMT
10
+
11
+ ### Patches
12
+
13
+ - `Card` added in `FlexGrid` should become clickable when grown to take entire height (shahzaibkhalidmalik@outlook.com)
14
+ - updated text on the component-web story (chris.tafts@telus.com)
15
+ - Bump @telus-uds/components-base to v1.77.0
16
+ - Bump @telus-uds/system-theme-tokens to v2.51.0
17
+
7
18
  ## 2.31.0
8
19
 
9
- Wed, 07 Feb 2024 19:09:40 GMT
20
+ Wed, 07 Feb 2024 19:14:08 GMT
10
21
 
11
22
  ### Minor changes
12
23
 
package/lib/Card/Card.js CHANGED
@@ -84,10 +84,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
84
84
  });
85
85
  const hasFooter = Boolean(footer);
86
86
  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
87
-
88
- // Make multiple cards in a row have equal heights with even space between content items
89
87
  const columnFlex = {
90
- flexGrow: 1,
88
+ flexGrow: 0,
91
89
  flexShrink: 1,
92
90
  justifyContent: 'space-between'
93
91
  };
@@ -100,7 +98,7 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
100
98
  paddingRight,
101
99
  ...restOfTokens
102
100
  } = tokens;
103
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Card, {
101
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
104
102
  ref: ref,
105
103
  variant: {
106
104
  ...variant,
@@ -108,39 +106,35 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
108
106
  },
109
107
  tokens: restOfTokens,
110
108
  ...selectProps(rest),
111
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
109
+ children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
110
+ ref: ref,
111
+ tokens: getThemeTokens,
112
+ dataSet: dataSet,
113
+ onPress: onPress,
114
+ ...selectProps(rest),
115
+ children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
116
+ }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
117
+ direction: contentStackDirection,
118
+ tokens: {
119
+ ...columnFlex,
120
+ alignItems: contentStackAlign
121
+ },
112
122
  space: 0,
113
- tokens: columnFlex,
114
- children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
115
- ref: ref,
116
- tokens: getThemeTokens,
117
- dataSet: dataSet,
118
- onPress: onPress,
119
- ...selectProps(rest),
120
- children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
121
- }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
122
- direction: contentStackDirection,
123
- tokens: {
124
- ...columnFlex,
125
- alignItems: contentStackAlign
126
- },
127
- space: 0,
128
- children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
129
- tokens: tokens,
130
- variant: variant,
131
- withFooter: hasFooter,
132
- children: children
133
- }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
134
- borderRadius: fullBleedBorderRadius,
135
- ...fullBleedContentProps
136
- })]
137
- }), footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
138
- padding: footerPadding,
123
+ children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
139
124
  tokens: tokens,
140
125
  variant: variant,
141
- children: footer
126
+ withFooter: hasFooter,
127
+ children: children
128
+ }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
129
+ borderRadius: fullBleedBorderRadius,
130
+ ...fullBleedContentProps
142
131
  })]
143
- })
132
+ }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
133
+ padding: footerPadding,
134
+ tokens: tokens,
135
+ variant: variant,
136
+ children: footer
137
+ })]
144
138
  });
145
139
  });
146
140
  const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
package/lib-module/Card/Card.js CHANGED
@@ -76,10 +76,8 @@ const Card = /*#__PURE__*/forwardRef(function () {
76
76
  });
77
77
  const hasFooter = Boolean(footer);
78
78
  const fullBleedBorderRadius = getFullBleedBorderRadius(borderRadius, fullBleedContentPosition, hasFooter);
79
-
80
- // Make multiple cards in a row have equal heights with even space between content items
81
79
  const columnFlex = {
82
- flexGrow: 1,
80
+ flexGrow: 0,
83
81
  flexShrink: 1,
84
82
  justifyContent: 'space-between'
85
83
  };
@@ -92,7 +90,7 @@ const Card = /*#__PURE__*/forwardRef(function () {
92
90
  paddingRight,
93
91
  ...restOfTokens
94
92
  } = tokens;
95
- return /*#__PURE__*/_jsx(CardBase, {
93
+ return /*#__PURE__*/_jsxs(CardBase, {
96
94
  ref: ref,
97
95
  variant: {
98
96
  ...variant,
@@ -100,39 +98,35 @@ const Card = /*#__PURE__*/forwardRef(function () {
100
98
  },
101
99
  tokens: restOfTokens,
102
100
  ...selectProps(rest),
103
- children: /*#__PURE__*/_jsxs(StackView, {
101
+ children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
102
+ ref: ref,
103
+ tokens: getThemeTokens,
104
+ dataSet: dataSet,
105
+ onPress: onPress,
106
+ ...selectProps(rest),
107
+ children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
108
+ }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
109
+ direction: contentStackDirection,
110
+ tokens: {
111
+ ...columnFlex,
112
+ alignItems: contentStackAlign
113
+ },
104
114
  space: 0,
105
- tokens: columnFlex,
106
- children: [interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsx(PressableCardBase, {
107
- ref: ref,
108
- tokens: getThemeTokens,
109
- dataSet: dataSet,
110
- onPress: onPress,
111
- ...selectProps(rest),
112
- children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
113
- }) : null, /*#__PURE__*/_jsxs(StackView, {
114
- direction: contentStackDirection,
115
- tokens: {
116
- ...columnFlex,
117
- alignItems: contentStackAlign
118
- },
119
- space: 0,
120
- children: [children ? /*#__PURE__*/_jsx(CardContent, {
121
- tokens: tokens,
122
- variant: variant,
123
- withFooter: hasFooter,
124
- children: children
125
- }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
126
- borderRadius: fullBleedBorderRadius,
127
- ...fullBleedContentProps
128
- })]
129
- }), footer && /*#__PURE__*/_jsx(CardFooter, {
130
- padding: footerPadding,
115
+ children: [children ? /*#__PURE__*/_jsx(CardContent, {
131
116
  tokens: tokens,
132
117
  variant: variant,
133
- children: footer
118
+ withFooter: hasFooter,
119
+ children: children
120
+ }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/_jsx(FullBleedContent, {
121
+ borderRadius: fullBleedBorderRadius,
122
+ ...fullBleedContentProps
134
123
  })]
135
- })
124
+ }) : null, footer && /*#__PURE__*/_jsx(CardFooter, {
125
+ padding: footerPadding,
126
+ tokens: tokens,
127
+ variant: variant,
128
+ children: footer
129
+ })]
136
130
  });
137
131
  });
138
132
  const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "1.76.0",
8
+ "@telus-uds/components-base": "1.77.0",
9
9
  "@telus-uds/system-constants": "^1.3.0",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
13
13
  "react-dates": "^21.8.0",
14
14
  "react-helmet-async": "^1.3.0",
15
15
  "react-moment-proptypes": "^1.8.1",
16
- "@telus-uds/system-theme-tokens": "^2.50.1",
16
+ "@telus-uds/system-theme-tokens": "^2.51.0",
17
17
  "prop-types": "^15.7.2",
18
18
  "lodash.throttle": "^4.1.1",
19
19
  "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
83
83
  "skip": true
84
84
  },
85
85
  "types": "types/index.d.ts",
86
- "version": "2.31.0"
86
+ "version": "2.31.1"
87
87
  }
package/src/Card/Card.jsx CHANGED
@@ -93,9 +93,8 @@ const Card = forwardRef(
93
93
  hasFooter
94
94
  )
95
95
 
96
- // Make multiple cards in a row have equal heights with even space between content items
97
96
  const columnFlex = {
98
- flexGrow: 1,
97
+ flexGrow: 0,
99
98
  flexShrink: 1,
100
99
  justifyContent: 'space-between'
101
100
  }
@@ -110,18 +109,18 @@ const Card = forwardRef(
110
109
  tokens={restOfTokens}
111
110
  {...selectProps(rest)}
112
111
  >
113
- <StackView space={0} tokens={columnFlex}>
114
- {interactiveCard?.body ? (
115
- <PressableCardBase
116
- ref={ref}
117
- tokens={getThemeTokens}
118
- dataSet={dataSet}
119
- onPress={onPress}
120
- {...selectProps(rest)}
121
- >
122
- {interactiveCard?.body}
123
- </PressableCardBase>
124
- ) : null}
112
+ {interactiveCard?.body ? (
113
+ <PressableCardBase
114
+ ref={ref}
115
+ tokens={getThemeTokens}
116
+ dataSet={dataSet}
117
+ onPress={onPress}
118
+ {...selectProps(rest)}
119
+ >
120
+ {interactiveCard?.body}
121
+ </PressableCardBase>
122
+ ) : null}
123
+ {children || fullBleedContentPosition !== 'none' ? (
125
124
  <StackView
126
125
  direction={contentStackDirection}
127
126
  tokens={{ ...columnFlex, alignItems: contentStackAlign }}
@@ -136,12 +135,12 @@ const Card = forwardRef(
136
135
  <FullBleedContent borderRadius={fullBleedBorderRadius} {...fullBleedContentProps} />
137
136
  )}
138
137
  </StackView>
139
- {footer && (
140
- <CardFooter padding={footerPadding} tokens={tokens} variant={variant}>
141
- {footer}
142
- </CardFooter>
143
- )}
144
- </StackView>
138
+ ) : null}
139
+ {footer && (
140
+ <CardFooter padding={footerPadding} tokens={tokens} variant={variant}>
141
+ {footer}
142
+ </CardFooter>
143
+ )}
145
144
  </CardBase>
146
145
  )
147
146
  }