@salutejs/plasma-new-hope 0.78.0-canary.1185.8913944828.0 → 0.78.0-canary.1195.8913931601.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (423) hide show
  1. package/cjs/components/Combobox/Combobox.css +7 -12
  2. package/cjs/components/Combobox/Combobox.js +1 -1
  3. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -10
  4. package/cjs/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +3 -3
  5. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -10
  6. package/cjs/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +3 -3
  7. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -10
  8. package/cjs/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +3 -3
  9. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -10
  10. package/cjs/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +3 -3
  11. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
  12. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +10 -81
  13. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  14. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +9 -21
  15. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  16. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
  17. package/cjs/components/Dropdown/Dropdown.css +2 -20
  18. package/cjs/components/Dropdown/Dropdown.js +54 -138
  19. package/cjs/components/Dropdown/Dropdown.js.map +1 -1
  20. package/cjs/components/Dropdown/Dropdown.styles.js +7 -40
  21. package/cjs/components/Dropdown/Dropdown.styles.js.map +1 -1
  22. package/cjs/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
  23. package/cjs/components/Dropdown/Dropdown.tokens.js +24 -12
  24. package/cjs/components/Dropdown/Dropdown.tokens.js.map +1 -1
  25. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
  26. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -79
  27. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  28. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +4 -31
  29. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  30. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
  31. package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js +9 -0
  32. package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
  33. package/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base_x642ct.css +1 -0
  34. package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js +9 -0
  35. package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
  36. package/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base_x642ct.css +1 -0
  37. package/cjs/components/Dropdown/utils/index.js +13 -14
  38. package/cjs/components/Dropdown/utils/index.js.map +1 -1
  39. package/cjs/components/IconButton/IconButton.css +25 -0
  40. package/cjs/components/IconButton/IconButton.js +84 -0
  41. package/cjs/components/IconButton/IconButton.js.map +1 -0
  42. package/cjs/components/IconButton/IconButton.styles.js +25 -0
  43. package/cjs/components/IconButton/IconButton.styles.js.map +1 -0
  44. package/cjs/components/IconButton/IconButton.styles_12iyaye.css +2 -0
  45. package/cjs/components/IconButton/IconButton.tokens.js +36 -0
  46. package/cjs/components/IconButton/IconButton.tokens.js.map +1 -0
  47. package/cjs/components/IconButton/variations/_disabled/base.js +9 -0
  48. package/cjs/components/IconButton/variations/_disabled/base.js.map +1 -0
  49. package/cjs/components/IconButton/variations/_disabled/base_x642ct.css +1 -0
  50. package/cjs/components/IconButton/variations/_focused/base.js +9 -0
  51. package/cjs/components/IconButton/variations/_focused/base.js.map +1 -0
  52. package/cjs/components/IconButton/variations/_focused/base_x642ct.css +1 -0
  53. package/cjs/components/IconButton/variations/_size/base.js +9 -0
  54. package/cjs/components/IconButton/variations/_size/base.js.map +1 -0
  55. package/cjs/components/IconButton/variations/_size/base_x642ct.css +1 -0
  56. package/cjs/components/IconButton/variations/_view/base.js +9 -0
  57. package/cjs/components/IconButton/variations/_view/base.js.map +1 -0
  58. package/cjs/components/IconButton/variations/_view/base_x642ct.css +1 -0
  59. package/cjs/components/Pagination/Pagination.css +7 -39
  60. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -39
  61. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +2 -2
  62. package/cjs/components/Select/Select.css +7 -39
  63. package/cjs/components/Select/Select.js +3 -3
  64. package/cjs/components/Select/ui/SelectDivider/SelectDivider.css +6 -10
  65. package/cjs/components/Select/ui/SelectDivider/SelectDivider.js +3 -3
  66. package/cjs/components/Select/ui/SelectFooter/SelectFooter.css +6 -10
  67. package/cjs/components/Select/ui/SelectFooter/SelectFooter.js +3 -3
  68. package/cjs/components/Select/ui/SelectGroup/SelectGroup.css +6 -10
  69. package/cjs/components/Select/ui/SelectGroup/SelectGroup.js +3 -3
  70. package/cjs/components/Select/ui/SelectHeader/SelectHeader.css +6 -10
  71. package/cjs/components/Select/ui/SelectHeader/SelectHeader.js +3 -3
  72. package/cjs/components/Select/ui/SelectItem/SelectItem.css +7 -59
  73. package/cjs/components/Select/ui/SelectItem/SelectItem.js +4 -4
  74. package/cjs/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  75. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  76. package/cjs/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  77. package/cjs/components/Select/ui/SelectItem/SelectItem.styles_6h17aw.css +1 -0
  78. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  79. package/cjs/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  80. package/cjs/index.css +11 -13
  81. package/cjs/index.js +8 -5
  82. package/cjs/index.js.map +1 -1
  83. package/es/components/Combobox/Combobox.css +7 -12
  84. package/es/components/Combobox/Combobox.js +1 -1
  85. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.css +6 -10
  86. package/es/components/Combobox/ui/ComboboxDivider/ComboboxDivider.js +3 -3
  87. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.css +6 -10
  88. package/es/components/Combobox/ui/ComboboxFooter/ComboboxFooter.js +3 -3
  89. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.css +6 -10
  90. package/es/components/Combobox/ui/ComboboxGroup/ComboboxGroup.js +3 -3
  91. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.css +6 -10
  92. package/es/components/Combobox/ui/ComboboxHeader/ComboboxHeader.js +3 -3
  93. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.css +23 -4
  94. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +11 -82
  95. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js.map +1 -1
  96. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +10 -19
  97. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js.map +1 -1
  98. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_936wgl.css +1 -0
  99. package/es/components/Dropdown/Dropdown.css +2 -20
  100. package/es/components/Dropdown/Dropdown.js +60 -144
  101. package/es/components/Dropdown/Dropdown.js.map +1 -1
  102. package/es/components/Dropdown/Dropdown.styles.js +7 -39
  103. package/es/components/Dropdown/Dropdown.styles.js.map +1 -1
  104. package/es/components/Dropdown/Dropdown.styles_1daxhqh.css +2 -0
  105. package/es/components/Dropdown/Dropdown.tokens.js +24 -12
  106. package/es/components/Dropdown/Dropdown.tokens.js.map +1 -1
  107. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.css +4 -7
  108. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +100 -80
  109. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.js.map +1 -1
  110. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +4 -30
  111. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js.map +1 -1
  112. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1juhjtq.css +4 -0
  113. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js +5 -0
  114. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js.map +1 -0
  115. package/es/components/Dropdown/ui/DropdownItem/variations/_size/base_x642ct.css +1 -0
  116. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js +5 -0
  117. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js.map +1 -0
  118. package/es/components/Dropdown/ui/DropdownItem/variations/_view/base_x642ct.css +1 -0
  119. package/es/components/Dropdown/utils/index.js +14 -14
  120. package/es/components/Dropdown/utils/index.js.map +1 -1
  121. package/es/components/IconButton/IconButton.css +25 -0
  122. package/es/components/IconButton/IconButton.js +79 -0
  123. package/es/components/IconButton/IconButton.js.map +1 -0
  124. package/es/components/IconButton/IconButton.styles.js +20 -0
  125. package/es/components/IconButton/IconButton.styles.js.map +1 -0
  126. package/es/components/IconButton/IconButton.styles_12iyaye.css +2 -0
  127. package/es/components/IconButton/IconButton.tokens.js +31 -0
  128. package/es/components/IconButton/IconButton.tokens.js.map +1 -0
  129. package/es/components/IconButton/variations/_disabled/base.js +5 -0
  130. package/es/components/IconButton/variations/_disabled/base.js.map +1 -0
  131. package/es/components/IconButton/variations/_disabled/base_x642ct.css +1 -0
  132. package/es/components/IconButton/variations/_focused/base.js +5 -0
  133. package/es/components/IconButton/variations/_focused/base.js.map +1 -0
  134. package/es/components/IconButton/variations/_focused/base_x642ct.css +1 -0
  135. package/es/components/IconButton/variations/_size/base.js +5 -0
  136. package/es/components/IconButton/variations/_size/base.js.map +1 -0
  137. package/es/components/IconButton/variations/_size/base_x642ct.css +1 -0
  138. package/es/components/IconButton/variations/_view/base.js +5 -0
  139. package/es/components/IconButton/variations/_view/base.js.map +1 -0
  140. package/es/components/IconButton/variations/_view/base_x642ct.css +1 -0
  141. package/es/components/Pagination/Pagination.css +7 -39
  142. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +7 -39
  143. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.js +2 -2
  144. package/es/components/Select/Select.css +7 -39
  145. package/es/components/Select/Select.js +3 -3
  146. package/es/components/Select/ui/SelectDivider/SelectDivider.css +6 -10
  147. package/es/components/Select/ui/SelectDivider/SelectDivider.js +3 -3
  148. package/es/components/Select/ui/SelectFooter/SelectFooter.css +6 -10
  149. package/es/components/Select/ui/SelectFooter/SelectFooter.js +3 -3
  150. package/es/components/Select/ui/SelectGroup/SelectGroup.css +6 -10
  151. package/es/components/Select/ui/SelectGroup/SelectGroup.js +3 -3
  152. package/es/components/Select/ui/SelectHeader/SelectHeader.css +6 -10
  153. package/es/components/Select/ui/SelectHeader/SelectHeader.js +3 -3
  154. package/es/components/Select/ui/SelectItem/SelectItem.css +7 -59
  155. package/es/components/Select/ui/SelectItem/SelectItem.js +4 -4
  156. package/es/components/Select/ui/SelectItem/SelectItem.js.map +1 -1
  157. package/es/components/Select/ui/SelectItem/SelectItem.styles.js +3 -3
  158. package/es/components/Select/ui/SelectItem/SelectItem.styles.js.map +1 -1
  159. package/es/components/Select/ui/SelectItem/SelectItem.styles_6h17aw.css +1 -0
  160. package/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  161. package/es/components/_Icon/Icon.assets/DisclosureRight.js.map +1 -1
  162. package/es/index.css +11 -13
  163. package/es/index.js +3 -3
  164. package/package.json +2 -2
  165. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.js +2 -91
  166. package/styled-components/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +7 -27
  167. package/styled-components/cjs/components/Dropdown/Dropdown.js +54 -140
  168. package/styled-components/cjs/components/Dropdown/Dropdown.styles.js +7 -22
  169. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  170. package/styled-components/cjs/components/Dropdown/Dropdown.tokens.js +24 -12
  171. package/styled-components/cjs/components/Dropdown/index.js +1 -9
  172. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.js +105 -77
  173. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +15 -30
  174. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/base.js +8 -0
  175. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
  176. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/base.js +8 -0
  177. package/styled-components/cjs/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
  178. package/styled-components/cjs/components/Dropdown/ui/index.js +13 -14
  179. package/styled-components/cjs/components/Dropdown/utils/index.js +13 -14
  180. package/styled-components/cjs/components/Dropdown/variations/_size/tokens.json +9 -1
  181. package/styled-components/cjs/components/Dropdown/variations/_view/tokens.json +1 -1
  182. package/styled-components/cjs/components/IconButton/IconButton.js +86 -0
  183. package/styled-components/cjs/components/IconButton/IconButton.styles.js +19 -0
  184. package/styled-components/cjs/components/IconButton/IconButton.tokens.js +34 -0
  185. package/styled-components/cjs/components/IconButton/index.js +31 -0
  186. package/styled-components/cjs/components/IconButton/variations/_disabled/base.js +8 -0
  187. package/styled-components/cjs/components/IconButton/variations/_disabled/tokens.json +1 -0
  188. package/styled-components/cjs/components/IconButton/variations/_focused/base.js +8 -0
  189. package/styled-components/cjs/components/IconButton/variations/_focused/tokens.json +1 -0
  190. package/styled-components/cjs/components/IconButton/variations/_size/base.js +8 -0
  191. package/styled-components/cjs/components/IconButton/variations/_size/tokens.json +1 -0
  192. package/styled-components/cjs/components/IconButton/variations/_view/base.js +8 -0
  193. package/styled-components/cjs/components/IconButton/variations/_view/tokens.json +1 -0
  194. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.js +2 -2
  195. package/styled-components/cjs/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  196. package/styled-components/cjs/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  197. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +27 -0
  198. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +13 -0
  199. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
  200. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +27 -0
  201. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +13 -0
  202. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  203. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.config.js +46 -0
  204. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.js +11 -0
  205. package/styled-components/cjs/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -0
  206. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +27 -0
  207. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +13 -0
  208. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
  209. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +27 -0
  210. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +13 -0
  211. package/styled-components/cjs/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  212. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.config.js +46 -0
  213. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.js +11 -0
  214. package/styled-components/cjs/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -0
  215. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.config.js +22 -0
  216. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.js +21 -0
  217. package/styled-components/cjs/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
  218. package/styled-components/cjs/index.js +11 -0
  219. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.js +3 -90
  220. package/styled-components/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.js +6 -23
  221. package/styled-components/es/components/Dropdown/Dropdown.js +55 -142
  222. package/styled-components/es/components/Dropdown/Dropdown.styles.js +5 -18
  223. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +80 -0
  224. package/styled-components/es/components/Dropdown/Dropdown.tokens.js +24 -12
  225. package/styled-components/es/components/Dropdown/index.js +0 -1
  226. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.js +107 -78
  227. package/styled-components/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles.js +11 -27
  228. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/base.js +2 -0
  229. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_size/tokens.json +19 -0
  230. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/base.js +2 -0
  231. package/styled-components/es/components/Dropdown/ui/DropdownItem/variations/_view/tokens.json +9 -0
  232. package/styled-components/es/components/Dropdown/ui/index.js +1 -2
  233. package/styled-components/es/components/Dropdown/utils/index.js +13 -13
  234. package/styled-components/es/components/Dropdown/variations/_size/tokens.json +9 -1
  235. package/styled-components/es/components/Dropdown/variations/_view/tokens.json +1 -1
  236. package/styled-components/es/components/IconButton/IconButton.js +77 -0
  237. package/styled-components/es/components/IconButton/IconButton.styles.js +11 -0
  238. package/styled-components/es/components/IconButton/IconButton.tokens.js +28 -0
  239. package/styled-components/es/components/IconButton/index.js +2 -0
  240. package/styled-components/es/components/IconButton/variations/_disabled/base.js +2 -0
  241. package/styled-components/es/components/IconButton/variations/_disabled/tokens.json +1 -0
  242. package/styled-components/es/components/IconButton/variations/_focused/base.js +2 -0
  243. package/styled-components/es/components/IconButton/variations/_focused/tokens.json +1 -0
  244. package/styled-components/es/components/IconButton/variations/_size/base.js +2 -0
  245. package/styled-components/es/components/IconButton/variations/_size/tokens.json +1 -0
  246. package/styled-components/es/components/IconButton/variations/_view/base.js +2 -0
  247. package/styled-components/es/components/IconButton/variations/_view/tokens.json +1 -0
  248. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.js +2 -2
  249. package/styled-components/es/components/Select/ui/SelectItem/SelectItem.styles.js +2 -2
  250. package/styled-components/es/components/_Icon/Icon.assets/DisclosureRight.js +2 -1
  251. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.js +21 -0
  252. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.js +7 -0
  253. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.stories.tsx +194 -0
  254. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.js +21 -0
  255. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.js +7 -0
  256. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  257. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.config.js +40 -0
  258. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.js +5 -0
  259. package/styled-components/es/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +65 -0
  260. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.js +21 -0
  261. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.js +7 -0
  262. package/styled-components/es/examples/plasma_web/components/Dropdown/Normal/Dropdown.stories.tsx +195 -0
  263. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.js +21 -0
  264. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.js +7 -0
  265. package/styled-components/es/examples/plasma_web/components/Dropdown/Tight/Dropdown.stories.tsx +195 -0
  266. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.config.js +40 -0
  267. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.js +5 -0
  268. package/styled-components/es/examples/plasma_web/components/IconButton/IconButton.stories.tsx +65 -0
  269. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.config.js +16 -0
  270. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.js +15 -0
  271. package/styled-components/es/examples/sds_engineer/components/Dropdown/Dropdown.stories.tsx +277 -0
  272. package/styled-components/es/index.js +1 -0
  273. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts +13 -15
  274. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.d.ts.map +1 -1
  275. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts +1 -5
  276. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.styles.d.ts.map +1 -1
  277. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts +2 -59
  278. package/types/components/Combobox/ui/ComboboxItem/ComboboxItem.type.d.ts.map +1 -1
  279. package/types/components/Dropdown/Dropdown.d.ts +4 -4
  280. package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
  281. package/types/components/Dropdown/Dropdown.styles.d.ts +1 -8
  282. package/types/components/Dropdown/Dropdown.styles.d.ts.map +1 -1
  283. package/types/components/Dropdown/Dropdown.tokens.d.ts +22 -9
  284. package/types/components/Dropdown/Dropdown.tokens.d.ts.map +1 -1
  285. package/types/components/Dropdown/Dropdown.types.d.ts +40 -64
  286. package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
  287. package/types/components/Dropdown/index.d.ts +1 -3
  288. package/types/components/Dropdown/index.d.ts.map +1 -1
  289. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts +56 -2
  290. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.d.ts.map +1 -1
  291. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts +1 -5
  292. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.styles.d.ts.map +1 -1
  293. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +38 -44
  294. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
  295. package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts +2 -0
  296. package/types/components/Dropdown/ui/DropdownItem/variations/_size/base.d.ts.map +1 -0
  297. package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts +2 -0
  298. package/types/components/Dropdown/ui/DropdownItem/variations/_view/base.d.ts.map +1 -0
  299. package/types/components/Dropdown/ui/index.d.ts +1 -2
  300. package/types/components/Dropdown/ui/index.d.ts.map +1 -1
  301. package/types/components/Dropdown/utils/index.d.ts +3 -5
  302. package/types/components/Dropdown/utils/index.d.ts.map +1 -1
  303. package/types/components/IconButton/IconButton.d.ts +30 -0
  304. package/types/components/IconButton/IconButton.d.ts.map +1 -0
  305. package/types/components/IconButton/IconButton.styles.d.ts +4 -0
  306. package/types/components/IconButton/IconButton.styles.d.ts.map +1 -0
  307. package/types/components/IconButton/IconButton.tokens.d.ts +29 -0
  308. package/types/components/IconButton/IconButton.tokens.d.ts.map +1 -0
  309. package/types/components/IconButton/IconButton.types.d.ts +13 -0
  310. package/types/components/IconButton/IconButton.types.d.ts.map +1 -0
  311. package/types/components/IconButton/index.d.ts +4 -0
  312. package/types/components/IconButton/index.d.ts.map +1 -0
  313. package/types/components/IconButton/variations/_disabled/base.d.ts +2 -0
  314. package/types/components/IconButton/variations/_disabled/base.d.ts.map +1 -0
  315. package/types/components/IconButton/variations/_focused/base.d.ts +2 -0
  316. package/types/components/IconButton/variations/_focused/base.d.ts.map +1 -0
  317. package/types/components/IconButton/variations/_size/base.d.ts +2 -0
  318. package/types/components/IconButton/variations/_size/base.d.ts.map +1 -0
  319. package/types/components/IconButton/variations/_view/base.d.ts +2 -0
  320. package/types/components/IconButton/variations/_view/base.d.ts.map +1 -0
  321. package/types/components/Select/ui/SelectItem/SelectItem.d.ts +2 -2
  322. package/types/components/Select/ui/SelectItem/SelectItem.type.d.ts +2 -2
  323. package/types/components/Select/utils/index.d.ts +1 -1
  324. package/types/components/_Icon/Icon.assets/DisclosureRight.d.ts.map +1 -1
  325. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
  326. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts +30 -0
  327. package/types/examples/plasma_b2c/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
  328. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
  329. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
  330. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts +30 -0
  331. package/types/examples/plasma_b2c/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
  332. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts +39 -0
  333. package/types/examples/plasma_b2c/components/IconButton/IconButton.config.d.ts.map +1 -0
  334. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +33 -0
  335. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -0
  336. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts +18 -0
  337. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.config.d.ts.map +1 -0
  338. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts +30 -0
  339. package/types/examples/plasma_web/components/Dropdown/Normal/Dropdown.d.ts.map +1 -0
  340. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts +18 -0
  341. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.config.d.ts.map +1 -0
  342. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts +30 -0
  343. package/types/examples/plasma_web/components/Dropdown/Tight/Dropdown.d.ts.map +1 -0
  344. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts +39 -0
  345. package/types/examples/plasma_web/components/IconButton/IconButton.config.d.ts.map +1 -0
  346. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +33 -0
  347. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -0
  348. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts +15 -0
  349. package/types/examples/sds_engineer/components/Dropdown/Dropdown.config.d.ts.map +1 -0
  350. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts +51 -0
  351. package/types/examples/sds_engineer/components/Dropdown/Dropdown.d.ts.map +1 -0
  352. package/types/index.d.ts +1 -0
  353. package/types/index.d.ts.map +1 -1
  354. package/cjs/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
  355. package/cjs/components/Combobox/utils/index.js +0 -23
  356. package/cjs/components/Combobox/utils/index.js.map +0 -1
  357. package/cjs/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
  358. package/cjs/components/Dropdown/hooks/useHashMaps.js +0 -31
  359. package/cjs/components/Dropdown/hooks/useHashMaps.js.map +0 -1
  360. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -200
  361. package/cjs/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
  362. package/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -37
  363. package/cjs/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
  364. package/cjs/components/Dropdown/reducers/pathReducer.js +0 -41
  365. package/cjs/components/Dropdown/reducers/pathReducer.js.map +0 -1
  366. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -117
  367. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
  368. package/cjs/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
  369. package/cjs/components/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +0 -1
  370. package/es/components/Combobox/ui/ComboboxItem/ComboboxItem.styles_s4sk53.css +0 -4
  371. package/es/components/Combobox/utils/index.js +0 -19
  372. package/es/components/Combobox/utils/index.js.map +0 -1
  373. package/es/components/Dropdown/Dropdown.styles_1tihqkp.css +0 -3
  374. package/es/components/Dropdown/hooks/useHashMaps.js +0 -27
  375. package/es/components/Dropdown/hooks/useHashMaps.js.map +0 -1
  376. package/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -196
  377. package/es/components/Dropdown/hooks/useKeyboardNavigation.js.map +0 -1
  378. package/es/components/Dropdown/reducers/focusedPathReducer.js +0 -33
  379. package/es/components/Dropdown/reducers/focusedPathReducer.js.map +0 -1
  380. package/es/components/Dropdown/reducers/pathReducer.js +0 -37
  381. package/es/components/Dropdown/reducers/pathReducer.js.map +0 -1
  382. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -113
  383. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +0 -1
  384. package/es/components/Dropdown/ui/DropdownItem/DropdownItem.styles_1o4szyu.css +0 -5
  385. package/es/components/Select/ui/SelectItem/SelectItem.styles_1jgsd1a.css +0 -1
  386. package/styled-components/cjs/components/Combobox/utils/index.js +0 -23
  387. package/styled-components/cjs/components/Dropdown/hooks/useHashMaps.js +0 -29
  388. package/styled-components/cjs/components/Dropdown/hooks/useKeyboardNavigation.js +0 -199
  389. package/styled-components/cjs/components/Dropdown/reducers/focusedPathReducer.js +0 -40
  390. package/styled-components/cjs/components/Dropdown/reducers/pathReducer.js +0 -44
  391. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -114
  392. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -25
  393. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -11
  394. package/styled-components/cjs/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
  395. package/styled-components/es/components/Combobox/utils/index.js +0 -15
  396. package/styled-components/es/components/Dropdown/hooks/useHashMaps.js +0 -23
  397. package/styled-components/es/components/Dropdown/hooks/useKeyboardNavigation.js +0 -193
  398. package/styled-components/es/components/Dropdown/reducers/focusedPathReducer.js +0 -34
  399. package/styled-components/es/components/Dropdown/reducers/pathReducer.js +0 -38
  400. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +0 -108
  401. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.config.js +0 -19
  402. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.js +0 -5
  403. package/styled-components/es/examples/plasma_b2c/components/Dropdown/Dropdown.stories.tsx +0 -294
  404. package/types/components/Combobox/utils/index.d.ts +0 -4
  405. package/types/components/Combobox/utils/index.d.ts.map +0 -1
  406. package/types/components/Dropdown/hooks/useHashMaps.d.ts +0 -6
  407. package/types/components/Dropdown/hooks/useHashMaps.d.ts.map +0 -1
  408. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts +0 -23
  409. package/types/components/Dropdown/hooks/useKeyboardNavigation.d.ts.map +0 -1
  410. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts +0 -16
  411. package/types/components/Dropdown/reducers/focusedPathReducer.d.ts.map +0 -1
  412. package/types/components/Dropdown/reducers/pathReducer.d.ts +0 -20
  413. package/types/components/Dropdown/reducers/pathReducer.d.ts.map +0 -1
  414. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts +0 -5
  415. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +0 -1
  416. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts +0 -26
  417. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.type.d.ts.map +0 -1
  418. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.config.d.ts.map +0 -1
  419. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts +0 -13
  420. package/types/examples/plasma_b2c/components/Dropdown/Dropdown.d.ts.map +0 -1
  421. /package/styled-components/cjs/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
  422. /package/styled-components/es/components/{Dropdown/ui/DropdownInner/DropdownInner.type.js → IconButton/IconButton.types.js} +0 -0
  423. /package/types/examples/plasma_b2c/components/Dropdown/{Dropdown.config.d.ts → Normal/Dropdown.config.d.ts} +0 -0
@@ -0,0 +1,21 @@
1
+ import { css } from 'styled-components';
2
+ import { dropdownTokens } from '../../../../../components/Dropdown';
3
+ var dropdownSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.width, ": 12.5rem;\n ").concat(dropdownTokens.height, ": auto;\n ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
4
+ var dropdownItemSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.itemWidth, ": auto;\n ").concat(dropdownTokens.itemHeight, ": auto;\n ").concat(dropdownTokens.itemMarginTop, ": 0;\n ").concat(dropdownTokens.itemMarginRight, ": 0;\n ").concat(dropdownTokens.itemMarginBottom, ": 0;\n ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
5
+ export var config = {
6
+ defaults: {
7
+ view: 'default',
8
+ size: 'm'
9
+ },
10
+ variations: {
11
+ size: {
12
+ xs: /*#__PURE__*/css(["", ";", ";", ":0.3125rem;", ":0.5rem;", ":0.3125rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
13
+ s: /*#__PURE__*/css(["", ";", ";", ":0.4375rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
14
+ m: /*#__PURE__*/css(["", ";", ";", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
15
+ l: /*#__PURE__*/css(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
16
+ },
17
+ view: {
18
+ "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
19
+ }
20
+ }
21
+ };
@@ -0,0 +1,7 @@
1
+ import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
2
+ import { component, mergeConfig } from '../../../../../engines';
3
+ import { config } from './Dropdown.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
5
+ export var Dropdown = /*#__PURE__*/component(mergedConfig);
6
+ var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
7
+ export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);
@@ -0,0 +1,195 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { action } from '@storybook/addon-actions';
5
+ import styled from 'styled-components';
6
+
7
+ import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
8
+ import { mergeConfig } from '../../../../../engines';
9
+ import { dropdownConfig } from '../../../../../components/Dropdown';
10
+ import { Button } from '../../Button/Button';
11
+ import { Radiobox } from '../../Radiobox/Radiobox';
12
+ import { Checkbox } from '../../Checkbox/Checkbox';
13
+ import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
14
+
15
+ import { Dropdown, DropdownItem } from './Dropdown';
16
+ import { config } from './Dropdown.config';
17
+
18
+ const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
19
+ const triggers: Array<DropdownTrigger> = ['click', 'hover'];
20
+
21
+ type StoryDropdownPropsCustom = {
22
+ skidding?: number;
23
+ distance?: number;
24
+ };
25
+
26
+ type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
27
+
28
+ const meta: Meta<StoryDropdownProps> = {
29
+ title: 'plasma_b2c/Dropdown',
30
+ decorators: [WithTheme],
31
+ component: Dropdown,
32
+ argTypes: {
33
+ placement: {
34
+ options: placements,
35
+ control: {
36
+ type: 'select',
37
+ },
38
+ },
39
+ trigger: {
40
+ options: triggers,
41
+ control: {
42
+ type: 'select',
43
+ },
44
+ },
45
+ ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
46
+ },
47
+ args: {
48
+ placement: 'bottom',
49
+ trigger: 'click',
50
+ closeOnOverlayClick: false,
51
+ closeOnEsc: true,
52
+ isFocusTrapped: true,
53
+ skidding: 0,
54
+ distance: 0,
55
+ },
56
+ };
57
+
58
+ export default meta;
59
+
60
+ const onSelect = action('onSelect');
61
+ const onClick = action('onClick');
62
+ const onChange = action('onChange');
63
+
64
+ const getDropdownItems = (slug: string, elemCount: number) =>
65
+ [...Array(elemCount).keys()].map((num) => ({
66
+ value: `${slug}_${num}`,
67
+ child: `${slug} ${num}`,
68
+ }));
69
+
70
+ const StyledRadiobox = styled(Radiobox)`
71
+ margin-right: 0.5rem;
72
+ `;
73
+
74
+ const StyledCheckbox = styled(Checkbox)`
75
+ margin-left: auto;
76
+ `;
77
+
78
+ const StyledDisclosureRightIcon = styled.div`
79
+ width: 1.25rem;
80
+ height: 1.25rem;
81
+ margin-left: auto;
82
+ `;
83
+
84
+ const DisclosureRightIcon = (props) => (
85
+ <StyledDisclosureRightIcon>
86
+ <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
87
+ <path
88
+ d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
89
+ fill="currentColor"
90
+ />
91
+ </svg>
92
+ </StyledDisclosureRightIcon>
93
+ );
94
+
95
+ const StoryTight = (args: StoryDropdownProps) => {
96
+ const [selected, setSelected] = useState('');
97
+ const [isOpen, setIsOpen] = useState(false);
98
+ const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
99
+
100
+ const { skidding, distance, placement, ...rest } = args;
101
+
102
+ const onMainClose = () => {
103
+ setIsOpen(false);
104
+ setIsOpenDropdown2(false);
105
+ };
106
+
107
+ const onMainToggle = (openValue: boolean) => {
108
+ setIsOpen(openValue);
109
+
110
+ if (!openValue) {
111
+ onMainClose();
112
+ }
113
+ };
114
+
115
+ const handleSelect = (value: string, text: string) => {
116
+ setSelected(value);
117
+ onSelect(value, text);
118
+ setIsOpen(false);
119
+ };
120
+
121
+ return (
122
+ <div>
123
+ <h3>This is header</h3>
124
+ <Dropdown
125
+ target={<Button>Target</Button>}
126
+ isOpen={isOpen}
127
+ onToggle={onMainToggle}
128
+ offset={[Number(skidding), Number(distance)]}
129
+ placement={placement}
130
+ {...rest}
131
+ >
132
+ {getDropdownItems('item', 6).map((item) => (
133
+ <DropdownItem
134
+ key={item.value}
135
+ isSelected={Boolean(item.value === selected)}
136
+ onSelect={() => handleSelect(item.value, item.child)}
137
+ onClick={onClick}
138
+ value={item.value}
139
+ >
140
+ {item.child}
141
+ </DropdownItem>
142
+ ))}
143
+ <Dropdown
144
+ target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
145
+ onToggle={(is) => setIsOpenDropdown2(is)}
146
+ isOpen={isOpenDropdown2}
147
+ offset={[0, 0]}
148
+ isNested
149
+ {...rest}
150
+ >
151
+ <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
152
+ {getDropdownItems('nested', 4).map((item) => (
153
+ <DropdownItem
154
+ key={item.value}
155
+ isSelected={Boolean(item.value === selected)}
156
+ onSelect={() => handleSelect(item.value, item.child)}
157
+ onClick={onClick}
158
+ value={item.value}
159
+ >
160
+ {item.child}
161
+ </DropdownItem>
162
+ ))}
163
+ <DropdownItem
164
+ contentLeft={StyledRadiobox}
165
+ name="radio"
166
+ value="1"
167
+ onChange={onChange}
168
+ text="Radiobox 1"
169
+ />
170
+ <DropdownItem
171
+ contentLeft={StyledRadiobox}
172
+ name="radio"
173
+ value="2"
174
+ onChange={onChange}
175
+ text="Radiobox 2"
176
+ />
177
+ </Dropdown>
178
+
179
+ <DropdownItem
180
+ isSelected={selected === 'disabled'}
181
+ onSelect={() => handleSelect('disabled', 'disabled')}
182
+ onClick={onClick}
183
+ value="disabled"
184
+ disabled
185
+ >
186
+ disabled
187
+ </DropdownItem>
188
+ </Dropdown>
189
+ </div>
190
+ );
191
+ };
192
+
193
+ export const Tight: StoryObj<StoryDropdownProps> = {
194
+ render: (args) => <StoryTight {...args} />,
195
+ };
@@ -0,0 +1,40 @@
1
+ import { css } from 'styled-components';
2
+ import { iconButtonTokens } from '../../../../components/IconButton';
3
+ export var config = {
4
+ defaults: {
5
+ view: 'default',
6
+ focused: 'true',
7
+ size: 'm'
8
+ },
9
+ variations: {
10
+ view: {
11
+ "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
12
+ primary: /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
13
+ accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
14
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
15
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
16
+ success: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
17
+ warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
18
+ critical: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
19
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
20
+ black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive),
21
+ white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], iconButtonTokens.iconButtonColor, iconButtonTokens.iconButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, iconButtonTokens.iconButtonBackgroundColorHover, iconButtonTokens.iconButtonColorActive, iconButtonTokens.iconButtonBackgroundColorActive)
22
+ },
23
+ size: {
24
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":0.875rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
25
+ lr: /*#__PURE__*/css(["", ":3.5rem;", ":3.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
26
+ m: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":1.25rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
27
+ mr: /*#__PURE__*/css(["", ":3rem;", ":3rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
28
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":2.5remm;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
29
+ sr: /*#__PURE__*/css(["", ":2.5rem;", ":2.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
30
+ xs: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonPadding, iconButtonTokens.iconButtonRadius, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor),
31
+ xsr: /*#__PURE__*/css(["", ":2rem;", ":2rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], iconButtonTokens.iconButtonHeight, iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonFontFamily, iconButtonTokens.iconButtonFontSize, iconButtonTokens.iconButtonFontStyle, iconButtonTokens.iconButtonFontWeight, iconButtonTokens.iconButtonLetterSpacing, iconButtonTokens.iconButtonLineHeight, iconButtonTokens.iconButtonSpinnerSize, iconButtonTokens.iconButtonSpinnerColor)
32
+ },
33
+ disabled: {
34
+ "true": /*#__PURE__*/css(["", ":0.4;"], iconButtonTokens.iconButtonDisabledOpacity)
35
+ },
36
+ focused: {
37
+ "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], iconButtonTokens.iconButtonFocusColor)
38
+ }
39
+ }
40
+ };
@@ -0,0 +1,5 @@
1
+ import { iconButtonConfig } from '../../../../components/IconButton';
2
+ import { component, mergeConfig } from '../../../../engines';
3
+ import { config } from './IconButton.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(iconButtonConfig, config);
5
+ export var IconButton = /*#__PURE__*/component(mergedConfig);
@@ -0,0 +1,65 @@
1
+ import React, { ComponentProps } from 'react';
2
+ import type { StoryObj, Meta } from '@storybook/react';
3
+
4
+ import { iconButtonConfig } from '../../../../components/IconButton';
5
+ import { mergeConfig } from '../../../../engines';
6
+ import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
+ import { IconChevronLeft } from '../../../../components/_Icon';
8
+
9
+ import { config } from './IconButton.config';
10
+ import { IconButton } from './IconButton';
11
+
12
+ const meta: Meta<typeof IconButton> = {
13
+ title: 'plasma_b2c/IconButton',
14
+ decorators: [WithTheme],
15
+ component: IconButton,
16
+ argTypes: {
17
+ ...argTypesFromConfig(mergeConfig(iconButtonConfig, config)),
18
+ pin: {
19
+ options: [
20
+ 'square-square',
21
+ 'square-clear',
22
+ 'clear-square',
23
+ 'clear-clear',
24
+ 'clear-circle',
25
+ 'circle-clear',
26
+ 'circle-circle',
27
+ '',
28
+ ],
29
+ control: {
30
+ type: 'select',
31
+ },
32
+ table: { defaultValue: { summary: 'bottom' } },
33
+ },
34
+ },
35
+ };
36
+
37
+ export default meta;
38
+
39
+ const getSizeForIcon = (size) => {
40
+ if (size === 'mr') {
41
+ return 'm';
42
+ }
43
+ if (size === 'lr') {
44
+ return 'l';
45
+ }
46
+ if (size === 'sr') {
47
+ return 's';
48
+ }
49
+ if (size === 'xsr') {
50
+ return 'xs';
51
+ }
52
+ return size;
53
+ };
54
+
55
+ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
56
+ args: {
57
+ children: <IconChevronLeft />,
58
+ view: 'default',
59
+ size: 'm',
60
+ disabled: false,
61
+ focused: true,
62
+ isLoading: false,
63
+ },
64
+ render: (args) => <IconButton {...args} icon={<IconChevronLeft size={getSizeForIcon(args.size)} />} />,
65
+ };
@@ -0,0 +1,21 @@
1
+ import { css } from 'styled-components';
2
+ import { dropdownTokens } from '../../../../../components/Dropdown';
3
+ var dropdownSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.width, ": 12.5rem;\n ").concat(dropdownTokens.height, ": auto;\n ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
4
+ var dropdownItemSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.itemWidth, ": auto;\n ").concat(dropdownTokens.itemHeight, ": auto;\n ").concat(dropdownTokens.itemMarginTop, ": 0;\n ").concat(dropdownTokens.itemMarginRight, ": 0;\n ").concat(dropdownTokens.itemMarginBottom, ": 0;\n ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
5
+ export var config = {
6
+ defaults: {
7
+ view: 'default',
8
+ size: 'm'
9
+ },
10
+ variations: {
11
+ size: {
12
+ xs: /*#__PURE__*/css(["", ";", ";", ":0.5625rem;", ":0.5rem;", ":0.5625rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
13
+ s: /*#__PURE__*/css(["", ";", ";", ":0.6875rem;", ":0.75rem;", ":0.6875rem;", ":0.75rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
14
+ m: /*#__PURE__*/css(["", ";", ";", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.875rem;", ":0.625rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
15
+ l: /*#__PURE__*/css(["", ";", ";", ":1.0625rem;", ":1rem;", ":1.0625rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
16
+ },
17
+ view: {
18
+ "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
19
+ }
20
+ }
21
+ };
@@ -0,0 +1,7 @@
1
+ import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
2
+ import { component, mergeConfig } from '../../../../../engines';
3
+ import { config } from './Dropdown.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
5
+ export var Dropdown = /*#__PURE__*/component(mergedConfig);
6
+ var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
7
+ export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);
@@ -0,0 +1,195 @@
1
+ import React, { useState } from 'react';
2
+ import type { ComponentProps } from 'react';
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { action } from '@storybook/addon-actions';
5
+ import styled from 'styled-components';
6
+
7
+ import { WithTheme, argTypesFromConfig } from '../../../../_helpers';
8
+ import { mergeConfig } from '../../../../../engines';
9
+ import { dropdownConfig } from '../../../../../components/Dropdown';
10
+ import { Button } from '../../Button/Button';
11
+ import { Radiobox } from '../../Radiobox/Radiobox';
12
+ import { Checkbox } from '../../Checkbox/Checkbox';
13
+ import type { DropdownPlacement, DropdownTrigger } from '../../../../../components/Dropdown/Dropdown.types';
14
+
15
+ import { Dropdown, DropdownItem } from './Dropdown';
16
+ import { config } from './Dropdown.config';
17
+
18
+ const placements: Array<DropdownPlacement> = ['top', 'bottom', 'right', 'left', 'auto'];
19
+ const triggers: Array<DropdownTrigger> = ['click', 'hover'];
20
+
21
+ type StoryDropdownPropsCustom = {
22
+ skidding?: number;
23
+ distance?: number;
24
+ };
25
+
26
+ type StoryDropdownProps = ComponentProps<typeof Dropdown> & StoryDropdownPropsCustom;
27
+
28
+ const meta: Meta<StoryDropdownProps> = {
29
+ title: 'plasma_web/Dropdown',
30
+ decorators: [WithTheme],
31
+ component: Dropdown,
32
+ argTypes: {
33
+ placement: {
34
+ options: placements,
35
+ control: {
36
+ type: 'select',
37
+ },
38
+ },
39
+ trigger: {
40
+ options: triggers,
41
+ control: {
42
+ type: 'select',
43
+ },
44
+ },
45
+ ...argTypesFromConfig(mergeConfig(dropdownConfig, config)),
46
+ },
47
+ args: {
48
+ placement: 'bottom',
49
+ trigger: 'click',
50
+ closeOnOverlayClick: false,
51
+ closeOnEsc: true,
52
+ isFocusTrapped: true,
53
+ skidding: 0,
54
+ distance: 0,
55
+ },
56
+ };
57
+
58
+ export default meta;
59
+
60
+ const onSelect = action('onSelect');
61
+ const onClick = action('onClick');
62
+ const onChange = action('onChange');
63
+
64
+ const getDropdownItems = (slug: string, elemCount: number) =>
65
+ [...Array(elemCount).keys()].map((num) => ({
66
+ value: `${slug}_${num}`,
67
+ child: `${slug} ${num}`,
68
+ }));
69
+
70
+ const StyledRadiobox = styled(Radiobox)`
71
+ margin-right: 0.5rem;
72
+ `;
73
+
74
+ const StyledCheckbox = styled(Checkbox)`
75
+ margin-left: auto;
76
+ `;
77
+
78
+ const StyledDisclosureRightIcon = styled.div`
79
+ width: 1.25rem;
80
+ height: 1.25rem;
81
+ margin-left: auto;
82
+ `;
83
+
84
+ const DisclosureRightIcon = (props) => (
85
+ <StyledDisclosureRightIcon>
86
+ <svg width="100%" viewBox="0 0 24 24" fill="none" {...props}>
87
+ <path
88
+ d="M9.883 8.707a1 1 0 011.414-1.414L16.004 12l-4.707 4.707a1 1 0 01-1.414-1.414L13.176 12 9.883 8.707z"
89
+ fill="currentColor"
90
+ />
91
+ </svg>
92
+ </StyledDisclosureRightIcon>
93
+ );
94
+
95
+ const StoryNormal = (args: StoryDropdownProps) => {
96
+ const [selected, setSelected] = useState('');
97
+ const [isOpen, setIsOpen] = useState(false);
98
+ const [isOpenDropdown2, setIsOpenDropdown2] = useState(false);
99
+
100
+ const { skidding, distance, placement, ...rest } = args;
101
+
102
+ const onMainClose = () => {
103
+ setIsOpen(false);
104
+ setIsOpenDropdown2(false);
105
+ };
106
+
107
+ const onMainToggle = (openValue: boolean) => {
108
+ setIsOpen(openValue);
109
+
110
+ if (!openValue) {
111
+ onMainClose();
112
+ }
113
+ };
114
+
115
+ const handleSelect = (value: string, text: string) => {
116
+ setSelected(value);
117
+ onSelect(value, text);
118
+ setIsOpen(false);
119
+ };
120
+
121
+ return (
122
+ <div>
123
+ <h3>This is header</h3>
124
+ <Dropdown
125
+ target={<Button>Target</Button>}
126
+ isOpen={isOpen}
127
+ onToggle={onMainToggle}
128
+ offset={[Number(skidding), Number(distance)]}
129
+ placement={placement}
130
+ {...rest}
131
+ >
132
+ {getDropdownItems('item', 6).map((item) => (
133
+ <DropdownItem
134
+ key={item.value}
135
+ isSelected={Boolean(item.value === selected)}
136
+ onSelect={() => handleSelect(item.value, item.child)}
137
+ onClick={onClick}
138
+ value={item.value}
139
+ >
140
+ {item.child}
141
+ </DropdownItem>
142
+ ))}
143
+ <Dropdown
144
+ target={<DropdownItem contentRight={DisclosureRightIcon} name="test" text="Nested dropdown" />}
145
+ onToggle={(is) => setIsOpenDropdown2(is)}
146
+ isOpen={isOpenDropdown2}
147
+ offset={[0, 0]}
148
+ isNested
149
+ {...rest}
150
+ >
151
+ <DropdownItem contentRight={StyledCheckbox} value="checked" onChange={onChange} text="Checkbox" />
152
+ {getDropdownItems('nested', 4).map((item) => (
153
+ <DropdownItem
154
+ key={item.value}
155
+ isSelected={Boolean(item.value === selected)}
156
+ onSelect={() => handleSelect(item.value, item.child)}
157
+ onClick={onClick}
158
+ value={item.value}
159
+ >
160
+ {item.child}
161
+ </DropdownItem>
162
+ ))}
163
+ <DropdownItem
164
+ contentLeft={StyledRadiobox}
165
+ name="radio"
166
+ value="1"
167
+ onChange={onChange}
168
+ text="Radiobox 1"
169
+ />
170
+ <DropdownItem
171
+ contentLeft={StyledRadiobox}
172
+ name="radio"
173
+ value="2"
174
+ onChange={onChange}
175
+ text="Radiobox 2"
176
+ />
177
+ </Dropdown>
178
+
179
+ <DropdownItem
180
+ isSelected={selected === 'disabled'}
181
+ onSelect={() => handleSelect('disabled', 'disabled')}
182
+ onClick={onClick}
183
+ value="disabled"
184
+ disabled
185
+ >
186
+ disabled
187
+ </DropdownItem>
188
+ </Dropdown>
189
+ </div>
190
+ );
191
+ };
192
+
193
+ export const Normal: StoryObj<StoryDropdownProps> = {
194
+ render: (args) => <StoryNormal {...args} />,
195
+ };
@@ -0,0 +1,21 @@
1
+ import { css } from 'styled-components';
2
+ import { dropdownTokens } from '../../../../../components/Dropdown';
3
+ var dropdownSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.width, ": 12.5rem;\n ").concat(dropdownTokens.height, ": auto;\n ").concat(dropdownTokens.borderRadius, ": 0.5rem;\n ").concat(dropdownTokens.paddingTop, ": 0.125rem;\n ").concat(dropdownTokens.paddingRight, ": 0.0625rem;\n ").concat(dropdownTokens.paddingBottom, ": 0.125rem;\n ").concat(dropdownTokens.paddingLeft, ": 0.125rem;\n");
4
+ var dropdownItemSizeCommon = /*#__PURE__*/"\n ".concat(dropdownTokens.itemWidth, ": auto;\n ").concat(dropdownTokens.itemHeight, ": auto;\n ").concat(dropdownTokens.itemMarginTop, ": 0;\n ").concat(dropdownTokens.itemMarginRight, ": 0;\n ").concat(dropdownTokens.itemMarginBottom, ": 0;\n ").concat(dropdownTokens.itemMarginLeft, ": 0;\n");
5
+ export var config = {
6
+ defaults: {
7
+ view: 'default',
8
+ size: 'm'
9
+ },
10
+ variations: {
11
+ size: {
12
+ xs: /*#__PURE__*/css(["", ";", ";", ":0.3125rem;", ":0.5rem;", ":0.3125rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
13
+ s: /*#__PURE__*/css(["", ";", ";", ":0.4375rem;", ":0.75rem;", ":0.4375rem;", ":0.75rem;", ":0.5rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
14
+ m: /*#__PURE__*/css(["", ";", ";", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":0.875rem;", ":0.625rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight),
15
+ l: /*#__PURE__*/css(["", ";", ";", ":0.8125rem;", ":1rem;", ":0.8125rem;", ":1rem;", ":0.75rem;", ":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);"], dropdownSizeCommon, dropdownItemSizeCommon, dropdownTokens.itemPaddingTop, dropdownTokens.itemPaddingRight, dropdownTokens.itemPaddingBottom, dropdownTokens.itemPaddingLeft, dropdownTokens.itemBorderRadius, dropdownTokens.itemFontFamily, dropdownTokens.itemFontSize, dropdownTokens.itemFontStyle, dropdownTokens.itemFontWeightBold, dropdownTokens.itemFontLetterSpacing, dropdownTokens.itemFontLineHeight)
16
+ },
17
+ view: {
18
+ "default": /*#__PURE__*/css(["", ":0.4;", ":var(--surface-solid-card);", ":var(--shadow-down-soft-s);", ":var(--plasma-colors-transparent);", ":var(--surface-transparent-secondary);", ":inherit;", ":inherit;", ":inherit;", ":inherit;", ":var(--text-primary);"], dropdownTokens.disabledOpacity, dropdownTokens.background, dropdownTokens.boxShadow, dropdownTokens.itemBackground, dropdownTokens.itemBackgroundHover, dropdownTokens.itemBackgroundSelected, dropdownTokens.itemColorSelected, dropdownTokens.itemBackgroundSelectedHover, dropdownTokens.itemColorSelectedHover, dropdownTokens.itemColor)
19
+ }
20
+ }
21
+ };
@@ -0,0 +1,7 @@
1
+ import { dropdownConfig, dropdownItemConfig } from '../../../../../components/Dropdown';
2
+ import { component, mergeConfig } from '../../../../../engines';
3
+ import { config } from './Dropdown.config';
4
+ var mergedConfig = /*#__PURE__*/mergeConfig(dropdownConfig, config);
5
+ export var Dropdown = /*#__PURE__*/component(mergedConfig);
6
+ var mergedItemConfig = /*#__PURE__*/mergeConfig(dropdownItemConfig);
7
+ export var DropdownItem = /*#__PURE__*/component(mergedItemConfig);