@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.7.0

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 (445) hide show
  1. package/jsx/build/AppHeader/AppHeader.stories.d.ts.map +1 -1
  2. package/jsx/build/AppHeader/AppHeader.stories.jsx +6 -1
  3. package/jsx/build/AppHeader/AppHeader.stories.jsx.map +1 -1
  4. package/jsx/build/AppShell/AppShell.mocks.d.ts +2 -0
  5. package/jsx/build/AppShell/AppShell.mocks.d.ts.map +1 -1
  6. package/jsx/build/AppShell/{AppShell.mocks.js → AppShell.mocks.jsx} +22 -1
  7. package/jsx/build/AppShell/AppShell.mocks.jsx.map +1 -0
  8. package/jsx/build/AppShell/AppShell.stories.d.ts +2 -4
  9. package/jsx/build/AppShell/AppShell.stories.d.ts.map +1 -1
  10. package/jsx/build/AppShell/AppShell.stories.jsx +20 -30
  11. package/jsx/build/AppShell/AppShell.stories.jsx.map +1 -1
  12. package/jsx/build/FlowModeller/FlowModeller.mocks.jsx +6 -6
  13. package/jsx/build/FlowModeller/FlowModeller.mocks.jsx.map +1 -1
  14. package/jsx/build/ItemLibrary/LibraryPicker.mocks.d.ts +1 -5
  15. package/jsx/build/ItemLibrary/LibraryPicker.mocks.d.ts.map +1 -1
  16. package/jsx/build/ItemLibrary/LibraryPicker.mocks.js +5 -10
  17. package/jsx/build/ItemLibrary/LibraryPicker.mocks.js.map +1 -1
  18. package/jsx/build/LifeCycle/LifeCycle.mocks.d.ts +3 -0
  19. package/jsx/build/LifeCycle/LifeCycle.mocks.d.ts.map +1 -1
  20. package/jsx/build/LifeCycle/LifeCycle.mocks.js +106 -18
  21. package/jsx/build/LifeCycle/LifeCycle.mocks.js.map +1 -1
  22. package/jsx/build/LifeCycle/LifeCycle.stories.d.ts.map +1 -1
  23. package/jsx/build/LifeCycle/LifeCycle.stories.jsx +111 -27
  24. package/jsx/build/LifeCycle/LifeCycle.stories.jsx.map +1 -1
  25. package/jsx/build/LifeCycle/utils.d.ts.map +1 -1
  26. package/jsx/build/LifeCycle/utils.js +5 -4
  27. package/jsx/build/LifeCycle/utils.js.map +1 -1
  28. package/jsx/build/ObjectPreview/ObjectPreview.mocks.d.ts +4 -0
  29. package/jsx/build/ObjectPreview/ObjectPreview.mocks.d.ts.map +1 -0
  30. package/jsx/build/ObjectPreview/ObjectPreview.mocks.jsx +9 -0
  31. package/jsx/build/ObjectPreview/ObjectPreview.mocks.jsx.map +1 -0
  32. package/jsx/build/ObjectPreview/ObjectPreview.stories.d.ts +8 -0
  33. package/jsx/build/ObjectPreview/ObjectPreview.stories.d.ts.map +1 -0
  34. package/jsx/build/ObjectPreview/ObjectPreview.stories.jsx +93 -0
  35. package/jsx/build/ObjectPreview/ObjectPreview.stories.jsx.map +1 -0
  36. package/jsx/build/ObjectPreview/ObjectPreview.styles.d.ts +3 -0
  37. package/jsx/build/ObjectPreview/ObjectPreview.styles.d.ts.map +1 -0
  38. package/jsx/build/ObjectPreview/ObjectPreview.styles.js +22 -0
  39. package/jsx/build/ObjectPreview/ObjectPreview.styles.js.map +1 -0
  40. package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts +7 -1
  41. package/jsx/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  42. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx +59 -43
  43. package/jsx/build/ObjectSelect/ObjectSelect.mocks.jsx.map +1 -1
  44. package/jsx/build/ObjectSelect/ObjectSelect.stories.d.ts.map +1 -1
  45. package/jsx/build/ObjectSelect/ObjectSelect.stories.jsx +37 -5
  46. package/jsx/build/ObjectSelect/ObjectSelect.stories.jsx.map +1 -1
  47. package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts +10 -9
  48. package/jsx/build/PageTemplates/GalleryPage.mocks.d.ts.map +1 -1
  49. package/jsx/build/PageTemplates/GalleryPage.mocks.jsx +7 -9
  50. package/jsx/build/PageTemplates/GalleryPage.mocks.jsx.map +1 -1
  51. package/jsx/build/PageTemplates/GalleryPage.stories.d.ts +0 -1
  52. package/jsx/build/PageTemplates/GalleryPage.stories.d.ts.map +1 -1
  53. package/jsx/build/PageTemplates/GalleryPage.stories.jsx +12 -14
  54. package/jsx/build/PageTemplates/GalleryPage.stories.jsx.map +1 -1
  55. package/jsx/build/PageTemplates/PageTemplates.mocks.d.ts +2 -1
  56. package/jsx/build/PageTemplates/PageTemplates.mocks.d.ts.map +1 -1
  57. package/jsx/build/PageTemplates/PageTemplates.mocks.jsx +17 -2
  58. package/jsx/build/PageTemplates/PageTemplates.mocks.jsx.map +1 -1
  59. package/jsx/build/PageTemplates/PageTemplates.stories.d.ts +2 -4
  60. package/jsx/build/PageTemplates/PageTemplates.stories.d.ts.map +1 -1
  61. package/jsx/build/PageTemplates/PageTemplates.stories.jsx +192 -128
  62. package/jsx/build/PageTemplates/PageTemplates.stories.jsx.map +1 -1
  63. package/jsx/core/CreditCard/CreditCard.stories.d.ts +10 -0
  64. package/jsx/core/CreditCard/CreditCard.stories.d.ts.map +1 -0
  65. package/jsx/core/CreditCard/CreditCard.stories.jsx +10 -0
  66. package/jsx/core/CreditCard/CreditCard.stories.jsx.map +1 -0
  67. package/jsx/rte/RichTextEditor/RichTextEditor.mocks.jsx.map +1 -1
  68. package/jsx/social/Email/Email.mocks.d.ts +3 -3
  69. package/jsx/social/Email/Email.mocks.d.ts.map +1 -1
  70. package/jsx/social/Email/Email.mocks.jsx +17 -7
  71. package/jsx/social/Email/Email.mocks.jsx.map +1 -1
  72. package/jsx/social/Email/Email.stories.d.ts.map +1 -1
  73. package/jsx/social/Email/Email.stories.jsx +11 -24
  74. package/jsx/social/Email/Email.stories.jsx.map +1 -1
  75. package/jsx/social/Feed/Feed.mocks.d.ts.map +1 -1
  76. package/jsx/social/Feed/Feed.mocks.jsx.map +1 -1
  77. package/jsx/work/Glimpse/Glimpse.stories.d.ts.map +1 -1
  78. package/jsx/work/Glimpse/Glimpse.stories.jsx.map +1 -1
  79. package/lib/build/AppHeader/AppHeader.stories.d.ts.map +1 -1
  80. package/lib/build/AppHeader/AppHeader.stories.js +7 -2
  81. package/lib/build/AppHeader/AppHeader.stories.js.map +1 -1
  82. package/lib/build/AppShell/AppShell.mocks.d.ts +2 -0
  83. package/lib/build/AppShell/AppShell.mocks.d.ts.map +1 -1
  84. package/lib/build/AppShell/AppShell.mocks.js +20 -0
  85. package/lib/build/AppShell/AppShell.mocks.js.map +1 -1
  86. package/lib/build/AppShell/AppShell.stories.d.ts +2 -4
  87. package/lib/build/AppShell/AppShell.stories.d.ts.map +1 -1
  88. package/lib/build/AppShell/AppShell.stories.js +21 -29
  89. package/lib/build/AppShell/AppShell.stories.js.map +1 -1
  90. package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.js +2 -2
  91. package/lib/build/DynamicContentEditor/DynamicContentEditor.stories.js.map +1 -1
  92. package/lib/build/DynamicContentEditor/FieldSelector.js +1 -1
  93. package/lib/build/DynamicContentEditor/FieldSelector.js.map +1 -1
  94. package/lib/build/FlowModeller/FlowModeller.mocks.js +11 -11
  95. package/lib/build/FlowModeller/FlowModeller.mocks.js.map +1 -1
  96. package/lib/build/FlowModeller/FlowModeller.stories.js +6 -6
  97. package/lib/build/FlowModeller/FlowModeller.stories.js.map +1 -1
  98. package/lib/build/ItemLibrary/LibraryPicker.mocks.d.ts +1 -5
  99. package/lib/build/ItemLibrary/LibraryPicker.mocks.d.ts.map +1 -1
  100. package/lib/build/ItemLibrary/LibraryPicker.mocks.js +5 -10
  101. package/lib/build/ItemLibrary/LibraryPicker.mocks.js.map +1 -1
  102. package/lib/build/ItemLibrary/LibraryPicker.stories.js +1 -1
  103. package/lib/build/ItemLibrary/LibraryPicker.stories.js.map +1 -1
  104. package/lib/build/LifeCycle/LifeCycle.mocks.d.ts +3 -0
  105. package/lib/build/LifeCycle/LifeCycle.mocks.d.ts.map +1 -1
  106. package/lib/build/LifeCycle/LifeCycle.mocks.js +106 -18
  107. package/lib/build/LifeCycle/LifeCycle.mocks.js.map +1 -1
  108. package/lib/build/LifeCycle/LifeCycle.stories.d.ts.map +1 -1
  109. package/lib/build/LifeCycle/LifeCycle.stories.js +115 -31
  110. package/lib/build/LifeCycle/LifeCycle.stories.js.map +1 -1
  111. package/lib/build/LifeCycle/utils.d.ts.map +1 -1
  112. package/lib/build/LifeCycle/utils.js +5 -4
  113. package/lib/build/LifeCycle/utils.js.map +1 -1
  114. package/lib/build/ObjectPreview/ObjectPreview.mocks.d.ts +4 -0
  115. package/lib/build/ObjectPreview/ObjectPreview.mocks.d.ts.map +1 -0
  116. package/lib/build/ObjectPreview/ObjectPreview.mocks.js +8 -0
  117. package/lib/build/ObjectPreview/ObjectPreview.mocks.js.map +1 -0
  118. package/lib/build/ObjectPreview/ObjectPreview.stories.d.ts +8 -0
  119. package/lib/build/ObjectPreview/ObjectPreview.stories.d.ts.map +1 -0
  120. package/lib/build/ObjectPreview/ObjectPreview.stories.js +90 -0
  121. package/lib/build/ObjectPreview/ObjectPreview.stories.js.map +1 -0
  122. package/lib/build/ObjectPreview/ObjectPreview.styles.d.ts +3 -0
  123. package/lib/build/ObjectPreview/ObjectPreview.styles.d.ts.map +1 -0
  124. package/lib/build/ObjectPreview/ObjectPreview.styles.js +22 -0
  125. package/lib/build/ObjectPreview/ObjectPreview.styles.js.map +1 -0
  126. package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts +7 -1
  127. package/lib/build/ObjectSelect/ObjectSelect.mocks.d.ts.map +1 -1
  128. package/lib/build/ObjectSelect/ObjectSelect.mocks.js +62 -30
  129. package/lib/build/ObjectSelect/ObjectSelect.mocks.js.map +1 -1
  130. package/lib/build/ObjectSelect/ObjectSelect.stories.d.ts.map +1 -1
  131. package/lib/build/ObjectSelect/ObjectSelect.stories.js +34 -6
  132. package/lib/build/ObjectSelect/ObjectSelect.stories.js.map +1 -1
  133. package/lib/build/PageTemplates/GalleryPage.mocks.d.ts +10 -9
  134. package/lib/build/PageTemplates/GalleryPage.mocks.d.ts.map +1 -1
  135. package/lib/build/PageTemplates/GalleryPage.mocks.js +8 -10
  136. package/lib/build/PageTemplates/GalleryPage.mocks.js.map +1 -1
  137. package/lib/build/PageTemplates/GalleryPage.stories.d.ts +0 -1
  138. package/lib/build/PageTemplates/GalleryPage.stories.d.ts.map +1 -1
  139. package/lib/build/PageTemplates/GalleryPage.stories.js +13 -15
  140. package/lib/build/PageTemplates/GalleryPage.stories.js.map +1 -1
  141. package/lib/build/PageTemplates/PageTemplates.mocks.d.ts +2 -1
  142. package/lib/build/PageTemplates/PageTemplates.mocks.d.ts.map +1 -1
  143. package/lib/build/PageTemplates/PageTemplates.mocks.js +16 -5
  144. package/lib/build/PageTemplates/PageTemplates.mocks.js.map +1 -1
  145. package/lib/build/PageTemplates/PageTemplates.stories.d.ts +2 -4
  146. package/lib/build/PageTemplates/PageTemplates.stories.d.ts.map +1 -1
  147. package/lib/build/PageTemplates/PageTemplates.stories.js +217 -154
  148. package/lib/build/PageTemplates/PageTemplates.stories.js.map +1 -1
  149. package/lib/build/Workbench/Workbench.stories.js +11 -11
  150. package/lib/build/Workbench/Workbench.stories.js.map +1 -1
  151. package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js +7 -7
  152. package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js.map +1 -1
  153. package/lib/core/AppShell/AppShell.mocks.js +5 -5
  154. package/lib/core/AppShell/AppShell.mocks.js.map +1 -1
  155. package/lib/core/AppShell/AppShell.stories.js +8 -8
  156. package/lib/core/AppShell/AppShell.stories.js.map +1 -1
  157. package/lib/core/Avatar/Avatar.stories.js +6 -6
  158. package/lib/core/Avatar/Avatar.stories.js.map +1 -1
  159. package/lib/core/Backdrop/Backdrop.stories.js +2 -2
  160. package/lib/core/Backdrop/Backdrop.stories.js.map +1 -1
  161. package/lib/core/Badges/Alert.stories.js +1 -1
  162. package/lib/core/Badges/Alert.stories.js.map +1 -1
  163. package/lib/core/Badges/Count.stories.js +1 -1
  164. package/lib/core/Badges/Count.stories.js.map +1 -1
  165. package/lib/core/Badges/Selection.stories.js +1 -1
  166. package/lib/core/Badges/Selection.stories.js.map +1 -1
  167. package/lib/core/Badges/Status.stories.js +2 -2
  168. package/lib/core/Badges/Status.stories.js.map +1 -1
  169. package/lib/core/Badges/Tag.stories.js +1 -1
  170. package/lib/core/Badges/Tag.stories.js.map +1 -1
  171. package/lib/core/Banner/Banner.mocks.js +1 -1
  172. package/lib/core/Banner/Banner.mocks.js.map +1 -1
  173. package/lib/core/Banner/Banner.stories.js +11 -11
  174. package/lib/core/Banner/Banner.stories.js.map +1 -1
  175. package/lib/core/Boolean/BooleanDisplay.stories.js +1 -1
  176. package/lib/core/Boolean/BooleanDisplay.stories.js.map +1 -1
  177. package/lib/core/Breadcrumbs/Breadcrumbs.stories.js +2 -2
  178. package/lib/core/Breadcrumbs/Breadcrumbs.stories.js.map +1 -1
  179. package/lib/core/Button/Button.stories.js +7 -7
  180. package/lib/core/Button/Button.stories.js.map +1 -1
  181. package/lib/core/Card/Card.stories.js +4 -4
  182. package/lib/core/Card/Card.stories.js.map +1 -1
  183. package/lib/core/Checkbox/Checkbox.stories.js +3 -3
  184. package/lib/core/Checkbox/Checkbox.stories.js.map +1 -1
  185. package/lib/core/CheckboxGroup/CheckboxGroup.stories.js +3 -3
  186. package/lib/core/CheckboxGroup/CheckboxGroup.stories.js.map +1 -1
  187. package/lib/core/ColorPicker/ColorPicker.stories.js +5 -5
  188. package/lib/core/ColorPicker/ColorPicker.stories.js.map +1 -1
  189. package/lib/core/ComboBox/ComboBox.stories.js +6 -6
  190. package/lib/core/ComboBox/ComboBox.stories.js.map +1 -1
  191. package/lib/core/Configuration/Configuration.mocks.js +1 -1
  192. package/lib/core/Configuration/Configuration.mocks.js.map +1 -1
  193. package/lib/core/Configuration/Configuration.stories.js +10 -10
  194. package/lib/core/Configuration/Configuration.stories.js.map +1 -1
  195. package/lib/core/CreditCard/CreditCard.stories.d.ts +10 -0
  196. package/lib/core/CreditCard/CreditCard.stories.d.ts.map +1 -0
  197. package/lib/core/CreditCard/CreditCard.stories.js +11 -0
  198. package/lib/core/CreditCard/CreditCard.stories.js.map +1 -0
  199. package/lib/core/Currency/Currency.stories.js +2 -2
  200. package/lib/core/Currency/Currency.stories.js.map +1 -1
  201. package/lib/core/DateTime/DateTime.stories.js +9 -9
  202. package/lib/core/DateTime/DateTime.stories.js.map +1 -1
  203. package/lib/core/DateTime/DateTimeDisplay.stories.js +2 -2
  204. package/lib/core/DateTime/DateTimeDisplay.stories.js.map +1 -1
  205. package/lib/core/DateTime/DateTimePicker.stories.js +2 -2
  206. package/lib/core/DateTime/DateTimePicker.stories.js.map +1 -1
  207. package/lib/core/Drawer/Drawer.stories.js +4 -4
  208. package/lib/core/Drawer/Drawer.stories.js.map +1 -1
  209. package/lib/core/Email/EmailDisplay.stories.js +1 -1
  210. package/lib/core/Email/EmailDisplay.stories.js.map +1 -1
  211. package/lib/core/EmojiPicker/EmojiPicker.stories.js +3 -3
  212. package/lib/core/EmojiPicker/EmojiPicker.stories.js.map +1 -1
  213. package/lib/core/EmptyState/EmptyState.stories.js +1 -1
  214. package/lib/core/EmptyState/EmptyState.stories.js.map +1 -1
  215. package/lib/core/ErrorState/ErrorState.stories.js +1 -1
  216. package/lib/core/ErrorState/ErrorState.stories.js.map +1 -1
  217. package/lib/core/ExpandCollapse/ExpandCollapse.stories.js +2 -2
  218. package/lib/core/ExpandCollapse/ExpandCollapse.stories.js.map +1 -1
  219. package/lib/core/FieldGroup/FieldGroup.stories.js +1 -1
  220. package/lib/core/FieldGroup/FieldGroup.stories.js.map +1 -1
  221. package/lib/core/FieldGroup/FieldGroupList.mocks.js +7 -7
  222. package/lib/core/FieldGroup/FieldGroupList.mocks.js.map +1 -1
  223. package/lib/core/FieldGroup/FieldGroupList.stories.js +10 -10
  224. package/lib/core/FieldGroup/FieldGroupList.stories.js.map +1 -1
  225. package/lib/core/FieldValueList/FieldValueList.stories.js +4 -4
  226. package/lib/core/FieldValueList/FieldValueList.stories.js.map +1 -1
  227. package/lib/core/File/FileDisplay.stories.js +10 -10
  228. package/lib/core/File/FileDisplay.stories.js.map +1 -1
  229. package/lib/core/File/FileInput.stories.js +2 -2
  230. package/lib/core/File/FileInput.stories.js.map +1 -1
  231. package/lib/core/Flex/FlexContainer.stories.js +7 -7
  232. package/lib/core/Flex/FlexContainer.stories.js.map +1 -1
  233. package/lib/core/Flex/FlexItem.stories.js +3 -3
  234. package/lib/core/Flex/FlexItem.stories.js.map +1 -1
  235. package/lib/core/Form/Form.mocks.js +3 -3
  236. package/lib/core/Form/Form.mocks.js.map +1 -1
  237. package/lib/core/Form/Form.stories.js +8 -8
  238. package/lib/core/Form/Form.stories.js.map +1 -1
  239. package/lib/core/Grid/GridContainer.stories.js +9 -9
  240. package/lib/core/Grid/GridContainer.stories.js.map +1 -1
  241. package/lib/core/Grid/GridItem.stories.js +3 -3
  242. package/lib/core/Grid/GridItem.stories.js.map +1 -1
  243. package/lib/core/HTML/HTML.stories.js +1 -1
  244. package/lib/core/HTML/HTML.stories.js.map +1 -1
  245. package/lib/core/Icon/Icon.mocks.js +1 -1
  246. package/lib/core/Icon/Icon.mocks.js.map +1 -1
  247. package/lib/core/Icon/Icon.stories.js +6 -6
  248. package/lib/core/Icon/Icon.stories.js.map +1 -1
  249. package/lib/core/IconPicker/IconPicker.stories.js +1 -1
  250. package/lib/core/IconPicker/IconPicker.stories.js.map +1 -1
  251. package/lib/core/Image/Image.stories.js +1 -1
  252. package/lib/core/Image/Image.stories.js.map +1 -1
  253. package/lib/core/Input/Input.stories.js +2 -2
  254. package/lib/core/Input/Input.stories.js.map +1 -1
  255. package/lib/core/Label/Label.stories.js +2 -2
  256. package/lib/core/Label/Label.stories.js.map +1 -1
  257. package/lib/core/Lightbox/Lightbox.stories.js +3 -3
  258. package/lib/core/Lightbox/Lightbox.stories.js.map +1 -1
  259. package/lib/core/Link/Link.stories.js +3 -3
  260. package/lib/core/Link/Link.stories.js.map +1 -1
  261. package/lib/core/List/CommaSeparatedList.stories.js +1 -1
  262. package/lib/core/List/CommaSeparatedList.stories.js.map +1 -1
  263. package/lib/core/List/OrderedList.stories.js +1 -1
  264. package/lib/core/List/OrderedList.stories.js.map +1 -1
  265. package/lib/core/List/UnorderedList.stories.js +1 -1
  266. package/lib/core/List/UnorderedList.stories.js.map +1 -1
  267. package/lib/core/ListToolbar/ListToolbar.mocks.js +5 -5
  268. package/lib/core/ListToolbar/ListToolbar.mocks.js.map +1 -1
  269. package/lib/core/ListToolbar/ListToolbar.stories.js +2 -2
  270. package/lib/core/ListToolbar/ListToolbar.stories.js.map +1 -1
  271. package/lib/core/Location/Location.stories.js +4 -4
  272. package/lib/core/Location/Location.stories.js.map +1 -1
  273. package/lib/core/Menu/Menu.stories.js +5 -5
  274. package/lib/core/Menu/Menu.stories.js.map +1 -1
  275. package/lib/core/MenuButton/MenuButton.stories.js +9 -9
  276. package/lib/core/MenuButton/MenuButton.stories.js.map +1 -1
  277. package/lib/core/MetaList/MetaList.stories.js +3 -3
  278. package/lib/core/MetaList/MetaList.stories.js.map +1 -1
  279. package/lib/core/Modal/Modal.mocks.js +8 -8
  280. package/lib/core/Modal/Modal.mocks.js.map +1 -1
  281. package/lib/core/Modal/Modal.stories.js +29 -29
  282. package/lib/core/Modal/Modal.stories.js.map +1 -1
  283. package/lib/core/MultiStep/MultiStep.stories.js +3 -3
  284. package/lib/core/MultiStep/MultiStep.stories.js.map +1 -1
  285. package/lib/core/Number/Number.stories.js +3 -3
  286. package/lib/core/Number/Number.stories.js.map +1 -1
  287. package/lib/core/PageTemplates/PageTemplates.stories.js +27 -27
  288. package/lib/core/PageTemplates/PageTemplates.stories.js.map +1 -1
  289. package/lib/core/Pagination/Pagination.stories.js +1 -1
  290. package/lib/core/Pagination/Pagination.stories.js.map +1 -1
  291. package/lib/core/Paragraph/ParagraphDisplay.stories.js +1 -1
  292. package/lib/core/Paragraph/ParagraphDisplay.stories.js.map +1 -1
  293. package/lib/core/Phone/Phone.stories.js +2 -2
  294. package/lib/core/Phone/Phone.stories.js.map +1 -1
  295. package/lib/core/Popover/Popover.stories.js +2 -2
  296. package/lib/core/Popover/Popover.stories.js.map +1 -1
  297. package/lib/core/Progress/Progress.stories.js +3 -3
  298. package/lib/core/Progress/Progress.stories.js.map +1 -1
  299. package/lib/core/RadioButton/RadioButton.stories.js +3 -3
  300. package/lib/core/RadioButton/RadioButton.stories.js.map +1 -1
  301. package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js +3 -3
  302. package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js.map +1 -1
  303. package/lib/core/Rating/Rating.stories.js +2 -2
  304. package/lib/core/Rating/Rating.stories.js.map +1 -1
  305. package/lib/core/SearchInput/SearchInput.stories.js +2 -2
  306. package/lib/core/SearchInput/SearchInput.stories.js.map +1 -1
  307. package/lib/core/Select/Select.stories.js +2 -2
  308. package/lib/core/Select/Select.stories.js.map +1 -1
  309. package/lib/core/Sentiment/Sentiment.stories.js +2 -2
  310. package/lib/core/Sentiment/Sentiment.stories.js.map +1 -1
  311. package/lib/core/Slider/Slider.stories.js +1 -1
  312. package/lib/core/Slider/Slider.stories.js.map +1 -1
  313. package/lib/core/SummaryItem/SummaryItem.stories.js +4 -4
  314. package/lib/core/SummaryItem/SummaryItem.stories.js.map +1 -1
  315. package/lib/core/SummaryList/SummaryList.mocks.js +2 -2
  316. package/lib/core/SummaryList/SummaryList.mocks.js.map +1 -1
  317. package/lib/core/SummaryList/SummaryList.stories.js +5 -5
  318. package/lib/core/SummaryList/SummaryList.stories.js.map +1 -1
  319. package/lib/core/Switch/Switch.stories.js +3 -3
  320. package/lib/core/Switch/Switch.stories.js.map +1 -1
  321. package/lib/core/Table/Table.mocks.js +1 -1
  322. package/lib/core/Table/Table.mocks.js.map +1 -1
  323. package/lib/core/Table/Table.stories.js +9 -9
  324. package/lib/core/Table/Table.stories.js.map +1 -1
  325. package/lib/core/Tabs/Tabs.stories.js +3 -3
  326. package/lib/core/Tabs/Tabs.stories.js.map +1 -1
  327. package/lib/core/Text/Text.stories.js +2 -2
  328. package/lib/core/Text/Text.stories.js.map +1 -1
  329. package/lib/core/TextArea/TextArea.stories.js +2 -2
  330. package/lib/core/TextArea/TextArea.stories.js.map +1 -1
  331. package/lib/core/Toaster/Toaster.stories.js +2 -2
  332. package/lib/core/Toaster/Toaster.stories.js.map +1 -1
  333. package/lib/core/Tooltip/Tooltip.stories.js +2 -2
  334. package/lib/core/Tooltip/Tooltip.stories.js.map +1 -1
  335. package/lib/core/Tree/Tree.stories.js +3 -3
  336. package/lib/core/Tree/Tree.stories.js.map +1 -1
  337. package/lib/core/URL/URL.stories.js +1 -1
  338. package/lib/core/URL/URL.stories.js.map +1 -1
  339. package/lib/cs/Article/Article.stories.js +9 -9
  340. package/lib/cs/Article/Article.stories.js.map +1 -1
  341. package/lib/cs/ArticleList/ArticleList.stories.js +11 -11
  342. package/lib/cs/ArticleList/ArticleList.stories.js.map +1 -1
  343. package/lib/cs/CSCaseView/CSAppShell.stories.js +12 -12
  344. package/lib/cs/CSCaseView/CSAppShell.stories.js.map +1 -1
  345. package/lib/cs/CSCaseView/CSCaseView.mocks.js +3 -3
  346. package/lib/cs/CSCaseView/CSCaseView.mocks.js.map +1 -1
  347. package/lib/cs/CallControlPanel/CallControlPanel.stories.js +2 -2
  348. package/lib/cs/CallControlPanel/CallControlPanel.stories.js.map +1 -1
  349. package/lib/cs/DialPad/DialPad.stories.js +1 -1
  350. package/lib/cs/DialPad/DialPad.stories.js.map +1 -1
  351. package/lib/cs/IntelligentGuidance/IntelligentGuidance.stories.js +15 -15
  352. package/lib/cs/IntelligentGuidance/IntelligentGuidance.stories.js.map +1 -1
  353. package/lib/cs/InteractionNotification/InteractionNotification.stories.js +1 -1
  354. package/lib/cs/InteractionNotification/InteractionNotification.stories.js.map +1 -1
  355. package/lib/cs/InteractionTimer/InteractionTimer.stories.js +1 -1
  356. package/lib/cs/InteractionTimer/InteractionTimer.stories.js.map +1 -1
  357. package/lib/cs/TaskManager/TaskManager.stories.js +8 -8
  358. package/lib/cs/TaskManager/TaskManager.stories.js.map +1 -1
  359. package/lib/dnd/DragDropList/DragDropList.mocks.js +2 -2
  360. package/lib/dnd/DragDropList/DragDropList.mocks.js.map +1 -1
  361. package/lib/dnd/DragDropList/DragDropList.stories.js +4 -4
  362. package/lib/dnd/DragDropList/DragDropList.stories.js.map +1 -1
  363. package/lib/rte/Editor/Editor.mocks.js +2 -2
  364. package/lib/rte/Editor/Editor.mocks.js.map +1 -1
  365. package/lib/rte/Editor/Editor.stories.js +6 -6
  366. package/lib/rte/Editor/Editor.stories.js.map +1 -1
  367. package/lib/rte/RichTextEditor/RichTextEditor.mocks.js +5 -5
  368. package/lib/rte/RichTextEditor/RichTextEditor.mocks.js.map +1 -1
  369. package/lib/rte/RichTextEditor/RichTextEditor.stories.js +5 -5
  370. package/lib/rte/RichTextEditor/RichTextEditor.stories.js.map +1 -1
  371. package/lib/rte/RichTextEditor/RichTextViewer.stories.js +5 -5
  372. package/lib/rte/RichTextEditor/RichTextViewer.stories.js.map +1 -1
  373. package/lib/social/Chat/Chat.stories.js +27 -27
  374. package/lib/social/Chat/Chat.stories.js.map +1 -1
  375. package/lib/social/Chat/RepeatingView.stories.js +2 -2
  376. package/lib/social/Chat/RepeatingView.stories.js.map +1 -1
  377. package/lib/social/Email/Email.mocks.d.ts +3 -3
  378. package/lib/social/Email/Email.mocks.d.ts.map +1 -1
  379. package/lib/social/Email/Email.mocks.js +21 -10
  380. package/lib/social/Email/Email.mocks.js.map +1 -1
  381. package/lib/social/Email/Email.stories.d.ts.map +1 -1
  382. package/lib/social/Email/Email.stories.js +24 -36
  383. package/lib/social/Email/Email.stories.js.map +1 -1
  384. package/lib/social/Feed/Feed.mocks.d.ts.map +1 -1
  385. package/lib/social/Feed/Feed.mocks.js +40 -40
  386. package/lib/social/Feed/Feed.mocks.js.map +1 -1
  387. package/lib/social/Feed/Feed.stories.js +6 -6
  388. package/lib/social/Feed/Feed.stories.js.map +1 -1
  389. package/lib/social/Feed/FeedNewPost.stories.js +2 -2
  390. package/lib/social/Feed/FeedNewPost.stories.js.map +1 -1
  391. package/lib/social/Feed/FeedPost.stories.js +8 -8
  392. package/lib/social/Feed/FeedPost.stories.js.map +1 -1
  393. package/lib/social/Feed/FeedReply.stories.js +5 -5
  394. package/lib/social/Feed/FeedReply.stories.js.map +1 -1
  395. package/lib/social/Feed/FeedReplyInput.stories.js +2 -2
  396. package/lib/social/Feed/FeedReplyInput.stories.js.map +1 -1
  397. package/lib/work/AppAnnouncement/AppAnnouncement.stories.js +1 -1
  398. package/lib/work/AppAnnouncement/AppAnnouncement.stories.js.map +1 -1
  399. package/lib/work/CaseView/Attachments.mocks.js +15 -15
  400. package/lib/work/CaseView/Attachments.mocks.js.map +1 -1
  401. package/lib/work/CaseView/CaseView.mocks.js +7 -7
  402. package/lib/work/CaseView/CaseView.mocks.js.map +1 -1
  403. package/lib/work/CaseView/CaseView.stories.js +21 -21
  404. package/lib/work/CaseView/CaseView.stories.js.map +1 -1
  405. package/lib/work/CaseView/Details.mocks.js +1 -1
  406. package/lib/work/CaseView/Details.mocks.js.map +1 -1
  407. package/lib/work/CaseView/FileService.mock.js +1 -1
  408. package/lib/work/CaseView/FileService.mock.js.map +1 -1
  409. package/lib/work/CaseView/MobileCaseView.stories.js +1 -1
  410. package/lib/work/CaseView/MobileCaseView.stories.js.map +1 -1
  411. package/lib/work/CaseView/Pulse.mocks.js +2 -2
  412. package/lib/work/CaseView/Pulse.mocks.js.map +1 -1
  413. package/lib/work/ConfigurableLayout/ConfigurableLayout.mocks.js +21 -21
  414. package/lib/work/ConfigurableLayout/ConfigurableLayout.mocks.js.map +1 -1
  415. package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.js +2 -2
  416. package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.js.map +1 -1
  417. package/lib/work/Confirmation/Confirmation.stories.js +2 -2
  418. package/lib/work/Confirmation/Confirmation.stories.js.map +1 -1
  419. package/lib/work/Details/Details.stories.js +15 -15
  420. package/lib/work/Details/Details.stories.js.map +1 -1
  421. package/lib/work/Glimpse/Glimpse.stories.d.ts.map +1 -1
  422. package/lib/work/Glimpse/Glimpse.stories.js +3 -3
  423. package/lib/work/Glimpse/Glimpse.stories.js.map +1 -1
  424. package/lib/work/SearchResults/SearchResults.mocks.js +4 -4
  425. package/lib/work/SearchResults/SearchResults.mocks.js.map +1 -1
  426. package/lib/work/SearchResults/SearchResults.stories.js +11 -11
  427. package/lib/work/SearchResults/SearchResults.stories.js.map +1 -1
  428. package/lib/work/Stages/Stages.stories.js +2 -2
  429. package/lib/work/Stages/Stages.stories.js.map +1 -1
  430. package/lib/work/Stakeholders/Stakeholders.mocks.js +2 -2
  431. package/lib/work/Stakeholders/Stakeholders.mocks.js.map +1 -1
  432. package/lib/work/Stakeholders/Stakeholders.stories.js +1 -1
  433. package/lib/work/Stakeholders/Stakeholders.stories.js.map +1 -1
  434. package/lib/work/Tags/Tags.stories.js +1 -1
  435. package/lib/work/Tags/Tags.stories.js.map +1 -1
  436. package/lib/work/Tasks/TaskList.stories.js +3 -3
  437. package/lib/work/Tasks/TaskList.stories.js.map +1 -1
  438. package/lib/work/Tasks/Tasks.stories.js +11 -11
  439. package/lib/work/Tasks/Tasks.stories.js.map +1 -1
  440. package/lib/work/Timeline/Timeline.mocks.js +8 -8
  441. package/lib/work/Timeline/Timeline.mocks.js.map +1 -1
  442. package/lib/work/Timeline/Timeline.stories.js +2 -2
  443. package/lib/work/Timeline/Timeline.stories.js.map +1 -1
  444. package/package.json +10 -10
  445. package/jsx/build/AppShell/AppShell.mocks.js.map +0 -1
@@ -15,8 +15,8 @@ export default {
15
15
  }
16
16
  };
17
17
  export const ColumnPageDemo = (args) => {
18
- const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }, void 0), _jsx(Button, { children: "Page action 2" }, void 0)] }, void 0));
19
- const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0));
18
+ const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }), _jsx(Button, { children: "Page action 2" })] }));
19
+ const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
20
20
  const pageTemplateProps = {
21
21
  scrollContent: args.scrollContent,
22
22
  title: args.title || 'Demo page',
@@ -29,38 +29,38 @@ export const ColumnPageDemo = (args) => {
29
29
  let page;
30
30
  switch (args.template) {
31
31
  case 'one column':
32
- page = _jsx(OneColumnPage, { a: 'a', ...pageTemplateProps }, void 0);
32
+ page = _jsx(OneColumnPage, { a: 'a', ...pageTemplateProps });
33
33
  break;
34
34
  case 'two column':
35
- page = _jsx(TwoColumnPage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
35
+ page = _jsx(TwoColumnPage, { a: 'a', b: 'b', ...pageTemplateProps });
36
36
  break;
37
37
  case 'three column':
38
- page = _jsx(ThreeColumnPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
38
+ page = _jsx(ThreeColumnPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps });
39
39
  break;
40
40
  case 'four column':
41
- page = _jsx(FourColumnPage, { a: 'a', b: 'b', c: 'c', d: 'd', ...pageTemplateProps }, void 0);
41
+ page = _jsx(FourColumnPage, { a: 'a', b: 'b', c: 'c', d: 'd', ...pageTemplateProps });
42
42
  break;
43
43
  case 'wide narrow':
44
- page = _jsx(WideNarrowPage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
44
+ page = _jsx(WideNarrowPage, { a: 'a', b: 'b', ...pageTemplateProps });
45
45
  break;
46
46
  case 'narrow wide':
47
- page = _jsx(NarrowWidePage, { a: 'a', b: 'b', ...pageTemplateProps }, void 0);
47
+ page = _jsx(NarrowWidePage, { a: 'a', b: 'b', ...pageTemplateProps });
48
48
  break;
49
49
  case 'wide wide narrow':
50
- page = _jsx(WideWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
50
+ page = _jsx(WideWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps });
51
51
  break;
52
52
  case 'narrow wide wide':
53
- page = _jsx(NarrowWideWidePage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
53
+ page = _jsx(NarrowWideWidePage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps });
54
54
  break;
55
55
  case 'narrow wide narrow':
56
- page = _jsx(NarrowWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps }, void 0);
56
+ page = _jsx(NarrowWideNarrowPage, { a: 'a', b: 'b', c: 'c', ...pageTemplateProps });
57
57
  break;
58
58
  case 'demo page':
59
59
  default:
60
- page = (_jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}, void 0), b: _jsxs(_Fragment, { children: [_jsx(TasksDemo, {}, void 0), _jsx(MockSummaryList, { name: 'My team', limit: 10, actions: null }, void 0)] }, void 0), ...pageTemplateProps }, void 0));
60
+ page = (_jsx(TwoColumnPage, { a: _jsx(FeedDemo, {}), b: _jsxs(_Fragment, { children: [_jsx(TasksDemo, {}), _jsx(MockSummaryList, { name: 'My team', limit: 10, actions: null })] }), ...pageTemplateProps }));
61
61
  break;
62
62
  }
63
- return _jsx(AppShellDemo, { main: page, appHeader: true }, void 0);
63
+ return _jsx(AppShellDemo, { main: page, appHeader: true });
64
64
  };
65
65
  ColumnPageDemo.args = {
66
66
  template: 'demo page',
@@ -124,10 +124,10 @@ export const DashboardPageDemo = (args) => {
124
124
  : filterOptions,
125
125
  emptyText: 'No filters',
126
126
  onItemClick: toggleItem
127
- } }, void 0));
127
+ } }));
128
128
  };
129
129
  const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (_jsx(FilterComboBox, {}, i)));
130
- return (_jsx(AppShellDemo, { main: _jsx(DashboardPage, { a: 'a', b: 'b', c: 'c', path: getPath(), filters: filterControls, filterPosition: args.filterPosition, fitToViewport: true, title: args.title || 'Dashboard', as: StyledStoryPage }, void 0), appHeader: true }, void 0));
130
+ return (_jsx(AppShellDemo, { main: _jsx(DashboardPage, { a: 'a', b: 'b', c: 'c', path: getPath(), filters: filterControls, filterPosition: args.filterPosition, fitToViewport: true, title: args.title || 'Dashboard', as: StyledStoryPage }), appHeader: true }));
131
131
  };
132
132
  DashboardPageDemo.args = {
133
133
  title: 'Dashboard',
@@ -193,7 +193,7 @@ export const CategorySubPageDemo = (args) => {
193
193
  id: 'viewInClipboard',
194
194
  text: 'View in Clipboard'
195
195
  }
196
- ], region: _jsx(StyledStoryPage, { secondary: true, children: _jsx(StyledRegion, { style: { minHeight: '150vh' } }, void 0) }, void 0) }, void 0), appHeader: true }, void 0));
196
+ ], region: _jsx(StyledStoryPage, { secondary: true, children: _jsx(StyledRegion, { style: { minHeight: '150vh' } }) }) }), appHeader: true }));
197
197
  };
198
198
  CategorySubPageDemo.args = {
199
199
  category: 'Administration',
@@ -210,8 +210,8 @@ CategorySubPageDemo.argTypes = {
210
210
  maxActions: { control: { type: 'number' } }
211
211
  };
212
212
  export const TabbedPageDemo = (args) => {
213
- const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }, void 0), _jsx(Button, { children: "Page action 2" }, void 0)] }, void 0));
214
- const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0));
213
+ const actions = args.showActions && (_jsxs(_Fragment, { children: [_jsx(Button, { children: "Page action 1" }), _jsx(Button, { children: "Page action 2" })] }));
214
+ const banners = args.showBanners && (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }));
215
215
  const pageTemplateProps = {
216
216
  scrollContent: args.scrollContent,
217
217
  title: args.title || 'Tabbed page',
@@ -226,19 +226,19 @@ export const TabbedPageDemo = (args) => {
226
226
  case 'table': {
227
227
  const tableData = commitsData;
228
228
  const columns = [
229
- { renderer: data => _jsx(Text, { children: data.id }, void 0), label: 'ID' },
230
- { renderer: data => _jsx(Text, { children: data.author }, void 0), label: 'Author' },
231
- { renderer: data => _jsx(Text, { children: data.date }, void 0), label: 'Date' },
232
- { renderer: data => _jsx(Text, { children: data.message }, void 0), label: 'Message' }
229
+ { renderer: data => _jsx(Text, { children: data.id }), label: 'ID' },
230
+ { renderer: data => _jsx(Text, { children: data.author }), label: 'Author' },
231
+ { renderer: data => _jsx(Text, { children: data.date }), label: 'Date' },
232
+ { renderer: data => _jsx(Text, { children: data.message }), label: 'Message' }
233
233
  ];
234
- return (_jsx(StyledDemoTableWrapper, { children: _jsx(Table, { title: 'Commit History', hoverHighlight: false, data: tableData, columns: columns }, void 0) }, void 0));
234
+ return (_jsx(StyledDemoTableWrapper, { children: _jsx(Table, { title: 'Commit History', hoverHighlight: false, data: tableData, columns: columns }) }));
235
235
  }
236
236
  case 'chat':
237
- return _jsx(FeedDemo, {}, void 0);
237
+ return _jsx(FeedDemo, {});
238
238
  case 'team':
239
- return (_jsxs(_Fragment, { children: [_jsx(TasksDemo, {}, void 0), _jsx(MockSummaryList, { name: 'My team', limit: 10, actions: null }, void 0)] }, void 0));
239
+ return (_jsxs(_Fragment, { children: [_jsx(TasksDemo, {}), _jsx(MockSummaryList, { name: 'My team', limit: 10, actions: null })] }));
240
240
  default:
241
- return _jsx(Text, { children: "Tab not configured." }, void 0);
241
+ return _jsx(Text, { children: "Tab not configured." });
242
242
  }
243
243
  }, [currentTabId]);
244
244
  return (_jsx(AppShellDemo, { main: _jsx(TabbedPage, { ...pageTemplateProps, a: content, tabs: {
@@ -259,7 +259,7 @@ export const TabbedPageDemo = (args) => {
259
259
  type: 'horizontal',
260
260
  currentTabId,
261
261
  onTabClick: setCurrentTabId
262
- } }, void 0), appHeader: true }, void 0));
262
+ } }), appHeader: true }));
263
263
  };
264
264
  TabbedPageDemo.args = {
265
265
  scrollContent: false,
@@ -1 +1 @@
1
- {"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n Banner,\n Button,\n CategorySubPage,\n ComboBox,\n DashboardPage,\n DashboardPageLayoutProps,\n TabbedPage,\n OneColumnPage,\n TwoColumnPage,\n ThreeColumnPage,\n FourColumnPage,\n WideNarrowPage,\n NarrowWidePage,\n WideWideNarrowPage,\n NarrowWideWidePage,\n NarrowWideNarrowPage,\n PageTemplateProps,\n icons,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n TemplateProps,\n createUID,\n Table,\n ColumnProps,\n Text,\n StyledRegion,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { commitsData } from '../Table/Table.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n title: 'Core/PageTemplates',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n template?:\n | 'demo page'\n | 'one column'\n | 'two column'\n | 'three column'\n | 'four column'\n | 'wide narrow'\n | 'narrow wide'\n | 'wide wide narrow'\n | 'narrow wide wide'\n | 'narrow wide narrow';\n title?: PageTemplateProps['title'];\n icon?: PageTemplateProps['icon'];\n scrollContent?: PageTemplateProps['scrollContent'];\n showIcon?: boolean;\n showBreadcrumbs?: boolean;\n pathData?: string;\n showActions?: boolean;\n showBanners?: boolean;\n}\n\nexport const ColumnPageDemo: Story<PageTemplatesStoryProps> = (args: PageTemplatesStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title || 'Demo page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData),\n as: args.template !== 'demo page' ? StyledStoryPage : undefined\n };\n\n let page;\n\n switch (args.template) {\n case 'one column':\n page = <OneColumnPage a='a' {...pageTemplateProps} />;\n break;\n case 'two column':\n page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'three column':\n page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'four column':\n page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n break;\n case 'wide narrow':\n page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'narrow wide':\n page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'wide wide narrow':\n page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide wide':\n page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide narrow':\n page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'demo page':\n default:\n page = (\n <TwoColumnPage\n a={<FeedDemo />}\n b={\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n }\n {...pageTemplateProps}\n />\n );\n break;\n }\n\n return <AppShellDemo main={page} appHeader />;\n};\n\nColumnPageDemo.args = {\n template: 'demo page',\n scrollContent: false,\n title: 'Demo page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nColumnPageDemo.argTypes = {\n template: {\n options: [\n 'demo page',\n 'one column',\n 'two column',\n 'three column',\n 'four column',\n 'wide narrow',\n 'narrow wide',\n 'wide wide narrow',\n 'narrow wide wide',\n 'narrow wide narrow'\n ],\n control: { type: 'select' }\n },\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n title?: DashboardPageLayoutProps['title'];\n filterPosition?: DashboardPageLayoutProps['filterPosition'];\n numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n args: DashboardPageStoryProps\n) => {\n const FilterComboBox = () => {\n const [filterSearchValue, setFilterSearchValue] = useState('');\n const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n Array.from({ length: 10 }, (_, i) => ({\n id: createUID(),\n primary: `Filter ${i + 1}`,\n selected: false\n }))\n );\n\n const selected = useMemo(() => {\n return menuHelpers\n .getSelected(filterOptions)\n .map(item => ({ text: item.primary, id: item.id }));\n }, [filterOptions]);\n\n const toggleItem = (id: MenuItemProps['id']) => {\n setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n };\n\n return (\n <ComboBox\n mode='multi-select'\n label='Filters'\n placeholder='Choose filters'\n value={filterSearchValue}\n onChange={e => {\n setFilterSearchValue(e.target.value);\n }}\n selected={{ items: selected, onRemove: toggleItem }}\n menu={{\n items: filterSearchValue\n ? menuHelpers\n .flatten(filterOptions)\n .filter(({ primary }) => primary.includes(filterSearchValue))\n : filterOptions,\n emptyText: 'No filters',\n onItemClick: toggleItem\n }}\n />\n );\n };\n\n const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n <FilterComboBox key={i} />\n ));\n\n return (\n <AppShellDemo\n main={\n <DashboardPage\n a='a'\n b='b'\n c='c'\n path={getPath()}\n filters={filterControls}\n filterPosition={args.filterPosition}\n fitToViewport\n title={args.title || 'Dashboard'}\n as={StyledStoryPage}\n />\n }\n appHeader\n />\n );\n};\n\nDashboardPageDemo.args = {\n title: 'Dashboard',\n filterPosition: 'block-start',\n numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n title: { control: { type: 'text' } },\n filterPosition: {\n options: ['block-start', 'inline-start', 'inline-end'],\n control: { type: 'select' }\n },\n numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n category?: TemplateProps['category'];\n categoryIcon?: TemplateProps['categoryIcon'];\n showIcon?: boolean;\n viewLoading?: TemplateProps['viewLoading'];\n maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n args: CategorySubPageStoryProps\n) => {\n const [activeItem, setActiveItem] = useState('Profile');\n\n const mockNavLinks = (itemTextArray: string[]) => {\n return itemTextArray.map(itemText => {\n return {\n text: itemText,\n active: itemText === activeItem,\n href: '#',\n onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n };\n });\n };\n\n return (\n <AppShellDemo\n main={\n <CategorySubPage\n viewLoading={args.viewLoading}\n category={args.category || 'Administration'}\n categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n navItemGroups={[\n {\n title: 'General',\n items: useMemo(\n () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n [activeItem]\n )\n },\n {\n title: 'Second Group',\n items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n },\n {\n items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n },\n {\n items: useMemo(\n () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n [activeItem]\n )\n },\n {\n items: [\n {\n text: 'Button Item'\n }\n ]\n }\n ]}\n pageTitle={activeItem}\n maxActions={args.maxActions}\n pageActions={[\n {\n id: 'saveChanges',\n text: 'Save'\n },\n {\n id: 'cancelChanges',\n text: 'Cancel'\n },\n {\n id: 'goToRule',\n text: 'Go to Rule'\n },\n {\n id: 'viewInClipboard',\n text: 'View in Clipboard'\n }\n ]}\n region={\n <StyledStoryPage secondary>\n <StyledRegion style={{ minHeight: '150vh' }} />\n </StyledStoryPage>\n }\n />\n }\n appHeader\n />\n );\n};\n\nCategorySubPageDemo.args = {\n category: 'Administration',\n categoryIcon: 'gear-solid',\n showIcon: true,\n viewLoading: false,\n maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n category: { control: { type: 'text' } },\n categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n viewLoading: { control: { type: 'boolean' } },\n maxActions: { control: { type: 'number' } }\n};\n\ntype TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;\n\nexport const TabbedPageDemo: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title || 'Tabbed page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData)\n };\n\n const [currentTabId, setCurrentTabId] = useState('table');\n\n const content = useMemo(() => {\n switch (currentTabId) {\n case 'table': {\n const tableData = commitsData;\n\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <Text>{data.id}</Text>, label: 'ID' },\n { renderer: data => <Text>{data.author}</Text>, label: 'Author' },\n { renderer: data => <Text>{data.date}</Text>, label: 'Date' },\n { renderer: data => <Text>{data.message}</Text>, label: 'Message' }\n ];\n\n return (\n <StyledDemoTableWrapper>\n <Table\n title='Commit History'\n hoverHighlight={false}\n data={tableData}\n columns={columns}\n />\n </StyledDemoTableWrapper>\n );\n }\n case 'chat':\n return <FeedDemo />;\n case 'team':\n return (\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n );\n default:\n return <Text>Tab not configured.</Text>;\n }\n }, [currentTabId]);\n\n return (\n <AppShellDemo\n main={\n <TabbedPage\n {...pageTemplateProps}\n a={content}\n tabs={{\n tabs: [\n {\n id: 'table',\n name: 'Audit'\n },\n {\n id: 'team',\n name: 'My Team'\n },\n {\n id: 'chat',\n name: 'Chat'\n }\n ],\n type: 'horizontal',\n currentTabId,\n onTabClick: setCurrentTabId\n }}\n />\n }\n appHeader\n />\n );\n};\n\nTabbedPageDemo.args = {\n scrollContent: false,\n title: 'Tabbed page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nTabbedPageDemo.argTypes = {\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n"]}
1
+ {"version":3,"file":"PageTemplates.stories.js","sourceRoot":"","sources":["../../../src/core/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAc,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,MAAM,EACN,MAAM,EACN,eAAe,EACf,QAAQ,EACR,aAAa,EAEb,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EAEpB,KAAK,EACL,WAAW,EAIX,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,YAAY,EAEb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAwBV,MAAM,CAAC,MAAM,cAAc,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC9F,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,IAAI,CAChE,8BACE,KAAC,MAAM,gCAAuB,EAC9B,KAAC,MAAM,gCAAuB,IAC7B,CACJ,CAAC;IAEF,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,IAAI,CAChE,KAAC,MAAM,IACL,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,iDAAiD,CAAC,GAC7D,CACH,CAAC;IAEF,MAAM,iBAAiB,GAAG;QACxB,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW;QAChC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC3C,OAAO;QACP,OAAO;QACP,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC;QAClD,EAAE,EAAE,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS;KAChE,CAAC;IAEF,IAAI,IAAI,CAAC;IAET,QAAQ,IAAI,CAAC,QAAQ,EAAE;QACrB,KAAK,YAAY;YACf,IAAI,GAAG,KAAC,aAAa,IAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACtD,MAAM;QACR,KAAK,YAAY;YACf,IAAI,GAAG,KAAC,aAAa,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YAC5D,MAAM;QACR,KAAK,cAAc;YACjB,IAAI,GAAG,KAAC,eAAe,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACpE,MAAM;QACR,KAAK,aAAa;YAChB,IAAI,GAAG,KAAC,cAAc,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACzE,MAAM;QACR,KAAK,aAAa;YAChB,IAAI,GAAG,KAAC,cAAc,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YAC7D,MAAM;QACR,KAAK,aAAa;YAChB,IAAI,GAAG,KAAC,cAAc,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YAC7D,MAAM;QACR,KAAK,kBAAkB;YACrB,IAAI,GAAG,KAAC,kBAAkB,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACvE,MAAM;QACR,KAAK,kBAAkB;YACrB,IAAI,GAAG,KAAC,kBAAkB,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACvE,MAAM;QACR,KAAK,oBAAoB;YACvB,IAAI,GAAG,KAAC,oBAAoB,IAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,KAAK,iBAAiB,GAAI,CAAC;YACzE,MAAM;QACR,KAAK,WAAW,CAAC;QACjB;YACE,IAAI,GAAG,CACL,KAAC,aAAa,IACZ,CAAC,EAAE,KAAC,QAAQ,KAAG,EACf,CAAC,EACC,8BACE,KAAC,SAAS,KAAG,EACb,KAAC,eAAe,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,GAAI,IAC3D,KAED,iBAAiB,GACrB,CACH,CAAC;YACF,MAAM;KACT;IAED,OAAO,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,SAAG,CAAC;AAChD,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,WAAW;IACrB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,IAAI;IACd,eAAe,EAAE,IAAI;IACrB,QAAQ,EAAE,mCAAmC;IAC7C,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW;YACX,YAAY;YACZ,YAAY;YACZ,cAAc;YACd,aAAa;YACb,aAAa;YACb,aAAa;YACb,kBAAkB;YAClB,kBAAkB;YAClB,oBAAoB;SACrB;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAQF,MAAM,CAAC,MAAM,iBAAiB,GAAmC,CAC/D,IAA6B,EAC7B,EAAE;IACF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE,CAC1E,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE,EAAE,SAAS,EAAE;YACf,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE;YAC1B,QAAQ,EAAE,KAAK;SAChB,CAAC,CAAC,CACJ,CAAC;QAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;YAC5B,OAAO,WAAW;iBACf,WAAW,CAAC,aAAa,CAAC;iBAC1B,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACxD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;QAEpB,MAAM,UAAU,GAAG,CAAC,EAAuB,EAAE,EAAE;YAC7C,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,GAAG,EAAE,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC;QAC/E,CAAC,CAAC;QAEF,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,gBAAgB,EAC5B,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE;gBACZ,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACvC,CAAC,EACD,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EACnD,IAAI,EAAE;gBACJ,KAAK,EAAE,iBAAiB;oBACtB,CAAC,CAAC,WAAW;yBACR,OAAO,CAAC,aAAa,CAAC;yBACtB,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC;oBACjE,CAAC,CAAC,aAAa;gBACjB,SAAS,EAAE,YAAY;gBACvB,WAAW,EAAE,UAAU;aACxB,GACD,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACjF,KAAC,cAAc,MAAM,CAAC,CAAI,CAC3B,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,aAAa,IACZ,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,IAAI,EAAE,OAAO,EAAE,EACf,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,aAAa,QACb,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,WAAW,EAChC,EAAE,EAAE,eAAe,GACnB,EAEJ,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,KAAK,EAAE,WAAW;IAClB,cAAc,EAAE,aAAa;IAC7B,eAAe,EAAE,CAAC;CACnB,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,cAAc,EAAE;QACd,OAAO,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,YAAY,CAAC;QACtD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACjD,CAAC;AAUF,MAAM,CAAC,MAAM,mBAAmB,GAAqC,CACnE,IAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,aAAuB,EAAE,EAAE;QAC/C,OAAO,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YAClC,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,QAAQ,KAAK,UAAU;gBAC/B,IAAI,EAAE,GAAG;gBACT,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE,CAAC,aAAa,CAAE,KAAK,CAAC,MAAkB,CAAC,WAAW,IAAI,EAAE,CAAC;aAC3F,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,eAAe,IACd,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,gBAAgB,EAC3C,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC3D,aAAa,EAAE;gBACb;oBACE,KAAK,EAAE,SAAS;oBAChB,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC,EAClF,CAAC,UAAU,CAAC,CACb;iBACF;gBACD;oBACE,KAAK,EAAE,cAAc;oBACrB,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;iBAC3E;gBACD;oBACE,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;iBACzE;gBACD;oBACE,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,4BAA4B,EAAE,4BAA4B,CAAC,CAAC,EAChF,CAAC,UAAU,CAAC,CACb;iBACF;gBACD;oBACE,KAAK,EAAE;wBACL;4BACE,IAAI,EAAE,aAAa;yBACpB;qBACF;iBACF;aACF,EACD,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE;gBACX;oBACE,EAAE,EAAE,aAAa;oBACjB,IAAI,EAAE,MAAM;iBACb;gBACD;oBACE,EAAE,EAAE,eAAe;oBACnB,IAAI,EAAE,QAAQ;iBACf;gBACD;oBACE,EAAE,EAAE,UAAU;oBACd,IAAI,EAAE,YAAY;iBACnB;gBACD;oBACE,EAAE,EAAE,iBAAiB;oBACrB,IAAI,EAAE,mBAAmB;iBAC1B;aACF,EACD,MAAM,EACJ,KAAC,eAAe,IAAC,SAAS,kBACxB,KAAC,YAAY,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,GAAI,GAC/B,GAEpB,EAEJ,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,QAAQ,EAAE,gBAAgB;IAC1B,YAAY,EAAE,YAAY;IAC1B,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,KAAK;IAClB,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1E,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC5C,CAAC;AAIF,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,IAAI,CAChE,8BACE,KAAC,MAAM,gCAAuB,EAC9B,KAAC,MAAM,gCAAuB,IAC7B,CACJ,CAAC;IAEF,MAAM,OAAO,GAAiC,IAAI,CAAC,WAAW,IAAI,CAChE,KAAC,MAAM,IACL,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAC,SAAS,EACjB,QAAQ,EAAE,CAAC,iDAAiD,CAAC,GAC7D,CACH,CAAC;IAEF,MAAM,iBAAiB,GAAG;QACxB,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,aAAa;QAClC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAC3C,OAAO;QACP,OAAO;QACP,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC;KACnD,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,QAAQ,YAAY,EAAE;YACpB,KAAK,OAAO,CAAC,CAAC;gBACZ,MAAM,SAAS,GAAG,WAAW,CAAC;gBAE9B,MAAM,OAAO,GAA4C;oBACvD,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,IAAI,CAAC,EAAE,GAAQ,EAAE,KAAK,EAAE,IAAI,EAAE;oBACzD,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,IAAI,CAAC,MAAM,GAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;oBACjE,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,IAAI,CAAC,IAAI,GAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC7D,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,KAAC,IAAI,cAAE,IAAI,CAAC,OAAO,GAAQ,EAAE,KAAK,EAAE,SAAS,EAAE;iBACpE,CAAC;gBAEF,OAAO,CACL,KAAC,sBAAsB,cACrB,KAAC,KAAK,IACJ,KAAK,EAAC,gBAAgB,EACtB,cAAc,EAAE,KAAK,EACrB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,OAAO,GAChB,GACqB,CAC1B,CAAC;aACH;YACD,KAAK,MAAM;gBACT,OAAO,KAAC,QAAQ,KAAG,CAAC;YACtB,KAAK,MAAM;gBACT,OAAO,CACL,8BACE,KAAC,SAAS,KAAG,EACb,KAAC,eAAe,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,GAAI,IAC3D,CACJ,CAAC;YACJ;gBACE,OAAO,KAAC,IAAI,sCAA2B,CAAC;SAC3C;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EACF,KAAC,UAAU,OACL,iBAAiB,EACrB,CAAC,EAAE,OAAO,EACV,IAAI,EAAE;gBACJ,IAAI,EAAE;oBACJ;wBACE,EAAE,EAAE,OAAO;wBACX,IAAI,EAAE,OAAO;qBACd;oBACD;wBACE,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,SAAS;qBAChB;oBACD;wBACE,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,MAAM;qBACb;iBACF;gBACD,IAAI,EAAE,YAAY;gBAClB,YAAY;gBACZ,UAAU,EAAE,eAAe;aAC5B,GACD,EAEJ,SAAS,SACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,aAAa,EAAE,KAAK;IACpB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,IAAI;IACd,eAAe,EAAE,IAAI;IACrB,QAAQ,EAAE,mCAAmC;IAC7C,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, MouseEvent } from 'react';\n\nimport {\n Banner,\n Button,\n CategorySubPage,\n ComboBox,\n DashboardPage,\n DashboardPageLayoutProps,\n TabbedPage,\n OneColumnPage,\n TwoColumnPage,\n ThreeColumnPage,\n FourColumnPage,\n WideNarrowPage,\n NarrowWidePage,\n WideWideNarrowPage,\n NarrowWideWidePage,\n NarrowWideNarrowPage,\n PageTemplateProps,\n icons,\n menuHelpers,\n MenuItemProps,\n MenuProps,\n TemplateProps,\n createUID,\n Table,\n ColumnProps,\n Text,\n StyledRegion,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { MockSummaryList } from '../../work/CaseView/CaseView.mocks';\nimport { commitsData } from '../Table/Table.mocks';\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { StyledDemoTableWrapper, StyledStoryPage } from './PageTemplates.styles';\nimport { getPath } from './PageTemplates.mocks';\n\nexport default {\n title: 'Core/PageTemplates',\n parameters: {\n layout: 'fullscreen'\n }\n} as Meta;\n\ninterface PageTemplatesStoryProps {\n template?:\n | 'demo page'\n | 'one column'\n | 'two column'\n | 'three column'\n | 'four column'\n | 'wide narrow'\n | 'narrow wide'\n | 'wide wide narrow'\n | 'narrow wide wide'\n | 'narrow wide narrow';\n title?: PageTemplateProps['title'];\n icon?: PageTemplateProps['icon'];\n scrollContent?: PageTemplateProps['scrollContent'];\n showIcon?: boolean;\n showBreadcrumbs?: boolean;\n pathData?: string;\n showActions?: boolean;\n showBanners?: boolean;\n}\n\nexport const ColumnPageDemo: Story<PageTemplatesStoryProps> = (args: PageTemplatesStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title || 'Demo page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData),\n as: args.template !== 'demo page' ? StyledStoryPage : undefined\n };\n\n let page;\n\n switch (args.template) {\n case 'one column':\n page = <OneColumnPage a='a' {...pageTemplateProps} />;\n break;\n case 'two column':\n page = <TwoColumnPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'three column':\n page = <ThreeColumnPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'four column':\n page = <FourColumnPage a='a' b='b' c='c' d='d' {...pageTemplateProps} />;\n break;\n case 'wide narrow':\n page = <WideNarrowPage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'narrow wide':\n page = <NarrowWidePage a='a' b='b' {...pageTemplateProps} />;\n break;\n case 'wide wide narrow':\n page = <WideWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide wide':\n page = <NarrowWideWidePage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'narrow wide narrow':\n page = <NarrowWideNarrowPage a='a' b='b' c='c' {...pageTemplateProps} />;\n break;\n case 'demo page':\n default:\n page = (\n <TwoColumnPage\n a={<FeedDemo />}\n b={\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n }\n {...pageTemplateProps}\n />\n );\n break;\n }\n\n return <AppShellDemo main={page} appHeader />;\n};\n\nColumnPageDemo.args = {\n template: 'demo page',\n scrollContent: false,\n title: 'Demo page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nColumnPageDemo.argTypes = {\n template: {\n options: [\n 'demo page',\n 'one column',\n 'two column',\n 'three column',\n 'four column',\n 'wide narrow',\n 'narrow wide',\n 'wide wide narrow',\n 'narrow wide wide',\n 'narrow wide narrow'\n ],\n control: { type: 'select' }\n },\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n\ninterface DashboardPageStoryProps {\n title?: DashboardPageLayoutProps['title'];\n filterPosition?: DashboardPageLayoutProps['filterPosition'];\n numberOfFilters?: number;\n}\n\nexport const DashboardPageDemo: Story<DashboardPageStoryProps> = (\n args: DashboardPageStoryProps\n) => {\n const FilterComboBox = () => {\n const [filterSearchValue, setFilterSearchValue] = useState('');\n const [filterOptions, setFilterOptions] = useState<MenuProps['items']>(() =>\n Array.from({ length: 10 }, (_, i) => ({\n id: createUID(),\n primary: `Filter ${i + 1}`,\n selected: false\n }))\n );\n\n const selected = useMemo(() => {\n return menuHelpers\n .getSelected(filterOptions)\n .map(item => ({ text: item.primary, id: item.id }));\n }, [filterOptions]);\n\n const toggleItem = (id: MenuItemProps['id']) => {\n setFilterOptions(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n };\n\n return (\n <ComboBox\n mode='multi-select'\n label='Filters'\n placeholder='Choose filters'\n value={filterSearchValue}\n onChange={e => {\n setFilterSearchValue(e.target.value);\n }}\n selected={{ items: selected, onRemove: toggleItem }}\n menu={{\n items: filterSearchValue\n ? menuHelpers\n .flatten(filterOptions)\n .filter(({ primary }) => primary.includes(filterSearchValue))\n : filterOptions,\n emptyText: 'No filters',\n onItemClick: toggleItem\n }}\n />\n );\n };\n\n const filterControls = Array.from({ length: args.numberOfFilters || 3 }, (_, i) => (\n <FilterComboBox key={i} />\n ));\n\n return (\n <AppShellDemo\n main={\n <DashboardPage\n a='a'\n b='b'\n c='c'\n path={getPath()}\n filters={filterControls}\n filterPosition={args.filterPosition}\n fitToViewport\n title={args.title || 'Dashboard'}\n as={StyledStoryPage}\n />\n }\n appHeader\n />\n );\n};\n\nDashboardPageDemo.args = {\n title: 'Dashboard',\n filterPosition: 'block-start',\n numberOfFilters: 3\n};\n\nDashboardPageDemo.argTypes = {\n title: { control: { type: 'text' } },\n filterPosition: {\n options: ['block-start', 'inline-start', 'inline-end'],\n control: { type: 'select' }\n },\n numberOfFilters: { control: { type: 'number' } }\n};\n\ninterface CategorySubPageStoryProps {\n category?: TemplateProps['category'];\n categoryIcon?: TemplateProps['categoryIcon'];\n showIcon?: boolean;\n viewLoading?: TemplateProps['viewLoading'];\n maxActions?: TemplateProps['maxActions'];\n}\n\nexport const CategorySubPageDemo: Story<CategorySubPageStoryProps> = (\n args: CategorySubPageStoryProps\n) => {\n const [activeItem, setActiveItem] = useState('Profile');\n\n const mockNavLinks = (itemTextArray: string[]) => {\n return itemTextArray.map(itemText => {\n return {\n text: itemText,\n active: itemText === activeItem,\n href: '#',\n onClick: (event: MouseEvent) => setActiveItem((event.target as Element).textContent || '')\n };\n });\n };\n\n return (\n <AppShellDemo\n main={\n <CategorySubPage\n viewLoading={args.viewLoading}\n category={args.category || 'Administration'}\n categoryIcon={args.showIcon ? args.categoryIcon : undefined}\n navItemGroups={[\n {\n title: 'General',\n items: useMemo(\n () => mockNavLinks(['Configurations', 'Profile', 'Authentication', 'Connections']),\n [activeItem]\n )\n },\n {\n title: 'Second Group',\n items: useMemo(() => mockNavLinks(['Option 1', 'Option 2']), [activeItem])\n },\n {\n items: useMemo(() => mockNavLinks(['All configurations']), [activeItem])\n },\n {\n items: useMemo(\n () => mockNavLinks(['Visually Grouped SubPage A', 'Visually Grouped SubPage B']),\n [activeItem]\n )\n },\n {\n items: [\n {\n text: 'Button Item'\n }\n ]\n }\n ]}\n pageTitle={activeItem}\n maxActions={args.maxActions}\n pageActions={[\n {\n id: 'saveChanges',\n text: 'Save'\n },\n {\n id: 'cancelChanges',\n text: 'Cancel'\n },\n {\n id: 'goToRule',\n text: 'Go to Rule'\n },\n {\n id: 'viewInClipboard',\n text: 'View in Clipboard'\n }\n ]}\n region={\n <StyledStoryPage secondary>\n <StyledRegion style={{ minHeight: '150vh' }} />\n </StyledStoryPage>\n }\n />\n }\n appHeader\n />\n );\n};\n\nCategorySubPageDemo.args = {\n category: 'Administration',\n categoryIcon: 'gear-solid',\n showIcon: true,\n viewLoading: false,\n maxActions: 3\n};\n\nCategorySubPageDemo.argTypes = {\n category: { control: { type: 'text' } },\n categoryIcon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n viewLoading: { control: { type: 'boolean' } },\n maxActions: { control: { type: 'number' } }\n};\n\ntype TabbedPageStoryProps = OmitStrict<PageTemplatesStoryProps, 'template'>;\n\nexport const TabbedPageDemo: Story<TabbedPageStoryProps> = (args: TabbedPageStoryProps) => {\n const actions: PageTemplateProps['actions'] = args.showActions && (\n <>\n <Button>Page action 1</Button>\n <Button>Page action 2</Button>\n </>\n );\n\n const banners: PageTemplateProps['banners'] = args.showBanners && (\n <Banner\n id='warning-banner'\n variant='warning'\n messages={['This is a warning banner. You have been warned!']}\n />\n );\n\n const pageTemplateProps = {\n scrollContent: args.scrollContent,\n title: args.title || 'Tabbed page',\n icon: args.showIcon ? args.icon : undefined,\n actions,\n banners,\n path: getPath(args.showBreadcrumbs, args.pathData)\n };\n\n const [currentTabId, setCurrentTabId] = useState('table');\n\n const content = useMemo(() => {\n switch (currentTabId) {\n case 'table': {\n const tableData = commitsData;\n\n const columns: ColumnProps<typeof tableData[number]>[] = [\n { renderer: data => <Text>{data.id}</Text>, label: 'ID' },\n { renderer: data => <Text>{data.author}</Text>, label: 'Author' },\n { renderer: data => <Text>{data.date}</Text>, label: 'Date' },\n { renderer: data => <Text>{data.message}</Text>, label: 'Message' }\n ];\n\n return (\n <StyledDemoTableWrapper>\n <Table\n title='Commit History'\n hoverHighlight={false}\n data={tableData}\n columns={columns}\n />\n </StyledDemoTableWrapper>\n );\n }\n case 'chat':\n return <FeedDemo />;\n case 'team':\n return (\n <>\n <TasksDemo />\n <MockSummaryList name='My team' limit={10} actions={null} />\n </>\n );\n default:\n return <Text>Tab not configured.</Text>;\n }\n }, [currentTabId]);\n\n return (\n <AppShellDemo\n main={\n <TabbedPage\n {...pageTemplateProps}\n a={content}\n tabs={{\n tabs: [\n {\n id: 'table',\n name: 'Audit'\n },\n {\n id: 'team',\n name: 'My Team'\n },\n {\n id: 'chat',\n name: 'Chat'\n }\n ],\n type: 'horizontal',\n currentTabId,\n onTabClick: setCurrentTabId\n }}\n />\n }\n appHeader\n />\n );\n};\n\nTabbedPageDemo.args = {\n scrollContent: false,\n title: 'Tabbed page',\n icon: 'home-solid',\n showIcon: true,\n showBreadcrumbs: true,\n pathData: 'Page 1,Page2,Page 3,Page 4,Page 5',\n showActions: true,\n showBanners: false\n};\n\nTabbedPageDemo.argTypes = {\n scrollContent: { control: { type: 'boolean' } },\n title: { control: { type: 'text' } },\n icon: { options: icons, control: { type: 'select', icons: true } },\n showIcon: { control: { type: 'boolean' } },\n showBreadcrumbs: { control: { type: 'boolean' } },\n pathData: { control: { type: 'text' } },\n showActions: { control: { type: 'boolean' } },\n showBanners: { control: { type: 'boolean' } }\n};\n"]}
@@ -7,7 +7,7 @@ export default {
7
7
  };
8
8
  export const PaginationDemo = (args) => {
9
9
  const [currentPage, setCurrentPage] = useState(1);
10
- return (_jsx(Pagination, { total: args.total, pageSize: args.pageSize, pageNumber: currentPage, onPageChange: pageNumber => setCurrentPage(pageNumber) }, void 0));
10
+ return (_jsx(Pagination, { total: args.total, pageSize: args.pageSize, pageNumber: currentPage, onPageChange: pageNumber => setCurrentPage(pageNumber) }));
11
11
  };
12
12
  PaginationDemo.args = {
13
13
  total: 50,
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/core/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,UAAU,CAAC,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,WACtD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Pagination, PaginationProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Pagination',\n component: Pagination\n} as Meta;\n\nexport const PaginationDemo: Story<PaginationProps> = (args: PaginationProps) => {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n <Pagination\n total={args.total}\n pageSize={args.pageSize}\n pageNumber={currentPage}\n onPageChange={pageNumber => setCurrentPage(pageNumber)}\n />\n );\n};\n\nPaginationDemo.args = {\n total: 50,\n pageSize: 10\n};\n\nPaginationDemo.argTypes = {\n total: { control: { type: 'number' } },\n pageSize: { control: { type: 'number' } }\n};\n"]}
1
+ {"version":3,"file":"Pagination.stories.js","sourceRoot":"","sources":["../../../src/core/Pagination/Pagination.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,WAAW,EACvB,YAAY,EAAE,UAAU,CAAC,EAAE,CAAC,cAAc,CAAC,UAAU,CAAC,GACtD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Pagination, PaginationProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Pagination',\n component: Pagination\n} as Meta;\n\nexport const PaginationDemo: Story<PaginationProps> = (args: PaginationProps) => {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n <Pagination\n total={args.total}\n pageSize={args.pageSize}\n pageNumber={currentPage}\n onPageChange={pageNumber => setCurrentPage(pageNumber)}\n />\n );\n};\n\nPaginationDemo.args = {\n total: 50,\n pageSize: 10\n};\n\nPaginationDemo.argTypes = {\n total: { control: { type: 'number' } },\n pageSize: { control: { type: 'number' } }\n};\n"]}
@@ -5,7 +5,7 @@ export default {
5
5
  component: ParagraphDisplay
6
6
  };
7
7
  export const ParagraphDisplayDemo = (args) => {
8
- return _jsx(ParagraphDisplay, { value: args.value }, void 0);
8
+ return _jsx(ParagraphDisplay, { value: args.value });
9
9
  };
10
10
  ParagraphDisplayDemo.args = {
11
11
  value: "Here's a string with\na new line in it."
@@ -1 +1 @@
1
- {"version":3,"file":"ParagraphDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Paragraph/ParagraphDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,yBAAyB,CAAC;AAElF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAChG,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,WAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,yCAAyC;CACjD,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;CACtD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { ParagraphDisplay, ParagraphDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Paragraph',\n component: ParagraphDisplay\n} as Meta;\n\nexport const ParagraphDisplayDemo: Story<ParagraphDisplayProps> = (args: ParagraphDisplayProps) => {\n return <ParagraphDisplay value={args.value} />;\n};\n\nParagraphDisplayDemo.args = {\n value: \"Here's a string with\\na new line in it.\"\n};\n\nParagraphDisplayDemo.argTypes = {\n value: { control: { type: 'text', multiLine: true } }\n};\n"]}
1
+ {"version":3,"file":"ParagraphDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Paragraph/ParagraphDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAyB,MAAM,yBAAyB,CAAC;AAElF,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;CACpB,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAChG,OAAO,KAAC,gBAAgB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;AACjD,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,KAAK,EAAE,yCAAyC;CACjD,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE;CACtD,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { ParagraphDisplay, ParagraphDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Paragraph',\n component: ParagraphDisplay\n} as Meta;\n\nexport const ParagraphDisplayDemo: Story<ParagraphDisplayProps> = (args: ParagraphDisplayProps) => {\n return <ParagraphDisplay value={args.value} />;\n};\n\nParagraphDisplayDemo.args = {\n value: \"Here's a string with\\na new line in it.\"\n};\n\nParagraphDisplayDemo.argTypes = {\n value: { control: { type: 'text', multiLine: true } }\n};\n"]}
@@ -5,7 +5,7 @@ export default {
5
5
  component: PhoneInput
6
6
  };
7
7
  export const PhoneInputDemo = (args) => {
8
- return (_jsx(PhoneInput, { showCountryCode: args.showCountryCode, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
8
+ return (_jsx(PhoneInput, { showCountryCode: args.showCountryCode, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
9
9
  };
10
10
  PhoneInputDemo.args = {
11
11
  showCountryCode: true,
@@ -28,7 +28,7 @@ PhoneInputDemo.argTypes = {
28
28
  readOnly: { control: { type: 'boolean' } }
29
29
  };
30
30
  export const PhoneDisplayDemo = (args) => {
31
- return _jsx(PhoneDisplay, { value: args.value, displayText: args.displayText, variant: args.variant }, void 0);
31
+ return _jsx(PhoneDisplay, { value: args.value, displayText: args.displayText, variant: args.variant });
32
32
  };
33
33
  PhoneDisplayDemo.args = {
34
34
  value: '(123) 456-7890',
@@ -1 +1 @@
1
- {"version":3,"file":"Phone.stories.js","sourceRoot":"","sources":["../../../src/core/Phone/Phone.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,YAAY,EAEZ,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,UAAU,IACT,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,eAAe,EAAE,IAAI;IACrB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,IAAuB,EAAE,EAAE;IACpF,OAAO,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n PhoneDisplay,\n PhoneDisplayProps,\n PhoneInput,\n PhoneInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Phone',\n component: PhoneInput\n} as Meta;\n\nexport const PhoneInputDemo: Story<PhoneInputProps> = (args: PhoneInputProps) => {\n return (\n <PhoneInput\n showCountryCode={args.showCountryCode}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nPhoneInputDemo.args = {\n showCountryCode: true,\n label: 'Phone input',\n labelHidden: false,\n info: 'Enter a phone number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nPhoneInputDemo.argTypes = {\n showCountryCode: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const PhoneDisplayDemo: Story<PhoneDisplayProps> = (args: PhoneDisplayProps) => {\n return <PhoneDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nPhoneDisplayDemo.args = {\n value: '(123) 456-7890',\n displayText: 'Example Phone',\n variant: 'link'\n};\n\nPhoneDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}
1
+ {"version":3,"file":"Phone.stories.js","sourceRoot":"","sources":["../../../src/core/Phone/Phone.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,YAAY,EAEZ,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,OAAO,CACL,KAAC,UAAU,IACT,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,eAAe,EAAE,IAAI;IACrB,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,IAAuB,EAAE,EAAE;IACpF,OAAO,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AACnG,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,gBAAgB;IACvB,WAAW,EAAE,eAAe;IAC5B,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACpE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n PhoneDisplay,\n PhoneDisplayProps,\n PhoneInput,\n PhoneInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Phone',\n component: PhoneInput\n} as Meta;\n\nexport const PhoneInputDemo: Story<PhoneInputProps> = (args: PhoneInputProps) => {\n return (\n <PhoneInput\n showCountryCode={args.showCountryCode}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nPhoneInputDemo.args = {\n showCountryCode: true,\n label: 'Phone input',\n labelHidden: false,\n info: 'Enter a phone number',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nPhoneInputDemo.argTypes = {\n showCountryCode: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const PhoneDisplayDemo: Story<PhoneDisplayProps> = (args: PhoneDisplayProps) => {\n return <PhoneDisplay value={args.value} displayText={args.displayText} variant={args.variant} />;\n};\n\nPhoneDisplayDemo.args = {\n value: '(123) 456-7890',\n displayText: 'Example Phone',\n variant: 'link'\n};\n\nPhoneDisplayDemo.argTypes = {\n value: { control: { type: 'text' } },\n displayText: { control: { type: 'text' } },\n variant: { options: ['link', 'text'], control: { type: 'select' } }\n};\n"]}
@@ -72,7 +72,7 @@ export const PopoverDemo = (args) => {
72
72
  onFocus: toggleClickPopover,
73
73
  onBlur: toggleClickPopover
74
74
  };
75
- return (_jsxs(Flex, { container: { justify: 'center', pad: 4, gap: 4, alignItems: 'center' }, children: [_jsx(Text, { ref: setTextEl, variant: 'h1', ...hoverMountingHandlers, children: "Hover Over Me" }, void 0), _jsx(Popover, { ref: setHoverPopoverEl, show: mountHoverPopover, target: textEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...hoverMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on hover!" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setButtonEl, ...clickMountingHandlers, children: "Click Me" }, void 0), _jsx(Popover, { ref: setClickPopoverEl, show: mountClickPopover, target: buttonEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...clickMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on click!" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0));
75
+ return (_jsxs(Flex, { container: { justify: 'center', pad: 4, gap: 4, alignItems: 'center' }, children: [_jsx(Text, { ref: setTextEl, variant: 'h1', ...hoverMountingHandlers, children: "Hover Over Me" }), _jsx(Popover, { ref: setHoverPopoverEl, show: mountHoverPopover, target: textEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...hoverMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on hover!" }) }) }) }), _jsx(Button, { ref: setButtonEl, ...clickMountingHandlers, children: "Click Me" }), _jsx(Popover, { ref: setClickPopoverEl, show: mountClickPopover, target: buttonEl, portal: true, arrow: args.arrow, showDelay: args.showDelay, hideDelay: args.hideDelay, placement: args.placement, ...clickMountingHandlers, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Popover appears on click!" }) }) }) })] }));
76
76
  };
77
77
  export const PopoverGroups = () => {
78
78
  const [firstTooltipButton, setFirstTooltipButton] = useElement();
@@ -84,7 +84,7 @@ export const PopoverGroups = () => {
84
84
  const [showFirstPopover, setShowFirstPopover] = useState(false);
85
85
  const [showSecondPopover, setShowSecondPopover] = useState(false);
86
86
  const [showThirdPopover, setShowThirdPopover] = useState(false);
87
- return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(Text, { variant: 'h2', children: "groupId: link_preview" }, void 0), _jsxs(Flex, { children: [_jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "groupId: tooltip" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstTooltipButton, "aria-describedby": 'first-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: firstTooltipButton, id: 'first-tooltip', children: "This is a tooltip for the first button." }, void 0), _jsx(Button, { ref: setSecondTooltipButton, "aria-describedby": 'second-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: secondTooltipButton, id: 'second-tooltip', children: "This is a tooltip for the second button." }, void 0), _jsx(Button, { ref: setThirdTooltipButton, "aria-describedby": 'third-tooltip', children: "Hover me" }, void 0), _jsx(Tooltip, { target: thirdTooltipButton, id: 'third-tooltip', children: "This is a tooltip for the third button." }, void 0)] }, void 0), _jsx(Text, { variant: 'h2', children: "No groupId" }, void 0), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstPopoverButton, onClick: () => setShowFirstPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showFirstPopover, target: firstPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #1" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setSecondPopoverButton, onClick: () => setShowSecondPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showSecondPopover, target: secondPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #2" }, void 0) }, void 0) }, void 0) }, void 0), _jsx(Button, { ref: setThirdPopoverButton, onClick: () => setShowThirdPopover(curr => !curr), children: "Click me" }, void 0), _jsx(Popover, { show: showThirdPopover, target: thirdPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #3" }, void 0) }, void 0) }, void 0) }, void 0)] }, void 0)] }, void 0));
87
+ return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(Text, { variant: 'h2', children: "groupId: link_preview" }), _jsxs(Flex, { children: [_jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" }), _jsx(Link, { href: 'http://www.google.com', previewable: true, children: "Previewable Link" })] }), _jsx(Text, { variant: 'h2', children: "groupId: tooltip" }), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstTooltipButton, "aria-describedby": 'first-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: firstTooltipButton, id: 'first-tooltip', children: "This is a tooltip for the first button." }), _jsx(Button, { ref: setSecondTooltipButton, "aria-describedby": 'second-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: secondTooltipButton, id: 'second-tooltip', children: "This is a tooltip for the second button." }), _jsx(Button, { ref: setThirdTooltipButton, "aria-describedby": 'third-tooltip', children: "Hover me" }), _jsx(Tooltip, { target: thirdTooltipButton, id: 'third-tooltip', children: "This is a tooltip for the third button." })] }), _jsx(Text, { variant: 'h2', children: "No groupId" }), _jsxs(Flex, { children: [_jsx(Button, { ref: setFirstPopoverButton, onClick: () => setShowFirstPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showFirstPopover, target: firstPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #1" }) }) }) }), _jsx(Button, { ref: setSecondPopoverButton, onClick: () => setShowSecondPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showSecondPopover, target: secondPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #2" }) }) }) }), _jsx(Button, { ref: setThirdPopoverButton, onClick: () => setShowThirdPopover(curr => !curr), children: "Click me" }), _jsx(Popover, { show: showThirdPopover, target: thirdPopoverButton, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "Popover #3" }) }) }) })] })] }));
88
88
  };
89
89
  PopoverGroups.argTypes = {
90
90
  arrow: { table: { disable: true } },
@@ -1 +1 @@
1
- {"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n Flex,\n Link,\n Popover,\n PopoverProps,\n Text,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Popover',\n component: Popover,\n args: {\n arrow: false,\n showDelay: 'none',\n hideDelay: 'none',\n placement: 'bottom'\n },\n argTypes: {\n arrow: { control: { type: 'boolean' } },\n showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n placement: {\n options: [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end'\n ],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const PopoverDemo: Story<PopoverProps> = (args: PopoverProps) => {\n const [mountHoverPopover, setMountHoverPopover] = useState(false);\n const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n const [mountClickPopover, setMountClickPopover] = useState(false);\n const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountHoverPopover(false);\n return;\n }\n setMountHoverPopover(type === 'mouseover' || type === 'focus');\n };\n\n const hoverMountingHandlers = {\n onMouseOver: toggleHoverPopover,\n onMouseOut: toggleHoverPopover,\n onKeyDown: toggleHoverPopover,\n onFocus: toggleHoverPopover,\n onBlur: toggleHoverPopover\n };\n\n const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountClickPopover(false);\n return;\n }\n setMountClickPopover(type === 'click' || type === 'focus');\n };\n\n const clickMountingHandlers = {\n onClick: toggleClickPopover,\n onKeyDown: toggleClickPopover,\n onFocus: toggleClickPopover,\n onBlur: toggleClickPopover\n };\n\n return (\n <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n Hover Over Me\n </Text>\n <Popover\n ref={setHoverPopoverEl}\n show={mountHoverPopover}\n target={textEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...hoverMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on hover!</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setButtonEl} {...clickMountingHandlers}>\n Click Me\n </Button>\n <Popover\n ref={setClickPopoverEl}\n show={mountClickPopover}\n target={buttonEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...clickMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on click!</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n );\n};\n\nexport const PopoverGroups: Story = () => {\n const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n const [showFirstPopover, setShowFirstPopover] = useState(false);\n const [showSecondPopover, setShowSecondPopover] = useState(false);\n const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <Text variant='h2'>groupId: link_preview</Text>\n <Flex>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n </Flex>\n <Text variant='h2'>groupId: tooltip</Text>\n <Flex>\n <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n Hover me\n </Button>\n <Tooltip target={firstTooltipButton} id='first-tooltip'>\n This is a tooltip for the first button.\n </Tooltip>\n <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n Hover me\n </Button>\n <Tooltip target={secondTooltipButton} id='second-tooltip'>\n This is a tooltip for the second button.\n </Tooltip>\n <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n Hover me\n </Button>\n <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n This is a tooltip for the third button.\n </Tooltip>\n </Flex>\n <Text variant='h2'>No groupId</Text>\n <Flex>\n <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showFirstPopover} target={firstPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #1</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showSecondPopover} target={secondPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #2</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showThirdPopover} target={thirdPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #3</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n </Flex>\n );\n};\n\nPopoverGroups.argTypes = {\n arrow: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } },\n placement: { table: { disable: true } }\n};\n"]}
1
+ {"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n Button,\n Card,\n CardContent,\n Flex,\n Link,\n Popover,\n PopoverProps,\n Text,\n Tooltip,\n useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Popover',\n component: Popover,\n args: {\n arrow: false,\n showDelay: 'none',\n hideDelay: 'none',\n placement: 'bottom'\n },\n argTypes: {\n arrow: { control: { type: 'boolean' } },\n showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n placement: {\n options: [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'auto',\n 'auto-start',\n 'auto-end'\n ],\n control: { type: 'select' }\n }\n }\n} as Meta;\n\nexport const PopoverDemo: Story<PopoverProps> = (args: PopoverProps) => {\n const [mountHoverPopover, setMountHoverPopover] = useState(false);\n const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n const [mountClickPopover, setMountClickPopover] = useState(false);\n const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountHoverPopover(false);\n return;\n }\n setMountHoverPopover(type === 'mouseover' || type === 'focus');\n };\n\n const hoverMountingHandlers = {\n onMouseOver: toggleHoverPopover,\n onMouseOut: toggleHoverPopover,\n onKeyDown: toggleHoverPopover,\n onFocus: toggleHoverPopover,\n onBlur: toggleHoverPopover\n };\n\n const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n if (type === 'keydown') {\n if (key === 'Escape') setMountClickPopover(false);\n return;\n }\n setMountClickPopover(type === 'click' || type === 'focus');\n };\n\n const clickMountingHandlers = {\n onClick: toggleClickPopover,\n onKeyDown: toggleClickPopover,\n onFocus: toggleClickPopover,\n onBlur: toggleClickPopover\n };\n\n return (\n <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n Hover Over Me\n </Text>\n <Popover\n ref={setHoverPopoverEl}\n show={mountHoverPopover}\n target={textEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...hoverMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on hover!</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setButtonEl} {...clickMountingHandlers}>\n Click Me\n </Button>\n <Popover\n ref={setClickPopoverEl}\n show={mountClickPopover}\n target={buttonEl}\n portal\n arrow={args.arrow}\n showDelay={args.showDelay}\n hideDelay={args.hideDelay}\n placement={args.placement}\n {...clickMountingHandlers}\n >\n <Card>\n <CardContent>\n <Text>This Popover appears on click!</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n );\n};\n\nexport const PopoverGroups: Story = () => {\n const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n const [showFirstPopover, setShowFirstPopover] = useState(false);\n const [showSecondPopover, setShowSecondPopover] = useState(false);\n const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <Text variant='h2'>groupId: link_preview</Text>\n <Flex>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n <Link href='http://www.google.com' previewable>\n Previewable Link\n </Link>\n </Flex>\n <Text variant='h2'>groupId: tooltip</Text>\n <Flex>\n <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n Hover me\n </Button>\n <Tooltip target={firstTooltipButton} id='first-tooltip'>\n This is a tooltip for the first button.\n </Tooltip>\n <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n Hover me\n </Button>\n <Tooltip target={secondTooltipButton} id='second-tooltip'>\n This is a tooltip for the second button.\n </Tooltip>\n <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n Hover me\n </Button>\n <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n This is a tooltip for the third button.\n </Tooltip>\n </Flex>\n <Text variant='h2'>No groupId</Text>\n <Flex>\n <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showFirstPopover} target={firstPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #1</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showSecondPopover} target={secondPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #2</Text>\n </CardContent>\n </Card>\n </Popover>\n <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n Click me\n </Button>\n <Popover show={showThirdPopover} target={thirdPopoverButton}>\n <Card>\n <CardContent>\n <Text>Popover #3</Text>\n </CardContent>\n </Card>\n </Popover>\n </Flex>\n </Flex>\n );\n};\n\nPopoverGroups.argTypes = {\n arrow: { table: { disable: true } },\n showDelay: { table: { disable: true } },\n hideDelay: { table: { disable: true } },\n placement: { table: { disable: true } }\n};\n"]}
@@ -32,7 +32,7 @@ export const IndeterminateProgress = (args) => {
32
32
  setLoading(true);
33
33
  }
34
34
  }, [args.placement]);
35
- return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading }, void 0)] }, void 0));
35
+ return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading })] }));
36
36
  };
37
37
  IndeterminateProgress.args = {
38
38
  message: 'Loading'
@@ -53,7 +53,7 @@ export const DeterminateProgress = (args) => {
53
53
  setLoading(true);
54
54
  }
55
55
  }, [args.placement]);
56
- return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading }, void 0)] }, void 0));
56
+ return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading })] }));
57
57
  };
58
58
  DeterminateProgress.args = {
59
59
  value: 67
@@ -68,7 +68,7 @@ export const ConfigurableProgress = (args) => {
68
68
  'progress-color': args.progressColor
69
69
  }
70
70
  }
71
- }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }, void 0) }, void 0) }, void 0));
71
+ }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }) }) }));
72
72
  };
73
73
  ConfigurableProgress.args = {
74
74
  progressColor: '#076bc9'
@@ -1 +1 @@
1
- {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n Button,\n Configuration,\n Flex,\n Progress,\n ProgressProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n args: {\n variant: 'ring',\n placement: 'local',\n message: ''\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={args.message}\n visible={loading}\n />\n </Flex>\n );\n};\n\nIndeterminateProgress.args = {\n message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n value={args.value}\n variant={args.variant}\n placement={args.placement}\n message={args.message || `${args.value}%`}\n visible={loading}\n />\n </Flex>\n );\n};\n\nDeterminateProgress.args = {\n value: 67\n};\n\nDeterminateProgress.argTypes = {\n value: { control: { type: 'number' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}
1
+ {"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n Button,\n Configuration,\n Flex,\n Progress,\n ProgressProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n title: 'Core/Progress',\n component: Progress,\n args: {\n variant: 'ring',\n placement: 'local',\n message: ''\n },\n argTypes: {\n variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n message: { control: { type: 'text' } }\n }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n variant={args.variant}\n placement={args.placement}\n message={args.message}\n visible={loading}\n />\n </Flex>\n );\n};\n\nIndeterminateProgress.args = {\n message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n const [loading, setLoading] = useState(false);\n\n const handleClick = () => {\n setLoading(true);\n\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n useEffect(() => {\n if (args.placement === 'global') {\n setLoading(false);\n } else {\n setLoading(true);\n }\n }, [args.placement]);\n\n return (\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n {args.placement === 'inline' && <Text>Progress demo</Text>}\n <Progress\n value={args.value}\n variant={args.variant}\n placement={args.placement}\n message={args.message || `${args.value}%`}\n visible={loading}\n />\n </Flex>\n );\n};\n\nDeterminateProgress.args = {\n value: 67\n};\n\nDeterminateProgress.argTypes = {\n value: { control: { type: 'number' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n args: ConfigurableProgressProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n progress: {\n 'progress-color': args.progressColor\n }\n }\n }}\n >\n <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n <Progress variant={args.variant} placement='local' message='Loading' visible />\n </Flex>\n </Configuration>\n );\n};\n\nConfigurableProgress.args = {\n progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n progressColor: { control: { type: 'color' } },\n placement: { table: { disable: true } },\n message: { table: { disable: true } }\n};\n"]}
@@ -19,10 +19,10 @@ export default {
19
19
  }
20
20
  };
21
21
  export const DefaultRadioButton = (args) => {
22
- return (_jsx(RadioButton, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
22
+ return (_jsx(RadioButton, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
23
23
  };
24
24
  export const RadioButtonCard = (args) => {
25
- return (_jsx(RadioButton, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
25
+ return (_jsx(RadioButton, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
26
26
  };
27
27
  export const ConfigurableRadioButton = (args) => {
28
28
  return (_jsx(Configuration, { theme: {
@@ -45,7 +45,7 @@ export const ConfigurableRadioButton = (args) => {
45
45
  }
46
46
  }
47
47
  }
48
- }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }, void 0) }, void 0));
48
+ }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }) }));
49
49
  };
50
50
  ConfigurableRadioButton.args = {
51
51
  size: '1.25rem',
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/RadioButton',\n component: RadioButton,\n args: {\n status: undefined,\n label: 'Choose me',\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\ninterface ConfigurableRadioButtonProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n}\n\nexport const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n args: ConfigurableRadioButtonProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'radio-button': {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <RadioButton label='Configurable Radio Button' />\n </Configuration>\n );\n};\n\nConfigurableRadioButton.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '50%',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } }\n};\n"]}
1
+ {"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/RadioButton',\n component: RadioButton,\n args: {\n status: undefined,\n label: 'Choose me',\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n return (\n <RadioButton\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n\ninterface ConfigurableRadioButtonProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n}\n\nexport const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n args: ConfigurableRadioButtonProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n 'radio-button': {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <RadioButton label='Configurable Radio Button' />\n </Configuration>\n );\n};\n\nConfigurableRadioButton.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '50%',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } }\n};\n"]}