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
@@ -0,0 +1,36 @@
1
+ export interface CommentType {
2
+ id?: string | number;
3
+ description?: string;
4
+ createdBy?: string;
5
+ modifiedBy?: string;
6
+ createdByUname?: string;
7
+ modifiedByUname?: string;
8
+ createdOn?: string;
9
+ modifiedOn?: string;
10
+ name?: string;
11
+ emailId?: string[];
12
+ commentParentId?: string;
13
+ comments: CommentType[];
14
+ }
15
+
16
+ export type HandleAddComment = (
17
+ newComment: CommentType,
18
+ parentCommentId?: string
19
+ ) => void;
20
+
21
+ // Handles editing an existing comment
22
+ export type HandleEditComment = (
23
+ commentId: string,
24
+ updatedDescription: string
25
+ ) => void;
26
+
27
+ // Handles deleting a comment
28
+ export type HandleDeleteComment = (commentId: string) => void;
29
+ export type HandleNodeFunction = (commentId: string, value: string) => void;
30
+ export interface CommentsProps {
31
+ commentsData: any;
32
+ handleAddComment: HandleAddComment;
33
+ handleEditComment: HandleEditComment;
34
+ handleDeleteComment: HandleDeleteComment;
35
+ onCommentsDataChange: (data: any) => void;
36
+ }
@@ -77,7 +77,7 @@
77
77
  display: flex;
78
78
  align-items: center;
79
79
  justify-content: space-between;
80
- gap: 12px;
80
+ gap: 8px;
81
81
  height: 24px;
82
82
 
83
83
  .ff-action-button {
@@ -100,6 +100,7 @@
100
100
  .ff-custom-header {
101
101
  background-color: var(--drawer-footer-bg);
102
102
  padding: 4px 8px;
103
+ width: 100%;
103
104
  }
104
105
  }
105
106
  }
@@ -2,7 +2,7 @@
2
2
  import { Meta, StoryObj } from '@storybook/react';
3
3
  import Editor from './Editor';
4
4
  import { EditorProps } from './types';
5
- import { varibaleList } from './constants';
5
+ import { variableList } from './constants';
6
6
  import { useState } from 'react';
7
7
 
8
8
  const meta: Meta<EditorProps> = {
@@ -49,6 +49,6 @@ export const Default: Story = {
49
49
  width: '100%',
50
50
  height: '90vh',
51
51
  readOnly: false,
52
- variableOptionsList: varibaleList,
52
+ variableOptionsList: variableList,
53
53
  },
54
54
  };
@@ -115,8 +115,8 @@ const Editor = forwardRef<any, EditorProps>(
115
115
  option?.type === 'GLOBAL'
116
116
  ? 'GV'
117
117
  : option?.type === 'LOCAL'
118
- ? 'LV'
119
- : 'PEV'
118
+ ? 'LV'
119
+ : 'PEV'
120
120
  );
121
121
  };
122
122
 
@@ -235,6 +235,8 @@ const Editor = forwardRef<any, EditorProps>(
235
235
  />
236
236
  {showDropdown && dropdownPosition && (
237
237
  <VariableDropdown
238
+ position="absolute"
239
+ width="300px"
238
240
  optionsList={variableOptionsList}
239
241
  onSelectVariable={handleSelectVariable}
240
242
  dropdownPosition={dropdownPosition}
@@ -1,6 +1,4 @@
1
1
  .ff-variable-dropdown {
2
- position: absolute;
3
- width: 200px;
4
2
  height: 300px;
5
3
  display: flex;
6
4
  flex-direction: column;
@@ -8,6 +6,14 @@
8
6
  border: 1px solid var(--border-color);
9
7
  border-radius: 3px;
10
8
  z-index: 9999;
9
+ overflow: hidden;
10
+ overflow-y: auto;
11
+ &.absolute {
12
+ position: absolute;
13
+ }
14
+ &.relative {
15
+ position: relative;
16
+ }
11
17
  }
12
18
  .ff-variable-option {
13
19
  display: flex;
@@ -3,19 +3,27 @@ import { VariableDropdownProps, DyanamicObj } from './types';
3
3
  import Icon from '../Icon';
4
4
  import './VariableDropdown.scss';
5
5
  import Typography from '../Typography';
6
+ import cx from 'classnames';
6
7
 
7
8
  const VariableDropdown: FC<VariableDropdownProps> = ({
8
9
  optionsList = [],
9
10
  onSelectVariable,
10
11
  dropdownPosition,
12
+ position = 'relative',
13
+ width = '300px',
11
14
  }): ReactNode => {
12
15
  return (
13
16
  <div
14
- className="ff-variable-dropdown"
15
- style={{
16
- top: dropdownPosition.top + 30,
17
- left: dropdownPosition.left - 30,
18
- }}
17
+ className={cx('ff-variable-dropdown', position)}
18
+ style={
19
+ dropdownPosition
20
+ ? {
21
+ top: dropdownPosition.top + 30,
22
+ left: dropdownPosition.left - 30,
23
+ width,
24
+ }
25
+ : { width }
26
+ }
19
27
  >
20
28
  {optionsList?.map((option: DyanamicObj): ReactNode => {
21
29
  return (
@@ -32,8 +40,8 @@ const VariableDropdown: FC<VariableDropdownProps> = ({
32
40
  option?.type === 'LOCAL'
33
41
  ? 'local_variable_icon'
34
42
  : option?.type === 'GLOBAL'
35
- ? 'global_variable_icon'
36
- : 'project_env_variable_icon'
43
+ ? 'global_variable_icon'
44
+ : 'project_env_variable_icon'
37
45
  }
38
46
  height={16}
39
47
  width={16}
@@ -8,7 +8,7 @@ export const optionsList: option[] = [
8
8
  { label: 'Plain Text', value: 'plaintext' },
9
9
  ];
10
10
 
11
- export const varibaleList: DyanamicObj[] = [
11
+ export const variableList: DyanamicObj[] = [
12
12
  {
13
13
  createdBy: 'USR1428',
14
14
  modifiedBy: '--',
@@ -58,10 +58,20 @@ export interface dropdownPositionType {
58
58
  }
59
59
 
60
60
  export interface VariableDropdownProps {
61
+ /**
62
+ * Position whether absoloute or relative
63
+ */
64
+ position: 'absolute' | 'relative';
65
+
66
+ /**
67
+ * Dropdown width
68
+ */
69
+ width: string;
70
+
61
71
  /**
62
72
  * List of variables
63
73
  */
64
- optionsList: {}[];
74
+ optionsList: DyanamicObj[];
65
75
 
66
76
  /**
67
77
  * Function to handle click on variable
@@ -71,7 +81,7 @@ export interface VariableDropdownProps {
71
81
  /**
72
82
  * Dropdown postion used for dropdown placement
73
83
  */
74
- dropdownPosition: dropdownPositionType;
84
+ dropdownPosition?: dropdownPositionType;
75
85
  }
76
86
 
77
87
  export interface option {
@@ -1,9 +1,10 @@
1
1
  .ff_fieldSet_container {
2
2
  .ff_fieldSet {
3
- border-color: var(--ff-connecting-branch-modal-border);
3
+ border:1px solid var(--ff-select-border-color);
4
4
  border-radius: 5px;
5
5
  .ff_legend_container{
6
6
  display: flex;
7
+ margin-left: 8px
7
8
  }
8
9
  }
9
10
  }
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
  import type { Meta, StoryObj } from '@storybook/react';
3
3
  import FieldSet from './FieldSet';
4
+ import Typography from '../Typography';
4
5
 
5
6
  const meta: Meta<typeof FieldSet> = {
6
7
  title: 'Components/FieldSet',
@@ -17,7 +18,7 @@ const defaultArgs = {
17
18
  legendName: 'Default Legend',
18
19
  height: '200px',
19
20
  width: '300px',
20
- children: 'Default content inside the FieldSet.',
21
+ children: <Typography>'Default content inside the FieldSet.'</Typography>,
21
22
  };
22
23
 
23
24
  export const Default: Story = {
@@ -219,6 +219,7 @@ import NoData from '../../assets/icons/no_data.svg?react';
219
219
  import AddUser from '../../assets/icons/add_user.svg?react';
220
220
  import RemoveUser from '../../assets/icons/remove_user.svg?react';
221
221
  import AddToArchive from '../../assets/icons/add_archive.svg?react';
222
+ import AddVariableIcon from '../../assets/icons/add_variable.svg?react';
222
223
  import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
223
224
  import InfoUser from '../../assets/icons/info_user.svg?react';
224
225
  import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
@@ -231,6 +232,20 @@ import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
231
232
  import backward from '../../assets/icons/backward.svg?react';
232
233
  import forward from '../../assets/icons/forward.svg?react';
233
234
 
235
+ import dependsOnScript from '../../assets/icons/depends_on_script.svg?react';
236
+ import parameters from '../../assets/icons/parameters.svg?react';
237
+ import prePostCondition from '../../assets/icons/pre_post_condition.svg?react';
238
+ import programElement from '../../assets/icons/program_element.svg?react';
239
+ import testData from '../../assets/icons/test_data.svg?react';
240
+ import testDataSet from '../../assets/icons/test_data_set.svg?react';
241
+ import emailGroup from '../../assets/icons/email_group.svg?react';
242
+ import variableSet from '../../assets/icons/variable_set.svg?react';
243
+
244
+ import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react';
245
+ import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
246
+ import suitesIcon from '../../assets/icons/suites_icon.svg?react';
247
+ import executionsIcon from '../../assets/icons/executions_icon.svg?react';
248
+
234
249
  Components['success'] = ToastSuccessIcon;
235
250
  Components['alert'] = Alert;
236
251
  Components['alert'] = Alert;
@@ -275,7 +290,7 @@ Components['delete'] = DeleteIcon;
275
290
  Components['details'] = DetailsIcon;
276
291
  Components['impactList'] = ImpactListIcon;
277
292
  Components['beautify_icon'] = BeautifyIcon;
278
- Components['add_variable'] = AddVariable;
293
+ Components['add_variable_icon'] = AddVariable;
279
294
  Components['replace_file'] = ReplaceFile;
280
295
  Components['formate_painter'] = FormatePainter;
281
296
  Components['bold'] = Bold;
@@ -447,6 +462,7 @@ Components['no_data'] = NoData;
447
462
  Components['add_user'] = AddUser;
448
463
  Components['add_to_archive'] = AddToArchive;
449
464
  Components['remove_user'] = RemoveUser;
465
+ Components['add_variable'] = AddVariableIcon;
450
466
  Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
451
467
  Components['info_user'] = InfoUser;
452
468
  Components['web_service_icon'] = WebServiceIcon;
@@ -458,5 +474,16 @@ Components['refresh_icon'] = refreshIcon;
458
474
  Components['rotate_icon'] = rotateIcon;
459
475
  Components['tap_icon'] = tapIcon;
460
476
  Components['swipe_icon'] = swipeIcon;
461
-
477
+ Components['depends_on_script'] = dependsOnScript;
478
+ Components['parameters'] = parameters;
479
+ Components['pre_post_condition'] = prePostCondition;
480
+ Components['program_element'] = programElement;
481
+ Components['test_data'] = testData;
482
+ Components['test_data_set'] = testDataSet;
483
+ Components['email_group'] = emailGroup;
484
+ Components['variable_set'] = variableSet;
485
+ Components['machine_enable_icon'] = machineEnableIcon;
486
+ Components['machine_disable_icon'] = machineDisableIcon;
487
+ Components['executions_icon'] = executionsIcon;
488
+ Components['suites_icon'] = suitesIcon;
462
489
  export default Components;
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import IconButton from './IconButton';
3
+ import React from 'react';
3
4
 
4
5
  const meta: Meta<typeof IconButton> = {
5
6
  title: 'Components/IconButton',
@@ -1,16 +1,14 @@
1
- import React from 'react';
1
+ import { forwardRef } from 'react';
2
2
  import Icon from '../Icon';
3
3
  import './IconButton.scss';
4
4
  import classNames from 'classnames';
5
5
  import Typography from '../Typography';
6
6
  import { IconButtonProps } from './types';
7
-
8
- const IconButton: React.FC<IconButtonProps> = ({
7
+ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
9
8
  label,
10
9
  iconName = 'plus_user_icon',
11
10
  onClick,
12
- ref,
13
- }) => {
11
+ }, ref) => {
14
12
  return (
15
13
  <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
16
14
  <div className={classNames('button-icon')}>
@@ -31,6 +29,5 @@ const IconButton: React.FC<IconButtonProps> = ({
31
29
  </Typography>
32
30
  </button>
33
31
  );
34
- };
35
-
36
- export default IconButton;
32
+ });
33
+ export default IconButton;
@@ -2,5 +2,5 @@ export interface IconButtonProps {
2
2
  label: string;
3
3
  iconName: string;
4
4
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
5
- ref?: React.RefObject<HTMLButtonElement>;
6
- }
5
+ ref?: React.Ref<HTMLButtonElement>;
6
+ }
@@ -16,6 +16,7 @@
16
16
  align-items: center;
17
17
  cursor: pointer;
18
18
  position: relative;
19
+ z-index: 5;
19
20
 
20
21
  &.selected {
21
22
  background-color: var(--brand-color);
@@ -57,7 +58,7 @@
57
58
  right: 0;
58
59
  height: 1px;
59
60
  background-color: var(--border-color);
60
- z-index: -1;
61
+ z-index: 3;
61
62
  border-radius: 2px 0px 0px 0px;
62
63
  opacity: 0px;
63
64
  }
@@ -1,103 +1,114 @@
1
+ import { forwardRef } from 'react';
1
2
  import classNames from 'classnames';
2
3
  import './Input.scss';
3
4
  import { InputProps } from './types';
4
5
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
5
6
 
6
- const Input = ({
7
- type = 'text',
8
- variant = 'primary',
9
- name = '',
10
- label,
11
- disabled = false,
12
- required = false,
13
- placeholder = 'Enter input',
14
- value = '',
15
- helperText = '',
16
- error,
17
- noBorder,
18
- className = '',
19
- onChange,
20
- onBlur,
21
- onFocus,
22
- autoComplete = 'off',
23
- minValue = -Infinity,
24
- maxValue = Infinity,
25
- transparentBackground = false,
26
- size = 'small',
27
- isLabelRequired = true,
28
- ...props
29
- }: InputProps) => {
30
- const isValueFilled = !checkEmpty(value);
31
- return (
32
- <div
33
- className={classNames('ff-input-container', {
34
- 'ff-input-container--float': isValueFilled,
35
- 'ff-input-container--disabled': !!disabled,
36
- })}
37
- >
38
- {isLabelRequired && (
39
- <label
40
- htmlFor={name}
7
+ const Input = forwardRef<HTMLInputElement, InputProps>(
8
+ (
9
+ {
10
+ type = 'text',
11
+ variant = 'primary',
12
+ name = '',
13
+ label,
14
+ disabled = false,
15
+ required = false,
16
+ placeholder = 'Enter input',
17
+ value = '',
18
+ helperText = '',
19
+ error,
20
+ noBorder,
21
+ className = '',
22
+ onChange,
23
+ onBlur,
24
+ onFocus,
25
+ autoComplete = 'off',
26
+ minValue = -Infinity,
27
+ maxValue = Infinity,
28
+ transparentBackground = false,
29
+ size = 'small',
30
+ isLabelRequired = true,
31
+ ...props
32
+ },
33
+ ref
34
+ ) => {
35
+ const isValueFilled = !checkEmpty(value);
36
+
37
+ return (
38
+ <div
39
+ className={classNames('ff-input-container', {
40
+ 'ff-input-container--float': isValueFilled,
41
+ 'ff-input-container--disabled': !!disabled,
42
+ })}
43
+ >
44
+ {isLabelRequired && (
45
+ <label
46
+ htmlFor={name}
47
+ className={classNames(
48
+ `ff-input-label-container ff-input-label-container--${size}`,
49
+ {
50
+ 'ff-input-label-container--danger': !!error,
51
+ }
52
+ )}
53
+ >
54
+ {required && <span className="required-asterisk">*</span>}
55
+ <span
56
+ className={classNames(
57
+ `ff-input-label ff-input-label--${variant}`,
58
+ {
59
+ 'ff-input-label--no-hover': !!value,
60
+ 'ff-input-label--disabled': !!disabled,
61
+ 'ff-input-label--danger': !!error,
62
+ }
63
+ )}
64
+ >
65
+ {label}
66
+ </span>
67
+ </label>
68
+ )}
69
+
70
+ <input
71
+ ref={ref} // Forward the ref here
72
+ name={name}
73
+ value={value}
74
+ type={type}
75
+ spellCheck={false}
76
+ id={name}
41
77
  className={classNames(
42
- `ff-input-label-container ff-input-label-container--${size}`,
78
+ `ff-input ff-input-${variant} default-input ff-input--${size}`,
43
79
  {
44
- 'ff-input-label-container--danger': !!error,
45
- }
80
+ ['ff-input--transparentBackground']: !!transparentBackground,
81
+ 'ff-input--no-hover': !!value,
82
+ 'ff-input--disabled': !!disabled,
83
+ 'ff-input--danger': !!error,
84
+ 'ff-input--no-border': !!noBorder,
85
+ 'ff-input--placeholder': !isLabelRequired,
86
+ },
87
+ `${className}`
46
88
  )}
47
- >
48
- {required && <span className="required-asterisk">*</span>}
89
+ placeholder={placeholder}
90
+ disabled={disabled}
91
+ onChange={onChange}
92
+ onFocus={onFocus}
93
+ onBlur={onBlur}
94
+ autoComplete={autoComplete}
95
+ min={minValue}
96
+ max={maxValue}
97
+ {...props}
98
+ />
99
+
100
+ {helperText && error && (
49
101
  <span
50
- className={classNames(`ff-input-label ff-input-label--${variant}`, {
51
- 'ff-input-label--no-hover': !!value,
52
- 'ff-input-label--disabled': !!disabled,
53
- 'ff-input-label--danger': !!error,
102
+ className={classNames('ff-input-message', {
103
+ 'ff-input-message--danger': !!error,
54
104
  })}
55
105
  >
56
- {label}
106
+ {helperText}
57
107
  </span>
58
- </label>
59
- )}
60
-
61
- <input
62
- name={name}
63
- value={value}
64
- type={type}
65
- spellCheck={false}
66
- id={name}
67
- className={classNames(
68
- `ff-input ff-input-${variant} default-input ff-input--${size}`,
69
- {
70
- ['ff-input--transparentBackground']: !!transparentBackground,
71
- 'ff-input--no-hover': !!value,
72
- 'ff-input--disabled': !!disabled,
73
- 'ff-input--danger': !!error,
74
- 'ff-input--no-border': !!noBorder,
75
- 'ff-input--placeholder': !isLabelRequired,
76
- },
77
- `${className}`
78
108
  )}
79
- placeholder={placeholder}
80
- disabled={disabled}
81
- onChange={onChange}
82
- onFocus={onFocus}
83
- onBlur={onBlur}
84
- autoComplete={autoComplete}
85
- min={minValue}
86
- max={maxValue}
87
- {...props}
88
- />
89
-
90
- {helperText && error && (
91
- <span
92
- className={classNames('ff-input-message', {
93
- 'ff-input-message--danger': !!error,
94
- })}
95
- >
96
- {helperText}
97
- </span>
98
- )}
99
- </div>
100
- );
101
- };
109
+ </div>
110
+ );
111
+ }
112
+ );
102
113
 
103
114
  export default Input;
@@ -34,7 +34,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
34
34
  variant = 'textField',
35
35
  dropdownData = [],
36
36
  width,
37
- height = '22px',
37
+ height,
38
38
  isOpen = false,
39
39
  confirmAction,
40
40
  onClick,
@@ -1,6 +1,7 @@
1
+ import React, { useState } from 'react';
2
+
1
3
  import type { Meta, StoryObj } from '@storybook/react';
2
4
  import Modal from './Modal';
3
- import { useState } from 'react';
4
5
  import Button from '../Button';
5
6
 
6
7
  const meta: Meta<typeof Modal> = {
@@ -32,6 +32,31 @@
32
32
  }
33
33
  }
34
34
  }
35
+
36
+ @mixin ff-scroll-style {
37
+
38
+ &::-webkit-scrollbar {
39
+ width: 4px;
40
+ height: 40px;
41
+ border-radius: 12px 0px 0px 0px;
42
+ background: var(--description-text);
43
+
44
+ &-track {
45
+ background: var(--ff-select-scroll-track-bg);
46
+ }
47
+
48
+ &-thumb {
49
+ background: var(--ff-select-scroll-thumb-color);
50
+ border-radius: 10px;
51
+
52
+ &:hover {
53
+ background: var(--ff-select-scroll-thumb-hover);
54
+ }
55
+ }
56
+ }
57
+ }
58
+
59
+
35
60
  .ff-multiselect-container-with-icon {
36
61
  display: flex;
37
62
  align-items: center;
@@ -83,7 +108,11 @@
83
108
  display: flex;
84
109
  flex-wrap: wrap;
85
110
  align-items: center;
111
+ overflow-y: auto;
112
+ max-height: 64px;
86
113
  gap: 5px;
114
+ @include ff-scroll-style;
115
+
87
116
  .ff-multiselect-chip {
88
117
  @include flex-center;
89
118
  box-sizing: border-box;