@salutejs/plasma-new-hope 0.192.3-canary.1550.11813906469.0 → 0.193.0-canary.1546.11814894884.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. package/cjs/components/Badge/Badge.css +4 -4
  2. package/cjs/components/Badge/Badge.js +17 -7
  3. package/cjs/components/Badge/Badge.js.map +1 -1
  4. package/cjs/components/Badge/Badge.tokens.js +10 -5
  5. package/cjs/components/Badge/Badge.tokens.js.map +1 -1
  6. package/cjs/components/Badge/variations/_clear/base.js +1 -1
  7. package/cjs/components/Badge/variations/_clear/base.js.map +1 -1
  8. package/cjs/components/Badge/variations/_clear/base_wiboj8.css +1 -0
  9. package/cjs/components/Badge/variations/_size/base.js +1 -1
  10. package/cjs/components/Badge/variations/_size/base.js.map +1 -1
  11. package/{es/components/Badge/variations/_size/base_to0y5x.css → cjs/components/Badge/variations/_size/base_bu5opk.css} +1 -1
  12. package/cjs/components/Badge/variations/_transparent/base.js +1 -1
  13. package/cjs/components/Badge/variations/_transparent/base.js.map +1 -1
  14. package/cjs/components/Badge/variations/_transparent/base_aapqhz.css +1 -0
  15. package/cjs/components/Badge/variations/_view/base.js +1 -1
  16. package/cjs/components/Badge/variations/_view/base.js.map +1 -1
  17. package/cjs/components/Badge/variations/_view/base_j3xzf3.css +1 -0
  18. package/cjs/index.css +4 -4
  19. package/emotion/cjs/components/Badge/Badge.js +17 -7
  20. package/emotion/cjs/components/Badge/Badge.tokens.js +10 -6
  21. package/emotion/cjs/components/Badge/variations/_clear/base.js +1 -1
  22. package/emotion/cjs/components/Badge/variations/_size/base.js +2 -1
  23. package/emotion/cjs/components/Badge/variations/_transparent/base.js +1 -1
  24. package/emotion/cjs/components/Badge/variations/_view/base.js +1 -1
  25. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +15 -15
  26. package/emotion/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  27. package/emotion/cjs/examples/plasma_web/components/Badge/Badge.config.js +14 -14
  28. package/emotion/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  29. package/emotion/es/components/Badge/Badge.js +18 -8
  30. package/emotion/es/components/Badge/Badge.tokens.js +9 -5
  31. package/emotion/es/components/Badge/variations/_clear/base.js +2 -2
  32. package/emotion/es/components/Badge/variations/_size/base.js +3 -2
  33. package/emotion/es/components/Badge/variations/_transparent/base.js +2 -2
  34. package/emotion/es/components/Badge/variations/_view/base.js +2 -2
  35. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.config.js +15 -15
  36. package/emotion/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  37. package/emotion/es/examples/plasma_web/components/Badge/Badge.config.js +14 -14
  38. package/emotion/es/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  39. package/es/components/Badge/Badge.css +4 -4
  40. package/es/components/Badge/Badge.js +20 -10
  41. package/es/components/Badge/Badge.js.map +1 -1
  42. package/es/components/Badge/Badge.tokens.js +10 -6
  43. package/es/components/Badge/Badge.tokens.js.map +1 -1
  44. package/es/components/Badge/variations/_clear/base.js +1 -1
  45. package/es/components/Badge/variations/_clear/base.js.map +1 -1
  46. package/es/components/Badge/variations/_clear/base_wiboj8.css +1 -0
  47. package/es/components/Badge/variations/_size/base.js +1 -1
  48. package/es/components/Badge/variations/_size/base.js.map +1 -1
  49. package/{cjs/components/Badge/variations/_size/base_to0y5x.css → es/components/Badge/variations/_size/base_bu5opk.css} +1 -1
  50. package/es/components/Badge/variations/_transparent/base.js +1 -1
  51. package/es/components/Badge/variations/_transparent/base.js.map +1 -1
  52. package/es/components/Badge/variations/_transparent/base_aapqhz.css +1 -0
  53. package/es/components/Badge/variations/_view/base.js +1 -1
  54. package/es/components/Badge/variations/_view/base.js.map +1 -1
  55. package/es/components/Badge/variations/_view/base_j3xzf3.css +1 -0
  56. package/es/index.css +4 -4
  57. package/package.json +2 -2
  58. package/styled-components/cjs/components/Badge/Badge.js +17 -7
  59. package/styled-components/cjs/components/Badge/Badge.tokens.js +10 -6
  60. package/styled-components/cjs/components/Badge/variations/_clear/base.js +1 -1
  61. package/styled-components/cjs/components/Badge/variations/_size/base.js +2 -1
  62. package/styled-components/cjs/components/Badge/variations/_transparent/base.js +1 -1
  63. package/styled-components/cjs/components/Badge/variations/_view/base.js +1 -1
  64. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.config.js +5 -5
  65. package/styled-components/cjs/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  66. package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.config.js +5 -5
  67. package/styled-components/cjs/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  68. package/styled-components/es/components/Badge/Badge.js +18 -8
  69. package/styled-components/es/components/Badge/Badge.tokens.js +9 -5
  70. package/styled-components/es/components/Badge/variations/_clear/base.js +2 -2
  71. package/styled-components/es/components/Badge/variations/_size/base.js +3 -2
  72. package/styled-components/es/components/Badge/variations/_transparent/base.js +2 -2
  73. package/styled-components/es/components/Badge/variations/_view/base.js +2 -2
  74. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.config.js +5 -5
  75. package/styled-components/es/examples/plasma_b2c/components/Badge/Badge.stories.tsx +23 -6
  76. package/styled-components/es/examples/plasma_web/components/Badge/Badge.config.js +5 -5
  77. package/styled-components/es/examples/plasma_web/components/Badge/Badge.stories.tsx +27 -6
  78. package/types/components/Badge/Badge.d.ts.map +1 -1
  79. package/types/components/Badge/Badge.tokens.d.ts +8 -4
  80. package/types/components/Badge/Badge.tokens.d.ts.map +1 -1
  81. package/types/components/Badge/Badge.types.d.ts +18 -5
  82. package/types/components/Badge/Badge.types.d.ts.map +1 -1
  83. package/types/components/Badge/variations/_clear/base.d.ts.map +1 -1
  84. package/types/components/Badge/variations/_size/base.d.ts.map +1 -1
  85. package/types/examples/plasma_b2c/components/Badge/Badge.config.d.ts.map +1 -1
  86. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts +61 -4
  87. package/types/examples/plasma_b2c/components/Badge/Badge.d.ts.map +1 -1
  88. package/types/examples/plasma_web/components/Badge/Badge.config.d.ts.map +1 -1
  89. package/types/examples/plasma_web/components/Badge/Badge.d.ts +61 -4
  90. package/types/examples/plasma_web/components/Badge/Badge.d.ts.map +1 -1
  91. package/cjs/components/Badge/variations/_clear/base_oopyb7.css +0 -1
  92. package/cjs/components/Badge/variations/_transparent/base_1l6036y.css +0 -1
  93. package/cjs/components/Badge/variations/_view/base_qlxank.css +0 -1
  94. package/es/components/Badge/variations/_clear/base_oopyb7.css +0 -1
  95. package/es/components/Badge/variations/_transparent/base_1l6036y.css +0 -1
  96. package/es/components/Badge/variations/_view/base_qlxank.css +0 -1
@@ -34,6 +34,10 @@ const meta: Meta<typeof Badge> = {
34
34
  maxWidth: {
35
35
  control: { type: 'text' },
36
36
  },
37
+ text: {
38
+ control: { type: 'text' },
39
+ if: { arg: 'enableText', truthy: true },
40
+ },
37
41
  ...disableProps(['contentLeft', 'contentRight']),
38
42
  },
39
43
  };
@@ -43,6 +47,7 @@ export default meta;
43
47
  type StoryProps = ComponentProps<typeof Badge> & {
44
48
  enableContentLeft: boolean;
45
49
  enableContentRight: boolean;
50
+ enableText: boolean;
46
51
  };
47
52
  type Story = StoryObj<StoryProps>;
48
53
 
@@ -63,13 +68,14 @@ export const Default: Story = {
63
68
  },
64
69
  enableContentRight: {
65
70
  control: { type: 'boolean' },
66
- if: { arg: 'enableContentLeft', truthy: false },
71
+ if: { arg: 'enableText', truthy: true },
67
72
  },
68
73
  },
69
74
  args: {
70
- text: 'Hello Kitty',
71
75
  view: 'default',
72
76
  size: 'm',
77
+ enableText: true,
78
+ text: 'Hello',
73
79
  enableContentLeft: false,
74
80
  enableContentRight: false,
75
81
  clear: false,
@@ -77,13 +83,24 @@ export const Default: Story = {
77
83
  transparent: false,
78
84
  maxWidth: '',
79
85
  },
80
- render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
81
- const iconSize = size === 'l' ? '1rem' : '0.75rem';
86
+ render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
87
+ const iconSize = () => {
88
+ switch (size) {
89
+ case 'l':
90
+ return '1rem';
91
+ case 'xs':
92
+ return '0.625rem';
93
+ default:
94
+ return '0.75rem';
95
+ }
96
+ };
82
97
 
83
98
  return (
84
99
  <Badge
85
- contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
86
- contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
100
+ contentLeft={
101
+ enableContentLeft || !enableText ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined
102
+ }
103
+ contentRight={enableContentRight ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
87
104
  size={size}
88
105
  {...rest}
89
106
  />
@@ -22,10 +22,10 @@ var config = exports.config = {
22
22
  light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], _Badge.badgeTokens.color, _Badge.badgeTokens.background, _Badge.badgeTokens.colorTransparent, _Badge.badgeTokens.backgroundTransparent, _Badge.badgeTokens.colorClear)
23
23
  },
24
24
  size: {
25
- l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
26
- m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0.5625rem;", ":0.5625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
27
- s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
28
- xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.paddingRight, _Badge.badgeTokens.paddingLeft, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
25
+ l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
26
+ m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.5rem;", ":0 0.5625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
27
+ s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight),
28
+ xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], _Badge.badgeTokens.borderRadius, _Badge.badgeTokens.height, _Badge.badgeTokens.padding, _Badge.badgeTokens.paddingIconOnly, _Badge.badgeTokens.fontFamily, _Badge.badgeTokens.fontSize, _Badge.badgeTokens.fontStyle, _Badge.badgeTokens.fontWeight, _Badge.badgeTokens.letterSpacing, _Badge.badgeTokens.lineHeight, _Badge.badgeTokens.leftContentMarginLeft, _Badge.badgeTokens.leftContentMarginRight, _Badge.badgeTokens.rightContentMarginLeft, _Badge.badgeTokens.rightContentMarginRight)
29
29
  },
30
30
  pilled: {
31
31
  "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.25rem;"], _Badge.badgeTokens.pilledBorderRadius)
@@ -34,7 +34,7 @@ var config = exports.config = {
34
34
  "true": /*#__PURE__*/(0, _styledComponents.css)([""])
35
35
  },
36
36
  clear: {
37
- "true": /*#__PURE__*/(0, _styledComponents.css)([""])
37
+ "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-clear);"], _Badge.badgeTokens.backgroundClear)
38
38
  }
39
39
  }
40
40
  };
@@ -31,6 +31,13 @@ const meta: Meta<typeof Badge> = {
31
31
  control: { type: 'boolean' },
32
32
  if: { arg: 'clear', truthy: false },
33
33
  },
34
+ maxWidth: {
35
+ control: { type: 'text' },
36
+ },
37
+ text: {
38
+ control: { type: 'text' },
39
+ if: { arg: 'enableText', truthy: true },
40
+ },
34
41
  ...disableProps(['contentLeft', 'contentRight']),
35
42
  },
36
43
  };
@@ -40,6 +47,7 @@ export default meta;
40
47
  type StoryProps = ComponentProps<typeof Badge> & {
41
48
  enableContentLeft: boolean;
42
49
  enableContentRight: boolean;
50
+ enableText: boolean;
43
51
  };
44
52
  type Story = StoryObj<StoryProps>;
45
53
 
@@ -60,26 +68,39 @@ export const Default: Story = {
60
68
  },
61
69
  enableContentRight: {
62
70
  control: { type: 'boolean' },
63
- if: { arg: 'enableContentLeft', truthy: false },
71
+ if: { arg: 'enableText', truthy: true },
64
72
  },
65
73
  },
66
74
  args: {
67
- text: 'Hello',
68
75
  view: 'default',
69
76
  size: 'm',
77
+ enableText: true,
78
+ text: 'Hello',
70
79
  enableContentLeft: false,
71
80
  enableContentRight: false,
72
81
  clear: false,
73
82
  pilled: false,
74
83
  transparent: false,
84
+ maxWidth: '',
75
85
  },
76
- render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
77
- const iconSize = size === 'l' ? '1rem' : '0.75rem';
86
+ render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
87
+ const iconSize = () => {
88
+ switch (size) {
89
+ case 'l':
90
+ return '1rem';
91
+ case 'xs':
92
+ return '0.625rem';
93
+ default:
94
+ return '0.75rem';
95
+ }
96
+ };
78
97
 
79
98
  return (
80
99
  <Badge
81
- contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
82
- contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
100
+ contentLeft={
101
+ enableContentLeft || !enableText ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined
102
+ }
103
+ contentRight={enableContentRight ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
83
104
  size={size}
84
105
  {...rest}
85
106
  />
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["children", "className", "text", "contentLeft", "contentRight", "size", "view", "pilled", "transparent", "clear", "maxWidth"];
2
+ var _excluded = ["children", "className", "style", "text", "contentLeft", "contentRight", "size", "view", "customColor", "customBackgroundColor", "pilled", "transparent", "clear", "maxWidth"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,16 +16,20 @@ import { base as pilledCSS } from './variations/_pilled/base';
16
16
  import { base as transparentCSS } from './variations/_transparent/base';
17
17
  import { base as clearCSS } from './variations/_clear/base';
18
18
  import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles';
19
- import { classes } from './Badge.tokens';
19
+ import { classes, privateTokens } from './Badge.tokens';
20
20
  export var badgeRoot = function badgeRoot(Root) {
21
21
  return /*#__PURE__*/forwardRef(function (props, ref) {
22
+ var _StyledContentLeft, _StyledContentMain, _StyledContentMain2, _StyledContentRight;
22
23
  var children = props.children,
23
24
  className = props.className,
25
+ style = props.style,
24
26
  text = props.text,
25
27
  contentLeft = props.contentLeft,
26
28
  contentRight = props.contentRight,
27
29
  size = props.size,
28
30
  view = props.view,
31
+ customColor = props.customColor,
32
+ customBackgroundColor = props.customBackgroundColor,
29
33
  _props$pilled = props.pilled,
30
34
  pilled = _props$pilled === void 0 ? false : _props$pilled,
31
35
  _props$transparent = props.transparent,
@@ -40,19 +44,25 @@ export var badgeRoot = function badgeRoot(Root) {
40
44
  var clearClass = clear ? classes.badgeClear : undefined;
41
45
  var truncateClass = maxWidth !== 'auto' ? classes.badgeTruncate : undefined;
42
46
  var txt = !text && typeof children === 'string' ? children : text;
47
+ var iconOnlyClass = !txt && contentLeft ? classes.iconOnly : undefined;
48
+ var BadgeContent = function BadgeContent() {
49
+ if (contentLeft) {
50
+ return /*#__PURE__*/React.createElement(React.Fragment, null, _StyledContentLeft || (_StyledContentLeft = /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft)), txt ? _StyledContentMain || (_StyledContentMain = /*#__PURE__*/React.createElement(StyledContentMain, null, txt)) : children);
51
+ }
52
+ return /*#__PURE__*/React.createElement(React.Fragment, null, txt ? _StyledContentMain2 || (_StyledContentMain2 = /*#__PURE__*/React.createElement(StyledContentMain, null, txt)) : children, contentRight && (_StyledContentRight || (_StyledContentRight = /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight))));
53
+ };
43
54
  return /*#__PURE__*/React.createElement(Root, _extends({
44
55
  ref: ref,
45
- className: cx(pilledClass, transparentClass, clearClass, truncateClass, className),
56
+ className: cx(pilledClass, transparentClass, clearClass, truncateClass, iconOnlyClass, className),
46
57
  view: view,
47
58
  size: size,
48
59
  pilled: pilled,
49
60
  transparent: transparent,
50
- clear: clear
51
- }, rest, {
52
- style: _objectSpread(_objectSpread({}, rest.style), {}, {
61
+ clear: clear,
62
+ style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty({
53
63
  maxWidth: maxWidth
54
- })
55
- }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight));
64
+ }, privateTokens.customBackground, customBackgroundColor), privateTokens.customColor, customColor))
65
+ }, rest), /*#__PURE__*/React.createElement(BadgeContent, null));
56
66
  });
57
67
  };
58
68
  export var badgeConfig = {
@@ -2,7 +2,12 @@ export var classes = {
2
2
  badgePilled: 'badge-pilled',
3
3
  badgeTransparent: 'badge-transparent',
4
4
  badgeClear: 'badge-clear',
5
- badgeTruncate: 'badge-truncate'
5
+ badgeTruncate: 'badge-truncate',
6
+ iconOnly: 'badge-icon-only'
7
+ };
8
+ export var privateTokens = {
9
+ customBackground: '--plasma-badge-custom-background',
10
+ customColor: '--plasma-badge-custom-color'
6
11
  };
7
12
  export var tokens = {
8
13
  background: '--plasma-badge-background',
@@ -10,13 +15,12 @@ export var tokens = {
10
15
  backgroundTransparent: '--plasma-badge-background-transparent',
11
16
  colorTransparent: '--plasma-badge-color-transparent',
12
17
  colorClear: '--plasma-badge-color-clear',
18
+ backgroundClear: '--plasma-badge-background-clear',
13
19
  borderRadius: '--plasma-badge-border-radius',
14
20
  pilledBorderRadius: '--plasma-badge-pilled-border-radius',
15
21
  height: '--plasma-badge-height',
16
- paddingTop: '--plasma-badge-padding-top',
17
- paddingRight: '--plasma-badge-padding-right',
18
- paddingBottom: '--plasma-badge-padding-bottom',
19
- paddingLeft: '--plasma-badge-padding-left',
22
+ padding: '--plasma-badge-padding',
23
+ paddingIconOnly: '--plasma-badge-padding-icon-only',
20
24
  fontFamily: '--plasma-badge-font-family',
21
25
  fontSize: '--plasma-badge-font-size',
22
26
  fontStyle: '--plasma-badge-font-style',
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
- import { classes, tokens } from '../../Badge.tokens';
3
- export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:transparent;padding:0;}"], classes.badgeClear, tokens.colorClear);
2
+ import { classes, privateTokens, tokens } from '../../Badge.tokens';
3
+ export var base = /*#__PURE__*/css(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], classes.badgeClear, privateTokens.customColor, tokens.colorClear, privateTokens.customBackground, tokens.backgroundClear);
@@ -1,3 +1,4 @@
1
1
  import { css } from 'styled-components';
2
- import { tokens } from '../../Badge.tokens';
3
- export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);
2
+ import { classes, tokens } from '../../Badge.tokens';
3
+ import { StyledContentLeft } from '../../Badge.styles';
4
+ export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding:var(", ");&.", "{padding:var(", ");", "{margin:0;}}"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.padding, classes.iconOnly, tokens.paddingIconOnly, StyledContentLeft);
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
- import { classes, tokens } from '../../Badge.tokens';
3
- export var base = /*#__PURE__*/css(["&.", "{color:var(", ");background-color:var(", ");}"], classes.badgeTransparent, tokens.colorTransparent, tokens.backgroundTransparent);
2
+ import { classes, privateTokens, tokens } from '../../Badge.tokens';
3
+ export var base = /*#__PURE__*/css(["&.", "{color:var(", ",var(", "));background-color:var(", ",var(", "));}"], classes.badgeTransparent, privateTokens.customColor, tokens.colorTransparent, privateTokens.customBackground, tokens.backgroundTransparent);
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
- import { tokens } from '../../Badge.tokens';
3
- export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");"], tokens.color, tokens.background);
2
+ import { privateTokens, tokens } from '../../Badge.tokens';
3
+ export var base = /*#__PURE__*/css(["color:var(", ",var(", "));background-color:var(", ",var(", "));"], privateTokens.customColor, tokens.color, privateTokens.customBackground, tokens.background);
@@ -16,10 +16,10 @@ export var config = {
16
16
  light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
17
17
  },
18
18
  size: {
19
- l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
20
- m: /*#__PURE__*/css(["", ":0.375rem;", ":1.5rem;", ":0.5625rem;", ":0.5625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
21
- s: /*#__PURE__*/css(["", ":0.375rem;", ":1.25rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
22
- xs: /*#__PURE__*/css(["", ":0.25rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
19
+ l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
20
+ m: /*#__PURE__*/css(["", ":0.375rem;", ":1.5rem;", ":0 0.5625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
21
+ s: /*#__PURE__*/css(["", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
22
+ xs: /*#__PURE__*/css(["", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
23
23
  },
24
24
  pilled: {
25
25
  "true": /*#__PURE__*/css(["", ":1.25rem;"], badgeTokens.pilledBorderRadius)
@@ -28,7 +28,7 @@ export var config = {
28
28
  "true": /*#__PURE__*/css([""])
29
29
  },
30
30
  clear: {
31
- "true": /*#__PURE__*/css([""])
31
+ "true": /*#__PURE__*/css(["", ":var(--surface-clear);"], badgeTokens.backgroundClear)
32
32
  },
33
33
  truncate: {
34
34
  "true": /*#__PURE__*/css([""])
@@ -34,6 +34,10 @@ const meta: Meta<typeof Badge> = {
34
34
  maxWidth: {
35
35
  control: { type: 'text' },
36
36
  },
37
+ text: {
38
+ control: { type: 'text' },
39
+ if: { arg: 'enableText', truthy: true },
40
+ },
37
41
  ...disableProps(['contentLeft', 'contentRight']),
38
42
  },
39
43
  };
@@ -43,6 +47,7 @@ export default meta;
43
47
  type StoryProps = ComponentProps<typeof Badge> & {
44
48
  enableContentLeft: boolean;
45
49
  enableContentRight: boolean;
50
+ enableText: boolean;
46
51
  };
47
52
  type Story = StoryObj<StoryProps>;
48
53
 
@@ -63,13 +68,14 @@ export const Default: Story = {
63
68
  },
64
69
  enableContentRight: {
65
70
  control: { type: 'boolean' },
66
- if: { arg: 'enableContentLeft', truthy: false },
71
+ if: { arg: 'enableText', truthy: true },
67
72
  },
68
73
  },
69
74
  args: {
70
- text: 'Hello Kitty',
71
75
  view: 'default',
72
76
  size: 'm',
77
+ enableText: true,
78
+ text: 'Hello',
73
79
  enableContentLeft: false,
74
80
  enableContentRight: false,
75
81
  clear: false,
@@ -77,13 +83,24 @@ export const Default: Story = {
77
83
  transparent: false,
78
84
  maxWidth: '',
79
85
  },
80
- render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
81
- const iconSize = size === 'l' ? '1rem' : '0.75rem';
86
+ render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
87
+ const iconSize = () => {
88
+ switch (size) {
89
+ case 'l':
90
+ return '1rem';
91
+ case 'xs':
92
+ return '0.625rem';
93
+ default:
94
+ return '0.75rem';
95
+ }
96
+ };
82
97
 
83
98
  return (
84
99
  <Badge
85
- contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
86
- contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
100
+ contentLeft={
101
+ enableContentLeft || !enableText ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined
102
+ }
103
+ contentRight={enableContentRight ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
87
104
  size={size}
88
105
  {...rest}
89
106
  />
@@ -16,10 +16,10 @@ export var config = {
16
16
  light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-transparent-card);", ":var(--on-dark-text-primary);"], badgeTokens.color, badgeTokens.background, badgeTokens.colorTransparent, badgeTokens.backgroundTransparent, badgeTokens.colorClear)
17
17
  },
18
18
  size: {
19
- l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0.6875rem;", ":0.6875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
20
- m: /*#__PURE__*/css(["", ":0.375rem;", ":1.5rem;", ":0.5625rem;", ":0.5625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
21
- s: /*#__PURE__*/css(["", ":0.375rem;", ":1.25rem;", ":0.4375rem;", ":0.4375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
22
- xs: /*#__PURE__*/css(["", ":0.25rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.paddingRight, badgeTokens.paddingLeft, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
19
+ l: /*#__PURE__*/css(["", ":0.5rem;", ":1.75rem;", ":0 0.6875rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.0625rem;", ":0.25rem;", ":0.25rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
20
+ m: /*#__PURE__*/css(["", ":0.375rem;", ":1.5rem;", ":0 0.5625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem;", ":0.1875rem;", ":0.1875rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
21
+ s: /*#__PURE__*/css(["", ":0.375rem;", ":1.25rem;", ":0 0.4375rem;", ":0 0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight),
22
+ xs: /*#__PURE__*/css(["", ":0.25rem;", ":1rem;", ":0 0.25rem;", ":0 0.188rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":-0.0625rem;", ":0.125rem;", ":0.125rem;", ":-0.0625rem;"], badgeTokens.borderRadius, badgeTokens.height, badgeTokens.padding, badgeTokens.paddingIconOnly, badgeTokens.fontFamily, badgeTokens.fontSize, badgeTokens.fontStyle, badgeTokens.fontWeight, badgeTokens.letterSpacing, badgeTokens.lineHeight, badgeTokens.leftContentMarginLeft, badgeTokens.leftContentMarginRight, badgeTokens.rightContentMarginLeft, badgeTokens.rightContentMarginRight)
23
23
  },
24
24
  pilled: {
25
25
  "true": /*#__PURE__*/css(["", ":1.25rem;"], badgeTokens.pilledBorderRadius)
@@ -28,7 +28,7 @@ export var config = {
28
28
  "true": /*#__PURE__*/css([""])
29
29
  },
30
30
  clear: {
31
- "true": /*#__PURE__*/css([""])
31
+ "true": /*#__PURE__*/css(["", ":var(--surface-clear);"], badgeTokens.backgroundClear)
32
32
  }
33
33
  }
34
34
  };
@@ -31,6 +31,13 @@ const meta: Meta<typeof Badge> = {
31
31
  control: { type: 'boolean' },
32
32
  if: { arg: 'clear', truthy: false },
33
33
  },
34
+ maxWidth: {
35
+ control: { type: 'text' },
36
+ },
37
+ text: {
38
+ control: { type: 'text' },
39
+ if: { arg: 'enableText', truthy: true },
40
+ },
34
41
  ...disableProps(['contentLeft', 'contentRight']),
35
42
  },
36
43
  };
@@ -40,6 +47,7 @@ export default meta;
40
47
  type StoryProps = ComponentProps<typeof Badge> & {
41
48
  enableContentLeft: boolean;
42
49
  enableContentRight: boolean;
50
+ enableText: boolean;
43
51
  };
44
52
  type Story = StoryObj<StoryProps>;
45
53
 
@@ -60,26 +68,39 @@ export const Default: Story = {
60
68
  },
61
69
  enableContentRight: {
62
70
  control: { type: 'boolean' },
63
- if: { arg: 'enableContentLeft', truthy: false },
71
+ if: { arg: 'enableText', truthy: true },
64
72
  },
65
73
  },
66
74
  args: {
67
- text: 'Hello',
68
75
  view: 'default',
69
76
  size: 'm',
77
+ enableText: true,
78
+ text: 'Hello',
70
79
  enableContentLeft: false,
71
80
  enableContentRight: false,
72
81
  clear: false,
73
82
  pilled: false,
74
83
  transparent: false,
84
+ maxWidth: '',
75
85
  },
76
- render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => {
77
- const iconSize = size === 'l' ? '1rem' : '0.75rem';
86
+ render: ({ enableContentLeft, enableContentRight, enableText, size, ...rest }: StoryProps) => {
87
+ const iconSize = () => {
88
+ switch (size) {
89
+ case 'l':
90
+ return '1rem';
91
+ case 'xs':
92
+ return '0.625rem';
93
+ default:
94
+ return '0.75rem';
95
+ }
96
+ };
78
97
 
79
98
  return (
80
99
  <Badge
81
- contentLeft={enableContentLeft ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
82
- contentRight={enableContentRight ? <BellIcon width={iconSize} height={iconSize} /> : undefined}
100
+ contentLeft={
101
+ enableContentLeft || !enableText ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined
102
+ }
103
+ contentRight={enableContentRight ? <BellIcon width={iconSize()} height={iconSize()} /> : undefined}
83
104
  size={size}
84
105
  {...rest}
85
106
  />
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIhE,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,sFA4CnE,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBA9CQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExE,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAQ/C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIhE,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,sFAoEnE,CAAC;AAEP,eAAO,MAAM,WAAW;;;mBAtEQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CAmGxE,CAAC"}
@@ -3,6 +3,11 @@ export declare const classes: {
3
3
  badgeTransparent: string;
4
4
  badgeClear: string;
5
5
  badgeTruncate: string;
6
+ iconOnly: string;
7
+ };
8
+ export declare const privateTokens: {
9
+ customBackground: string;
10
+ customColor: string;
6
11
  };
7
12
  export declare const tokens: {
8
13
  background: string;
@@ -10,13 +15,12 @@ export declare const tokens: {
10
15
  backgroundTransparent: string;
11
16
  colorTransparent: string;
12
17
  colorClear: string;
18
+ backgroundClear: string;
13
19
  borderRadius: string;
14
20
  pilledBorderRadius: string;
15
21
  height: string;
16
- paddingTop: string;
17
- paddingRight: string;
18
- paddingBottom: string;
19
- paddingLeft: string;
22
+ padding: string;
23
+ paddingIconOnly: string;
20
24
  fontFamily: string;
21
25
  fontSize: string;
22
26
  fontStyle: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CA0BlB,CAAC"}
1
+ {"version":3,"file":"Badge.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAGzB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC"}
@@ -45,19 +45,32 @@ declare type ClearViewProps = {
45
45
  */
46
46
  clear?: false;
47
47
  };
48
+ declare type IconContentProps = {
49
+ /**
50
+ * Слот для контента слева, например `Icon`
51
+ */
52
+ contentLeft?: ReactNode;
53
+ /**
54
+ * Слот для контента справа, например `Icon`
55
+ */
56
+ contentRight?: never;
57
+ } | {
58
+ contentLeft?: never;
59
+ contentRight?: ReactNode;
60
+ };
48
61
  declare type CustomBadgeProps = {
49
62
  /**
50
63
  * Текстовая надпись
51
64
  */
52
65
  text?: string;
53
66
  /**
54
- * Слот для контента слева, например `Icon`
67
+ * Пользовательский цвет текста и иконок
55
68
  */
56
- contentLeft?: ReactNode;
69
+ customColor?: string;
57
70
  /**
58
- * Слот для контента справа, например `Icon`
71
+ * Пользовательский цвет фона
59
72
  */
60
- contentRight?: ReactNode;
73
+ customBackgroundColor?: string;
61
74
  /**
62
75
  * Обрезает контент по максимальной ширине и добавляет ...
63
76
  * @default 'auto'
@@ -75,7 +88,7 @@ declare type CustomBadgeProps = {
75
88
  * default
76
89
  */
77
90
  view?: string;
78
- } & PropsWithChildren;
91
+ } & IconContentProps & PropsWithChildren;
79
92
  export declare type BadgeProps = HTMLAttributes<HTMLDivElement> & CustomBadgeProps & ClearViewProps;
80
93
  export declare type BadgeRootProps = HTMLAttributes<HTMLDivElement> & CustomBadgeProps & {
81
94
  pilled?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,aAAK,cAAc,GACb;IACI;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAER,aAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,iBAAiB,CAAC;AAEtB,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAC5F,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GACvD,gBAAgB,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
1
+ {"version":3,"file":"Badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,aAAK,cAAc,GACb;IACI;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACvB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACI;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAER,aAAK,gBAAgB,GACf;IACI;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;CACxB,GACD;IACI,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAER,aAAK,gBAAgB,GAAG;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,gBAAgB,GAChB,iBAAiB,CAAC;AAEtB,oBAAY,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAC5F,oBAAY,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GACvD,gBAAgB,GAAG;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAMhB,CAAC"}
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_clear/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAKhB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAgBhB,CAAC"}
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAqBhB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Badge/Badge.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKlB,CAAC"}
1
+ {"version":3,"file":"Badge.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Badge/Badge.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKlB,CAAC"}