@telus-uds/components-web 2.23.0 → 2.24.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +17 -2
  2. package/lib/Badge/Badge.js +6 -23
  3. package/lib-module/Badge/Badge.js +7 -24
  4. package/package.json +3 -3
  5. package/src/Badge/Badge.jsx +6 -22
  6. package/types/index.d.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,27 @@
1
1
  # Change Log - @telus-uds/components-web
2
2
 
3
- This log was last generated on Fri, 10 Nov 2023 22:28:25 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 15 Nov 2023 18:34:44 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## 2.24.0
8
+
9
+ Wed, 15 Nov 2023 18:34:44 GMT
10
+
11
+ ### Minor changes
12
+
13
+ - refactor badge component for multiplatform (guillermo.peitzner@telus.com)
14
+ - Changes to improve alignment in list (35577399+JoshHC@users.noreply.github.com)
15
+ - Bump @telus-uds/components-base to v1.68.0
16
+ - Bump @telus-uds/system-theme-tokens to v2.45.0
17
+
18
+ ### Patches
19
+
20
+ - corrected type for ssrStyles (kyle.king2@telus.com)
21
+
7
22
  ## 2.23.0
8
23
 
9
- Fri, 10 Nov 2023 22:28:25 GMT
24
+ Fri, 10 Nov 2023 22:37:27 GMT
10
25
 
11
26
  ### Minor changes
12
27
 
package/lib/Badge/Badge.js CHANGED
@@ -11,7 +11,7 @@ var _componentsBase = require("@telus-uds/components-base");
11
11
  var _utils = require("../utils");
12
12
  var _jsxRuntime = require("react/jsx-runtime");
13
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
- const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
14
+ const [, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
15
15
  const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
16
16
  displayName: "Badge__BadgeContainer",
17
17
  componentId: "components-web__sc-tsiuo2-0"
@@ -61,14 +61,10 @@ const Badge = _ref6 => {
61
61
  borderColor,
62
62
  borderRadius,
63
63
  borderWidth,
64
- color,
65
64
  paddingLeft,
66
65
  paddingRight,
67
66
  paddingTop,
68
- paddingBottom,
69
- fontName,
70
- fontWeight,
71
- fontSize
67
+ paddingBottom
72
68
  } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
73
69
  const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
74
70
  const {
@@ -83,31 +79,18 @@ const Badge = _ref6 => {
83
79
  } else if (purpose === 'offer' && gradient) {
84
80
  background = semanticGradient;
85
81
  }
86
- const fontSizeMapping = {
87
- 12: 'micro',
88
- 14: 'small',
89
- 16: 'h6'
90
- };
91
82
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
92
83
  isOutlineOffer: isOutlineOffer,
93
84
  isAlternative: alternative,
94
85
  padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
95
86
  radius: `${borderRadius}px`,
96
87
  background: background,
97
- fontName: fontName,
98
- fontWeight: fontWeight,
99
88
  gradient: semanticGradient,
100
89
  border: `${borderWidth}px solid ${borderColor}`,
101
- ...selectProps(rest),
102
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
103
- tokens: {
104
- fontName,
105
- fontWeight,
106
- color
107
- },
108
- variant: {
109
- size: fontSizeMapping[fontSize]
110
- },
90
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Badge, {
91
+ tokens: tokens,
92
+ variant: variant,
93
+ ...rest,
111
94
  children: children
112
95
  })
113
96
  });
package/lib-module/Badge/Badge.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import styled from 'styled-components';
3
3
  import PropTypes from 'prop-types';
4
- import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
4
+ import { selectSystemProps, getTokensPropType, useThemeTokens, Badge as BaseBadge } from '@telus-uds/components-base';
5
5
  import { htmlAttrs, transformGradient } from '../utils';
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
- const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
7
+ const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
8
8
  const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
9
9
  displayName: "Badge__BadgeContainer",
10
10
  componentId: "components-web__sc-tsiuo2-0"
@@ -54,14 +54,10 @@ const Badge = _ref6 => {
54
54
  borderColor,
55
55
  borderRadius,
56
56
  borderWidth,
57
- color,
58
57
  paddingLeft,
59
58
  paddingRight,
60
59
  paddingTop,
61
- paddingBottom,
62
- fontName,
63
- fontWeight,
64
- fontSize
60
+ paddingBottom
65
61
  } = useThemeTokens('Badge', tokens, variant);
66
62
  const semanticGradient = gradient && transformGradient(gradient);
67
63
  const {
@@ -76,31 +72,18 @@ const Badge = _ref6 => {
76
72
  } else if (purpose === 'offer' && gradient) {
77
73
  background = semanticGradient;
78
74
  }
79
- const fontSizeMapping = {
80
- 12: 'micro',
81
- 14: 'small',
82
- 16: 'h6'
83
- };
84
75
  return /*#__PURE__*/_jsx(BadgeContainer, {
85
76
  isOutlineOffer: isOutlineOffer,
86
77
  isAlternative: alternative,
87
78
  padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
88
79
  radius: `${borderRadius}px`,
89
80
  background: background,
90
- fontName: fontName,
91
- fontWeight: fontWeight,
92
81
  gradient: semanticGradient,
93
82
  border: `${borderWidth}px solid ${borderColor}`,
94
- ...selectProps(rest),
95
- children: /*#__PURE__*/_jsx(Typography, {
96
- tokens: {
97
- fontName,
98
- fontWeight,
99
- color
100
- },
101
- variant: {
102
- size: fontSizeMapping[fontSize]
103
- },
83
+ children: /*#__PURE__*/_jsx(BaseBadge, {
84
+ tokens: tokens,
85
+ variant: variant,
86
+ ...rest,
104
87
  children: children
105
88
  })
106
89
  });
package/package.json CHANGED
@@ -5,14 +5,14 @@
5
5
  ],
6
6
  "dependencies": {
7
7
  "@gorhom/portal": "^1.0.14",
8
- "@telus-uds/components-base": "1.67.1",
8
+ "@telus-uds/components-base": "1.68.0",
9
9
  "@telus-uds/system-constants": "^1.3.0",
10
10
  "fscreen": "^1.2.0",
11
11
  "lodash.omit": "^4.5.0",
12
12
  "react-dates": "^21.8.0",
13
13
  "react-helmet-async": "^1.3.0",
14
14
  "react-moment-proptypes": "^1.8.1",
15
- "@telus-uds/system-theme-tokens": "^2.44.1",
15
+ "@telus-uds/system-theme-tokens": "^2.45.0",
16
16
  "prop-types": "^15.7.2",
17
17
  "lodash.throttle": "^4.1.1",
18
18
  "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
62
62
  "skip": true
63
63
  },
64
64
  "types": "types/index.d.ts",
65
- "version": "2.23.0"
65
+ "version": "2.24.0"
66
66
  }
package/src/Badge/Badge.jsx CHANGED
@@ -3,13 +3,13 @@ import styled from 'styled-components'
3
3
  import PropTypes from 'prop-types'
4
4
  import {
5
5
  selectSystemProps,
6
- Typography,
7
6
  getTokensPropType,
8
- useThemeTokens
7
+ useThemeTokens,
8
+ Badge as BaseBadge
9
9
  } from '@telus-uds/components-base'
10
10
  import { htmlAttrs, transformGradient } from '../utils'
11
11
 
12
- const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
12
+ const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
13
13
 
14
14
  const BadgeContainer = styled.div`
15
15
  background: ${({ background }) => background};
@@ -36,14 +36,10 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
36
36
  borderColor,
37
37
  borderRadius,
38
38
  borderWidth,
39
- color,
40
39
  paddingLeft,
41
40
  paddingRight,
42
41
  paddingTop,
43
- paddingBottom,
44
- fontName,
45
- fontWeight,
46
- fontSize
42
+ paddingBottom
47
43
  } = useThemeTokens('Badge', tokens, variant)
48
44
 
49
45
  const semanticGradient = gradient && transformGradient(gradient)
@@ -57,12 +53,6 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
57
53
  background = semanticGradient
58
54
  }
59
55
 
60
- const fontSizeMapping = {
61
- 12: 'micro',
62
- 14: 'small',
63
- 16: 'h6'
64
- }
65
-
66
56
  return (
67
57
  <BadgeContainer
68
58
  isOutlineOffer={isOutlineOffer}
@@ -70,18 +60,12 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
70
60
  padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
71
61
  radius={`${borderRadius}px`}
72
62
  background={background}
73
- fontName={fontName}
74
- fontWeight={fontWeight}
75
63
  gradient={semanticGradient}
76
64
  border={`${borderWidth}px solid ${borderColor}`}
77
- {...selectProps(rest)}
78
65
  >
79
- <Typography
80
- tokens={{ fontName, fontWeight, color }}
81
- variant={{ size: fontSizeMapping[fontSize] }}
82
- >
66
+ <BaseBadge tokens={tokens} variant={variant} {...rest}>
83
67
  {children}
84
- </Typography>
68
+ </BaseBadge>
85
69
  </BadgeContainer>
86
70
  )
87
71
  }
package/types/index.d.ts CHANGED
@@ -75,7 +75,7 @@ declare const WaffleGrid: ComponentType<Props>
75
75
  export { default as WebVideo } from './WebVideo'
76
76
  export type { WebVideoProps } from './WebVideo'
77
77
 
78
- declare const ssrStyles: (appName: string) => {
78
+ declare const ssrStyles: (appName?: string) => {
79
79
  renderApp: (App: ComponentType<Props>, props: Props) => ReactElement<Props>
80
80
  getStyles: (...existingStyles: any[]) => any[]
81
81
  }