@salutejs/plasma-new-hope 0.149.0-canary.1445.10942800137.0 → 0.149.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (218) hide show
  1. package/cjs/components/Chip/Chip.js +1 -1
  2. package/cjs/components/Chip/Chip.js.map +1 -1
  3. package/cjs/components/Chip/Chip.tokens.js +1 -2
  4. package/cjs/components/Chip/Chip.tokens.js.map +1 -1
  5. package/cjs/components/Mask/Mask.js +45 -0
  6. package/cjs/components/Mask/Mask.js.map +1 -0
  7. package/cjs/components/TextField/TextField.js +3 -1
  8. package/cjs/components/TextField/TextField.js.map +1 -1
  9. package/cjs/index.css +0 -8
  10. package/cjs/index.js +2 -7
  11. package/cjs/index.js.map +1 -1
  12. package/emotion/cjs/components/Chip/Chip.js +1 -1
  13. package/emotion/cjs/components/Chip/Chip.tokens.js +1 -2
  14. package/emotion/cjs/components/Chip/index.js +0 -6
  15. package/emotion/cjs/components/Mask/Mask.js +55 -0
  16. package/emotion/cjs/components/Mask/Mask.template-doc.mdx +125 -0
  17. package/emotion/cjs/components/Mask/index.js +12 -0
  18. package/emotion/cjs/components/TextField/TextField.js +4 -2
  19. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
  20. package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
  21. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.js +9 -0
  22. package/emotion/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
  23. package/emotion/cjs/index.js +11 -11
  24. package/emotion/es/components/Chip/Chip.js +1 -1
  25. package/emotion/es/components/Chip/Chip.tokens.js +1 -2
  26. package/emotion/es/components/Chip/index.js +1 -1
  27. package/emotion/es/components/Mask/Mask.js +45 -0
  28. package/emotion/es/components/Mask/Mask.template-doc.mdx +125 -0
  29. package/emotion/es/components/Mask/index.js +1 -0
  30. package/emotion/es/components/TextField/TextField.js +4 -2
  31. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
  32. package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
  33. package/emotion/es/examples/plasma_web/components/Mask/Mask.js +3 -0
  34. package/emotion/es/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
  35. package/emotion/es/index.js +2 -2
  36. package/es/components/Chip/Chip.js +1 -1
  37. package/es/components/Chip/Chip.js.map +1 -1
  38. package/es/components/Chip/Chip.tokens.js +1 -2
  39. package/es/components/Chip/Chip.tokens.js.map +1 -1
  40. package/es/components/Mask/Mask.js +41 -0
  41. package/es/components/Mask/Mask.js.map +1 -0
  42. package/es/components/TextField/TextField.js +3 -1
  43. package/es/components/TextField/TextField.js.map +1 -1
  44. package/es/index.css +0 -8
  45. package/es/index.js +2 -3
  46. package/es/index.js.map +1 -1
  47. package/package.json +4 -2
  48. package/styled-components/cjs/components/Chip/Chip.js +1 -1
  49. package/styled-components/cjs/components/Chip/Chip.tokens.js +1 -2
  50. package/styled-components/cjs/components/Chip/index.js +0 -6
  51. package/styled-components/cjs/components/Mask/Mask.js +55 -0
  52. package/styled-components/cjs/components/Mask/Mask.template-doc.mdx +125 -0
  53. package/styled-components/cjs/components/Mask/index.js +12 -0
  54. package/styled-components/cjs/components/TextField/TextField.js +3 -1
  55. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
  56. package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
  57. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.js +9 -0
  58. package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
  59. package/styled-components/cjs/index.js +11 -11
  60. package/styled-components/es/components/Chip/Chip.js +1 -1
  61. package/styled-components/es/components/Chip/Chip.tokens.js +1 -2
  62. package/styled-components/es/components/Chip/index.js +1 -1
  63. package/styled-components/es/components/Mask/Mask.js +45 -0
  64. package/styled-components/es/components/Mask/Mask.template-doc.mdx +125 -0
  65. package/styled-components/es/components/Mask/index.js +1 -0
  66. package/styled-components/es/components/TextField/TextField.js +3 -1
  67. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
  68. package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
  69. package/styled-components/es/examples/plasma_web/components/Mask/Mask.js +3 -0
  70. package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
  71. package/styled-components/es/index.js +2 -2
  72. package/types/components/Chip/Chip.tokens.d.ts +0 -1
  73. package/types/components/Chip/Chip.tokens.d.ts.map +1 -1
  74. package/types/components/Chip/index.d.ts +1 -1
  75. package/types/components/Chip/index.d.ts.map +1 -1
  76. package/types/components/Mask/Mask.d.ts +5 -0
  77. package/types/components/Mask/Mask.d.ts.map +1 -0
  78. package/types/components/Mask/Mask.types.d.ts +62 -0
  79. package/types/components/Mask/Mask.types.d.ts.map +1 -0
  80. package/types/components/Mask/index.d.ts +2 -0
  81. package/types/components/Mask/index.d.ts.map +1 -0
  82. package/types/components/TextField/TextField.d.ts.map +1 -1
  83. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +191 -0
  84. package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -0
  85. package/types/examples/plasma_web/components/Mask/Mask.d.ts +191 -0
  86. package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -0
  87. package/types/index.d.ts +1 -1
  88. package/types/index.d.ts.map +1 -1
  89. package/cjs/components/ChipGroup/ChipGroup.css +0 -7
  90. package/cjs/components/ChipGroup/ChipGroup.js +0 -63
  91. package/cjs/components/ChipGroup/ChipGroup.js.map +0 -1
  92. package/cjs/components/ChipGroup/ChipGroup.styles.js +0 -9
  93. package/cjs/components/ChipGroup/ChipGroup.styles.js.map +0 -1
  94. package/cjs/components/ChipGroup/ChipGroup.styles_1l3nd6v.css +0 -1
  95. package/cjs/components/ChipGroup/ChipGroup.tokens.js +0 -50
  96. package/cjs/components/ChipGroup/ChipGroup.tokens.js.map +0 -1
  97. package/cjs/components/ChipGroup/variations/_gap/base.js +0 -9
  98. package/cjs/components/ChipGroup/variations/_gap/base.js.map +0 -1
  99. package/cjs/components/ChipGroup/variations/_gap/base_vhoe9f.css +0 -1
  100. package/cjs/components/ChipGroup/variations/_size/base.js +0 -9
  101. package/cjs/components/ChipGroup/variations/_size/base.js.map +0 -1
  102. package/cjs/components/ChipGroup/variations/_size/base_eu60ye.css +0 -1
  103. package/cjs/components/ChipGroup/variations/_view/base.js +0 -9
  104. package/cjs/components/ChipGroup/variations/_view/base.js.map +0 -1
  105. package/cjs/components/ChipGroup/variations/_view/base_122089q.css +0 -1
  106. package/emotion/cjs/components/ChipGroup/ChipGroup.js +0 -65
  107. package/emotion/cjs/components/ChipGroup/ChipGroup.styles.js +0 -9
  108. package/emotion/cjs/components/ChipGroup/ChipGroup.template-doc.mdx +0 -93
  109. package/emotion/cjs/components/ChipGroup/ChipGroup.tokens.js +0 -48
  110. package/emotion/cjs/components/ChipGroup/index.js +0 -31
  111. package/emotion/cjs/components/ChipGroup/variations/_gap/base.js +0 -9
  112. package/emotion/cjs/components/ChipGroup/variations/_gap/tokens.json +0 -1
  113. package/emotion/cjs/components/ChipGroup/variations/_size/base.js +0 -10
  114. package/emotion/cjs/components/ChipGroup/variations/_size/tokens.json +0 -22
  115. package/emotion/cjs/components/ChipGroup/variations/_view/base.js +0 -10
  116. package/emotion/cjs/components/ChipGroup/variations/_view/tokens.json +0 -15
  117. package/emotion/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.js +0 -33
  118. package/emotion/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.js +0 -11
  119. package/emotion/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  120. package/emotion/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.config.js +0 -33
  121. package/emotion/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.js +0 -11
  122. package/emotion/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  123. package/emotion/es/components/ChipGroup/ChipGroup.js +0 -56
  124. package/emotion/es/components/ChipGroup/ChipGroup.styles.js +0 -3
  125. package/emotion/es/components/ChipGroup/ChipGroup.template-doc.mdx +0 -93
  126. package/emotion/es/components/ChipGroup/ChipGroup.tokens.js +0 -42
  127. package/emotion/es/components/ChipGroup/index.js +0 -2
  128. package/emotion/es/components/ChipGroup/variations/_gap/base.js +0 -3
  129. package/emotion/es/components/ChipGroup/variations/_gap/tokens.json +0 -1
  130. package/emotion/es/components/ChipGroup/variations/_size/base.js +0 -4
  131. package/emotion/es/components/ChipGroup/variations/_size/tokens.json +0 -22
  132. package/emotion/es/components/ChipGroup/variations/_view/base.js +0 -4
  133. package/emotion/es/components/ChipGroup/variations/_view/tokens.json +0 -15
  134. package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.js +0 -27
  135. package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.js +0 -5
  136. package/emotion/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  137. package/emotion/es/examples/plasma_web/components/ChipGroup /ChipGroup.config.js +0 -27
  138. package/emotion/es/examples/plasma_web/components/ChipGroup /ChipGroup.js +0 -5
  139. package/emotion/es/examples/plasma_web/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  140. package/es/components/ChipGroup/ChipGroup.css +0 -7
  141. package/es/components/ChipGroup/ChipGroup.js +0 -58
  142. package/es/components/ChipGroup/ChipGroup.js.map +0 -1
  143. package/es/components/ChipGroup/ChipGroup.styles.js +0 -5
  144. package/es/components/ChipGroup/ChipGroup.styles.js.map +0 -1
  145. package/es/components/ChipGroup/ChipGroup.styles_1l3nd6v.css +0 -1
  146. package/es/components/ChipGroup/ChipGroup.tokens.js +0 -45
  147. package/es/components/ChipGroup/ChipGroup.tokens.js.map +0 -1
  148. package/es/components/ChipGroup/variations/_gap/base.js +0 -5
  149. package/es/components/ChipGroup/variations/_gap/base.js.map +0 -1
  150. package/es/components/ChipGroup/variations/_gap/base_vhoe9f.css +0 -1
  151. package/es/components/ChipGroup/variations/_size/base.js +0 -5
  152. package/es/components/ChipGroup/variations/_size/base.js.map +0 -1
  153. package/es/components/ChipGroup/variations/_size/base_eu60ye.css +0 -1
  154. package/es/components/ChipGroup/variations/_view/base.js +0 -5
  155. package/es/components/ChipGroup/variations/_view/base.js.map +0 -1
  156. package/es/components/ChipGroup/variations/_view/base_122089q.css +0 -1
  157. package/styled-components/cjs/components/ChipGroup/ChipGroup.js +0 -65
  158. package/styled-components/cjs/components/ChipGroup/ChipGroup.styles.js +0 -9
  159. package/styled-components/cjs/components/ChipGroup/ChipGroup.template-doc.mdx +0 -93
  160. package/styled-components/cjs/components/ChipGroup/ChipGroup.tokens.js +0 -48
  161. package/styled-components/cjs/components/ChipGroup/index.js +0 -31
  162. package/styled-components/cjs/components/ChipGroup/variations/_gap/base.js +0 -9
  163. package/styled-components/cjs/components/ChipGroup/variations/_gap/tokens.json +0 -1
  164. package/styled-components/cjs/components/ChipGroup/variations/_size/base.js +0 -10
  165. package/styled-components/cjs/components/ChipGroup/variations/_size/tokens.json +0 -22
  166. package/styled-components/cjs/components/ChipGroup/variations/_view/base.js +0 -10
  167. package/styled-components/cjs/components/ChipGroup/variations/_view/tokens.json +0 -15
  168. package/styled-components/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.js +0 -33
  169. package/styled-components/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.js +0 -11
  170. package/styled-components/cjs/examples/plasma_b2c/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  171. package/styled-components/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.config.js +0 -33
  172. package/styled-components/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.js +0 -11
  173. package/styled-components/cjs/examples/plasma_web/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  174. package/styled-components/es/components/ChipGroup/ChipGroup.js +0 -56
  175. package/styled-components/es/components/ChipGroup/ChipGroup.styles.js +0 -3
  176. package/styled-components/es/components/ChipGroup/ChipGroup.template-doc.mdx +0 -93
  177. package/styled-components/es/components/ChipGroup/ChipGroup.tokens.js +0 -42
  178. package/styled-components/es/components/ChipGroup/index.js +0 -2
  179. package/styled-components/es/components/ChipGroup/variations/_gap/base.js +0 -3
  180. package/styled-components/es/components/ChipGroup/variations/_gap/tokens.json +0 -1
  181. package/styled-components/es/components/ChipGroup/variations/_size/base.js +0 -4
  182. package/styled-components/es/components/ChipGroup/variations/_size/tokens.json +0 -22
  183. package/styled-components/es/components/ChipGroup/variations/_view/base.js +0 -4
  184. package/styled-components/es/components/ChipGroup/variations/_view/tokens.json +0 -15
  185. package/styled-components/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.js +0 -27
  186. package/styled-components/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.js +0 -5
  187. package/styled-components/es/examples/plasma_b2c/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  188. package/styled-components/es/examples/plasma_web/components/ChipGroup /ChipGroup.config.js +0 -27
  189. package/styled-components/es/examples/plasma_web/components/ChipGroup /ChipGroup.js +0 -5
  190. package/styled-components/es/examples/plasma_web/components/ChipGroup /ChipGroup.stories.tsx +0 -95
  191. package/types/components/ChipGroup/ChipGroup.d.ts +0 -27
  192. package/types/components/ChipGroup/ChipGroup.d.ts.map +0 -1
  193. package/types/components/ChipGroup/ChipGroup.styles.d.ts +0 -2
  194. package/types/components/ChipGroup/ChipGroup.styles.d.ts.map +0 -1
  195. package/types/components/ChipGroup/ChipGroup.tokens.d.ts +0 -43
  196. package/types/components/ChipGroup/ChipGroup.tokens.d.ts.map +0 -1
  197. package/types/components/ChipGroup/ChipGroup.types.d.ts +0 -42
  198. package/types/components/ChipGroup/ChipGroup.types.d.ts.map +0 -1
  199. package/types/components/ChipGroup/index.d.ts +0 -3
  200. package/types/components/ChipGroup/index.d.ts.map +0 -1
  201. package/types/components/ChipGroup/variations/_gap/base.d.ts +0 -2
  202. package/types/components/ChipGroup/variations/_gap/base.d.ts.map +0 -1
  203. package/types/components/ChipGroup/variations/_size/base.d.ts +0 -2
  204. package/types/components/ChipGroup/variations/_size/base.d.ts.map +0 -1
  205. package/types/components/ChipGroup/variations/_view/base.d.ts +0 -2
  206. package/types/components/ChipGroup/variations/_view/base.d.ts.map +0 -1
  207. package/types/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.d.ts +0 -24
  208. package/types/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.d.ts.map +0 -1
  209. package/types/examples/plasma_b2c/components/ChipGroup /ChipGroup.d.ts +0 -19
  210. package/types/examples/plasma_b2c/components/ChipGroup /ChipGroup.d.ts.map +0 -1
  211. package/types/examples/plasma_web/components/ChipGroup /ChipGroup.config.d.ts +0 -24
  212. package/types/examples/plasma_web/components/ChipGroup /ChipGroup.config.d.ts.map +0 -1
  213. package/types/examples/plasma_web/components/ChipGroup /ChipGroup.d.ts +0 -19
  214. package/types/examples/plasma_web/components/ChipGroup /ChipGroup.d.ts.map +0 -1
  215. /package/emotion/cjs/components/{ChipGroup/ChipGroup.types.js → Mask/Mask.types.js} +0 -0
  216. /package/emotion/es/components/{ChipGroup/ChipGroup.types.js → Mask/Mask.types.js} +0 -0
  217. /package/styled-components/cjs/components/{ChipGroup/ChipGroup.types.js → Mask/Mask.types.js} +0 -0
  218. /package/styled-components/es/components/{ChipGroup/ChipGroup.types.js → Mask/Mask.types.js} +0 -0
@@ -1,42 +0,0 @@
1
- export var classes = {
2
- chipGroupOverrideStyles: 'chip-group-override-styles',
3
- dense: 'chip-group-gap-dense',
4
- wide: 'chip-group-gap-wide',
5
- wrap: 'chip-group-wrap'
6
- };
7
- export var tokens = {
8
- chipBackground: '--plasma-chip-group-items-background',
9
- chipColor: '--plasma-chip-group-items-color',
10
- chipBackgroundHover: '--plasma-chip-group-items-background-hover',
11
- chipColorHover: '--plasma-chip-group-items-color-hover',
12
- chipScaleHover: '--plasma-chip-group-items-scale-hover',
13
- chipBackgroundActive: '--plasma-chip-group-items-background-active',
14
- chipColorActive: '--plasma-chip-group-items-color-active',
15
- chipScaleActive: '--plasma-chip-group-items-scale-active',
16
- chipFocusColor: '--plasma-chip-group-items-focus-color',
17
- chipOutlineSize: '--plasma-chip-group-items-outline-size',
18
- chipCloseIconColor: '--plasma-chip-group-items-close-icon-color',
19
- chipCloseIconColorHover: '--plasma-chip-group-items-close-icon-color-hover',
20
- chipCloseIconColorActive: '--plasma-chip-group-items-close-icon-color-active',
21
- chipGroupItemsGap: '--plasma-chip-group-items-gap',
22
- chipBorderRadius: '--plasma-chip-group-items-border-radius',
23
- chipHeight: '--plasma-chip-group-item-height',
24
- chipWidth: '--plasma-chip-group-item-width',
25
- chipPaddingTop: '--plasma-chip-group-item-padding-top',
26
- chipPaddingRight: '--plasma-chip-group-item-padding-right',
27
- chipPaddingBottom: '--plasma-chip-group-item-padding-bottom',
28
- chipPaddingLeft: '--plasma-chip-group-item-padding-left',
29
- chipCloseIconSize: '--plasma-chip-group-item-close-icon-size',
30
- chipFontFamily: '--plasma-chip-group-item-font-family',
31
- chipFontSize: '--plasma-chip-group-item-font-size',
32
- chipFontStyle: '--plasma-chip-group-item-font-style',
33
- chipFontWeight: '--plasma-chip-group-item-font-weight',
34
- chipLetterSpacing: '--plasma-chip-group-item-letter-spacing',
35
- chipLineHeight: '--plasma-chip-group-item-line-height',
36
- chipLeftContentMarginLeft: '--plasma-chip-group-item-left-content-margin-left',
37
- chipLeftContentMarginRight: '--plasma-chip-group-item-left-content-margin-right',
38
- chipRightContentMarginLeft: '--plasma-chip-group-item-right-content-margin-left',
39
- chipRightContentMarginRight: '--plasma-chip-group-item-right-content-margin-right',
40
- chipClearContentMarginLeft: '--plasma-chip-group-item-clear-content-margin-left',
41
- chipClearContentMarginRight: '--plasma-chip-group-item-clear-content-margin-right'
42
- };
@@ -1,2 +0,0 @@
1
- export { chipGroupRoot, chipGroupConfig } from './ChipGroup';
2
- export { tokens as chipGroupTokens, classes as chipGroupClasses } from './ChipGroup.tokens';
@@ -1,3 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { tokens } from '../../ChipGroup.tokens';
3
- export var base = /*#__PURE__*/css(["gap:var(", ");"], tokens.chipGroupItemsGap);
@@ -1 +0,0 @@
1
- ["--plasma-chip-group-items-gap"]
@@ -1,4 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, tokens } from '../../ChipGroup.tokens';
3
- import { chipClasses, chipTokens } from '../../../Chip';
4
- export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.chipGroupOverrideStyles, chipClasses.chipItem, chipTokens.height, tokens.chipHeight, chipTokens.width, tokens.chipWidth, chipTokens.borderRadius, tokens.chipBorderRadius, chipTokens.paddingTop, tokens.chipPaddingTop, chipTokens.paddingRight, tokens.chipPaddingRight, chipTokens.paddingBottom, tokens.chipPaddingBottom, chipTokens.paddingLeft, tokens.chipPaddingLeft, chipTokens.closeIconSize, tokens.chipCloseIconSize, chipTokens.fontFamily, tokens.chipFontFamily, chipTokens.fontSize, tokens.chipFontSize, chipTokens.fontStyle, tokens.chipFontStyle, chipTokens.fontWeight, tokens.chipFontWeight, chipTokens.letterSpacing, tokens.chipLetterSpacing, chipTokens.lineHeight, tokens.chipLineHeight, chipTokens.leftContentMarginLeft, tokens.chipLeftContentMarginLeft, chipTokens.leftContentMarginRight, tokens.chipLeftContentMarginRight, chipTokens.rightContentMarginLeft, tokens.chipRightContentMarginLeft, chipTokens.rightContentMarginRight, tokens.chipRightContentMarginRight, chipTokens.clearContentMarginLeft, tokens.chipClearContentMarginLeft, chipTokens.clearContentMarginRight, tokens.chipClearContentMarginRight);
@@ -1,22 +0,0 @@
1
- [
2
- "--plasma-chip-group-item-height",
3
- "--plasma-chip-group-item-width",
4
- "--plasma-chip-group-item-border-radius",
5
- "--plasma-chip-group-item-padding-top",
6
- "--plasma-chip-group-item-padding-right",
7
- "--plasma-chip-group-item-padding-bottom",
8
- "--plasma-chip-group-item-padding-left",
9
- "--plasma-chip-group-item-close-icon-size",
10
- "--plasma-chip-group-item-font-family",
11
- "--plasma-chip-group-item-font-size",
12
- "--plasma-chip-group-item-font-style",
13
- "--plasma-chip-group-item-font-weight",
14
- "--plasma-chip-group-item-letter-spacing",
15
- "--plasma-chip-group-item-line-height",
16
- "--plasma-chip-group-item-left-content-margin-left",
17
- "--plasma-chip-group-item-left-content-margin-right",
18
- "--plasma-chip-group-item-right-content-margin-left",
19
- "--plasma-chip-group-item-right-content-margin-right",
20
- "--plasma-chip-group-item-clear-content-margin-left",
21
- "--plasma-chip-group-item-clear-content-margin-right"
22
- ]
@@ -1,4 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, tokens } from '../../ChipGroup.tokens';
3
- import { chipClasses, chipTokens } from '../../../Chip';
4
- export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.chipGroupOverrideStyles, chipClasses.chipItem, chipTokens.background, tokens.chipBackground, chipTokens.color, tokens.chipColor, chipTokens.backgroundHover, tokens.chipBackgroundHover, chipTokens.colorHover, tokens.chipColorHover, chipTokens.scaleHover, tokens.chipScaleHover, chipTokens.backgroundActive, tokens.chipBackgroundActive, chipTokens.colorActive, tokens.chipColorActive, chipTokens.scaleActive, tokens.chipScaleActive, chipTokens.focusColor, tokens.chipFocusColor, chipTokens.outlineSize, tokens.chipOutlineSize, chipTokens.closeIconColor, tokens.chipCloseIconColor, chipTokens.closeIconColorHover, tokens.chipCloseIconColorHover, chipTokens.closeIconColorActive, tokens.chipCloseIconColorActive);
@@ -1,15 +0,0 @@
1
- [
2
- "--plasma-chip-group-items-background",
3
- "--plasma-chip-group-items-color",
4
- "--plasma-chip-group-items-background-hover",
5
- "--plasma-chip-group-items-color-hover",
6
- "--plasma-chip-group-items-scale-hover",
7
- "--plasma-chip-group-items-background-active",
8
- "--plasma-chip-group-items-color-active",
9
- "--plasma-chip-group-items-scale-active",
10
- "--plasma-chip-group-items-focus-color",
11
- "--plasma-chip-group-items-outline-size",
12
- "--plasma-chip-group-items-close-icon-color",
13
- "--plasma-chip-group-items-close-icon-color-hover",
14
- "--plasma-chip-group-items-close-icon-color-active"
15
- ]
@@ -1,27 +0,0 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
2
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
- import { css } from '@linaria/core';
4
- import { chipGroupTokens as tokens } from '../../../../components/ChipGroup';
5
- export var config = {
6
- defaults: {
7
- view: 'default',
8
- size: 'm'
9
- },
10
- variations: {
11
- view: {
12
- "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default-hover);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
13
- secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
14
- accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent-hover);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive)
15
- },
16
- size: {
17
- l: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": auto;\n ", ": 3rem;\n ", ": 1rem;\n ", ": 1rem;\n\n ", ": var(--plasma-typo-body-l-font-family);\n ", ": var(--plasma-typo-body-l-font-size);\n ", ": var(--plasma-typo-body-l-font-style);\n ", ": var(--plasma-typo-body-l-font-weight);\n ", ": var(--plasma-typo-body-l-letter-spacing);\n ", ": var(--plasma-typo-body-l-line-height);\n\n ", ": -0.125rem;\n ", ": 0.5rem;\n ", ": 0.625rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
18
- m: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0.875rem;\n ", ": 0.875rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.125rem;\n ", ": 0.375rem;\n ", ": 0.5rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
19
- s: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": auto;\n ", ": 2rem;\n ", ": 0.875rem;\n ", ": 0.875rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.125rem;\n ", ": 0.25rem;\n ", ": 0.375rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
20
- xs: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.375rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.625rem;\n ", ": 0.625rem;\n\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": -0.125rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize)
21
- },
22
- gap: {
23
- dense: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.125rem;\n "])), tokens.chipGroupItemsGap),
24
- wide: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n "])), tokens.chipGroupItemsGap)
25
- }
26
- }
27
- };
@@ -1,5 +0,0 @@
1
- import { chipGroupConfig } from '../../../../components/ChipGroup';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './ChipGroup.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(chipGroupConfig, config);
5
- export var ChipGroup = /*#__PURE__*/component(mergedConfig);
@@ -1,95 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
5
-
6
- import { WithTheme } from '../../../_helpers';
7
- import { Chip } from '../Chip/Chip';
8
-
9
- import { ChipGroup } from './ChipGroup';
10
-
11
- type StoryProps = ComponentProps<typeof ChipGroup> & { itemsCount?: number };
12
- type Story = StoryObj<StoryProps>;
13
-
14
- const views = ['default', 'accent', 'secondary'];
15
- const sizes = ['l', 'm', 's', 'xs'];
16
- const gapValues = ['dense', 'wide'];
17
-
18
- const meta: Meta<typeof ChipGroup> = {
19
- title: 'plasma_b2c/ChipGroup',
20
- decorators: [WithTheme],
21
- argTypes: {
22
- size: {
23
- options: sizes,
24
- control: { type: 'select' },
25
- if: { arg: 'isCommonChipStyles', truthy: true },
26
- },
27
- view: {
28
- options: views,
29
- control: { type: 'select' },
30
- if: { arg: 'isCommonChipStyles', truthy: true },
31
- },
32
- gap: {
33
- options: gapValues,
34
- control: {
35
- type: 'select',
36
- },
37
- },
38
- },
39
- };
40
-
41
- export default meta;
42
-
43
- export const Default: Story = {
44
- args: {
45
- itemsCount: 5,
46
- gap: 'dense',
47
- isWrapped: false,
48
- view: 'default',
49
- size: 'm',
50
- isCommonChipStyles: true,
51
- },
52
- argTypes: {
53
- ...disableProps(['isCommonChipStyles']),
54
- },
55
- render: ({ itemsCount, ...args }: StoryProps) => {
56
- return (
57
- <ChipGroup {...args}>
58
- {Array(itemsCount)
59
- .fill(true)
60
- .map((_, i) => (
61
- <Chip text={`Chip ${i}`} key={`chip_${i}`} hasClear={false} />
62
- ))}
63
- </ChipGroup>
64
- );
65
- },
66
- };
67
-
68
- export const CustomChips: Story = {
69
- args: {
70
- ...Default.args,
71
- isCommonChipStyles: false,
72
- },
73
- argTypes: {
74
- ...disableProps(['itemsCount']),
75
- },
76
- render: (args: StoryProps) => {
77
- return (
78
- <>
79
- <h3>Группа Chip с разными темами</h3>
80
- <ChipGroup {...args}>
81
- <Chip text="Primary" view="default" hasClear={false} />
82
- <Chip text="Secondary" view="secondary" hasClear={false} />
83
- <Chip text="Accent" view="accent" hasClear={false} />
84
- </ChipGroup>
85
-
86
- <h3>Группа Chip с разными размерами</h3>
87
- <ChipGroup {...args}>
88
- <Chip text="Primary" view="default" size="l" hasClear={false} />
89
- <Chip text="Secondary" view="secondary" size="m" hasClear={false} />
90
- <Chip text="Accent" view="accent" size="s" hasClear={false} />
91
- </ChipGroup>
92
- </>
93
- );
94
- },
95
- };
@@ -1,27 +0,0 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
2
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
- import { css } from '@linaria/core';
4
- import { chipGroupTokens as tokens } from '../../../../components/ChipGroup';
5
- export var config = {
6
- defaults: {
7
- view: 'default',
8
- size: 'm'
9
- },
10
- variations: {
11
- view: {
12
- "default": /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default-hover);\n ", ": var(--inverse-text-primary);\n ", ": var(--surface-solid-default-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
13
- secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-hover);\n ", ": var(--text-primary);\n ", ": var(--surface-transparent-secondary-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive),
14
- accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent-hover);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent-active);\n "])), tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive)
15
- },
16
- size: {
17
- l: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.75rem;\n ", ": auto;\n ", ": 3rem;\n ", ": 1rem;\n ", ": 1rem;\n\n ", ": var(--plasma-typo-body-l-font-family);\n ", ": var(--plasma-typo-body-l-font-size);\n ", ": var(--plasma-typo-body-l-font-style);\n ", ": var(--plasma-typo-body-l-font-weight);\n ", ": var(--plasma-typo-body-l-letter-spacing);\n ", ": var(--plasma-typo-body-l-line-height);\n\n ", ": -0.125rem;\n ", ": 0.5rem;\n ", ": 0.625rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
18
- m: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.625rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0.875rem;\n ", ": 0.875rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.125rem;\n ", ": 0.375rem;\n ", ": 0.5rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
19
- s: /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": auto;\n ", ": 2rem;\n ", ": 0.875rem;\n ", ": 0.875rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": -0.125rem;\n ", ": 0.25rem;\n ", ": 0.375rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize),
20
- xs: /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.375rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.625rem;\n ", ": 0.625rem;\n\n ", ": var(--plasma-typo-body-xs-font-family);\n ", ": var(--plasma-typo-body-xs-font-size);\n ", ": var(--plasma-typo-body-xs-font-style);\n ", ": var(--plasma-typo-body-xs-font-weight);\n ", ": var(--plasma-typo-body-xs-letter-spacing);\n ", ": var(--plasma-typo-body-xs-line-height);\n\n ", ": -0.125rem;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight, tokens.chipLeftContentMarginLeft, tokens.chipLeftContentMarginRight, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipScaleHover, tokens.chipScaleActive, tokens.chipCloseIconSize)
21
- },
22
- gap: {
23
- dense: /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.125rem;\n "])), tokens.chipGroupItemsGap),
24
- wide: /*#__PURE__*/css(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n "])), tokens.chipGroupItemsGap)
25
- }
26
- }
27
- };
@@ -1,5 +0,0 @@
1
- import { chipGroupConfig } from '../../../../components/ChipGroup';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './ChipGroup.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(chipGroupConfig, config);
5
- export var ChipGroup = /*#__PURE__*/component(mergedConfig);
@@ -1,95 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
- import { disableProps } from '@salutejs/plasma-sb-utils';
5
-
6
- import { WithTheme } from '../../../_helpers';
7
- import { Chip } from '../Chip/Chip';
8
-
9
- import { ChipGroup } from './ChipGroup';
10
-
11
- type StoryProps = ComponentProps<typeof ChipGroup> & { itemsCount?: number };
12
- type Story = StoryObj<StoryProps>;
13
-
14
- const views = ['default', 'accent', 'secondary'];
15
- const sizes = ['l', 'm', 's', 'xs'];
16
- const gapValues = ['dense', 'wide'];
17
-
18
- const meta: Meta<typeof ChipGroup> = {
19
- title: 'plasma_web/ChipGroup',
20
- decorators: [WithTheme],
21
- argTypes: {
22
- size: {
23
- options: sizes,
24
- control: { type: 'select' },
25
- if: { arg: 'isCommonChipStyles', truthy: true },
26
- },
27
- view: {
28
- options: views,
29
- control: { type: 'select' },
30
- if: { arg: 'isCommonChipStyles', truthy: true },
31
- },
32
- gap: {
33
- options: gapValues,
34
- control: {
35
- type: 'select',
36
- },
37
- },
38
- },
39
- };
40
-
41
- export default meta;
42
-
43
- export const Default: Story = {
44
- args: {
45
- itemsCount: 5,
46
- gap: 'dense',
47
- isWrapped: false,
48
- view: 'default',
49
- size: 'm',
50
- isCommonChipStyles: true,
51
- },
52
- argTypes: {
53
- ...disableProps(['isCommonChipStyles']),
54
- },
55
- render: ({ itemsCount, ...args }: StoryProps) => {
56
- return (
57
- <ChipGroup {...args}>
58
- {Array(itemsCount)
59
- .fill(true)
60
- .map((_, i) => (
61
- <Chip text={`Chip ${i}`} key={`chip_${i}`} hasClear={false} />
62
- ))}
63
- </ChipGroup>
64
- );
65
- },
66
- };
67
-
68
- export const CustomChips: Story = {
69
- args: {
70
- ...Default.args,
71
- isCommonChipStyles: false,
72
- },
73
- argTypes: {
74
- ...disableProps(['itemsCount']),
75
- },
76
- render: (args: StoryProps) => {
77
- return (
78
- <>
79
- <h3>Группа Chip с разными темами</h3>
80
- <ChipGroup {...args}>
81
- <Chip text="Primary" view="default" hasClear={false} />
82
- <Chip text="Secondary" view="secondary" hasClear={false} />
83
- <Chip text="Accent" view="accent" hasClear={false} />
84
- </ChipGroup>
85
-
86
- <h3>Группа Chip с разными размерами</h3>
87
- <ChipGroup {...args}>
88
- <Chip text="Primary" view="default" size="l" hasClear={false} />
89
- <Chip text="Secondary" view="secondary" size="m" hasClear={false} />
90
- <Chip text="Accent" view="accent" size="s" hasClear={false} />
91
- </ChipGroup>
92
- </>
93
- );
94
- },
95
- };
@@ -1,27 +0,0 @@
1
- import React from 'react';
2
- import type { RootProps } from '../../engines';
3
- import type { ChipGroupProps } from './ChipGroup.types';
4
- export declare const chipGroupRoot: (Root: RootProps<HTMLDivElement, ChipGroupProps>) => React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
5
- export declare const chipGroupConfig: {
6
- name: string;
7
- tag: string;
8
- layout: (Root: RootProps<HTMLDivElement, ChipGroupProps>) => React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
9
- base: import("@linaria/core").LinariaClassName;
10
- variations: {
11
- view: {
12
- css: import("@linaria/core").LinariaClassName;
13
- };
14
- size: {
15
- css: import("@linaria/core").LinariaClassName;
16
- };
17
- gap: {
18
- css: import("@linaria/core").LinariaClassName;
19
- };
20
- };
21
- defaults: {
22
- view: string;
23
- size: string;
24
- gap: string;
25
- };
26
- };
27
- //# sourceMappingURL=ChipGroup.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,0FAmBvE,CAAC;AAEP,eAAO,MAAM,eAAe;;;mBArBQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;CA0C5E,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=ChipGroup.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAMhB,CAAC"}
@@ -1,43 +0,0 @@
1
- export declare const classes: {
2
- chipGroupOverrideStyles: string;
3
- dense: string;
4
- wide: string;
5
- wrap: string;
6
- };
7
- export declare const tokens: {
8
- chipBackground: string;
9
- chipColor: string;
10
- chipBackgroundHover: string;
11
- chipColorHover: string;
12
- chipScaleHover: string;
13
- chipBackgroundActive: string;
14
- chipColorActive: string;
15
- chipScaleActive: string;
16
- chipFocusColor: string;
17
- chipOutlineSize: string;
18
- chipCloseIconColor: string;
19
- chipCloseIconColorHover: string;
20
- chipCloseIconColorActive: string;
21
- chipGroupItemsGap: string;
22
- chipBorderRadius: string;
23
- chipHeight: string;
24
- chipWidth: string;
25
- chipPaddingTop: string;
26
- chipPaddingRight: string;
27
- chipPaddingBottom: string;
28
- chipPaddingLeft: string;
29
- chipCloseIconSize: string;
30
- chipFontFamily: string;
31
- chipFontSize: string;
32
- chipFontStyle: string;
33
- chipFontWeight: string;
34
- chipLetterSpacing: string;
35
- chipLineHeight: string;
36
- chipLeftContentMarginLeft: string;
37
- chipLeftContentMarginRight: string;
38
- chipRightContentMarginLeft: string;
39
- chipRightContentMarginRight: string;
40
- chipClearContentMarginLeft: string;
41
- chipClearContentMarginRight: string;
42
- };
43
- //# sourceMappingURL=ChipGroup.tokens.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsClB,CAAC"}
@@ -1,42 +0,0 @@
1
- import type { HTMLAttributes } from 'react';
2
- export declare type Gap = 'dense' | 'wide';
3
- declare type CustomChipGroupProps = {
4
- /**
5
- * Отступы между элементами внутри группы
6
- * @default
7
- * dense
8
- * @description
9
- * Доступные значения: 'dense' | 'wide'.
10
- */
11
- gap?: Gap;
12
- /**
13
- * Вид группы
14
- * @description
15
- * Применяется если isCommonChipStyles передан как true.
16
- */
17
- view?: string;
18
- /**
19
- * Размер группы
20
- * @description
21
- * Применяется если isCommonChipStyles передан как true.
22
- */
23
- size?: string;
24
- /**
25
- * Группа будет переопределять view и size для всех элементов внутри
26
- * @default
27
- * true
28
- * @description
29
- * Если значение передано как true, для каждого элемента внутри группы
30
- * view и size берутся из значений группы.
31
- * Если значение не задано, каждый элемент может иметь свое значение view и size.
32
- */
33
- isCommonChipStyles?: boolean;
34
- /**
35
- * Переносить ли элементы на новый ряд, при нехватке ширины.
36
- */
37
- isWrapped?: boolean;
38
- };
39
- export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement>, CustomChipGroupProps {
40
- }
41
- export {};
42
- //# sourceMappingURL=ChipGroup.types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,oBAAY,GAAG,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnC,aAAK,oBAAoB,GAAG;IACxB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC;IACV;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,oBAAoB;CAAG"}
@@ -1,3 +0,0 @@
1
- export { chipGroupRoot, chipGroupConfig } from './ChipGroup';
2
- export { tokens as chipGroupTokens, classes as chipGroupClasses } from './ChipGroup.tokens';
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ChipGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChipGroup/variations/_gap/base.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,0CAEhB,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChipGroup/variations/_size/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAyBhB,CAAC"}
@@ -1,2 +0,0 @@
1
- export declare const base: import("@linaria/core").LinariaClassName;
2
- //# sourceMappingURL=base.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/components/ChipGroup/variations/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAgBhB,CAAC"}
@@ -1,24 +0,0 @@
1
- export declare const config: {
2
- defaults: {
3
- view: string;
4
- size: string;
5
- };
6
- variations: {
7
- view: {
8
- default: import("@linaria/core").LinariaClassName;
9
- secondary: import("@linaria/core").LinariaClassName;
10
- accent: import("@linaria/core").LinariaClassName;
11
- };
12
- size: {
13
- l: import("@linaria/core").LinariaClassName;
14
- m: import("@linaria/core").LinariaClassName;
15
- s: import("@linaria/core").LinariaClassName;
16
- xs: import("@linaria/core").LinariaClassName;
17
- };
18
- gap: {
19
- dense: import("@linaria/core").LinariaClassName;
20
- wide: import("@linaria/core").LinariaClassName;
21
- };
22
- };
23
- };
24
- //# sourceMappingURL=ChipGroup.config.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/ChipGroup /ChipGroup.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;CA2IlB,CAAC"}
@@ -1,19 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const ChipGroup: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
3
- view: {
4
- default: import("@linaria/core").LinariaClassName;
5
- secondary: import("@linaria/core").LinariaClassName;
6
- accent: import("@linaria/core").LinariaClassName;
7
- };
8
- size: {
9
- l: import("@linaria/core").LinariaClassName;
10
- m: import("@linaria/core").LinariaClassName;
11
- s: import("@linaria/core").LinariaClassName;
12
- xs: import("@linaria/core").LinariaClassName;
13
- };
14
- gap: {
15
- dense: import("@linaria/core").LinariaClassName;
16
- wide: import("@linaria/core").LinariaClassName;
17
- };
18
- }> & import("../../../../components/ChipGroup/ChipGroup.types").ChipGroupProps & import("react").RefAttributes<HTMLDivElement>>;
19
- //# sourceMappingURL=ChipGroup.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ChipGroup.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/ChipGroup /ChipGroup.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;+HAA0B,CAAC"}