@pareto-engineering/design-system 4.0.0-alpha.5 → 4.0.0-alpha.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (374) hide show
  1. package/dist/cjs/a/AnimatedBlobs/AnimatedBlobs.js +90 -0
  2. package/dist/cjs/a/AnimatedBlobs/index.js +13 -0
  3. package/dist/cjs/a/AnimatedBlobs/styles.scss +87 -0
  4. package/dist/cjs/a/AnimatedGradient/AnimatedGradient.js +60 -0
  5. package/dist/cjs/a/AnimatedGradient/index.js +13 -0
  6. package/dist/cjs/a/AnimatedGradient/styles.scss +14 -0
  7. package/dist/cjs/a/AnimatedGradient/webGIRenderer.js +528 -0
  8. package/dist/cjs/a/AppContext/ContextProvider.js +0 -2
  9. package/dist/cjs/a/AppContext/useTheme.js +0 -4
  10. package/dist/cjs/a/BlurOverlay/BlurOverlay.js +59 -0
  11. package/dist/cjs/a/BlurOverlay/index.js +13 -0
  12. package/dist/cjs/a/BlurOverlay/styles.scss +31 -0
  13. package/dist/cjs/a/ContentTree/ContentTree.js +10 -4
  14. package/dist/cjs/a/ContentTree/common/Tree/Tree.js +12 -5
  15. package/dist/cjs/a/ContentTree/styles.scss +34 -11
  16. package/dist/cjs/a/Conversation/Conversation.js +11 -16
  17. package/dist/cjs/a/Conversation/common/Message/Message.js +15 -12
  18. package/dist/cjs/a/Conversation/styles.scss +56 -124
  19. package/dist/cjs/a/DotInfo/DotInfo.js +1 -1
  20. package/dist/cjs/a/Figure/Figure.js +1 -1
  21. package/dist/cjs/a/HamburgerButton/HamburgerButton.js +1 -1
  22. package/dist/cjs/a/IconList/IconList.js +1 -1
  23. package/dist/cjs/a/IconList/common/Item/Item.js +1 -1
  24. package/dist/cjs/a/Label/Label.js +13 -5
  25. package/dist/cjs/a/Label/styles.scss +4 -4
  26. package/dist/cjs/a/LoadingCircle/LoadingCircle.js +1 -1
  27. package/dist/cjs/a/MetaCard/MetaCard.js +65 -0
  28. package/dist/cjs/a/MetaCard/index.js +13 -0
  29. package/dist/cjs/a/MetaCard/styles.scss +45 -0
  30. package/dist/cjs/a/People/People.js +1 -1
  31. package/dist/cjs/a/People/common/Person/Person.js +5 -5
  32. package/dist/cjs/a/People/styles.scss +10 -4
  33. package/dist/cjs/a/Popover/Popover.js +3 -3
  34. package/dist/cjs/a/Popover/styles.scss +1 -1
  35. package/dist/cjs/a/ProgressBar/ProgressBar.js +1 -1
  36. package/dist/cjs/a/Quote/Quote.js +1 -1
  37. package/dist/cjs/a/Removable/Removable.js +72 -0
  38. package/dist/cjs/a/Removable/index.js +13 -0
  39. package/dist/cjs/a/Removable/styles.scss +33 -0
  40. package/dist/cjs/a/SVG/SVG.js +1 -1
  41. package/dist/cjs/a/SnapScroller/SnapScroller.js +1 -1
  42. package/dist/cjs/a/SnapScroller/styles.scss +46 -10
  43. package/dist/cjs/a/Spinner/Spinner.js +1 -1
  44. package/dist/cjs/a/TextSteps/TextSteps.js +70 -0
  45. package/dist/cjs/a/TextSteps/index.js +13 -0
  46. package/dist/cjs/a/TextSteps/styles.scss +29 -0
  47. package/dist/cjs/a/Timestamp/Timestamp.js +1 -1
  48. package/dist/cjs/a/Tip/Tip.js +86 -0
  49. package/dist/cjs/a/Tip/index.js +13 -0
  50. package/dist/cjs/a/Tip/styles.scss +16 -0
  51. package/dist/cjs/a/index.js +50 -1
  52. package/dist/cjs/b/Button/Button.js +22 -9
  53. package/dist/cjs/b/Button/common/Group/Group.js +57 -0
  54. package/dist/cjs/b/Button/common/Group/index.js +13 -0
  55. package/dist/cjs/b/Button/common/Group/styles.scss +11 -0
  56. package/dist/cjs/b/Button/common/index.js +12 -0
  57. package/dist/cjs/b/Button/styles.scss +41 -11
  58. package/dist/cjs/b/Card/Card.js +74 -0
  59. package/dist/cjs/b/Card/common/Group/Group.js +73 -0
  60. package/dist/cjs/b/Card/common/Group/index.js +13 -0
  61. package/dist/cjs/b/Card/common/Group/styles.scss +35 -0
  62. package/dist/cjs/b/Card/common/Section/Section.js +59 -0
  63. package/dist/cjs/b/Card/common/Section/index.js +13 -0
  64. package/dist/cjs/b/Card/common/index.js +19 -0
  65. package/dist/cjs/b/Card/index.js +13 -0
  66. package/dist/cjs/b/Card/styles.scss +57 -0
  67. package/dist/cjs/b/Logo/Logo.js +1 -1
  68. package/dist/cjs/b/Page/Page.js +15 -5
  69. package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +12 -2
  70. package/dist/cjs/b/Page/common/Section/Section.js +13 -3
  71. package/dist/cjs/b/Page/styles.scss +25 -4
  72. package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js +6 -2
  73. package/dist/cjs/b/SocialMediaButton/styles.scss +0 -14
  74. package/dist/cjs/b/ThemeSelector/ThemeSelector.js +17 -27
  75. package/dist/cjs/b/ThemeSelector/styles.scss +44 -6
  76. package/dist/cjs/b/Title/Title.js +1 -2
  77. package/dist/cjs/b/index.js +8 -1
  78. package/dist/cjs/c/ContentSlides/ContentSlides.js +1 -1
  79. package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -3
  80. package/dist/cjs/c/ContentSlides/common/Sidebar/Sidebar.js +0 -2
  81. package/dist/cjs/c/ContentSlides/styles.scss +2 -2
  82. package/dist/cjs/c/Modal/Modal.js +2 -2
  83. package/dist/cjs/c/Modal/common/ModalHeader/ModalHeader.js +1 -1
  84. package/dist/cjs/c/Modal/styles.scss +7 -12
  85. package/dist/cjs/c/Shortener/Shortener.js +1 -1
  86. package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js +1 -1
  87. package/dist/cjs/f/FormInput/FormInput.js +13 -3
  88. package/dist/cjs/f/common/Debugger/Debugger.js +1 -1
  89. package/dist/cjs/f/common/Description/Description.js +6 -5
  90. package/dist/cjs/f/common/InputWrapper/InputWrapper.js +74 -0
  91. package/dist/cjs/f/common/InputWrapper/index.js +13 -0
  92. package/dist/cjs/f/common/InputWrapper/styles.scss +13 -0
  93. package/dist/cjs/f/common/Label/Label.js +19 -5
  94. package/dist/cjs/f/common/Label/styles.scss +8 -2
  95. package/dist/cjs/f/common/index.js +8 -1
  96. package/dist/cjs/f/fields/Checkbox/Checkbox.js +41 -11
  97. package/dist/cjs/f/fields/Checkbox/styles.scss +7 -8
  98. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +56 -25
  99. package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js +2 -2
  100. package/dist/cjs/f/fields/ChoicesInput/styles.scss +52 -43
  101. package/dist/cjs/f/fields/EditorInput/EditorInput.js +222 -0
  102. package/dist/cjs/f/fields/EditorInput/common/Toolbar.js +257 -0
  103. package/dist/cjs/f/fields/EditorInput/common/TreeViewPlugin.js +19 -0
  104. package/dist/cjs/f/fields/EditorInput/common/index.js +20 -0
  105. package/dist/cjs/f/fields/EditorInput/index.js +13 -0
  106. package/dist/cjs/f/fields/EditorInput/styles.scss +147 -0
  107. package/dist/cjs/f/fields/LinkInput/LinkInput.js +164 -0
  108. package/dist/cjs/f/fields/LinkInput/index.js +13 -0
  109. package/dist/cjs/f/fields/LinkInput/styles.scss +89 -0
  110. package/dist/cjs/f/fields/QueryChoices/QueryChoices.js +27 -3
  111. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +36 -6
  112. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +44 -17
  113. package/dist/cjs/f/fields/QueryCombobox/common/Menu/Menu.js +1 -1
  114. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +36 -26
  115. package/dist/cjs/f/fields/QueryCombobox/styles.scss +64 -30
  116. package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +17 -3
  117. package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +42 -20
  118. package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js +5 -5
  119. package/dist/cjs/f/fields/RatingsInput/styles.scss +6 -13
  120. package/dist/cjs/f/fields/SelectInput/SelectInput.js +46 -16
  121. package/dist/cjs/f/fields/SelectInput/styles.scss +60 -26
  122. package/dist/cjs/f/fields/TextInput/TextInput.js +51 -18
  123. package/dist/cjs/f/fields/TextInput/styles.scss +56 -20
  124. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +44 -23
  125. package/dist/cjs/f/fields/TextareaInput/styles.scss +42 -25
  126. package/dist/cjs/f/fields/index.js +15 -1
  127. package/dist/cjs/form.scss +1 -1
  128. package/dist/cjs/r/SwitchRouteMap/SwitchRouteMap.js +1 -1
  129. package/dist/cjs/r/common/PrivateRoute/PrivateRoute.js +1 -1
  130. package/dist/cjs/test/QueryLoader/QueryLoader.js +2 -0
  131. package/dist/es/a/AnimatedBlobs/AnimatedBlobs.js +82 -0
  132. package/dist/es/a/AnimatedBlobs/index.js +1 -0
  133. package/dist/es/a/AnimatedBlobs/styles.scss +87 -0
  134. package/dist/es/a/AnimatedGradient/AnimatedGradient.js +52 -0
  135. package/dist/es/a/AnimatedGradient/index.js +1 -0
  136. package/dist/es/a/AnimatedGradient/styles.scss +14 -0
  137. package/dist/es/a/AnimatedGradient/webGIRenderer.js +492 -0
  138. package/dist/es/a/AppContext/useTheme.js +0 -4
  139. package/dist/es/a/BlurOverlay/BlurOverlay.js +51 -0
  140. package/dist/es/a/BlurOverlay/index.js +2 -0
  141. package/dist/es/a/BlurOverlay/styles.scss +31 -0
  142. package/dist/es/a/ContentTree/ContentTree.js +9 -3
  143. package/dist/es/a/ContentTree/common/Tree/Tree.js +12 -5
  144. package/dist/es/a/ContentTree/styles.scss +34 -11
  145. package/dist/es/a/Conversation/Conversation.js +10 -15
  146. package/dist/es/a/Conversation/common/Message/Message.js +15 -12
  147. package/dist/es/a/Conversation/styles.scss +56 -124
  148. package/dist/es/a/Label/Label.js +12 -4
  149. package/dist/es/a/Label/styles.scss +4 -4
  150. package/dist/es/a/MetaCard/MetaCard.js +57 -0
  151. package/dist/es/a/MetaCard/index.js +1 -0
  152. package/dist/es/a/MetaCard/styles.scss +45 -0
  153. package/dist/es/a/People/common/Person/Person.js +5 -5
  154. package/dist/es/a/People/styles.scss +10 -4
  155. package/dist/es/a/Popover/Popover.js +2 -2
  156. package/dist/es/a/Popover/styles.scss +1 -1
  157. package/dist/es/a/Removable/Removable.js +64 -0
  158. package/dist/es/a/Removable/index.js +2 -0
  159. package/dist/es/a/Removable/styles.scss +33 -0
  160. package/dist/es/a/SnapScroller/styles.scss +46 -10
  161. package/dist/es/a/TextSteps/TextSteps.js +61 -0
  162. package/dist/es/a/TextSteps/index.js +1 -0
  163. package/dist/es/a/TextSteps/styles.scss +29 -0
  164. package/dist/es/a/Tip/Tip.js +78 -0
  165. package/dist/es/a/Tip/index.js +2 -0
  166. package/dist/es/a/Tip/styles.scss +16 -0
  167. package/dist/es/a/index.js +8 -1
  168. package/dist/es/b/Button/Button.js +22 -8
  169. package/dist/es/b/Button/common/Group/Group.js +49 -0
  170. package/dist/es/b/Button/common/Group/index.js +1 -0
  171. package/dist/es/b/Button/common/Group/styles.scss +11 -0
  172. package/dist/es/b/Button/common/index.js +1 -0
  173. package/dist/es/b/Button/styles.scss +41 -11
  174. package/dist/es/b/Card/Card.js +66 -0
  175. package/dist/es/b/Card/common/Group/Group.js +65 -0
  176. package/dist/es/b/Card/common/Group/index.js +1 -0
  177. package/dist/es/b/Card/common/Group/styles.scss +35 -0
  178. package/dist/es/b/Card/common/Section/Section.js +48 -0
  179. package/dist/es/b/Card/common/Section/index.js +1 -0
  180. package/dist/es/b/Card/common/index.js +2 -0
  181. package/dist/es/b/Card/index.js +1 -0
  182. package/dist/es/b/Card/styles.scss +57 -0
  183. package/dist/es/b/Page/Page.js +14 -3
  184. package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +12 -2
  185. package/dist/es/b/Page/common/Section/Section.js +12 -2
  186. package/dist/es/b/Page/styles.scss +25 -4
  187. package/dist/es/b/SocialMediaButton/SocialMediaButton.js +5 -1
  188. package/dist/es/b/SocialMediaButton/styles.scss +0 -14
  189. package/dist/es/b/ThemeSelector/ThemeSelector.js +16 -27
  190. package/dist/es/b/ThemeSelector/styles.scss +44 -6
  191. package/dist/es/b/index.js +2 -1
  192. package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +1 -1
  193. package/dist/es/c/ContentSlides/styles.scss +2 -2
  194. package/dist/es/c/Modal/Modal.js +1 -1
  195. package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js +1 -1
  196. package/dist/es/c/Modal/styles.scss +7 -12
  197. package/dist/es/f/FormInput/FormInput.js +13 -1
  198. package/dist/es/f/common/Description/Description.js +5 -4
  199. package/dist/es/f/common/InputWrapper/InputWrapper.js +66 -0
  200. package/dist/es/f/common/InputWrapper/index.js +2 -0
  201. package/dist/es/f/common/InputWrapper/styles.scss +13 -0
  202. package/dist/es/f/common/Label/Label.js +18 -4
  203. package/dist/es/f/common/Label/styles.scss +8 -2
  204. package/dist/es/f/common/index.js +2 -1
  205. package/dist/es/f/fields/Checkbox/Checkbox.js +41 -11
  206. package/dist/es/f/fields/Checkbox/styles.scss +7 -8
  207. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +56 -25
  208. package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js +1 -1
  209. package/dist/es/f/fields/ChoicesInput/styles.scss +52 -43
  210. package/dist/es/f/fields/EditorInput/EditorInput.js +217 -0
  211. package/dist/es/f/fields/EditorInput/common/Toolbar.js +246 -0
  212. package/dist/es/f/fields/EditorInput/common/TreeViewPlugin.js +11 -0
  213. package/dist/es/f/fields/EditorInput/common/index.js +2 -0
  214. package/dist/es/f/fields/EditorInput/index.js +2 -0
  215. package/dist/es/f/fields/EditorInput/styles.scss +147 -0
  216. package/dist/es/f/fields/LinkInput/LinkInput.js +156 -0
  217. package/dist/es/f/fields/LinkInput/index.js +2 -0
  218. package/dist/es/f/fields/LinkInput/styles.scss +89 -0
  219. package/dist/es/f/fields/QueryChoices/QueryChoices.js +26 -2
  220. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +35 -5
  221. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +43 -16
  222. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +35 -25
  223. package/dist/es/f/fields/QueryCombobox/styles.scss +64 -30
  224. package/dist/es/f/fields/QuerySelect/QuerySelect.js +17 -3
  225. package/dist/es/f/fields/RatingsInput/RatingsInput.js +42 -20
  226. package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js +4 -4
  227. package/dist/es/f/fields/RatingsInput/styles.scss +6 -13
  228. package/dist/es/f/fields/SelectInput/SelectInput.js +46 -16
  229. package/dist/es/f/fields/SelectInput/styles.scss +60 -26
  230. package/dist/es/f/fields/TextInput/TextInput.js +51 -18
  231. package/dist/es/f/fields/TextInput/styles.scss +56 -20
  232. package/dist/es/f/fields/TextareaInput/TextareaInput.js +44 -23
  233. package/dist/es/f/fields/TextareaInput/styles.scss +42 -25
  234. package/dist/es/f/fields/index.js +3 -1
  235. package/dist/es/form.scss +1 -1
  236. package/package.json +18 -15
  237. package/src/stories/a/AppContext.stories.jsx +4 -2
  238. package/src/stories/a/BlurOverlay.stories.jsx +39 -0
  239. package/src/stories/a/Conversation.stories.jsx +11 -42
  240. package/src/stories/a/MetaCard.stories.jsx +35 -0
  241. package/src/stories/a/People.stories.jsx +22 -2
  242. package/src/stories/a/Quote.stories.jsx +1 -1
  243. package/src/stories/a/Removable.stories.jsx +22 -0
  244. package/src/stories/a/SnapScroller.stories.jsx +2 -2
  245. package/src/stories/a/Spinner.stories.jsx +1 -1
  246. package/src/stories/a/TextSteps.stories.jsx +19 -0
  247. package/src/stories/a/Tip.stories.jsx +29 -0
  248. package/src/stories/b/{Button.stories.jsx → Button/Button.stories.jsx} +18 -0
  249. package/src/stories/b/Button/Group.stories.jsx +35 -0
  250. package/src/stories/b/Card/Card.stories.jsx +59 -0
  251. package/src/stories/b/Card/Group.stories.jsx +59 -0
  252. package/src/stories/b/Page.stories.jsx +19 -3
  253. package/src/stories/b/SocialMediaButton.stories.jsx +4 -2
  254. package/src/stories/b/ThemeSelector.stories.jsx +1 -5
  255. package/src/stories/b/Title.stories.jsx +1 -1
  256. package/src/stories/c/ContentSlides.stories.jsx +1 -1
  257. package/src/stories/colors.js +22 -28
  258. package/src/stories/f/Checkbox.stories.jsx +22 -7
  259. package/src/stories/f/ChoicesInput.stories.jsx +21 -7
  260. package/src/stories/f/EditorInput.stories.jsx +88 -0
  261. package/src/stories/f/LinkInput.stories.jsx +100 -0
  262. package/src/stories/f/QueryChoices.stories.jsx +20 -4
  263. package/src/stories/f/QueryCombobox.stories.jsx +25 -13
  264. package/src/stories/f/QuerySelect.stories.jsx +20 -5
  265. package/src/stories/f/RatingsInput.stories.jsx +16 -2
  266. package/src/stories/f/SelectInput.stories.jsx +27 -5
  267. package/src/stories/f/TextInput.stories.jsx +33 -12
  268. package/src/stories/f/TextareaInput.stories.jsx +16 -2
  269. package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx +102 -0
  270. package/src/ui/a/AnimatedBlobs/index.js +1 -0
  271. package/src/ui/a/AnimatedBlobs/styles.scss +87 -0
  272. package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx +73 -0
  273. package/src/ui/a/AnimatedGradient/index.js +1 -0
  274. package/src/ui/a/AnimatedGradient/styles.scss +14 -0
  275. package/src/ui/a/AnimatedGradient/webGIRenderer.js +541 -0
  276. package/src/ui/a/AppContext/useTheme.js +0 -4
  277. package/src/ui/a/BlurOverlay/BlurOverlay.jsx +75 -0
  278. package/src/ui/a/BlurOverlay/index.js +2 -0
  279. package/src/ui/a/BlurOverlay/styles.scss +31 -0
  280. package/src/ui/a/ContentTree/ContentTree.jsx +8 -4
  281. package/src/ui/a/ContentTree/common/Tree/Tree.jsx +19 -7
  282. package/src/ui/a/ContentTree/styles.scss +34 -11
  283. package/src/ui/a/Conversation/Conversation.jsx +14 -18
  284. package/src/ui/a/Conversation/common/Message/Message.jsx +18 -11
  285. package/src/ui/a/Conversation/styles.scss +56 -124
  286. package/src/ui/a/Label/Label.jsx +11 -2
  287. package/src/ui/a/Label/styles.scss +4 -4
  288. package/src/ui/a/MetaCard/MetaCard.jsx +81 -0
  289. package/src/ui/a/MetaCard/index.js +1 -0
  290. package/src/ui/a/MetaCard/styles.scss +45 -0
  291. package/src/ui/a/People/common/Person/Person.jsx +5 -5
  292. package/src/ui/a/People/styles.scss +10 -4
  293. package/src/ui/a/Popover/Popover.jsx +2 -2
  294. package/src/ui/a/Popover/styles.scss +1 -1
  295. package/src/ui/a/Removable/Removable.jsx +85 -0
  296. package/src/ui/a/Removable/index.js +2 -0
  297. package/src/ui/a/Removable/styles.scss +33 -0
  298. package/src/ui/a/SnapScroller/styles.scss +46 -10
  299. package/src/ui/a/TextSteps/TextSteps.jsx +87 -0
  300. package/src/ui/a/TextSteps/index.js +1 -0
  301. package/src/ui/a/TextSteps/styles.scss +29 -0
  302. package/src/ui/a/Tip/Tip.jsx +105 -0
  303. package/src/ui/a/Tip/index.js +2 -0
  304. package/src/ui/a/Tip/styles.scss +16 -0
  305. package/src/ui/a/index.js +7 -0
  306. package/src/ui/b/Button/Button.jsx +28 -8
  307. package/src/ui/b/Button/common/Group/Group.jsx +71 -0
  308. package/src/ui/b/Button/common/Group/index.js +1 -0
  309. package/src/ui/b/Button/common/Group/styles.scss +11 -0
  310. package/src/ui/b/Button/common/index.js +1 -0
  311. package/src/ui/b/Button/styles.scss +41 -11
  312. package/src/ui/b/Card/Card.jsx +94 -0
  313. package/src/ui/b/Card/common/Group/Group.jsx +91 -0
  314. package/src/ui/b/Card/common/Group/index.js +1 -0
  315. package/src/ui/b/Card/common/Group/styles.scss +35 -0
  316. package/src/ui/b/Card/common/Section/Section.jsx +70 -0
  317. package/src/ui/b/Card/common/Section/index.js +1 -0
  318. package/src/ui/b/Card/common/index.js +2 -0
  319. package/src/ui/b/Card/index.js +1 -0
  320. package/src/ui/b/Card/styles.scss +57 -0
  321. package/src/ui/b/Page/Page.jsx +11 -1
  322. package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +14 -3
  323. package/src/ui/b/Page/common/Section/Section.jsx +16 -1
  324. package/src/ui/b/Page/styles.scss +25 -4
  325. package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx +5 -1
  326. package/src/ui/b/SocialMediaButton/styles.scss +0 -14
  327. package/src/ui/b/ThemeSelector/ThemeSelector.jsx +16 -29
  328. package/src/ui/b/ThemeSelector/styles.scss +44 -6
  329. package/src/ui/b/index.js +1 -0
  330. package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +1 -1
  331. package/src/ui/c/ContentSlides/styles.scss +2 -2
  332. package/src/ui/c/Modal/Modal.jsx +1 -1
  333. package/src/ui/c/Modal/common/ModalHeader/ModalHeader.jsx +1 -1
  334. package/src/ui/c/Modal/styles.scss +7 -12
  335. package/src/ui/f/FormInput/FormInput.jsx +23 -0
  336. package/src/ui/f/common/Description/Description.jsx +5 -4
  337. package/src/ui/f/common/InputWrapper/InputWrapper.jsx +89 -0
  338. package/src/ui/f/common/InputWrapper/index.js +2 -0
  339. package/src/ui/f/common/InputWrapper/styles.scss +13 -0
  340. package/src/ui/f/common/Label/Label.jsx +18 -2
  341. package/src/ui/f/common/Label/styles.scss +8 -2
  342. package/src/ui/f/common/index.js +1 -0
  343. package/src/ui/f/fields/Checkbox/Checkbox.jsx +65 -27
  344. package/src/ui/f/fields/Checkbox/styles.scss +7 -8
  345. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +83 -48
  346. package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx +10 -3
  347. package/src/ui/f/fields/ChoicesInput/styles.scss +52 -43
  348. package/src/ui/f/fields/EditorInput/EditorInput.jsx +272 -0
  349. package/src/ui/f/fields/EditorInput/common/Toolbar.jsx +356 -0
  350. package/src/ui/f/fields/EditorInput/common/TreeViewPlugin.jsx +16 -0
  351. package/src/ui/f/fields/EditorInput/common/index.jsx +2 -0
  352. package/src/ui/f/fields/EditorInput/index.js +2 -0
  353. package/src/ui/f/fields/EditorInput/styles.scss +147 -0
  354. package/src/ui/f/fields/LinkInput/LinkInput.jsx +197 -0
  355. package/src/ui/f/fields/LinkInput/index.js +2 -0
  356. package/src/ui/f/fields/LinkInput/styles.scss +89 -0
  357. package/src/ui/f/fields/QueryChoices/QueryChoices.jsx +28 -0
  358. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +37 -2
  359. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +68 -38
  360. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +81 -66
  361. package/src/ui/f/fields/QueryCombobox/styles.scss +64 -30
  362. package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +16 -1
  363. package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +55 -28
  364. package/src/ui/f/fields/RatingsInput/common/Rating/Rating.jsx +4 -4
  365. package/src/ui/f/fields/RatingsInput/styles.scss +6 -13
  366. package/src/ui/f/fields/SelectInput/SelectInput.jsx +88 -49
  367. package/src/ui/f/fields/SelectInput/styles.scss +60 -26
  368. package/src/ui/f/fields/TextInput/TextInput.jsx +71 -34
  369. package/src/ui/f/fields/TextInput/styles.scss +56 -20
  370. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +65 -43
  371. package/src/ui/f/fields/TextareaInput/styles.scss +42 -25
  372. package/src/ui/f/fields/index.js +2 -0
  373. package/src/ui/form.scss +1 -1
  374. package/tests/__snapshots__/Storyshots.test.js.snap +14253 -5695
@@ -0,0 +1,257 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _lexical = require("lexical");
9
+ var _list = require("@lexical/list");
10
+ var _selection = require("@lexical/selection");
11
+ var _link = require("@lexical/link");
12
+ var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
13
+ var _utils = require("@lexical/utils");
14
+ var _ = require("../../../..");
15
+ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+ /* eslint-disable import/no-extraneous-dependencies -- required here */
20
+
21
+ const baseClassName = _exports.default.base;
22
+ const componentClassName = 'toolbar';
23
+ const getSelectedNode = selection => {
24
+ const {
25
+ anchor,
26
+ focus
27
+ } = selection;
28
+ const anchorNode = selection.anchor.getNode();
29
+ const focusNode = selection.focus.getNode();
30
+ if (anchorNode === focusNode) {
31
+ return anchorNode;
32
+ }
33
+ const isBackward = selection.isBackward();
34
+ if (isBackward) {
35
+ return (0, _selection.$isAtNodeEnd)(focus) ? anchorNode : focusNode;
36
+ }
37
+ return (0, _selection.$isAtNodeEnd)(anchor) ? focusNode : anchorNode;
38
+ };
39
+ const defaultColor = 'var(--paragraph)';
40
+ const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
41
+ const Toolbar = () => {
42
+ const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
43
+ const [isBold, setIsBold] = (0, React.useState)(false);
44
+ const [isItalic, setIsItalic] = (0, React.useState)(false);
45
+ const [isStrikethrough, setIsStrikethrough] = (0, React.useState)(false);
46
+ const [blockType, setBlockType] = (0, React.useState)('paragraph');
47
+ const [isLink, setIsLink] = (0, React.useState)(false);
48
+ const [isUnderline, setIsUnderline] = (0, React.useState)(false);
49
+ const [color, setColor] = (0, React.useState)(defaultColor);
50
+ const colorMenuRef = (0, React.useRef)(false);
51
+ const formatBulletList = () => {
52
+ if (blockType !== 'ul') {
53
+ editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND);
54
+ } else {
55
+ editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
56
+ }
57
+ };
58
+ const formatNumberedList = () => {
59
+ if (blockType !== 'ol') {
60
+ editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND);
61
+ } else {
62
+ editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
63
+ }
64
+ };
65
+ const formatLink = (0, React.useCallback)(() => {
66
+ if (!isLink) {
67
+ // eslint-disable-next-line no-alert
68
+ const path = prompt('Enter the full URL. Ex: https://www.example.com');
69
+ editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, path);
70
+ } else {
71
+ editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
72
+ }
73
+ }, [editor, isLink]);
74
+ const updateToolbar = (0, React.useCallback)(() => {
75
+ const selection = (0, _lexical.$getSelection)();
76
+
77
+ // Check list selection
78
+ if ((0, _lexical.$isRangeSelection)(selection)) {
79
+ const anchorNode = selection.anchor.getNode();
80
+ const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
81
+ if ((0, _list.$isListNode)(element)) {
82
+ const parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.ListNode);
83
+ const type = parentList ? parentList.getTag() : element.getTag();
84
+ setBlockType(type);
85
+ } else {
86
+ setBlockType(element);
87
+ }
88
+
89
+ // Check nodes for color
90
+ const nodes = selection.getNodes().filter(node => node.getType() === 'text');
91
+ nodes.forEach(node => {
92
+ const style = node.getStyle();
93
+ const colorProperty = style.match(/color: ([^;]+)/);
94
+ if (colorProperty) {
95
+ setColor(colorProperty[1]);
96
+ return;
97
+ }
98
+ setColor(false);
99
+ });
100
+
101
+ // Check selection text styles
102
+ setIsBold(selection.hasFormat('bold'));
103
+ setIsItalic(selection.hasFormat('italic'));
104
+ setIsStrikethrough(selection.hasFormat('strikethrough'));
105
+ setIsUnderline(selection.hasFormat('underline'));
106
+ setIsLink(selection.hasFormat('link'));
107
+
108
+ // Check links
109
+ const node = getSelectedNode(selection);
110
+ const parent = node.getParent();
111
+ if ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
112
+ setIsLink(true);
113
+ } else {
114
+ setIsLink(false);
115
+ }
116
+ }
117
+ }, [editor]);
118
+ const UPDATE_COLOR_COMMAND = (0, _lexical.createCommand)();
119
+ editor.registerCommand(UPDATE_COLOR_COMMAND, payload => {
120
+ const selection = (0, _lexical.$getSelection)();
121
+ const nodes = selection?.extract().filter(node => node.getType() === 'text');
122
+ nodes?.forEach(node => {
123
+ const style = node.getStyle();
124
+ const colorProperty = style?.match(/color: ([^;]+)/);
125
+ if (colorProperty && color !== payload) {
126
+ node.setStyle(style.replace(colorProperty[0], `color: ${payload}`));
127
+ } else if (colorProperty) {
128
+ node.setStyle(`color: ${defaultColor}`);
129
+ } else {
130
+ node.setStyle(`color: ${payload}`);
131
+ }
132
+ });
133
+ }, _lexical.COMMAND_PRIORITY_NORMAL);
134
+ (0, React.useEffect)(() => (0, _utils.mergeRegister)(editor.registerUpdateListener(_ref => {
135
+ let {
136
+ editorState
137
+ } = _ref;
138
+ editorState.read(() => {
139
+ updateToolbar();
140
+ });
141
+ })), [updateToolbar, editor]);
142
+ const dispatchUpdateColor = (0, React.useCallback)((e, payload) => {
143
+ e.stopPropagation();
144
+ editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload);
145
+ }, [editor]);
146
+ return /*#__PURE__*/React.createElement("div", {
147
+ className: `${baseClassName} ${componentClassName}`
148
+ }, /*#__PURE__*/React.createElement("div", {
149
+ className: "group"
150
+ }, /*#__PURE__*/React.createElement("button", {
151
+ type: "button",
152
+ className: isBold ? 'active' : undefined,
153
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'bold')
154
+ }, /*#__PURE__*/React.createElement("span", {
155
+ className: "icon"
156
+ }, "|")), /*#__PURE__*/React.createElement("button", {
157
+ type: "button",
158
+ className: isItalic ? 'active' : undefined,
159
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'italic')
160
+ }, /*#__PURE__*/React.createElement("span", {
161
+ className: "icon"
162
+ }, "}")), /*#__PURE__*/React.createElement("button", {
163
+ type: "button",
164
+ className: isUnderline ? 'active' : undefined,
165
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'underline')
166
+ }, /*#__PURE__*/React.createElement("span", {
167
+ className: "icon"
168
+ }, "~")), /*#__PURE__*/React.createElement("button", {
169
+ type: "button",
170
+ className: isStrikethrough ? 'active' : undefined,
171
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'strikethrough')
172
+ }, /*#__PURE__*/React.createElement("span", {
173
+ className: "icon"
174
+ }, "?")), /*#__PURE__*/React.createElement("button", {
175
+ type: "button",
176
+ className: color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button',
177
+ onClick: () => editor.dispatchCommand(UPDATE_COLOR_COMMAND, color !== defaultColor ? defaultColor : color),
178
+ ref: colorMenuRef,
179
+ style: {
180
+ position: 'relative'
181
+ }
182
+ }, /*#__PURE__*/React.createElement("span", {
183
+ className: "icon",
184
+ style: {
185
+ color
186
+ }
187
+ }, "Q"), /*#__PURE__*/React.createElement(_.Popover, {
188
+ parentRef: colorMenuRef
189
+ }, /*#__PURE__*/React.createElement("div", {
190
+ className: "color-menu"
191
+ }, colorOptions.map(option => /*#__PURE__*/React.createElement("span", {
192
+ role: "button",
193
+ className: "icon color-option",
194
+ style: {
195
+ color: option
196
+ },
197
+ onClick: e => dispatchUpdateColor(e, option),
198
+ onKeyDown: e => dispatchUpdateColor(e, option),
199
+ tabIndex: 0,
200
+ key: option
201
+ }, "o"))))), /*#__PURE__*/React.createElement("button", {
202
+ type: "button",
203
+ className: isLink ? 'active' : undefined,
204
+ onClick: () => formatLink()
205
+ }, /*#__PURE__*/React.createElement("span", {
206
+ className: "icon"
207
+ }, "]")), /*#__PURE__*/React.createElement("button", {
208
+ type: "button",
209
+ className: blockType === 'ul' ? 'active' : undefined,
210
+ onClick: () => formatBulletList()
211
+ }, /*#__PURE__*/React.createElement("span", {
212
+ className: "icon"
213
+ }, ".")), /*#__PURE__*/React.createElement("button", {
214
+ type: "button",
215
+ className: blockType === 'ol' ? 'active' : undefined,
216
+ onClick: () => formatNumberedList()
217
+ }, /*#__PURE__*/React.createElement("span", {
218
+ className: "icon"
219
+ }, "-"))), /*#__PURE__*/React.createElement("div", {
220
+ className: "group"
221
+ }, /*#__PURE__*/React.createElement("button", {
222
+ type: "button",
223
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'left')
224
+ }, /*#__PURE__*/React.createElement("span", {
225
+ className: "icon"
226
+ }, "^")), /*#__PURE__*/React.createElement("button", {
227
+ type: "button",
228
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'center')
229
+ }, /*#__PURE__*/React.createElement("span", {
230
+ className: "icon"
231
+ }, "_")), /*#__PURE__*/React.createElement("button", {
232
+ type: "button",
233
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'right')
234
+ }, /*#__PURE__*/React.createElement("span", {
235
+ className: "icon"
236
+ }, "`")), /*#__PURE__*/React.createElement("button", {
237
+ type: "button",
238
+ onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'justify')
239
+ }, /*#__PURE__*/React.createElement("span", {
240
+ className: "icon"
241
+ }, "{"))), /*#__PURE__*/React.createElement("div", {
242
+ className: "group"
243
+ }, /*#__PURE__*/React.createElement("button", {
244
+ type: "button",
245
+ onClick: () => editor.dispatchCommand(_lexical.UNDO_COMMAND)
246
+ }, /*#__PURE__*/React.createElement("span", {
247
+ className: "icon"
248
+ }, "\\")), /*#__PURE__*/React.createElement("button", {
249
+ type: "button",
250
+ className: "flip",
251
+ onClick: () => editor.dispatchCommand(_lexical.REDO_COMMAND)
252
+ }, /*#__PURE__*/React.createElement("span", {
253
+ className: "icon"
254
+ }, "\\"))));
255
+ };
256
+ var _default = Toolbar;
257
+ exports.default = _default;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
9
+ var _LexicalTreeView = require("@lexical/react/LexicalTreeView");
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ const TreeViewPlugin = () => {
12
+ const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
13
+ return /*#__PURE__*/_react.default.createElement(_LexicalTreeView.TreeView, {
14
+ viewClassName: "tree-view-output",
15
+ editor: editor
16
+ });
17
+ };
18
+ var _default = TreeViewPlugin;
19
+ exports.default = _default;
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Toolbar", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _Toolbar.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "TreeViewPlugin", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _TreeViewPlugin.default;
16
+ }
17
+ });
18
+ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
19
+ var _TreeViewPlugin = _interopRequireDefault(require("./TreeViewPlugin"));
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "EditorInput", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _EditorInput.default;
10
+ }
11
+ });
12
+ var _EditorInput = _interopRequireDefault(require("./EditorInput"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,147 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+ /* stylelint-disable max-nesting-depth -- required here */
3
+
4
+ @use "@pareto-engineering/bem";
5
+ @use "@pareto-engineering/styles/src/mixins";
6
+ @use "@pareto-engineering/styles/src/globals" as *;
7
+
8
+ $default-gap: calc(var(--gap) / 2);
9
+ $default-padding: .55em .75em;
10
+ $default-border: 1px solid var(--outline-inputs);
11
+ $default-input-border-radius: var(--theme-default-input-border-radius);
12
+ $default-border: var(--theme-default-input-border);
13
+ $focus-border: var(--theme-focus-input-border);
14
+ $active-background: var(--hard-background-inputs);
15
+ $default-background: var(--background-inputs);
16
+ $default-icon-color: var(--on-background-inputs);
17
+ $disabled-background: var(--background-inputs-30);
18
+ $default-color-menu-padding: .5em .25em;
19
+
20
+ .#{bem.$base}.editor-input {
21
+ &.#{bem.$base}.input-wrapper {
22
+ display: flex;
23
+ flex-direction: column;
24
+
25
+ > .#{bem.$base}.toolbar {
26
+ display: flex;
27
+ gap: $default-gap;
28
+ margin-bottom: .25em;
29
+
30
+ > .group {
31
+ > button {
32
+ background: $default-background;
33
+ border: $default-border;
34
+ color: $default-icon-color;
35
+ padding: $default-padding;
36
+
37
+ &.active {
38
+ background-color: $active-background;
39
+ }
40
+ }
41
+ }
42
+
43
+ .flip {
44
+ transform: scaleX(-1);
45
+ }
46
+ }
47
+
48
+ &:not(.disabled) {
49
+ &:hover,
50
+ &:focus,
51
+ &:active {
52
+ > .textarea {
53
+ border: $focus-border;
54
+ }
55
+ }
56
+ }
57
+
58
+ &.disabled {
59
+ > .textarea {
60
+ background: $disabled-background;
61
+ color: var(--metadata);
62
+ cursor: not-allowed;
63
+ }
64
+ }
65
+
66
+ .color-menu-button {
67
+ &:hover {
68
+ > .#{bem.$base}.popover {
69
+ display: block;
70
+ }
71
+ }
72
+
73
+ > .#{bem.$base}.popover {
74
+ padding: $default-color-menu-padding;
75
+
76
+ .color-menu {
77
+ display: flex;
78
+ flex-wrap: wrap;
79
+ gap: calc($default-gap / 2);
80
+ justify-content: center;
81
+ max-width: 10em;
82
+ min-width: 5em;
83
+ }
84
+
85
+ .color-option:hover {
86
+ opacity: .5;
87
+ }
88
+ }
89
+ }
90
+
91
+ > .content-editable {
92
+ background: $default-background;
93
+ border: $default-border;
94
+ border-radius: $default-input-border-radius;
95
+ color: var(--y);
96
+ height: var(--rows);
97
+ outline: none;
98
+ overflow: auto;
99
+ padding: $default-padding;
100
+ resize: var(--resize);
101
+ width: 100%;
102
+
103
+ li:has(ol, ul) {
104
+ list-style-type: none;
105
+ }
106
+
107
+ p,
108
+ span,
109
+ strong,
110
+ em,
111
+ li {
112
+ &.underlined {
113
+ text-decoration: underline;
114
+
115
+ &.strikethrough {
116
+ text-decoration: underline line-through;
117
+ }
118
+ }
119
+
120
+ &.strikethrough {
121
+ text-decoration: line-through;
122
+ }
123
+
124
+ &.italic {
125
+ font-style: italic;
126
+ }
127
+ }
128
+
129
+ :first-child {
130
+ margin-top: 0;
131
+ }
132
+
133
+ &::placeholder {
134
+ color: var(--metadata);
135
+ }
136
+ }
137
+ }
138
+
139
+ > .tree-view-output {
140
+ background: $default-background;
141
+ border: $default-border;
142
+ border-radius: $default-input-border-radius;
143
+ max-height: 20em;
144
+ overflow: auto;
145
+ padding: $default-padding;
146
+ }
147
+ }
@@ -0,0 +1,164 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var React = _interopRequireWildcard(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
10
+ var _formik = require("formik");
11
+ var _common = require("../../common");
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
14
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */
16
+ // Local Definitions
17
+
18
+ const baseClassName = _exports.default.base;
19
+ const componentClassName = 'link-input';
20
+
21
+ /**
22
+ * This is the component description.
23
+ */
24
+ const LinkInput = _ref => {
25
+ let {
26
+ id,
27
+ className: userClassName,
28
+ style,
29
+ name,
30
+ label,
31
+ color,
32
+ labelColor,
33
+ validate,
34
+ description,
35
+ disabled,
36
+ placeholder,
37
+ optional,
38
+ autoComplete,
39
+ labelSpan,
40
+ desktopLabelSpan,
41
+ inputSpan,
42
+ desktopInputSpan
43
+ // ...otherProps
44
+ } = _ref;
45
+ (0, React.useInsertionEffect)(() => {
46
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
47
+ }, []);
48
+ const [field] = (0, _formik.useField)({
49
+ name,
50
+ validate
51
+ });
52
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_common.FormLabel, {
53
+ name: name,
54
+ color: labelColor,
55
+ optional: optional,
56
+ columnSpan: labelSpan,
57
+ desktopColumnSpan: desktopLabelSpan
58
+ // {...otherProps}
59
+ }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
60
+ id: id,
61
+ className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
62
+ style: style,
63
+ columnSpan: inputSpan,
64
+ desktopColumnSpan: desktopInputSpan
65
+ }, /*#__PURE__*/React.createElement("div", {
66
+ className: "input-link-wrapper"
67
+ }, /*#__PURE__*/React.createElement("input", _extends({
68
+ id: name,
69
+ className: "input",
70
+ type: "text",
71
+ disabled: disabled,
72
+ placeholder: placeholder,
73
+ autoComplete: autoComplete
74
+ }, field)), /*#__PURE__*/React.createElement("a", {
75
+ href: field.value,
76
+ target: "_blank",
77
+ rel: "noopener noreferrer"
78
+ }, "\u2192")), /*#__PURE__*/React.createElement(_common.FormDescription, {
79
+ className: "s-1",
80
+ description: description,
81
+ name: name
82
+ })));
83
+ };
84
+ LinkInput.propTypes = {
85
+ /**
86
+ * The HTML id for this element
87
+ */
88
+ id: _propTypes.default.string,
89
+ /**
90
+ * The HTML class names for this element
91
+ */
92
+ className: _propTypes.default.string,
93
+ /**
94
+ * The React-written, css properties for this element.
95
+ */
96
+ style: _propTypes.default.objectOf(_propTypes.default.string),
97
+ /**
98
+ * The input name (html - and Formik state)
99
+ */
100
+ name: _propTypes.default.string.isRequired,
101
+ /**
102
+ * The input label
103
+ */
104
+ label: _propTypes.default.string.isRequired,
105
+ /**
106
+ * The input label color
107
+ */
108
+ labelColor: _propTypes.default.string,
109
+ /**
110
+ * The input field validator function
111
+ */
112
+ validate: _propTypes.default.func,
113
+ /**
114
+ * If the slide will only have one input
115
+ */
116
+ oneInputLabel: _propTypes.default.bool,
117
+ /**
118
+ * Input description
119
+ */
120
+ description: _propTypes.default.string,
121
+ /**
122
+ * Whether the text input should be disabled
123
+ */
124
+ disabled: _propTypes.default.bool,
125
+ /**
126
+ * The placeholder text for the input
127
+ */
128
+ placeholder: _propTypes.default.string,
129
+ /**
130
+ * The text input color
131
+ */
132
+ color: _propTypes.default.string,
133
+ /**
134
+ * Whether the input is optional or not
135
+ */
136
+ optional: _propTypes.default.bool,
137
+ /**
138
+ * The autoComplete value that the browser should watch for the input
139
+ * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
140
+ */
141
+ autoComplete: _propTypes.default.string,
142
+ /**
143
+ * The number of columns the label should span
144
+ */
145
+ labelSpan: _propTypes.default.number,
146
+ /**
147
+ * The number of columns the input should span
148
+ */
149
+ inputSpan: _propTypes.default.number,
150
+ /**
151
+ * The number of columns the label should span on desktop
152
+ */
153
+ desktopLabelSpan: _propTypes.default.number,
154
+ /**
155
+ * The number of columns the input should span on desktop
156
+ */
157
+ desktopInputSpan: _propTypes.default.number
158
+ };
159
+ LinkInput.defaultProps = {
160
+ color: 'paragraph',
161
+ disabled: false
162
+ };
163
+ var _default = /*#__PURE__*/(0, React.memo)(LinkInput);
164
+ exports.default = _default;
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "LinkInput", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _LinkInput.default;
10
+ }
11
+ });
12
+ var _LinkInput = _interopRequireDefault(require("./LinkInput"));
13
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }