@telus-uds/components-web 4.12.4 → 4.13.0
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 +10 -1
- package/lib/cjs/Callout/Callout.js +2 -2
- package/lib/cjs/Card/CardContent.js +57 -4
- package/lib/esm/Callout/Callout.js +2 -2
- package/lib/esm/Card/CardContent.js +58 -5
- package/package.json +2 -2
- package/src/Callout/Callout.jsx +2 -2
- package/src/Card/CardContent.jsx +62 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
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, 21 Oct 2025 14:46:26 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## 4.13.0
|
|
8
|
+
|
|
9
|
+
Tue, 21 Oct 2025 14:46:26 GMT
|
|
10
|
+
|
|
11
|
+
### Minor changes
|
|
12
|
+
|
|
13
|
+
- `Card`: add RNMQ support (guillermo.peitzner@telus.com)
|
|
14
|
+
- Bump @telus-uds/components-base to v3.21.0
|
|
15
|
+
|
|
7
16
|
## 4.12.4
|
|
8
17
|
|
|
9
18
|
Fri, 10 Oct 2025 15:11:06 GMT
|
|
@@ -16,14 +16,14 @@ const getAlignment = (rounded, textAlignToFlex) => {
|
|
|
16
16
|
if (textAlignToFlex) {
|
|
17
17
|
switch (textAlignToFlex) {
|
|
18
18
|
case 'left':
|
|
19
|
-
return 'flex-
|
|
19
|
+
return 'flex-start';
|
|
20
20
|
case 'center':
|
|
21
21
|
return 'center';
|
|
22
22
|
default:
|
|
23
23
|
return 'flex-start';
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
return rounded ? 'center' : '
|
|
26
|
+
return rounded ? 'center' : 'flex-start';
|
|
27
27
|
};
|
|
28
28
|
const verticalAlignToFlex = verticalAlign => {
|
|
29
29
|
switch (verticalAlign) {
|
|
@@ -63,15 +63,68 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
|
|
|
63
63
|
withFooter = false,
|
|
64
64
|
...rest
|
|
65
65
|
} = _ref2;
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
const {
|
|
67
|
+
themeOptions: {
|
|
68
|
+
enableMediaQueryStyleSheet
|
|
69
|
+
}
|
|
70
|
+
} = (0, _componentsBase.useTheme)();
|
|
71
|
+
const allTokens = (0, _componentsBase.useAllViewportTokens)('Card', tokens, variant);
|
|
72
|
+
let themeTokens;
|
|
73
|
+
let mediaIds;
|
|
74
|
+
if (enableMediaQueryStyleSheet) {
|
|
75
|
+
const stylesByViewport = {
|
|
76
|
+
xs: {
|
|
77
|
+
paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
|
|
78
|
+
paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
|
|
79
|
+
paddingRight: allTokens.xs.paddingRight - allTokens.xs.borderWidth,
|
|
80
|
+
paddingTop: allTokens.xs.paddingTop - allTokens.xs.borderWidth
|
|
81
|
+
},
|
|
82
|
+
sm: {
|
|
83
|
+
paddingBottom: allTokens.sm.paddingBottom - allTokens.sm.borderWidth,
|
|
84
|
+
paddingLeft: allTokens.sm.paddingLeft - allTokens.sm.borderWidth,
|
|
85
|
+
paddingRight: allTokens.sm.paddingRight - allTokens.sm.borderWidth,
|
|
86
|
+
paddingTop: allTokens.sm.paddingTop - allTokens.sm.borderWidth
|
|
87
|
+
},
|
|
88
|
+
md: {
|
|
89
|
+
paddingBottom: allTokens.md.paddingBottom - allTokens.md.borderWidth,
|
|
90
|
+
paddingLeft: allTokens.md.paddingLeft - allTokens.md.borderWidth,
|
|
91
|
+
paddingRight: allTokens.md.paddingRight - allTokens.md.borderWidth,
|
|
92
|
+
paddingTop: allTokens.md.paddingTop - allTokens.md.borderWidth
|
|
93
|
+
},
|
|
94
|
+
lg: {
|
|
95
|
+
paddingBottom: allTokens.lg.paddingBottom - allTokens.lg.borderWidth,
|
|
96
|
+
paddingLeft: allTokens.lg.paddingLeft - allTokens.lg.borderWidth,
|
|
97
|
+
paddingRight: allTokens.lg.paddingRight - allTokens.lg.borderWidth,
|
|
98
|
+
paddingTop: allTokens.lg.paddingTop - allTokens.lg.borderWidth
|
|
99
|
+
},
|
|
100
|
+
xl: {
|
|
101
|
+
paddingBottom: allTokens.xl.paddingBottom - allTokens.xl.borderWidth,
|
|
102
|
+
paddingLeft: allTokens.xl.paddingLeft - allTokens.xl.borderWidth,
|
|
103
|
+
paddingRight: allTokens.xl.paddingRight - allTokens.xl.borderWidth,
|
|
104
|
+
paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
const mediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(stylesByViewport);
|
|
108
|
+
const {
|
|
109
|
+
ids,
|
|
110
|
+
styles
|
|
111
|
+
} = _componentsBase.StyleSheet.create({
|
|
112
|
+
cardContent: {
|
|
113
|
+
...allTokens.current,
|
|
114
|
+
...mediaQueryStyles
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
themeTokens = styles.cardContent;
|
|
118
|
+
mediaIds = ids.cardContent;
|
|
119
|
+
} else {
|
|
120
|
+
themeTokens = allTokens.current;
|
|
121
|
+
}
|
|
70
122
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, {
|
|
71
123
|
...themeTokens,
|
|
72
124
|
flexContent: flexContent,
|
|
73
125
|
withFooter: withFooter,
|
|
74
126
|
ref: ref,
|
|
127
|
+
"data-media": mediaIds,
|
|
75
128
|
...selectProps(rest),
|
|
76
129
|
children: children
|
|
77
130
|
});
|
|
@@ -9,14 +9,14 @@ const getAlignment = (rounded, textAlignToFlex) => {
|
|
|
9
9
|
if (textAlignToFlex) {
|
|
10
10
|
switch (textAlignToFlex) {
|
|
11
11
|
case 'left':
|
|
12
|
-
return 'flex-
|
|
12
|
+
return 'flex-start';
|
|
13
13
|
case 'center':
|
|
14
14
|
return 'center';
|
|
15
15
|
default:
|
|
16
16
|
return 'flex-start';
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
-
return rounded ? 'center' : '
|
|
19
|
+
return rounded ? 'center' : 'flex-start';
|
|
20
20
|
};
|
|
21
21
|
const verticalAlignToFlex = verticalAlign => {
|
|
22
22
|
switch (verticalAlign) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import { getTokensPropType, selectSystemProps,
|
|
3
|
+
import { getTokensPropType, selectSystemProps, variantProp, useTheme, StyleSheet, createMediaQueryStyles, useAllViewportTokens } from '@telus-uds/components-base';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
import { htmlAttrs } from '../utils';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -56,15 +56,68 @@ const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
|
|
|
56
56
|
withFooter = false,
|
|
57
57
|
...rest
|
|
58
58
|
} = _ref2;
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
const {
|
|
60
|
+
themeOptions: {
|
|
61
|
+
enableMediaQueryStyleSheet
|
|
62
|
+
}
|
|
63
|
+
} = useTheme();
|
|
64
|
+
const allTokens = useAllViewportTokens('Card', tokens, variant);
|
|
65
|
+
let themeTokens;
|
|
66
|
+
let mediaIds;
|
|
67
|
+
if (enableMediaQueryStyleSheet) {
|
|
68
|
+
const stylesByViewport = {
|
|
69
|
+
xs: {
|
|
70
|
+
paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
|
|
71
|
+
paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
|
|
72
|
+
paddingRight: allTokens.xs.paddingRight - allTokens.xs.borderWidth,
|
|
73
|
+
paddingTop: allTokens.xs.paddingTop - allTokens.xs.borderWidth
|
|
74
|
+
},
|
|
75
|
+
sm: {
|
|
76
|
+
paddingBottom: allTokens.sm.paddingBottom - allTokens.sm.borderWidth,
|
|
77
|
+
paddingLeft: allTokens.sm.paddingLeft - allTokens.sm.borderWidth,
|
|
78
|
+
paddingRight: allTokens.sm.paddingRight - allTokens.sm.borderWidth,
|
|
79
|
+
paddingTop: allTokens.sm.paddingTop - allTokens.sm.borderWidth
|
|
80
|
+
},
|
|
81
|
+
md: {
|
|
82
|
+
paddingBottom: allTokens.md.paddingBottom - allTokens.md.borderWidth,
|
|
83
|
+
paddingLeft: allTokens.md.paddingLeft - allTokens.md.borderWidth,
|
|
84
|
+
paddingRight: allTokens.md.paddingRight - allTokens.md.borderWidth,
|
|
85
|
+
paddingTop: allTokens.md.paddingTop - allTokens.md.borderWidth
|
|
86
|
+
},
|
|
87
|
+
lg: {
|
|
88
|
+
paddingBottom: allTokens.lg.paddingBottom - allTokens.lg.borderWidth,
|
|
89
|
+
paddingLeft: allTokens.lg.paddingLeft - allTokens.lg.borderWidth,
|
|
90
|
+
paddingRight: allTokens.lg.paddingRight - allTokens.lg.borderWidth,
|
|
91
|
+
paddingTop: allTokens.lg.paddingTop - allTokens.lg.borderWidth
|
|
92
|
+
},
|
|
93
|
+
xl: {
|
|
94
|
+
paddingBottom: allTokens.xl.paddingBottom - allTokens.xl.borderWidth,
|
|
95
|
+
paddingLeft: allTokens.xl.paddingLeft - allTokens.xl.borderWidth,
|
|
96
|
+
paddingRight: allTokens.xl.paddingRight - allTokens.xl.borderWidth,
|
|
97
|
+
paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
|
|
101
|
+
const {
|
|
102
|
+
ids,
|
|
103
|
+
styles
|
|
104
|
+
} = StyleSheet.create({
|
|
105
|
+
cardContent: {
|
|
106
|
+
...allTokens.current,
|
|
107
|
+
...mediaQueryStyles
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
themeTokens = styles.cardContent;
|
|
111
|
+
mediaIds = ids.cardContent;
|
|
112
|
+
} else {
|
|
113
|
+
themeTokens = allTokens.current;
|
|
114
|
+
}
|
|
63
115
|
return /*#__PURE__*/_jsx(CardContentContainer, {
|
|
64
116
|
...themeTokens,
|
|
65
117
|
flexContent: flexContent,
|
|
66
118
|
withFooter: withFooter,
|
|
67
119
|
ref: ref,
|
|
120
|
+
"data-media": mediaIds,
|
|
68
121
|
...selectProps(rest),
|
|
69
122
|
children: children
|
|
70
123
|
});
|
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": "^3.
|
|
8
|
+
"@telus-uds/components-base": "^3.21.0",
|
|
9
9
|
"@telus-uds/system-constants": "^3.0.0",
|
|
10
10
|
"@telus-uds/system-theme-tokens": "^4.15.1",
|
|
11
11
|
"fscreen": "^1.2.0",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"skip": true
|
|
83
83
|
},
|
|
84
84
|
"types": "types/index.d.ts",
|
|
85
|
-
"version": "4.
|
|
85
|
+
"version": "4.13.0"
|
|
86
86
|
}
|
package/src/Callout/Callout.jsx
CHANGED
|
@@ -16,14 +16,14 @@ const getAlignment = (rounded, textAlignToFlex) => {
|
|
|
16
16
|
if (textAlignToFlex) {
|
|
17
17
|
switch (textAlignToFlex) {
|
|
18
18
|
case 'left':
|
|
19
|
-
return 'flex-
|
|
19
|
+
return 'flex-start'
|
|
20
20
|
case 'center':
|
|
21
21
|
return 'center'
|
|
22
22
|
default:
|
|
23
23
|
return 'flex-start'
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
return rounded ? 'center' : '
|
|
26
|
+
return rounded ? 'center' : 'flex-start'
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
const verticalAlignToFlex = (verticalAlign) => {
|
package/src/Card/CardContent.jsx
CHANGED
|
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types'
|
|
|
3
3
|
import {
|
|
4
4
|
getTokensPropType,
|
|
5
5
|
selectSystemProps,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
variantProp,
|
|
7
|
+
useTheme,
|
|
8
|
+
StyleSheet,
|
|
9
|
+
createMediaQueryStyles,
|
|
10
|
+
useAllViewportTokens
|
|
9
11
|
} from '@telus-uds/components-base'
|
|
10
12
|
import styled from 'styled-components'
|
|
11
13
|
import { htmlAttrs } from '../utils'
|
|
@@ -52,8 +54,62 @@ const CardContentContainer = styled.div(
|
|
|
52
54
|
*/
|
|
53
55
|
const CardContent = React.forwardRef(
|
|
54
56
|
({ children, flexContent, tokens, variant, withFooter = false, ...rest }, ref) => {
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
+
const {
|
|
58
|
+
themeOptions: { enableMediaQueryStyleSheet }
|
|
59
|
+
} = useTheme()
|
|
60
|
+
|
|
61
|
+
const allTokens = useAllViewportTokens('Card', tokens, variant)
|
|
62
|
+
|
|
63
|
+
let themeTokens
|
|
64
|
+
let mediaIds
|
|
65
|
+
|
|
66
|
+
if (enableMediaQueryStyleSheet) {
|
|
67
|
+
const stylesByViewport = {
|
|
68
|
+
xs: {
|
|
69
|
+
paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
|
|
70
|
+
paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
|
|
71
|
+
paddingRight: allTokens.xs.paddingRight - allTokens.xs.borderWidth,
|
|
72
|
+
paddingTop: allTokens.xs.paddingTop - allTokens.xs.borderWidth
|
|
73
|
+
},
|
|
74
|
+
sm: {
|
|
75
|
+
paddingBottom: allTokens.sm.paddingBottom - allTokens.sm.borderWidth,
|
|
76
|
+
paddingLeft: allTokens.sm.paddingLeft - allTokens.sm.borderWidth,
|
|
77
|
+
paddingRight: allTokens.sm.paddingRight - allTokens.sm.borderWidth,
|
|
78
|
+
paddingTop: allTokens.sm.paddingTop - allTokens.sm.borderWidth
|
|
79
|
+
},
|
|
80
|
+
md: {
|
|
81
|
+
paddingBottom: allTokens.md.paddingBottom - allTokens.md.borderWidth,
|
|
82
|
+
paddingLeft: allTokens.md.paddingLeft - allTokens.md.borderWidth,
|
|
83
|
+
paddingRight: allTokens.md.paddingRight - allTokens.md.borderWidth,
|
|
84
|
+
paddingTop: allTokens.md.paddingTop - allTokens.md.borderWidth
|
|
85
|
+
},
|
|
86
|
+
lg: {
|
|
87
|
+
paddingBottom: allTokens.lg.paddingBottom - allTokens.lg.borderWidth,
|
|
88
|
+
paddingLeft: allTokens.lg.paddingLeft - allTokens.lg.borderWidth,
|
|
89
|
+
paddingRight: allTokens.lg.paddingRight - allTokens.lg.borderWidth,
|
|
90
|
+
paddingTop: allTokens.lg.paddingTop - allTokens.lg.borderWidth
|
|
91
|
+
},
|
|
92
|
+
xl: {
|
|
93
|
+
paddingBottom: allTokens.xl.paddingBottom - allTokens.xl.borderWidth,
|
|
94
|
+
paddingLeft: allTokens.xl.paddingLeft - allTokens.xl.borderWidth,
|
|
95
|
+
paddingRight: allTokens.xl.paddingRight - allTokens.xl.borderWidth,
|
|
96
|
+
paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
|
|
101
|
+
const { ids, styles } = StyleSheet.create({
|
|
102
|
+
cardContent: {
|
|
103
|
+
...allTokens.current,
|
|
104
|
+
...mediaQueryStyles
|
|
105
|
+
}
|
|
106
|
+
})
|
|
107
|
+
|
|
108
|
+
themeTokens = styles.cardContent
|
|
109
|
+
mediaIds = ids.cardContent
|
|
110
|
+
} else {
|
|
111
|
+
themeTokens = allTokens.current
|
|
112
|
+
}
|
|
57
113
|
|
|
58
114
|
return (
|
|
59
115
|
<CardContentContainer
|
|
@@ -61,6 +117,7 @@ const CardContent = React.forwardRef(
|
|
|
61
117
|
flexContent={flexContent}
|
|
62
118
|
withFooter={withFooter}
|
|
63
119
|
ref={ref}
|
|
120
|
+
data-media={mediaIds}
|
|
64
121
|
{...selectProps(rest)}
|
|
65
122
|
>
|
|
66
123
|
{children}
|