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.
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- 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: #
|
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:
|
41
|
+
totalMemory: 100,
|
42
42
|
},
|
43
43
|
{
|
44
|
-
date: '
|
44
|
+
date: '3 Nov',
|
45
45
|
totalMemory: 10.12,
|
46
46
|
},
|
47
47
|
{
|
48
|
-
date: '
|
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
|
|
@@ -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
|
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
|
-
|
35
|
-
|
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="
|
48
|
-
|
29
|
+
label="Default Checkbox"
|
30
|
+
id="default-checkbox"
|
31
|
+
name="default"
|
49
32
|
checked={checked}
|
50
|
-
onChange={
|
33
|
+
onChange={handleChange}
|
51
34
|
/>
|
52
35
|
);
|
53
36
|
},
|
54
37
|
};
|
55
38
|
|
56
|
-
|
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
|
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 = (
|
72
|
-
|
43
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
44
|
+
setChecked(event.target.checked);
|
73
45
|
};
|
74
46
|
|
75
47
|
return (
|
76
|
-
<
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
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
|
95
|
-
return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
|
96
|
-
},
|
97
|
-
};
|
62
|
+
const [checked, setChecked] = useState(false);
|
98
63
|
|
99
|
-
|
100
|
-
|
101
|
-
|
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
|
-
<
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
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.
|
26
|
-
|
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
|
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:
|
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 &&
|
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.
|
@@ -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
|
+
};
|