pixel-react 1.6.8 → 1.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 (173) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -81,7 +81,7 @@ $ff-success: #079455;
81
81
  $ff-warning: #f79009;
82
82
  $ff-error-light: #e42525;
83
83
  $ff-chips-fill-color: #f9d5ff;
84
- $ff-chips-blur-color: #575757;
84
+ $ff-chips-blur-color: #57575766;
85
85
  $hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
86
86
  $arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
87
87
  $add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide
@@ -67,7 +67,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
67
67
 
68
68
  return (
69
69
  <div>
70
- <Typography fontWeight="semi-bold">{label}</Typography>
70
+ <Typography fontWeight="semi-bold" lineHeight='18px'>{label}</Typography>
71
71
  {(!showSelectedFiles || selectedFiles.length === 0) && (
72
72
  <Button
73
73
  variant={buttonVariant}
@@ -38,14 +38,14 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
38
38
  },
39
39
  {
40
40
  date: '29 Oct',
41
- totalMemory: 800,
41
+ totalMemory: 100,
42
42
  },
43
43
  {
44
- date: '30 Oct',
44
+ date: '3 Nov',
45
45
  totalMemory: 10.12,
46
46
  },
47
47
  {
48
- date: '31 Oct',
48
+ date: '23 Nov',
49
49
  totalMemory: 10.1,
50
50
  },
51
51
  ],
@@ -60,6 +60,7 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
60
60
  xAxisColor: '#D9D9D9',
61
61
  yAxisColor: '#252C37',
62
62
  numberSize: '10px',
63
+ proportionalSpacing :false,
63
64
  },
64
65
  render: (args) => (
65
66
  <div className="linechart-container">
@@ -153,6 +154,8 @@ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
153
154
  yAxisColor: '#252C37',
154
155
  yAxisLabelColor: '#252C37',
155
156
  textSize: '12px',
157
+ proportionalSpacing :false,
158
+
156
159
  },
157
160
  render: (args) => (
158
161
  <div className="linechart-container">
@@ -246,6 +249,7 @@ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
246
249
  yAxisLabelColor: '#252C37',
247
250
  textSize: '12px',
248
251
  fontWeight: 'semi-bold',
252
+ proportionalSpacing :false,
249
253
  },
250
254
  render: (args) => (
251
255
  <div className="linechart-container">
@@ -25,6 +25,7 @@ const LineChart: React.FC<LineChartProps> = ({
25
25
  textSize,
26
26
  fontWeight,
27
27
  numberSize,
28
+ proportionalSpacing,
28
29
  }) => {
29
30
  const margin = 40;
30
31
  const xMax = width - margin * 2;
@@ -36,6 +37,7 @@ const LineChart: React.FC<LineChartProps> = ({
36
37
  const xKey = isDefaultLineChart ? 'date' : 'date';
37
38
  const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
38
39
  const xScale = (x: string) => {
40
+ if (proportionalSpacing) {
39
41
  const date = new Date(x);
40
42
  const time = date.getTime();
41
43
  const minDate = new Date(
@@ -49,7 +51,14 @@ const LineChart: React.FC<LineChartProps> = ({
49
51
  ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
50
52
  xMax
51
53
  );
52
- };
54
+ } else {
55
+ const index = data[0].data.findIndex((point: any) => point[xKey] === x);
56
+ if (index === -1) return 0;
57
+ const totalPoints = data[0].data.length;
58
+ return (index / (totalPoints - 1)) * xMax;
59
+ }
60
+ };
61
+
53
62
 
54
63
  const yScale = (y: number) => yMax - (y * yMax) / 1024;
55
64
 
@@ -26,4 +26,5 @@ export interface LineChartProps {
26
26
  textSize?: string | number;
27
27
  fontWeight?: string | number;
28
28
  numberSize?: string | number;
29
+ proportionalSpacing?: boolean;
29
30
  }
@@ -19,7 +19,9 @@
19
19
  position: relative;
20
20
  @include mixins.center-content;
21
21
  @include mixins.transition(border-color, background-color);
22
-
22
+ .ff-tick-icon {
23
+ padding: 2px !important; // I used important because icon component have some issue with padding because of that
24
+ }
23
25
  &::before {
24
26
  content: '';
25
27
  width: 9px;
@@ -1,6 +1,7 @@
1
- import React, { useState } from 'react';
2
1
  import { Meta, StoryObj } from '@storybook/react';
3
2
  import Checkbox from './Checkbox';
3
+ import { useState } from 'react';
4
+ import React from 'react';
4
5
 
5
6
  const meta: Meta<typeof Checkbox> = {
6
7
  component: Checkbox,
@@ -15,109 +16,63 @@ export default meta;
15
16
 
16
17
  type Story = StoryObj<typeof meta>;
17
18
 
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
27
19
  export const Default: Story = {
28
20
  render: () => {
29
- const { checked, handleChange } = useCheckboxState();
30
- return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
31
- },
32
- };
21
+ const [checked, setChecked] = useState(true); // Default starts as checked
33
22
 
34
- // Story: Partial Checkbox
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);
23
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
24
+ setChecked(event.target.checked);
43
25
  };
44
26
 
45
27
  return (
46
28
  <Checkbox
47
- label="Partially Selected Checkbox"
48
- partial={partial}
29
+ label="Default Checkbox"
30
+ id="default-checkbox"
31
+ name="default"
49
32
  checked={checked}
50
- onChange={handlePartialChange}
33
+ onChange={handleChange}
51
34
  />
52
35
  );
53
36
  },
54
37
  };
55
38
 
56
- // Story: Disabled Checkbox
57
- export const Disabled: Story = {
58
- args: {
59
- label: 'Disabled Checkbox',
60
- disabled: true,
61
- },
62
- };
63
-
64
- // Story: Checkbox Variants
65
- export const Variants: Story = {
39
+ export const Partial: Story = {
66
40
  render: () => {
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);
41
+ const [checked, setChecked] = useState(true); // Default starts as checked
70
42
 
71
- const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
72
- setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
43
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
44
+ setChecked(event.target.checked);
73
45
  };
74
46
 
75
47
  return (
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>
48
+ <Checkbox
49
+ label="Partial Checkbox"
50
+ id="partial-checkbox"
51
+ name="partial"
52
+ partial={true}
53
+ checked={checked}
54
+ onChange={handleChange}
55
+ />
87
56
  );
88
57
  },
89
58
  };
90
59
 
91
- // Story: Controlled Checkbox
92
60
  export const Controlled: Story = {
93
61
  render: () => {
94
- const { checked, handleChange } = useCheckboxState();
95
- return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
96
- },
97
- };
62
+ const [checked, setChecked] = useState(false);
98
63
 
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;
64
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
65
+ setChecked(event.target.checked);
66
+ };
105
67
 
106
68
  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>
69
+ <Checkbox
70
+ label={checked ? 'Checked! Click to uncheck.' : 'Click here to check.'}
71
+ id="controlled-checkbox"
72
+ name="controlled"
73
+ checked={checked}
74
+ onChange={handleChange}
75
+ />
121
76
  );
122
77
  },
123
78
  };
@@ -14,7 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
14
14
  checked: initialChecked = false,
15
15
  partial = false,
16
16
  onChange,
17
- variant
17
+ variant,
18
18
  }) => {
19
19
  const [checked, setChecked] = useState(initialChecked);
20
20
 
@@ -35,7 +35,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
35
35
  />
36
36
  <span
37
37
  className={classNames('ff-checkbox-custom', {
38
- 'ff-checkbox-checked': checked ,
38
+ 'ff-checkbox-checked': checked,
39
39
  'ff-storybook-checkbox--partial': partial && !checked,
40
40
  [`ff-checkbox--${variant}`]: variant,
41
41
  [`ff-checkbox-checked--${variant}`]: checked && variant,
@@ -44,9 +44,8 @@ const Checkbox: React.FC<CheckboxProps> = ({
44
44
  {checked && (
45
45
  <Icon
46
46
  name="tick"
47
- height={6}
48
- width={8}
49
47
  color="var(--primary-icon-color)"
48
+ className="ff-tick-icon"
50
49
  />
51
50
  )}
52
51
  </span>
@@ -22,19 +22,21 @@
22
22
  padding: 1px 6px;
23
23
  line-height: 15px;
24
24
  border: none;
25
- transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
26
- box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
25
+ transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
26
+ padding 0.4s ease-in-out;
27
+ box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
27
28
  -1px -1px 2px 0px var(--ff-chip-bg) inset,
28
29
  1px -1px 2px 0px var(--ff-chips-blur-color) inset,
30
+ -1px -1px 2px 0px var(--ff-chips-blur-color),
29
31
  1px 1px 2px 0px var(--ff-chip-bg);
30
32
  &--fullText:hover {
31
- box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
33
+ box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
32
34
  -1px -1px 2px 0px var(--ff-chip-bg) inset,
33
35
  1px -1px 2px 0px var(--ff-chips-blur-color) inset,
36
+ -1px -1px 2px 0px var(--ff-chips-blur-color),
34
37
  1px 1px 2px 0px var(--ff-chip-bg);
35
- padding-right: 12px;
38
+ padding-right: 7px;
36
39
  }
37
- @extend .fontXs;
38
40
 
39
41
  &--primary {
40
42
  @include chip-variant-background(var(--ff-chips-fill-color));
@@ -68,18 +70,26 @@
68
70
  }
69
71
  &--public {
70
72
  @include chip-variant-background(var(--public-chip-bg-color));
73
+ color: var(--license_header_text_color);
71
74
  }
72
75
 
73
76
  &--partial-public {
74
77
  @include chip-variant-background(var(--partial-public-chip-bg-color));
78
+ color: var(--license_header_text_color);
75
79
  }
76
80
 
77
81
  &--private {
78
82
  @include chip-variant-background(var(--private-chip-bg-color));
83
+ color: var(--license_header_text_color);
79
84
  }
80
85
 
81
86
  &--disabled {
82
87
  @include chip-variant-background(var(--disabled-chip-bg-color));
88
+ color: var(--table-column-text-color);
89
+ }
90
+ &--count {
91
+ @include chip-variant-background(var(--impact-list-chip-bg-color));
92
+ color: var(--ff-chip-text-color);
83
93
  }
84
94
  }
85
95
  }
@@ -1,8 +1,10 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import Chip from './Chip';
3
4
  import '../../assets/styles/_colors.scss';
4
5
  import './Chip.scss';
5
6
  import Typography from '../Typography';
7
+
6
8
  const meta: Meta<typeof Chip> = {
7
9
  title: 'Components/Chip',
8
10
  component: Chip,
@@ -111,7 +113,14 @@ export const Disabled: Story = {
111
113
  ...defaultArgs,
112
114
  variant: 'disabled',
113
115
  fullText: 'Sub Modules 0',
114
- },
116
+ },
117
+ };
118
+ export const Count: Story = {
119
+ args: {
120
+ ...defaultArgs,
121
+ variant: 'count',
122
+ fullText: 'Sub Modules 0',
123
+ },
115
124
  };
116
125
 
117
126
  export default meta;
@@ -26,7 +26,11 @@ const Chip = ({
26
26
  { ['ff-default-chip-style--fullText']: !!fullText }
27
27
  )}
28
28
  >
29
- {labelText && <Typography as="p">{labelText}</Typography>}
29
+ {labelText && (
30
+ <Typography as="p" fontSize={10} fontWeight="semi-bold">
31
+ {labelText}
32
+ </Typography>
33
+ )}
30
34
  </button>
31
35
  </div>
32
36
  );
@@ -10,7 +10,7 @@ export interface ChipsProps {
10
10
  /**
11
11
  * The variant of the Chip.
12
12
  */
13
- variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled';
13
+ variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
14
14
 
15
15
  /**
16
16
  * The callback function to be executed when the Chip is clicked.
@@ -12,3 +12,7 @@
12
12
  gap: 8px;
13
13
  }
14
14
  }
15
+ .ff-variable-dropdown {
16
+ padding: 4px;
17
+ width: auto;
18
+ }
@@ -0,0 +1,147 @@
1
+ import React, { useState } from 'react';
2
+ import { Meta, StoryFn, StoryObj } from '@storybook/react';
3
+ import ConditionalDropdown from './ConditionalDropdown';
4
+ import { ConditionalDropdownProps, dynamicObject } from './types';
5
+ import { variableList } from '../Editor/constants';
6
+ import CreateVariableSlider from '../CreateVariable/CreateVariableSlider';
7
+
8
+ export default {
9
+ title: 'Components/ConditionalDropdown',
10
+ component: ConditionalDropdown,
11
+ args: {
12
+ label: 'Add Variables',
13
+ placeholder: 'Enter text',
14
+ variableList,
15
+ dropdownWidth: '138px',
16
+ variant: 'primary',
17
+ },
18
+ parameters: {
19
+ layout: 'centered',
20
+ },
21
+ } as Meta<ConditionalDropdownProps>;
22
+
23
+ type Story = StoryObj<typeof ConditionalDropdown>;
24
+
25
+ const Template: StoryFn<ConditionalDropdownProps> = (args) => {
26
+ const [inputValue, setInputValue] = useState<string>('');
27
+ const [openCreateVariable, setOpenCreateVariable] = useState<boolean>(false);
28
+ const [variableName, setVariableName] = useState<string>('');
29
+ const [variableValue, setVariableValue] = useState<string>('');
30
+ const [selectedVariable, setSelectedVariable] = useState<dynamicObject>({
31
+ label: 'Local Variable',
32
+ value: 'LOCAL',
33
+ });
34
+ const [hideValue, setHideValue] = useState<boolean>(false);
35
+
36
+ return (
37
+ <>
38
+ <ConditionalDropdown
39
+ {...args}
40
+ onChange={(value: string) => setInputValue(value)}
41
+ value={inputValue}
42
+ onCreateVariableClick={() => setOpenCreateVariable(true)}
43
+ />
44
+ {openCreateVariable && (
45
+ <CreateVariableSlider
46
+ isOpen={openCreateVariable}
47
+ onClose={() => setOpenCreateVariable(false)}
48
+ variableName={variableName}
49
+ value={variableValue}
50
+ hideValue={hideValue}
51
+ handleSubmit={() => {
52
+ alert('Variable Created');
53
+ }}
54
+ onHideChange={(value) => {
55
+ setHideValue(value);
56
+ }}
57
+ onNameChange={(value) => {
58
+ setVariableName(value);
59
+ }}
60
+ onValueChange={(value) => setVariableValue(value)}
61
+ onVariableTypeChange={(option) => setSelectedVariable(option)}
62
+ selectedVariableType={selectedVariable}
63
+ variableTypesList={[
64
+ { label: 'Local Variable', value: 'LOCAL' },
65
+ { label: 'Global Variable', value: 'GLOBAL' },
66
+ ]}
67
+ />
68
+ )}
69
+ </>
70
+ );
71
+ };
72
+
73
+ export const Default = Template.bind({});
74
+ Default.args = {
75
+ onCreateVariableClick: () => alert('Create Variable clicked'),
76
+ };
77
+
78
+ export const WithInitialValue = Template.bind({});
79
+ WithInitialValue.args = {
80
+ inputValue: 'Initial Text with $',
81
+ onCreateVariableClick: () => alert('Create Variable clicked'),
82
+ };
83
+
84
+ export const DropdownOnHash: Story = {
85
+ render: () => {
86
+ const [hashInputValue, setHashInputValue] = useState<
87
+ dynamicObject | undefined
88
+ >();
89
+ const testData = [
90
+ {
91
+ _id: '1',
92
+ name: 'File1.txt',
93
+ actualPath: '/documents/File1.txt',
94
+ searchKey: 'file1',
95
+ parentId: 'root',
96
+ },
97
+ {
98
+ _id: '2',
99
+ name: 'File2.doc',
100
+ actualPath: '/documents/File2.doc',
101
+ searchKey: 'file2',
102
+ parentId: 'root',
103
+ },
104
+ {
105
+ _id: '3',
106
+ name: 'Image1.png',
107
+ actualPath: '/images/Image1.png',
108
+ searchKey: 'image1',
109
+ parentId: 'folder1',
110
+ },
111
+ {
112
+ _id: '4',
113
+ name: 'Presentation.ppt',
114
+ actualPath: '/presentations/Presentation.ppt',
115
+ searchKey: 'presentation',
116
+ parentId: 'folder2',
117
+ },
118
+ {
119
+ _id: '5',
120
+ name: 'Spreadsheet.xlsx',
121
+ actualPath: '/spreadsheets/Spreadsheet.xlsx',
122
+ searchKey: 'spreadsheet',
123
+ parentId: 'folder3',
124
+ },
125
+ {
126
+ _id: '6',
127
+ name: 'Code.js',
128
+ actualPath: '/projects/Code.js',
129
+ searchKey: 'code',
130
+ parentId: 'folder4',
131
+ },
132
+ ];
133
+
134
+ return (
135
+ <>
136
+ <ConditionalDropdown
137
+ label="Select Path Using #"
138
+ placeholder="Enter # to search files"
139
+ isHash
140
+ dataFiles={testData}
141
+ dropdownWidth="auto"
142
+ setHashInputValue={setHashInputValue}
143
+ />
144
+ </>
145
+ );
146
+ },
147
+ };