pixel-react 1.6.5 → 1.6.7

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 (253) hide show
  1. package/lib/1fb4472b34e4fe07.css +1 -0
  2. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
  3. package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
  4. package/lib/components/Accordion/Accordion.d.ts +1 -1
  5. package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
  6. package/lib/components/Accordion/types.d.ts +12 -0
  7. package/lib/components/AddButton/AddButton.d.ts +5 -0
  8. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  9. package/lib/components/AddButton/index.d.ts +1 -0
  10. package/lib/components/AddButton/types.d.ts +4 -0
  11. package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
  12. package/lib/components/AddVariables/AddVariables.d.ts +5 -0
  13. package/lib/components/AddVariables/index.d.ts +1 -0
  14. package/lib/components/AddVariables/types.d.ts +35 -0
  15. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +7 -0
  16. package/lib/components/AppHeader/AppHeader.stories.d.ts +7 -0
  17. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  18. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  19. package/lib/components/Avatar/Avatar.stories.d.ts +10 -0
  20. package/lib/components/Button/Button.stories.d.ts +13 -0
  21. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  22. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  23. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
  24. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  25. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  26. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  27. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  28. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
  29. package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
  30. package/lib/components/Checkbox/types.d.ts +4 -0
  31. package/lib/components/Chip/Chip.stories.d.ts +14 -0
  32. package/lib/components/Comment/Comments.d.ts +4 -0
  33. package/lib/components/Comment/comment/Comment.d.ts +11 -0
  34. package/lib/components/Comment/comment/useNode.d.ts +7 -0
  35. package/lib/components/Comment/index.d.ts +1 -0
  36. package/lib/components/Comment/type.d.ts +25 -0
  37. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  38. package/lib/components/DatePicker/DatePicker.stories.d.ts +9 -0
  39. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +6 -0
  40. package/lib/components/Drawer/Drawer.stories.d.ts +12 -0
  41. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  42. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  43. package/lib/components/Editor/constants.d.ts +1 -1
  44. package/lib/components/Editor/types.d.ts +10 -2
  45. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  46. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  47. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  48. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  49. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  50. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  51. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  52. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  53. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  54. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  55. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  56. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  57. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  58. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  59. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  60. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  61. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +80 -0
  62. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  63. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +174 -0
  64. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  65. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  66. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  67. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  68. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  69. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  70. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  71. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  72. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  73. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  74. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  75. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  76. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  77. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  78. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +178 -0
  79. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  80. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  81. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +44 -0
  82. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +19 -0
  83. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  84. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +12 -0
  85. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +15 -0
  86. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  87. package/lib/components/ExcelFile/Types.d.ts +129 -0
  88. package/lib/components/ExcelFile/index.d.ts +1 -0
  89. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
  90. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  91. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
  92. package/lib/components/Form/Form.stories.d.ts +7 -0
  93. package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
  94. package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
  95. package/lib/components/Icon/Icon.stories.d.ts +8 -0
  96. package/lib/components/IconButton/IconButton.d.ts +1 -2
  97. package/lib/components/IconButton/IconButton.stories.d.ts +7 -0
  98. package/lib/components/IconButton/types.d.ts +1 -1
  99. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  100. package/lib/components/Input/Input.d.ts +1 -1
  101. package/lib/components/Input/Input.stories.d.ts +9 -0
  102. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +9 -0
  103. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +13 -0
  104. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
  105. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +6 -0
  106. package/lib/components/MenuOption/MenuOption.stories.d.ts +16 -0
  107. package/lib/components/MiniModal/MiniModal.stories.d.ts +10 -0
  108. package/lib/components/Modal/Modal.stories.d.ts +7 -0
  109. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +6 -0
  110. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  111. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +11 -0
  112. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  113. package/lib/components/Paper/Paper.stories.d.ts +11 -0
  114. package/lib/components/PhoneInput/PhoneInput.d.ts +6 -0
  115. package/lib/components/PhoneInput/index.d.ts +1 -0
  116. package/lib/components/PhoneInput/types.d.ts +10 -0
  117. package/lib/components/PopUpModal/types.d.ts +1 -0
  118. package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
  119. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +9 -0
  120. package/lib/components/Search/Search.stories.d.ts +6 -0
  121. package/lib/components/Select/Select.stories.d.ts +14 -0
  122. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
  123. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +17 -0
  124. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +6 -0
  125. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  126. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  127. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  128. package/lib/components/Table/Table.stories.d.ts +13 -0
  129. package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
  130. package/lib/components/TableWithAccordion/TableWithAccordion.d.ts +5 -0
  131. package/lib/components/TableWithAccordion/data.d.ts +8 -0
  132. package/lib/components/TableWithAccordion/index.d.ts +1 -0
  133. package/lib/components/TableWithAccordion/types.d.ts +67 -0
  134. package/lib/components/Tabs/Tabs.stories.d.ts +9 -0
  135. package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
  136. package/lib/components/Toast/Toast.stories.d.ts +6 -0
  137. package/lib/components/Toastify/Toastify.stories.d.ts +6 -0
  138. package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
  139. package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
  140. package/lib/components/Typography/Typography.stories.d.ts +10 -0
  141. package/lib/components/VariableInput/VariableInput.stories.d.ts +6 -0
  142. package/lib/index.d.ts +186 -12
  143. package/lib/index.esm.js +2842 -385
  144. package/lib/index.esm.js.map +1 -1
  145. package/lib/index.js +2846 -384
  146. package/lib/index.js.map +1 -1
  147. package/lib/tsconfig.tsbuildinfo +1 -1
  148. package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
  149. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
  150. package/lib/utils/compareArrays/compareArrays.stories.d.ts +6 -0
  151. package/lib/utils/compareObjects/compareObjects.stories.d.ts +6 -0
  152. package/lib/utils/debounce/debounce.stories.d.ts +6 -0
  153. package/lib/utils/ffID/ffID.stories.d.ts +6 -0
  154. package/lib/utils/find/findAndInsert.d.ts +7 -0
  155. package/lib/utils/find/findAndInsert.stories.d.ts +7 -0
  156. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +7 -0
  157. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  158. package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
  159. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  160. package/lib/utils/throttle/throttle.stories.d.ts +6 -0
  161. package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
  162. package/package.json +2 -1
  163. package/src/assets/Themes/BaseTheme.scss +9 -0
  164. package/src/assets/Themes/DarkTheme.scss +62 -41
  165. package/src/assets/icons/add_file.svg +4 -17
  166. package/src/assets/icons/add_variable.svg +11 -0
  167. package/src/assets/icons/approval_pending.svg +8 -8
  168. package/src/assets/icons/authorization.svg +4 -0
  169. package/src/assets/icons/capture_icon.svg +2 -5
  170. package/src/assets/icons/configuration.svg +3 -3
  171. package/src/assets/icons/defects.svg +8 -8
  172. package/src/assets/icons/depends_on_script.svg +7 -0
  173. package/src/assets/icons/element.svg +4 -4
  174. package/src/assets/icons/email_group.svg +3 -0
  175. package/src/assets/icons/executions_icon.svg +3 -0
  176. package/src/assets/icons/labels.svg +8 -0
  177. package/src/assets/icons/machine_disable_icon.svg +18 -0
  178. package/src/assets/icons/machine_enable_icon.svg +10 -0
  179. package/src/assets/icons/parameters.svg +3 -0
  180. package/src/assets/icons/pre_post_condition.svg +8 -0
  181. package/src/assets/icons/program_element.svg +8 -0
  182. package/src/assets/icons/project_element.svg +4 -4
  183. package/src/assets/icons/step_group.svg +10 -10
  184. package/src/assets/icons/suites_icon.svg +3 -0
  185. package/src/assets/icons/tap_icon.svg +3 -3
  186. package/src/assets/icons/test_data.svg +5 -0
  187. package/src/assets/icons/test_data_set.svg +7 -0
  188. package/src/assets/icons/variable.svg +3 -3
  189. package/src/assets/icons/variable_set.svg +5 -0
  190. package/src/assets/icons/web_service_icon.svg +3 -3
  191. package/src/components/Accordion/Accordion.stories.tsx +4 -0
  192. package/src/components/Accordion/Accordion.tsx +7 -1
  193. package/src/components/Accordion/types.ts +12 -0
  194. package/src/components/AddVariables/AddVariables.scss +14 -0
  195. package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
  196. package/src/components/AddVariables/AddVariables.tsx +113 -0
  197. package/src/components/AddVariables/index.ts +1 -0
  198. package/src/components/AddVariables/types.ts +36 -0
  199. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  200. package/src/components/AppHeader/AppHeader.scss +7 -1
  201. package/src/components/AppHeader/types.ts +8 -9
  202. package/src/components/Checkbox/Checkbox.scss +57 -0
  203. package/src/components/Checkbox/Checkbox.stories.tsx +91 -15
  204. package/src/components/Checkbox/Checkbox.tsx +4 -1
  205. package/src/components/Checkbox/types.ts +4 -0
  206. package/src/components/Comment/Comments.scss +166 -0
  207. package/src/components/Comment/Comments.stories.tsx +212 -0
  208. package/src/components/Comment/Comments.tsx +51 -0
  209. package/src/components/Comment/comment/Comment.tsx +206 -0
  210. package/src/components/Comment/comment/useNode.ts +51 -0
  211. package/src/components/Comment/index.ts +1 -0
  212. package/src/components/Comment/type.ts +36 -0
  213. package/src/components/Drawer/Drawer.scss +2 -1
  214. package/src/components/Editor/Editor.stories.tsx +2 -2
  215. package/src/components/Editor/Editor.tsx +4 -2
  216. package/src/components/Editor/VariableDropdown.scss +8 -2
  217. package/src/components/Editor/VariableDropdown.tsx +15 -7
  218. package/src/components/Editor/constants.ts +1 -1
  219. package/src/components/Editor/types.ts +12 -2
  220. package/src/components/FieldSet/FieldSet.scss +2 -1
  221. package/src/components/FieldSet/FieldSet.stories.tsx +2 -1
  222. package/src/components/Icon/iconList.ts +29 -2
  223. package/src/components/IconButton/IconButton.stories.tsx +1 -0
  224. package/src/components/IconButton/IconButton.tsx +5 -8
  225. package/src/components/IconButton/types.ts +2 -2
  226. package/src/components/IconRadioGroup/IconRadioGroup.scss +2 -1
  227. package/src/components/Input/Input.tsx +99 -88
  228. package/src/components/LabelEditTextField/LabelEditTextField.tsx +1 -1
  229. package/src/components/Modal/Modal.stories.tsx +2 -1
  230. package/src/components/MultiSelect/MultiSelect.scss +29 -0
  231. package/src/components/MultiSelect/MultiSelect.stories.tsx +19 -5
  232. package/src/components/MultiSelect/MultiSelect.tsx +29 -19
  233. package/src/components/PhoneInput/PhoneInput.d.ts +3 -0
  234. package/src/components/PhoneInput/PhoneInput.stories.tsx +95 -0
  235. package/src/components/PhoneInput/PhoneInput.tsx +90 -0
  236. package/src/components/PhoneInput/index.ts +1 -0
  237. package/src/components/PhoneInput/phoneInput.scss +3 -0
  238. package/src/components/PhoneInput/types.ts +10 -0
  239. package/src/components/PopUpModal/PopUpModal.stories.tsx +14 -13
  240. package/src/components/PopUpModal/PopUpModal.tsx +2 -1
  241. package/src/components/PopUpModal/types.ts +14 -13
  242. package/src/components/Select/Select.stories.tsx +2 -2
  243. package/src/components/TableWithAccordion/TableWithAccordion.scss +54 -0
  244. package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx +94 -0
  245. package/src/components/TableWithAccordion/TableWithAccordion.tsx +174 -0
  246. package/src/components/TableWithAccordion/data.ts +37 -0
  247. package/src/components/TableWithAccordion/index.ts +1 -0
  248. package/src/components/TableWithAccordion/types.ts +70 -0
  249. package/src/components/Tabs/Tabs.scss +0 -1
  250. package/src/index.ts +12 -1
  251. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
  252. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
  253. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
@@ -1,3 +1,3 @@
1
- <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
3
- </svg>
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
3
+ </svg>
@@ -1,6 +1,7 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import Accordion from './Accordion';
3
3
  import Icon from '../Icon';
4
+ import React from 'react';
4
5
 
5
6
  const meta: Meta<typeof Accordion> = {
6
7
  title: 'Components/Accordion',
@@ -14,6 +15,9 @@ const meta: Meta<typeof Accordion> = {
14
15
  type Story = StoryObj<typeof Accordion>;
15
16
  const defaultArgs = {
16
17
  headerTitle: 'Accordion',
18
+ accordionStateIconName : 'arrow_down',
19
+ AccordionStateIconWidth:4,
20
+ AccordionStateIconHeight:8,
17
21
  };
18
22
 
19
23
  export const SampleAccordion: Story = {
@@ -16,6 +16,9 @@ const Accordion = ({
16
16
  accordionContent = <>This is accordion content</>,
17
17
  disable = false,
18
18
  disableInfoMessage = '',
19
+ accordionStateIconName = 'arrow_down',
20
+ AccordionStateIconWidth=12,
21
+ AccordionStateIconHeight=8,
19
22
  }: AccordionProps) => {
20
23
  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
21
24
 
@@ -45,9 +48,12 @@ const Accordion = ({
45
48
  </Tooltip>
46
49
 
47
50
  <Icon
48
- name={'arrow_down'}
51
+ name={accordionStateIconName}
49
52
  hoverEffect={false}
50
53
  className={`accordion-arrow ${isAccordionExpanded && 'expanded'}`}
54
+ width={AccordionStateIconWidth}
55
+ height={AccordionStateIconHeight}
56
+ color='var(--table-with-accordion-icon-color)'
51
57
  />
52
58
  </div>
53
59
  {!disable && isAccordionExpanded && (
@@ -25,4 +25,16 @@ export interface AccordionProps {
25
25
  * Info message to user for disabling accordion
26
26
  */
27
27
  disableInfoMessage?: string;
28
+ /**
29
+ * Icon name for the Accordion state like expand and collapse
30
+ */
31
+ accordionStateIconName?: string;
32
+ /**
33
+ * Accordion collapse and expand Icon width
34
+ */
35
+ AccordionStateIconWidth:number,
36
+ /**
37
+ * Accordion collapse and expand Icon height
38
+ */
39
+ AccordionStateIconHeight:number,
28
40
  }
@@ -0,0 +1,14 @@
1
+ .ff-add-variable-container {
2
+ width: 100%;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 8px;
6
+ position: relative;
7
+ .ff-add-variable-input {
8
+ width: 100%;
9
+ display: flex;
10
+ flex-direction: row;
11
+ align-items: center;
12
+ gap: 8px;
13
+ }
14
+ }
@@ -0,0 +1,44 @@
1
+ import React, { useState } from 'react';
2
+ import { Meta, StoryFn } from '@storybook/react';
3
+ import AddVariables from './AddVariables';
4
+ import { AddVariableProps } from './types';
5
+ import { variableList } from '../Editor/constants';
6
+
7
+ export default {
8
+ title: 'Components/AddVariables',
9
+ component: AddVariables,
10
+ args: {
11
+ label: 'Add Variables',
12
+ placeholder: 'Enter text',
13
+ variableList,
14
+ dropdownWidth: '138px',
15
+ },
16
+ parameters: {
17
+ layout: 'centered',
18
+ },
19
+ } as Meta<AddVariableProps>;
20
+
21
+ // Wrapper component to handle state inside Storybook stories
22
+ const Template: StoryFn<AddVariableProps> = (args) => {
23
+ const [inputValue, setInputValue] = useState<string>('');
24
+
25
+ return (
26
+ <AddVariables
27
+ {...args}
28
+ onChange={(value: string) => setInputValue(value)}
29
+ value={inputValue}
30
+ />
31
+ );
32
+ };
33
+
34
+ export const Default = Template.bind({});
35
+ Default.args = {
36
+ onCreateVariableClick: () => alert('Create Variable clicked'),
37
+ };
38
+
39
+ // Customized story with pre-filled input value
40
+ export const WithInitialValue = Template.bind({});
41
+ WithInitialValue.args = {
42
+ inputValue: 'Initial Text with $',
43
+ onCreateVariableClick: () => alert('Create Variable clicked'),
44
+ };
@@ -0,0 +1,113 @@
1
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
2
+ import VariableDropdown from '../Editor/VariableDropdown';
3
+ import Icon from '../Icon';
4
+ import Input from '../Input';
5
+ import { AddVariableProps, dynamicObject } from './types';
6
+ import './AddVariables.scss';
7
+ import React, { useState, useRef, useEffect } from 'react';
8
+
9
+ const AddVariables: React.FC<AddVariableProps> = ({
10
+ label = '',
11
+ variableList = [],
12
+ placeholder = 'Enter text',
13
+ onChange,
14
+ onCreateVariableClick,
15
+ value = '',
16
+ dropdownWidth = 'inherit',
17
+ }) => {
18
+ const [showDropdown, setShowDropdown] = useState<boolean>(false);
19
+ const [cursorPosition, setCursorPosition] = useState<number | null>(null);
20
+ const [showCreateVariableIcon, setShowCreateVariableIcon] =
21
+ useState<boolean>(false);
22
+ const inputRef = useRef<HTMLInputElement>(null);
23
+
24
+ useEffect(() => {
25
+ if (cursorPosition !== null && inputRef.current) {
26
+ inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
27
+ inputRef.current.focus();
28
+ }
29
+ }, [cursorPosition]);
30
+
31
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
32
+ const value = event.target.value;
33
+ onChange?.(value);
34
+
35
+ // Show dropdown only if the last character typed is `$`
36
+ const cursorPos = inputRef.current?.selectionStart || 0;
37
+ const isDollarTyped = value[cursorPos - 1] === '$';
38
+
39
+ if (isDollarTyped) {
40
+ setShowDropdown(true);
41
+ } else {
42
+ setShowDropdown(false); // Close if it's a space or other characters
43
+ }
44
+ if (value?.includes('$')) {
45
+ setShowCreateVariableIcon(false);
46
+ } else {
47
+ setShowCreateVariableIcon(true);
48
+ }
49
+ };
50
+
51
+ const handleDropdownClick = (item: dynamicObject) => {
52
+ if (inputRef.current) {
53
+ const { selectionStart, selectionEnd } = inputRef.current;
54
+ const dollarSyntax = `{${
55
+ item.type === 'LOCAL'
56
+ ? 'LV'
57
+ : item.type === 'GLOBAL'
58
+ ? 'GV'
59
+ : item.type === 'GROUP'
60
+ ? 'SG'
61
+ : 'PEV'
62
+ }_${item.name}}`;
63
+
64
+ const newValue =
65
+ value.slice(0, selectionStart || 0) +
66
+ dollarSyntax +
67
+ value.slice(selectionEnd || 0);
68
+
69
+ onChange(newValue);
70
+ setCursorPosition((selectionStart || 0) + dollarSyntax.length);
71
+
72
+ // Close the dropdown after inserting the variable
73
+ setShowDropdown(false);
74
+ onChange?.(newValue);
75
+ }
76
+ };
77
+
78
+ return (
79
+ <div className="ff-add-variable-container">
80
+ <div className="ff-add-variable-input">
81
+ <Input
82
+ name="add_variable"
83
+ ref={inputRef}
84
+ type="text"
85
+ value={value}
86
+ onChange={handleChange}
87
+ variant="primary"
88
+ label={label}
89
+ placeholder={placeholder}
90
+ />
91
+ {!checkEmpty(value) && showCreateVariableIcon && (
92
+ <Icon
93
+ onClick={onCreateVariableClick}
94
+ name="add_variable"
95
+ width={24}
96
+ height={24}
97
+ hoverEffect
98
+ />
99
+ )}
100
+ </div>
101
+ {showDropdown && (
102
+ <VariableDropdown
103
+ position="relative"
104
+ width={dropdownWidth}
105
+ optionsList={variableList}
106
+ onSelectVariable={handleDropdownClick}
107
+ />
108
+ )}
109
+ </div>
110
+ );
111
+ };
112
+
113
+ export default AddVariables;
@@ -0,0 +1 @@
1
+ export { default } from './AddVariables';
@@ -0,0 +1,36 @@
1
+ export type dynamicObject = {
2
+ [key: string]: any;
3
+ };
4
+
5
+ export interface AddVariableProps {
6
+ /**
7
+ * Label for the field
8
+ */
9
+ label?: string;
10
+ /**
11
+ * List of variables
12
+ */
13
+ variableList?: dynamicObject[];
14
+ /**
15
+ * Place holder for the input field
16
+ */
17
+ placeholder?: string;
18
+ /**
19
+ * Function to handle input change
20
+ * @param value
21
+ * @returns
22
+ */
23
+ onChange: (value: string) => void;
24
+ /**
25
+ * Function to handle create variable icon click
26
+ */
27
+ onCreateVariableClick?: () => void;
28
+ /**
29
+ * Value of the input field
30
+ */
31
+ value: string;
32
+ /**
33
+ * Width of the dropdown
34
+ */
35
+ dropdownWidth?: string;
36
+ }
@@ -7,7 +7,7 @@
7
7
  .ff-all-project-dropdown {
8
8
  width: fit-content;
9
9
  border-radius: 16px;
10
- background-color: var(--ff-all-projects-default-color);
10
+ // background-color: var(--ff-all-projects-default-color);
11
11
  color: var(--expandable-menu-default-bg);
12
12
  line-height: 18px;
13
13
  @include mixins.center-content();
@@ -32,6 +32,10 @@
32
32
  cursor: pointer;
33
33
  display: flex;
34
34
  position: relative;
35
+ flex: 1 1 auto;
36
+ overflow: hidden;
37
+ transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
38
+ max-width: 100px; /* Initial max-width */
35
39
  &:not(.ff-app-header-nav-bar-item--selected):hover::after {
36
40
  animation: oscillate-border-width 0.5s ease-in-out forwards;
37
41
  }
@@ -54,7 +58,9 @@
54
58
  padding: 3px;
55
59
  background-color: var(--primary-icon-color);
56
60
  border-radius: 20px;
57
- transition: width 3s ease-in-out;
61
+ flex-grow: 12; /* Increase size on hover */
62
+ max-width: 550px;
63
+ opacity: 1;
58
64
  .ff-app-header-nav-bar-item-label {
59
65
  box-shadow: 0px 4px 4px 0px #00000040 inset;
60
66
  background: linear-gradient(
@@ -6,7 +6,6 @@ export interface AppHeaderProps {
6
6
  rightContent?: ReactNode;
7
7
  projectsList?: optionsType[];
8
8
  appHeaderMenuItems: appHeaderMenuItemProps[];
9
-
10
9
  selectedMenu: string;
11
10
  selectedSubMenu?: string;
12
11
  selectedQuickMenu?: string;
@@ -22,16 +21,16 @@ export interface appHeaderMenuItemProps {
22
21
  label: string;
23
22
  path?: string;
24
23
  disable?: boolean;
25
- disableText?:string;
26
- hide?:boolean;
24
+ disableText?: string;
25
+ hide?: boolean;
27
26
  subMenuItems?: appHeaderSubMenuItemProps[];
28
27
  }
29
28
  export interface appHeaderSubMenuItemProps {
30
29
  label: string;
31
30
  path?: string;
32
31
  disable?: boolean;
33
- disableText?:string;
34
- hide?:boolean;
32
+ disableText?: string;
33
+ hide?: boolean;
35
34
  quickMenuItems?: appHeaderQuickMenuItemProps[];
36
35
  hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
37
36
  }
@@ -40,14 +39,14 @@ export interface appHeaderQuickMenuItemProps {
40
39
  path?: string;
41
40
  iconName: string;
42
41
  disable?: boolean;
43
- disableText?:string;
44
- hide?:boolean;
42
+ disableText?: string;
43
+ hide?: boolean;
45
44
  }
46
45
  export interface appHeaderHiddenMenuItemProps {
47
46
  label: string;
48
47
  value: string | string[];
49
48
  icon: string;
50
49
  disable?: boolean;
51
- disableText?:string;
52
- hide?:boolean;
50
+ disableText?: string;
51
+ hide?: boolean;
53
52
  }
@@ -55,10 +55,49 @@
55
55
  .ff-checkbox-input:checked + .ff-checkbox-custom {
56
56
  background: var(--brand-color);
57
57
  border-color: var(--brand-color);
58
+ &.ff-checkbox-checked {
59
+ &--passed {
60
+ background-color: var(--ff-card-passed-status-bg-color);
61
+ border-color: var(--ff-card-passed-status-bg-color);
62
+ }
63
+ &--failed {
64
+ background-color: var(--ff-card-failed-status-bg-color);
65
+ border-color: var(--ff-card-failed-status-bg-color);
66
+ }
67
+ &--warning {
68
+ background-color: var(--ff-card-warning-status-bg-color);
69
+ border-color: var(--ff-card-warning-status-bg-color);
70
+ }
71
+ &--skipped {
72
+ background-color: var(--ff-card-skipped-status-bg-color);
73
+ border-color: var(--ff-card-skipped-status-bg-color);
74
+ }
75
+ &--flaky {
76
+ background-color: var(-- ff-card-flaky-status-bg-color);
77
+ border-color: var(-- ff-card-flaky-status-bg-color);
78
+ }
79
+ }
58
80
  }
59
81
 
60
82
  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
61
83
  background: var(--brand-color);
84
+ &.ff-checkbox-checked {
85
+ &--passed {
86
+ background: var(--ff-card-passed-status-bg-color);
87
+ }
88
+ &--failed {
89
+ background: var(--ff-card-failed-status-bg-color);
90
+ }
91
+ &--warning {
92
+ background: var(--ff-card-warning-status-bg-color);
93
+ }
94
+ &--skipped {
95
+ background: var(--ff-card-skipped-status-bg-color);
96
+ }
97
+ &--flaky {
98
+ background: var(-- ff-card-flaky-status-bg-color);
99
+ }
100
+ }
62
101
  &::after {
63
102
  opacity: 1;
64
103
  }
@@ -86,4 +125,22 @@
86
125
  }
87
126
  }
88
127
  }
128
+
129
+ .ff-checkbox {
130
+ &--passed {
131
+ border-color: var(--ff-card-passed-status-bg-color);
132
+ }
133
+ &--failed {
134
+ border-color: var(--ff-card-failed-status-bg-color);
135
+ }
136
+ &--warning {
137
+ border-color: var(--ff-card-warning-status-bg-color);
138
+ }
139
+ &--skipped {
140
+ border-color: var(--ff-card-skipped-status-bg-color);
141
+ }
142
+ &--flaky {
143
+ border-color: var(-- ff-card-flaky-status-bg-color);
144
+ }
145
+ }
89
146
  }
@@ -1,6 +1,6 @@
1
+ import React, { useState } from 'react';
1
2
  import { Meta, StoryObj } from '@storybook/react';
2
3
  import Checkbox from './Checkbox';
3
- import { useState } from 'react';
4
4
 
5
5
  const meta: Meta<typeof Checkbox> = {
6
6
  component: Checkbox,
@@ -10,38 +10,114 @@ const meta: Meta<typeof Checkbox> = {
10
10
  layout: 'centered',
11
11
  },
12
12
  };
13
+
13
14
  export default meta;
14
15
 
15
16
  type Story = StoryObj<typeof meta>;
16
17
 
18
+ const useCheckboxState = (initialState = false) => {
19
+ const [checked, setChecked] = useState(initialState);
20
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
21
+ setChecked(event.target.checked);
22
+ };
23
+ return { checked, handleChange };
24
+ };
25
+
26
+ // Story: Default Checkbox
17
27
  export const Default: Story = {
18
- args: {
19
- label: 'Enter label',
28
+ render: () => {
29
+ const { checked, handleChange } = useCheckboxState();
30
+ return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
20
31
  },
21
32
  };
22
33
 
34
+ // Story: Partial Checkbox
23
35
  export const Partial: Story = {
36
+ render: () => {
37
+ const { checked, handleChange } = useCheckboxState();
38
+ const [partial, setPartial] = useState(true);
39
+
40
+ const handlePartialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
41
+ setPartial(!event.target.checked);
42
+ handleChange(event);
43
+ };
44
+
45
+ return (
46
+ <Checkbox
47
+ label="Partially Selected Checkbox"
48
+ partial={partial}
49
+ checked={checked}
50
+ onChange={handlePartialChange}
51
+ />
52
+ );
53
+ },
54
+ };
55
+
56
+ // Story: Disabled Checkbox
57
+ export const Disabled: Story = {
24
58
  args: {
25
- label: 'Enter label',
26
- partial: true,
59
+ label: 'Disabled Checkbox',
60
+ disabled: true,
27
61
  },
28
62
  };
29
63
 
30
- export const Controlled: Story = {
64
+ // Story: Checkbox Variants
65
+ export const Variants: Story = {
31
66
  render: () => {
32
- const [checked, setChecked] = useState(false);
67
+ const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
68
+ const initialStates = variants.reduce((acc, variant) => ({ ...acc, [variant]: false }), {});
69
+ const [checkedStates, setCheckedStates] = useState(initialStates);
33
70
 
34
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
35
- setChecked((event.target as HTMLInputElement).checked);
71
+ const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
72
+ setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
36
73
  };
37
74
 
38
75
  return (
39
- <Checkbox
40
- label="click here to proceed with controlled component"
41
- disabled={false}
42
- checked={checked}
43
- onChange={handleChange}
44
- />
76
+ <div style={{ display: 'flex', gap: '16px' }}>
77
+ {variants.map((variant) => (
78
+ <Checkbox
79
+ key={variant}
80
+ label={variant.charAt(0).toUpperCase() + variant.slice(1)}
81
+ variant={variant}
82
+ checked={checkedStates[variant]}
83
+ onChange={handleChange(variant)}
84
+ />
85
+ ))}
86
+ </div>
87
+ );
88
+ },
89
+ };
90
+
91
+ // Story: Controlled Checkbox
92
+ export const Controlled: Story = {
93
+ render: () => {
94
+ const { checked, handleChange } = useCheckboxState();
95
+ return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
96
+ },
97
+ };
98
+
99
+ // Story: All Features Showcase
100
+ export const AllFeatures: Story = {
101
+ render: () => {
102
+ const { checked: defaultChecked, handleChange: handleDefaultChange } = useCheckboxState();
103
+ const { checked: partialChecked, handleChange: handlePartialChange } = useCheckboxState(true);
104
+ const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
105
+
106
+ return (
107
+ <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
108
+ <Checkbox label="Default Checkbox" checked={defaultChecked} onChange={handleDefaultChange} />
109
+ <Checkbox
110
+ label="Partially Selected"
111
+ partial={partialChecked}
112
+ onChange={handlePartialChange}
113
+ />
114
+ <Checkbox label="Disabled Checkbox" disabled />
115
+ <div style={{ display: 'flex', gap: '16px' }}>
116
+ {variants.map((variant) => (
117
+ <Checkbox key={variant} label={variant} variant={variant} />
118
+ ))}
119
+ </div>
120
+ </div>
45
121
  );
46
122
  },
47
123
  };
@@ -14,6 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
14
14
  checked: initialChecked = false,
15
15
  partial = false,
16
16
  onChange,
17
+ variant
17
18
  }) => {
18
19
  const [checked, setChecked] = useState(initialChecked);
19
20
 
@@ -34,8 +35,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
34
35
  />
35
36
  <span
36
37
  className={classNames('ff-checkbox-custom', {
37
- 'ff-checkbox-checked': checked,
38
+ 'ff-checkbox-checked': checked ,
38
39
  'ff-storybook-checkbox--partial': partial && !checked,
40
+ [`ff-checkbox--${variant}`]: variant,
41
+ [`ff-checkbox-checked--${variant}`]: checked && variant,
39
42
  })}
40
43
  >
41
44
  {checked && (
@@ -27,4 +27,8 @@ export interface CheckboxProps {
27
27
  * For partially checked checkbox
28
28
  */
29
29
  partial?: boolean;
30
+ /**
31
+ * For variant color
32
+ */
33
+ variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
30
34
  }