@salutejs/plasma-new-hope 0.67.0-canary.1148.8449780048.0 → 0.67.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (259) hide show
  1. package/cjs/components/Divider/Divider.js +1 -1
  2. package/cjs/components/Divider/Divider.js.map +1 -1
  3. package/cjs/components/Divider/Divider.tokens.js +1 -0
  4. package/cjs/components/Divider/Divider.tokens.js.map +1 -1
  5. package/cjs/components/Toolbar/Toolbar.css +1 -0
  6. package/cjs/components/Toolbar/Toolbar.js +53 -0
  7. package/cjs/components/Toolbar/Toolbar.js.map +1 -0
  8. package/cjs/components/Toolbar/Toolbar.styles.js +9 -0
  9. package/cjs/components/Toolbar/Toolbar.styles.js.map +1 -0
  10. package/cjs/components/Toolbar/Toolbar.styles_iomsh3.css +1 -0
  11. package/cjs/components/Toolbar/Toolbar.tokens.js +27 -0
  12. package/cjs/components/Toolbar/Toolbar.tokens.js.map +1 -0
  13. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.css +7 -0
  14. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js +21 -0
  15. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js.map +1 -0
  16. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js +12 -0
  17. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js.map +1 -0
  18. package/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles_1ypqhb1.css +1 -0
  19. package/cjs/components/{Cell → Toolbar}/variations/_size/base.js +1 -1
  20. package/cjs/components/Toolbar/variations/_size/base.js.map +1 -0
  21. package/cjs/components/{Cell → Toolbar}/variations/_view/base.js +2 -2
  22. package/cjs/components/Toolbar/variations/_view/base.js.map +1 -0
  23. package/cjs/index.css +4 -4
  24. package/cjs/index.js +8 -14
  25. package/cjs/index.js.map +1 -1
  26. package/es/components/Divider/Divider.js +1 -1
  27. package/es/components/Divider/Divider.js.map +1 -1
  28. package/es/components/Divider/Divider.tokens.js +1 -0
  29. package/es/components/Divider/Divider.tokens.js.map +1 -1
  30. package/es/components/Toolbar/Toolbar.css +1 -0
  31. package/es/components/Toolbar/Toolbar.js +48 -0
  32. package/es/components/Toolbar/Toolbar.js.map +1 -0
  33. package/es/components/Toolbar/Toolbar.styles.js +5 -0
  34. package/es/components/Toolbar/Toolbar.styles.js.map +1 -0
  35. package/es/components/Toolbar/Toolbar.styles_iomsh3.css +1 -0
  36. package/es/components/Toolbar/Toolbar.tokens.js +22 -0
  37. package/es/components/Toolbar/Toolbar.tokens.js.map +1 -0
  38. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.css +7 -0
  39. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js +16 -0
  40. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js.map +1 -0
  41. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js +7 -0
  42. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js.map +1 -0
  43. package/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles_1ypqhb1.css +1 -0
  44. package/es/components/{Cell → Toolbar}/variations/_size/base.js +1 -1
  45. package/es/components/Toolbar/variations/_size/base.js.map +1 -0
  46. package/es/components/Toolbar/variations/_size/base_x642ct.css +1 -0
  47. package/es/components/{Cell → Toolbar}/variations/_view/base.js +2 -2
  48. package/es/components/Toolbar/variations/_view/base.js.map +1 -0
  49. package/es/components/Toolbar/variations/_view/base_x642ct.css +1 -0
  50. package/es/index.css +4 -4
  51. package/es/index.js +3 -6
  52. package/es/index.js.map +1 -1
  53. package/package.json +2 -2
  54. package/styled-components/cjs/components/Divider/Divider.js +1 -1
  55. package/styled-components/cjs/components/Divider/Divider.tokens.js +1 -0
  56. package/styled-components/cjs/components/Toolbar/Toolbar.js +55 -0
  57. package/styled-components/cjs/components/Toolbar/Toolbar.styles.js +10 -0
  58. package/styled-components/cjs/components/Toolbar/Toolbar.tokens.js +25 -0
  59. package/styled-components/cjs/components/Toolbar/index.js +42 -0
  60. package/styled-components/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js +23 -0
  61. package/styled-components/cjs/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js +12 -0
  62. package/styled-components/cjs/components/Toolbar/ui/index.js +18 -0
  63. package/styled-components/cjs/components/Toolbar/variations/_size/tokens.json +1 -0
  64. package/styled-components/cjs/components/{Cell → Toolbar}/variations/_view/base.js +1 -2
  65. package/styled-components/cjs/components/Toolbar/variations/_view/tokens.json +1 -0
  66. package/styled-components/cjs/examples/plasma_b2c/components/Toolbar/Toolbar.config.js +25 -0
  67. package/styled-components/cjs/examples/plasma_b2c/components/Toolbar/Toolbar.js +17 -0
  68. package/styled-components/cjs/examples/plasma_b2c/components/Toolbar/Toolbar.stories.tsx +63 -0
  69. package/styled-components/cjs/examples/plasma_web/components/Toolbar/Toolbar.config.js +25 -0
  70. package/styled-components/cjs/examples/plasma_web/components/Toolbar/Toolbar.js +17 -0
  71. package/styled-components/cjs/examples/plasma_web/components/Toolbar/Toolbar.stories.tsx +63 -0
  72. package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.config.js +25 -0
  73. package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.js +17 -0
  74. package/styled-components/cjs/examples/sds_engineer/components/Toolbar/Toolbar.stories.tsx +64 -0
  75. package/styled-components/cjs/index.js +11 -11
  76. package/styled-components/es/components/Divider/Divider.js +1 -1
  77. package/styled-components/es/components/Divider/Divider.tokens.js +1 -0
  78. package/styled-components/es/components/Toolbar/Toolbar.js +46 -0
  79. package/styled-components/es/components/Toolbar/Toolbar.styles.js +4 -0
  80. package/styled-components/es/components/Toolbar/Toolbar.tokens.js +19 -0
  81. package/styled-components/es/components/Toolbar/index.js +3 -0
  82. package/styled-components/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.js +18 -0
  83. package/styled-components/es/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.js +7 -0
  84. package/styled-components/es/components/Toolbar/ui/index.js +1 -0
  85. package/styled-components/es/components/Toolbar/variations/_size/tokens.json +1 -0
  86. package/styled-components/es/components/Toolbar/variations/_view/base.js +2 -0
  87. package/styled-components/es/components/Toolbar/variations/_view/tokens.json +1 -0
  88. package/styled-components/es/examples/plasma_b2c/components/Toolbar/Toolbar.config.js +19 -0
  89. package/styled-components/es/examples/plasma_b2c/components/Toolbar/Toolbar.js +11 -0
  90. package/styled-components/es/examples/plasma_b2c/components/Toolbar/Toolbar.stories.tsx +63 -0
  91. package/styled-components/es/examples/plasma_web/components/Toolbar/Toolbar.config.js +19 -0
  92. package/styled-components/es/examples/plasma_web/components/Toolbar/Toolbar.js +11 -0
  93. package/styled-components/es/examples/plasma_web/components/Toolbar/Toolbar.stories.tsx +63 -0
  94. package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.config.js +19 -0
  95. package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.js +11 -0
  96. package/styled-components/es/examples/sds_engineer/components/Toolbar/Toolbar.stories.tsx +64 -0
  97. package/styled-components/es/index.js +2 -2
  98. package/types/components/Divider/Divider.tokens.d.ts +1 -0
  99. package/types/components/Divider/Divider.tokens.d.ts.map +1 -1
  100. package/types/components/Toolbar/Toolbar.d.ts +34 -0
  101. package/types/components/Toolbar/Toolbar.d.ts.map +1 -0
  102. package/types/components/{Cell/variations/_view/base.d.ts → Toolbar/Toolbar.styles.d.ts} +1 -1
  103. package/types/components/Toolbar/Toolbar.styles.d.ts.map +1 -0
  104. package/types/components/Toolbar/Toolbar.tokens.d.ts +18 -0
  105. package/types/components/Toolbar/Toolbar.tokens.d.ts.map +1 -0
  106. package/types/components/Toolbar/Toolbar.types.d.ts +27 -0
  107. package/types/components/Toolbar/Toolbar.types.d.ts.map +1 -0
  108. package/types/components/Toolbar/index.d.ts +5 -0
  109. package/types/components/Toolbar/index.d.ts.map +1 -0
  110. package/types/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.d.ts +28 -0
  111. package/types/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.d.ts.map +1 -0
  112. package/types/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.d.ts +3 -0
  113. package/types/components/Toolbar/ui/ToolbarDivider/ToolbarDivider.styles.d.ts.map +1 -0
  114. package/types/components/Toolbar/ui/index.d.ts +2 -0
  115. package/types/components/Toolbar/ui/index.d.ts.map +1 -0
  116. package/types/components/Toolbar/variations/_size/base.d.ts.map +1 -0
  117. package/types/components/Toolbar/variations/_view/base.d.ts.map +1 -0
  118. package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +2 -2
  119. package/types/examples/{plasma_web/components/Cell/Cell.config.d.ts → plasma_b2c/components/Toolbar/Toolbar.config.d.ts} +4 -10
  120. package/types/examples/plasma_b2c/components/Toolbar/Toolbar.config.d.ts.map +1 -0
  121. package/types/examples/plasma_b2c/components/Toolbar/Toolbar.d.ts +23 -0
  122. package/types/examples/plasma_b2c/components/Toolbar/Toolbar.d.ts.map +1 -0
  123. package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +2 -2
  124. package/types/examples/{plasma_b2c/components/Cell/Cell.config.d.ts → plasma_web/components/Toolbar/Toolbar.config.d.ts} +4 -10
  125. package/types/examples/plasma_web/components/Toolbar/Toolbar.config.d.ts.map +1 -0
  126. package/types/examples/plasma_web/components/Toolbar/Toolbar.d.ts +23 -0
  127. package/types/examples/plasma_web/components/Toolbar/Toolbar.d.ts.map +1 -0
  128. package/types/examples/sds_engineer/components/Toolbar/Toolbar.config.d.ts +18 -0
  129. package/types/examples/sds_engineer/components/Toolbar/Toolbar.config.d.ts.map +1 -0
  130. package/types/examples/sds_engineer/components/Toolbar/Toolbar.d.ts +23 -0
  131. package/types/examples/sds_engineer/components/Toolbar/Toolbar.d.ts.map +1 -0
  132. package/types/index.d.ts +1 -1
  133. package/types/index.d.ts.map +1 -1
  134. package/cjs/components/Cell/Cell.css +0 -3
  135. package/cjs/components/Cell/Cell.js +0 -75
  136. package/cjs/components/Cell/Cell.js.map +0 -1
  137. package/cjs/components/Cell/Cell.styles.js +0 -42
  138. package/cjs/components/Cell/Cell.styles.js.map +0 -1
  139. package/cjs/components/Cell/Cell.tokens.js +0 -50
  140. package/cjs/components/Cell/Cell.tokens.js.map +0 -1
  141. package/cjs/components/Cell/Textbox/Textbox.js +0 -20
  142. package/cjs/components/Cell/Textbox/Textbox.js.map +0 -1
  143. package/cjs/components/Cell/Textbox/Textbox.styles.js +0 -13
  144. package/cjs/components/Cell/Textbox/Textbox.styles.js.map +0 -1
  145. package/cjs/components/Cell/Textbox/ui/TextLabel.js +0 -17
  146. package/cjs/components/Cell/Textbox/ui/TextLabel.js.map +0 -1
  147. package/cjs/components/Cell/Textbox/ui/TextSubtitle.js +0 -17
  148. package/cjs/components/Cell/Textbox/ui/TextSubtitle.js.map +0 -1
  149. package/cjs/components/Cell/Textbox/ui/TextTitle.js +0 -17
  150. package/cjs/components/Cell/Textbox/ui/TextTitle.js.map +0 -1
  151. package/cjs/components/Cell/variations/_size/base.js.map +0 -1
  152. package/cjs/components/Cell/variations/_stretching/base.js +0 -9
  153. package/cjs/components/Cell/variations/_stretching/base.js.map +0 -1
  154. package/cjs/components/Cell/variations/_stretching/base_1ryz4br.css +0 -1
  155. package/cjs/components/Cell/variations/_view/base.js.map +0 -1
  156. package/cjs/components/Cell/variations/_view/base_c5qh0x.css +0 -1
  157. package/es/components/Cell/Cell.css +0 -3
  158. package/es/components/Cell/Cell.js +0 -70
  159. package/es/components/Cell/Cell.js.map +0 -1
  160. package/es/components/Cell/Cell.styles.js +0 -34
  161. package/es/components/Cell/Cell.styles.js.map +0 -1
  162. package/es/components/Cell/Cell.tokens.js +0 -45
  163. package/es/components/Cell/Cell.tokens.js.map +0 -1
  164. package/es/components/Cell/Textbox/Textbox.js +0 -16
  165. package/es/components/Cell/Textbox/Textbox.js.map +0 -1
  166. package/es/components/Cell/Textbox/Textbox.styles.js +0 -9
  167. package/es/components/Cell/Textbox/Textbox.styles.js.map +0 -1
  168. package/es/components/Cell/Textbox/ui/TextLabel.js +0 -13
  169. package/es/components/Cell/Textbox/ui/TextLabel.js.map +0 -1
  170. package/es/components/Cell/Textbox/ui/TextSubtitle.js +0 -13
  171. package/es/components/Cell/Textbox/ui/TextSubtitle.js.map +0 -1
  172. package/es/components/Cell/Textbox/ui/TextTitle.js +0 -13
  173. package/es/components/Cell/Textbox/ui/TextTitle.js.map +0 -1
  174. package/es/components/Cell/variations/_size/base.js.map +0 -1
  175. package/es/components/Cell/variations/_stretching/base.js +0 -5
  176. package/es/components/Cell/variations/_stretching/base.js.map +0 -1
  177. package/es/components/Cell/variations/_stretching/base_1ryz4br.css +0 -1
  178. package/es/components/Cell/variations/_view/base.js.map +0 -1
  179. package/es/components/Cell/variations/_view/base_c5qh0x.css +0 -1
  180. package/styled-components/cjs/components/Cell/Cell.js +0 -75
  181. package/styled-components/cjs/components/Cell/Cell.styles.js +0 -37
  182. package/styled-components/cjs/components/Cell/Cell.tokens.js +0 -48
  183. package/styled-components/cjs/components/Cell/Textbox/Textbox.js +0 -19
  184. package/styled-components/cjs/components/Cell/Textbox/Textbox.styles.js +0 -12
  185. package/styled-components/cjs/components/Cell/Textbox/Textbox.types.js +0 -5
  186. package/styled-components/cjs/components/Cell/Textbox/ui/TextLabel.js +0 -16
  187. package/styled-components/cjs/components/Cell/Textbox/ui/TextSubtitle.js +0 -16
  188. package/styled-components/cjs/components/Cell/Textbox/ui/TextTitle.js +0 -16
  189. package/styled-components/cjs/components/Cell/index.js +0 -59
  190. package/styled-components/cjs/components/Cell/variations/_size/tokens.json +0 -1
  191. package/styled-components/cjs/components/Cell/variations/_stretching/base.js +0 -9
  192. package/styled-components/cjs/components/Cell/variations/_stretching/tokens.json +0 -1
  193. package/styled-components/cjs/components/Cell/variations/_view/tokens.json +0 -1
  194. package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.config.js +0 -31
  195. package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.js +0 -35
  196. package/styled-components/cjs/examples/plasma_b2c/components/Cell/Cell.stories.tsx +0 -154
  197. package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.config.js +0 -31
  198. package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.js +0 -35
  199. package/styled-components/cjs/examples/plasma_web/components/Cell/Cell.stories.tsx +0 -154
  200. package/styled-components/es/components/Cell/Cell.js +0 -66
  201. package/styled-components/es/components/Cell/Cell.styles.js +0 -30
  202. package/styled-components/es/components/Cell/Cell.tokens.js +0 -42
  203. package/styled-components/es/components/Cell/Textbox/Textbox.js +0 -12
  204. package/styled-components/es/components/Cell/Textbox/Textbox.styles.js +0 -5
  205. package/styled-components/es/components/Cell/Textbox/Textbox.types.js +0 -1
  206. package/styled-components/es/components/Cell/Textbox/ui/TextLabel.js +0 -9
  207. package/styled-components/es/components/Cell/Textbox/ui/TextSubtitle.js +0 -9
  208. package/styled-components/es/components/Cell/Textbox/ui/TextTitle.js +0 -9
  209. package/styled-components/es/components/Cell/index.js +0 -6
  210. package/styled-components/es/components/Cell/variations/_size/tokens.json +0 -1
  211. package/styled-components/es/components/Cell/variations/_stretching/base.js +0 -3
  212. package/styled-components/es/components/Cell/variations/_stretching/tokens.json +0 -1
  213. package/styled-components/es/components/Cell/variations/_view/base.js +0 -3
  214. package/styled-components/es/components/Cell/variations/_view/tokens.json +0 -1
  215. package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.config.js +0 -25
  216. package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.js +0 -6
  217. package/styled-components/es/examples/plasma_b2c/components/Cell/Cell.stories.tsx +0 -154
  218. package/styled-components/es/examples/plasma_web/components/Cell/Cell.config.js +0 -25
  219. package/styled-components/es/examples/plasma_web/components/Cell/Cell.js +0 -6
  220. package/styled-components/es/examples/plasma_web/components/Cell/Cell.stories.tsx +0 -154
  221. package/types/components/Cell/Cell.d.ts +0 -51
  222. package/types/components/Cell/Cell.d.ts.map +0 -1
  223. package/types/components/Cell/Cell.styles.d.ts +0 -11
  224. package/types/components/Cell/Cell.styles.d.ts.map +0 -1
  225. package/types/components/Cell/Cell.tokens.d.ts +0 -43
  226. package/types/components/Cell/Cell.tokens.d.ts.map +0 -1
  227. package/types/components/Cell/Cell.types.d.ts +0 -57
  228. package/types/components/Cell/Cell.types.d.ts.map +0 -1
  229. package/types/components/Cell/Textbox/Textbox.d.ts +0 -4
  230. package/types/components/Cell/Textbox/Textbox.d.ts.map +0 -1
  231. package/types/components/Cell/Textbox/Textbox.styles.d.ts +0 -2
  232. package/types/components/Cell/Textbox/Textbox.styles.d.ts.map +0 -1
  233. package/types/components/Cell/Textbox/Textbox.types.d.ts +0 -20
  234. package/types/components/Cell/Textbox/Textbox.types.d.ts.map +0 -1
  235. package/types/components/Cell/Textbox/ui/TextLabel.d.ts +0 -7
  236. package/types/components/Cell/Textbox/ui/TextLabel.d.ts.map +0 -1
  237. package/types/components/Cell/Textbox/ui/TextSubtitle.d.ts +0 -7
  238. package/types/components/Cell/Textbox/ui/TextSubtitle.d.ts.map +0 -1
  239. package/types/components/Cell/Textbox/ui/TextTitle.d.ts +0 -7
  240. package/types/components/Cell/Textbox/ui/TextTitle.d.ts.map +0 -1
  241. package/types/components/Cell/index.d.ts +0 -9
  242. package/types/components/Cell/index.d.ts.map +0 -1
  243. package/types/components/Cell/variations/_size/base.d.ts.map +0 -1
  244. package/types/components/Cell/variations/_stretching/base.d.ts.map +0 -1
  245. package/types/components/Cell/variations/_view/base.d.ts.map +0 -1
  246. package/types/examples/plasma_b2c/components/Cell/Cell.config.d.ts.map +0 -1
  247. package/types/examples/plasma_b2c/components/Cell/Cell.d.ts +0 -32
  248. package/types/examples/plasma_b2c/components/Cell/Cell.d.ts.map +0 -1
  249. package/types/examples/plasma_web/components/Cell/Cell.config.d.ts.map +0 -1
  250. package/types/examples/plasma_web/components/Cell/Cell.d.ts +0 -32
  251. package/types/examples/plasma_web/components/Cell/Cell.d.ts.map +0 -1
  252. /package/cjs/components/{Cell → Toolbar}/variations/_size/base_x642ct.css +0 -0
  253. /package/{es/components/Cell/variations/_size → cjs/components/Toolbar/variations/_view}/base_x642ct.css +0 -0
  254. /package/styled-components/cjs/components/{Cell/Cell.types.js → Toolbar/Toolbar.types.js} +0 -0
  255. /package/styled-components/cjs/components/{Cell → Toolbar}/variations/_size/base.js +0 -0
  256. /package/styled-components/es/components/{Cell/Cell.types.js → Toolbar/Toolbar.types.js} +0 -0
  257. /package/styled-components/es/components/{Cell → Toolbar}/variations/_size/base.js +0 -0
  258. /package/types/components/{Cell → Toolbar}/variations/_size/base.d.ts +0 -0
  259. /package/types/components/{Cell/variations/_stretching → Toolbar/variations/_view}/base.d.ts +0 -0
@@ -1,42 +0,0 @@
1
- export var tokens = {
2
- cellColor: '--plasma-cell-color',
3
- cellBackgroundColor: '--plasma-cell-background-color',
4
- cellPadding: '--plasma-cell-content-padding',
5
- cellPaddingLeftContent: '--plasma-cell-left-padding',
6
- cellPaddingContent: '--plasma-cell-content-padding',
7
- cellPaddingRightContent: '--plasma-cell-right-padding',
8
- cellTextboxGap: '--plasma-cell-textbox-gap',
9
- cellGap: '--plasma-cell-gap',
10
- cellWidth: '--plasma-cell-width',
11
- cellLabelColor: '--plasma-cell-label-color',
12
- cellLabelFontFamily: '--plasma-cell-label-font-family',
13
- cellLabelFontSize: '--plasma-cell-label-font-size',
14
- cellLabelFontStyle: '--plasma-cell-label-font-style',
15
- cellLabelFontWeight: '--plasma-cell-label-font-weight',
16
- cellLabelLetterSpacing: '--plasma-cell-label-letter-spacing',
17
- cellLabelLineHeight: '--plasma-cell-label-line-height',
18
- cellTitleColor: '--plasma-cell-title-color',
19
- cellTitleFontFamily: '--plasma-cell-title-font-family',
20
- cellTitleFontSize: '--plasma-cell-title-font-size',
21
- cellTitleFontStyle: '--plasma-cell-title-font-style',
22
- cellTitleFontWeight: '--plasma-cell-title-font-weight',
23
- cellTitleLetterSpacing: '--plasma-cell-title-letter-spacing',
24
- cellTitleLineHeight: '--plasma-cell-title-line-height',
25
- cellSubtitleColor: '--plasma-cell-subtitle-color',
26
- cellSubtitleFontFamily: '--plasma-cell-subtitle-font-family',
27
- cellSubtitleFontSize: '--plasma-cell-subtitle-font-size',
28
- cellSubtitleFontStyle: '--plasma-cell-subtitle-font-style',
29
- cellSubtitleFontWeight: '--plasma-cell-subtitle-font-weight',
30
- cellSubtitleLetterSpacing: '--plasma-cell-subtitle-letter-spacing',
31
- cellSubtitleLineHeight: '--plasma-cell-subtitle-line-height'
32
- };
33
- export var classes = {
34
- autoStretching: 'cell-stretching-auto',
35
- filledStretching: 'cell-stretching-filled',
36
- fixedStretching: 'cell-stretching-fixed',
37
- cellWrapper: 'cell-wrapper',
38
- cellRoot: 'cell-root',
39
- cellContent: 'cell-content',
40
- cellLeftContent: 'cell-left-content',
41
- cellRightContent: 'cell-right-content'
42
- };
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { TextboxStyled } from './Textbox.styles';
3
- import { TextLabel } from './ui/TextLabel';
4
- import { TextTitle } from './ui/TextTitle';
5
- import { TextSubtitle } from './ui/TextSubtitle';
6
- export var Textbox = function Textbox(props) {
7
- var label = props.label,
8
- title = props.title,
9
- subtitle = props.subtitle,
10
- children = props.children;
11
- return /*#__PURE__*/React.createElement(TextboxStyled, null, label || title || subtitle ? /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(TextLabel, null, label), title && /*#__PURE__*/React.createElement(TextTitle, null, title), subtitle && /*#__PURE__*/React.createElement(TextSubtitle, null, subtitle)) : children);
12
- };
@@ -1,5 +0,0 @@
1
- import styled from 'styled-components';
2
- import { tokens } from '../Cell.tokens';
3
- export var TextboxStyled = /*#__PURE__*/styled.div.withConfig({
4
- componentId: "plasma-new-hope__sc-t2ald4-0"
5
- })(["display:flex;flex-direction:column;gap:var(", ");"], tokens.cellTextboxGap);
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { tokens } from '../../Cell.tokens';
4
- var StyledTextLabel = /*#__PURE__*/styled.div.withConfig({
5
- componentId: "plasma-new-hope__sc-6e2num-0"
6
- })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellLabelColor, tokens.cellLabelFontSize, tokens.cellLabelFontWeight, tokens.cellLabelFontFamily, tokens.cellLabelFontStyle, tokens.cellLabelLineHeight, tokens.cellLabelLetterSpacing);
7
- export var TextLabel = function TextLabel(props) {
8
- return /*#__PURE__*/React.createElement(StyledTextLabel, null, props.children);
9
- };
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { tokens } from '../../Cell.tokens';
4
- var StyledTextSubtitle = /*#__PURE__*/styled.div.withConfig({
5
- componentId: "plasma-new-hope__sc-jj01ut-0"
6
- })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellSubtitleColor, tokens.cellSubtitleFontSize, tokens.cellSubtitleFontWeight, tokens.cellSubtitleFontFamily, tokens.cellSubtitleFontStyle, tokens.cellSubtitleLineHeight, tokens.cellSubtitleLetterSpacing);
7
- export var TextSubtitle = function TextSubtitle(props) {
8
- return /*#__PURE__*/React.createElement(StyledTextSubtitle, null, props.children);
9
- };
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { tokens } from '../../Cell.tokens';
4
- var StyledTextTitle = /*#__PURE__*/styled.div.withConfig({
5
- componentId: "plasma-new-hope__sc-1mxjeba-0"
6
- })(["color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");"], tokens.cellTitleColor, tokens.cellTitleFontSize, tokens.cellTitleFontWeight, tokens.cellTitleFontFamily, tokens.cellTitleFontStyle, tokens.cellTitleLineHeight, tokens.cellTitleLetterSpacing);
7
- export var TextTitle = function TextTitle(props) {
8
- return /*#__PURE__*/React.createElement(StyledTextTitle, null, props.children);
9
- };
@@ -1,6 +0,0 @@
1
- export { TextLabel } from './Textbox/ui/TextLabel';
2
- export { TextTitle } from './Textbox/ui/TextTitle';
3
- export { TextSubtitle } from './Textbox/ui/TextSubtitle';
4
- export { cellRoot, cellConfig } from './Cell';
5
- export { tokens as cellTokens, classes as cellClasses } from './Cell.tokens';
6
- export { Textbox } from './Textbox/Textbox';
@@ -1 +0,0 @@
1
- ["--plasma-cell-left-height", "--plasma-cell-right-height", "--plasma-cell-height"]
@@ -1,3 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { classes, tokens } from '../../Cell.tokens';
3
- export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.cellWidth, classes.filledStretching, classes.autoStretching);
@@ -1 +0,0 @@
1
- ["--plasma-button-width"]
@@ -1,3 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { tokens } from '../../Cell.tokens';
3
- export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");"], tokens.cellColor, tokens.cellBackgroundColor);
@@ -1 +0,0 @@
1
- ["--plasma-cell-color", "--plasma-cell-background-color"]
@@ -1,25 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { cellTokens } from '../../../../components/Cell';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 'm',
7
- stretching: 'filled'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
12
- },
13
- size: {
14
- l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
15
- m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
16
- s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":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);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
17
- xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":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);", ":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);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
18
- },
19
- stretching: {
20
- auto: /*#__PURE__*/css([""]),
21
- filled: /*#__PURE__*/css([""]),
22
- fixed: /*#__PURE__*/css([""])
23
- }
24
- }
25
- };
@@ -1,6 +0,0 @@
1
- import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Cell.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
5
- export var Cell = /*#__PURE__*/component(mergedConfig);
6
- export { Textbox, TextLabel, TextSubtitle, TextTitle };
@@ -1,154 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
- import styled from 'styled-components';
5
-
6
- import { WithTheme } from '../../../_helpers';
7
- import { Avatar } from '../Avatar/Avatar';
8
- import { IconChevronLeft } from '../../../../components/_Icon';
9
-
10
- import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
11
-
12
- type StoryProps = ComponentProps<typeof Cell> & {
13
- itemsCount?: number;
14
- enableLeftContent?: boolean;
15
- enableRightContent?: boolean;
16
- };
17
- type Story = StoryObj<StoryProps>;
18
-
19
- const sizes = ['l', 'm', 's', 'xs'];
20
- const stretchingValues = ['fixed', 'filled', 'auto'];
21
-
22
- type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined;
23
- type SizesAvatar = 'l' | 'm' | 's';
24
-
25
- const getSize = (size: SizesCell): SizesAvatar => {
26
- if (size === 'xs' || !size) {
27
- return 's';
28
- }
29
-
30
- return size;
31
- };
32
-
33
- const meta: Meta<typeof Cell> = {
34
- title: 'plasma_b2c/Cell',
35
- decorators: [WithTheme],
36
- argTypes: {
37
- size: {
38
- options: sizes,
39
- control: {
40
- type: 'select',
41
- },
42
- },
43
- stretching: {
44
- options: stretchingValues,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
- },
50
- };
51
-
52
- export default meta;
53
-
54
- const ChevronRight = styled(IconChevronLeft)`
55
- transform: rotate(180deg);
56
- color: var(--text-secondary);
57
- `;
58
-
59
- export const Default: Story = {
60
- args: {
61
- size: 'm',
62
- stretching: 'filled',
63
- enableLeftContent: false,
64
- enableRightContent: false,
65
- },
66
- render: ({ ...args }: StoryProps) => {
67
- return (
68
- <Cell
69
- contentLeft={
70
- !args.enableLeftContent && (
71
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
72
- )
73
- }
74
- contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
75
- title="Title"
76
- subtitle="Subtitle"
77
- label="Label"
78
- {...args}
79
- />
80
- );
81
- },
82
- };
83
-
84
- export const WithContentTextbox: Story = {
85
- args: {
86
- size: 'm',
87
- stretching: 'filled',
88
- },
89
- render: ({ ...args }: StoryProps) => {
90
- return (
91
- <Cell
92
- contentLeft={
93
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
94
- }
95
- contentRight={<ChevronRight color="inherit" size="xs" />}
96
- {...args}
97
- >
98
- <Textbox title="Title" subtitle="Subtitle" label="Label" />
99
- </Cell>
100
- );
101
- },
102
- };
103
-
104
- export const WithContentTextboxWithTags: Story = {
105
- args: {
106
- size: 'm',
107
- stretching: 'filled',
108
- },
109
- render: ({ ...args }: StoryProps) => {
110
- return (
111
- <Cell
112
- contentLeft={
113
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
114
- }
115
- contentRight={<ChevronRight color="inherit" size="xs" />}
116
- {...args}
117
- >
118
- <Textbox>
119
- <TextLabel>Label</TextLabel>
120
- <TextTitle>Title</TextTitle>
121
- <TextSubtitle>Subtitle</TextSubtitle>
122
- </Textbox>
123
- </Cell>
124
- );
125
- },
126
- };
127
-
128
- export const WithContentTextboxCustom: Story = {
129
- args: {
130
- size: 'm',
131
- stretching: 'filled',
132
- },
133
- render: ({ ...args }: StoryProps) => {
134
- const MyStyledText = styled.div`
135
- font-size: 12px;
136
- font-weight: 600;
137
- opacity: 0.5;
138
- `;
139
- return (
140
- <Cell
141
- contentLeft={
142
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
143
- }
144
- contentRight={<ChevronRight color="inherit" size="xs" />}
145
- {...args}
146
- >
147
- <Textbox>
148
- <TextTitle>Title</TextTitle>
149
- <MyStyledText>My styled Text</MyStyledText>
150
- </Textbox>
151
- </Cell>
152
- );
153
- },
154
- };
@@ -1,25 +0,0 @@
1
- import { css } from 'styled-components';
2
- import { cellTokens } from '../../../../components/Cell';
3
- export var config = {
4
- defaults: {
5
- view: 'default',
6
- size: 'm',
7
- stretching: 'filled'
8
- },
9
- variations: {
10
- view: {
11
- "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;"], cellTokens.cellColor, cellTokens.cellLabelColor, cellTokens.cellTitleColor, cellTokens.cellSubtitleColor, cellTokens.cellBackgroundColor)
12
- },
13
- size: {
14
- l: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
15
- m: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
16
- s: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":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);", ":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);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight),
17
- xs: /*#__PURE__*/css(["", ":15rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0.125rem;", ":0.25rem;", ":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);", ":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);", ":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);"], cellTokens.cellWidth, cellTokens.cellPadding, cellTokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, cellTokens.cellPaddingRightContent, cellTokens.cellTextboxGap, cellTokens.cellGap, cellTokens.cellGap, cellTokens.cellLabelFontFamily, cellTokens.cellLabelFontSize, cellTokens.cellLabelFontStyle, cellTokens.cellLabelFontWeight, cellTokens.cellLabelLetterSpacing, cellTokens.cellLabelLineHeight, cellTokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, cellTokens.cellSubtitleFontFamily, cellTokens.cellSubtitleFontSize, cellTokens.cellSubtitleFontStyle, cellTokens.cellSubtitleFontWeight, cellTokens.cellSubtitleLetterSpacing, cellTokens.cellSubtitleLineHeight)
18
- },
19
- stretching: {
20
- auto: /*#__PURE__*/css([""]),
21
- filled: /*#__PURE__*/css([""]),
22
- fixed: /*#__PURE__*/css([""])
23
- }
24
- }
25
- };
@@ -1,6 +0,0 @@
1
- import { cellConfig, Textbox, TextLabel, TextSubtitle, TextTitle } from '../../../../components/Cell';
2
- import { component, mergeConfig } from '../../../../engines';
3
- import { config } from './Cell.config';
4
- var mergedConfig = /*#__PURE__*/mergeConfig(cellConfig, config);
5
- export var Cell = /*#__PURE__*/component(mergedConfig);
6
- export { Textbox, TextLabel, TextSubtitle, TextTitle };
@@ -1,154 +0,0 @@
1
- import React from 'react';
2
- import type { ComponentProps } from 'react';
3
- import type { StoryObj, Meta } from '@storybook/react';
4
- import styled from 'styled-components';
5
-
6
- import { WithTheme } from '../../../_helpers';
7
- import { Avatar } from '../Avatar/Avatar';
8
- import { IconChevronLeft } from '../../../../components/_Icon';
9
-
10
- import { Cell, Textbox, TextLabel, TextTitle, TextSubtitle } from './Cell';
11
-
12
- type StoryProps = ComponentProps<typeof Cell> & {
13
- itemsCount?: number;
14
- enableLeftContent?: boolean;
15
- enableRightContent?: boolean;
16
- };
17
- type Story = StoryObj<StoryProps>;
18
-
19
- const sizes = ['l', 'm', 's', 'xs'];
20
- const stretchingValues = ['fixed', 'filled', 'auto'];
21
-
22
- type SizesCell = 'xs' | 'l' | 'm' | 's' | undefined | undefined;
23
- type SizesAvatar = 'l' | 'm' | 's';
24
-
25
- const getSize = (size: SizesCell): SizesAvatar => {
26
- if (size === 'xs' || !size) {
27
- return 's';
28
- }
29
-
30
- return size;
31
- };
32
-
33
- const meta: Meta<typeof Cell> = {
34
- title: 'plasma_web/Cell',
35
- decorators: [WithTheme],
36
- argTypes: {
37
- size: {
38
- options: sizes,
39
- control: {
40
- type: 'select',
41
- },
42
- },
43
- stretching: {
44
- options: stretchingValues,
45
- control: {
46
- type: 'select',
47
- },
48
- },
49
- },
50
- };
51
-
52
- export default meta;
53
-
54
- const ChevronRight = styled(IconChevronLeft)`
55
- transform: rotate(180deg);
56
- color: var(--text-secondary);
57
- `;
58
-
59
- export const Default: Story = {
60
- args: {
61
- size: 'm',
62
- stretching: 'filled',
63
- enableLeftContent: false,
64
- enableRightContent: false,
65
- },
66
- render: ({ ...args }: StoryProps) => {
67
- return (
68
- <Cell
69
- contentLeft={
70
- !args.enableLeftContent && (
71
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
72
- )
73
- }
74
- contentRight={!args.enableRightContent && <ChevronRight color="inherit" size="xs" />}
75
- title="Title"
76
- subtitle="Subtitle"
77
- label="Label"
78
- {...args}
79
- />
80
- );
81
- },
82
- };
83
-
84
- export const WithContentTextbox: Story = {
85
- args: {
86
- size: 'm',
87
- stretching: 'filled',
88
- },
89
- render: ({ ...args }: StoryProps) => {
90
- return (
91
- <Cell
92
- contentLeft={
93
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
94
- }
95
- contentRight={<ChevronRight color="inherit" size="xs" />}
96
- {...args}
97
- >
98
- <Textbox title="Title" subtitle="Subtitle" label="Label" />
99
- </Cell>
100
- );
101
- },
102
- };
103
-
104
- export const WithContentTextboxWithTags: Story = {
105
- args: {
106
- size: 'm',
107
- stretching: 'filled',
108
- },
109
- render: ({ ...args }: StoryProps) => {
110
- return (
111
- <Cell
112
- contentLeft={
113
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
114
- }
115
- contentRight={<ChevronRight color="inherit" size="xs" />}
116
- {...args}
117
- >
118
- <Textbox>
119
- <TextLabel>Label</TextLabel>
120
- <TextTitle>Title</TextTitle>
121
- <TextSubtitle>Subtitle</TextSubtitle>
122
- </Textbox>
123
- </Cell>
124
- );
125
- },
126
- };
127
-
128
- export const WithContentTextboxCustom: Story = {
129
- args: {
130
- size: 'm',
131
- stretching: 'filled',
132
- },
133
- render: ({ ...args }: StoryProps) => {
134
- const MyStyledText = styled.div`
135
- font-size: 12px;
136
- font-weight: 600;
137
- opacity: 0.5;
138
- `;
139
- return (
140
- <Cell
141
- contentLeft={
142
- <Avatar size={getSize(args.size)} url="https://avatars.githubusercontent.com/u/1813468?v=4" />
143
- }
144
- contentRight={<ChevronRight color="inherit" size="xs" />}
145
- {...args}
146
- >
147
- <Textbox>
148
- <TextTitle>Title</TextTitle>
149
- <MyStyledText>My styled Text</MyStyledText>
150
- </Textbox>
151
- </Cell>
152
- );
153
- },
154
- };
@@ -1,51 +0,0 @@
1
- import React from 'react';
2
- import { RootProps } from '../../engines';
3
- import type { CellProps } from './Cell.types';
4
- export declare const cellRoot: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
5
- size?: string | undefined;
6
- view: string;
7
- contentLeft?: React.ReactNode;
8
- contentRight?: React.ReactNode;
9
- content?: React.ReactNode;
10
- alignLeft?: import("./Cell.types").AlignLeftProp | undefined;
11
- alignRight?: import("./Cell.types").AlignRightProp | undefined;
12
- stretching?: "fixed" | "auto" | "filled" | undefined;
13
- title?: React.ReactNode;
14
- subtitle?: React.ReactNode;
15
- label?: React.ReactNode;
16
- } & React.RefAttributes<HTMLSelectElement>>;
17
- export declare const cellConfig: {
18
- name: string;
19
- tag: string;
20
- layout: (Root: RootProps<HTMLSelectElement, CellProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
21
- size?: string | undefined;
22
- view: string;
23
- contentLeft?: React.ReactNode;
24
- contentRight?: React.ReactNode;
25
- content?: React.ReactNode;
26
- alignLeft?: import("./Cell.types").AlignLeftProp | undefined;
27
- alignRight?: import("./Cell.types").AlignRightProp | undefined;
28
- stretching?: "fixed" | "auto" | "filled" | undefined;
29
- title?: React.ReactNode;
30
- subtitle?: React.ReactNode;
31
- label?: React.ReactNode;
32
- } & React.RefAttributes<HTMLSelectElement>>;
33
- base: string;
34
- variations: {
35
- view: {
36
- css: import("@linaria/core").LinariaClassName;
37
- };
38
- size: {
39
- css: import("@linaria/core").LinariaClassName;
40
- };
41
- stretching: {
42
- css: import("@linaria/core").LinariaClassName;
43
- };
44
- };
45
- defaults: {
46
- view: string;
47
- size: string;
48
- stretching: string;
49
- };
50
- };
51
- //# sourceMappingURL=Cell.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAW9C,eAAO,MAAM,QAAQ,SAAU,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;2CAuChE,CAAC;AAEP,eAAO,MAAM,UAAU;;;mBAzCQ,UAAU,iBAAiB,EAAE,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DrE,CAAC"}
@@ -1,11 +0,0 @@
1
- import type { AlignLeftProp, AlignRightProp } from './Cell.types';
2
- export declare const CellRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const CellContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const CellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const CellLeft: import("styled-components").StyledComponent<"div", any, {
6
- align: AlignLeftProp;
7
- }, never>;
8
- export declare const CellRight: import("styled-components").StyledComponent<"div", any, {
9
- align: AlignRightProp;
10
- }, never>;
11
- //# sourceMappingURL=Cell.styles.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Cell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AASlE,eAAO,MAAM,QAAQ,oEAQpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAK9B,CAAC;AAEF,eAAO,MAAM,WAAW,oEAGvB,CAAC;AAEF,eAAO,MAAM,QAAQ;WAAuB,aAAa;SAGxD,CAAC;AAEF,eAAO,MAAM,SAAS;WAAuB,cAAc;SAI1D,CAAC"}
@@ -1,43 +0,0 @@
1
- export declare const tokens: {
2
- cellColor: string;
3
- cellBackgroundColor: string;
4
- cellPadding: string;
5
- cellPaddingLeftContent: string;
6
- cellPaddingContent: string;
7
- cellPaddingRightContent: string;
8
- cellTextboxGap: string;
9
- cellGap: string;
10
- cellWidth: string;
11
- cellLabelColor: string;
12
- cellLabelFontFamily: string;
13
- cellLabelFontSize: string;
14
- cellLabelFontStyle: string;
15
- cellLabelFontWeight: string;
16
- cellLabelLetterSpacing: string;
17
- cellLabelLineHeight: string;
18
- cellTitleColor: string;
19
- cellTitleFontFamily: string;
20
- cellTitleFontSize: string;
21
- cellTitleFontStyle: string;
22
- cellTitleFontWeight: string;
23
- cellTitleLetterSpacing: string;
24
- cellTitleLineHeight: string;
25
- cellSubtitleColor: string;
26
- cellSubtitleFontFamily: string;
27
- cellSubtitleFontSize: string;
28
- cellSubtitleFontStyle: string;
29
- cellSubtitleFontWeight: string;
30
- cellSubtitleLetterSpacing: string;
31
- cellSubtitleLineHeight: string;
32
- };
33
- export declare const classes: {
34
- autoStretching: string;
35
- filledStretching: string;
36
- fixedStretching: string;
37
- cellWrapper: string;
38
- cellRoot: string;
39
- cellContent: string;
40
- cellLeftContent: string;
41
- cellRightContent: string;
42
- };
43
- //# sourceMappingURL=Cell.tokens.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Cell.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAUnB,CAAC"}