@telus-uds/components-web 2.31.0 → 2.31.2
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.
- package/CHANGELOG.md +21 -2
- package/lib/Card/Card.js +27 -33
- package/lib-module/Card/Card.js +27 -33
- package/package.json +3 -3
- package/src/Card/Card.jsx +19 -20
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @telus-uds/components-web
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 20 Feb 2024 23:07:37 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 2.31.2
|
|
8
|
+
|
|
9
|
+
Tue, 20 Feb 2024 23:07:37 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- Bump @telus-uds/components-base to v1.77.1
|
|
14
|
+
|
|
15
|
+
## 2.31.1
|
|
16
|
+
|
|
17
|
+
Wed, 14 Feb 2024 02:29:37 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- `Card` added in `FlexGrid` should become clickable when grown to take entire height (shahzaibkhalidmalik@outlook.com)
|
|
22
|
+
- updated text on the component-web story (chris.tafts@telus.com)
|
|
23
|
+
- Bump @telus-uds/components-base to v1.77.0
|
|
24
|
+
- Bump @telus-uds/system-theme-tokens to v2.51.0
|
|
25
|
+
|
|
7
26
|
## 2.31.0
|
|
8
27
|
|
|
9
|
-
Wed, 07 Feb 2024 19:
|
|
28
|
+
Wed, 07 Feb 2024 19:14:08 GMT
|
|
10
29
|
|
|
11
30
|
### Minor changes
|
|
12
31
|
|
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:
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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:
|
|
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__*/
|
|
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__*/
|
|
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
|
-
|
|
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
|
-
|
|
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.
|
|
8
|
+
"@telus-uds/components-base": "1.77.1",
|
|
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.
|
|
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.
|
|
86
|
+
"version": "2.31.2"
|
|
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:
|
|
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
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
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
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
138
|
+
) : null}
|
|
139
|
+
{footer && (
|
|
140
|
+
<CardFooter padding={footerPadding} tokens={tokens} variant={variant}>
|
|
141
|
+
{footer}
|
|
142
|
+
</CardFooter>
|
|
143
|
+
)}
|
|
145
144
|
</CardBase>
|
|
146
145
|
)
|
|
147
146
|
}
|