pixel-react 1.5.0 → 1.5.2
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/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +5 -0
- package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
- package/lib/components/AddButton/index.d.ts +1 -0
- package/lib/components/AddButton/types.d.ts +4 -0
- package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
- package/lib/components/AttachmentButton/types.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
- package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
- package/lib/components/Editor/Editor.stories.d.ts +6 -0
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
- package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
- package/lib/components/Icon/types.d.ts +1 -1
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +12 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
- package/lib/components/Select/Select.stories.d.ts +1 -0
- package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
- package/lib/index.d.ts +10 -2
- package/lib/index.esm.js +119 -74
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +119 -74
- package/lib/index.js.map +1 -1
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
- package/package.json +1 -1
- package/src/assets/Themes/BaseTheme.scss +2 -1
- package/src/assets/Themes/DarkTheme.scss +1 -0
- package/src/assets/icons/approval_pending.svg +8 -0
- package/src/assets/icons/configuration.svg +3 -0
- package/src/assets/icons/defects.svg +8 -0
- package/src/assets/icons/element.svg +4 -0
- package/src/assets/icons/project_element.svg +4 -0
- package/src/assets/icons/step_group.svg +10 -0
- package/src/assets/icons/success.svg +7 -3
- package/src/assets/icons/variable.svg +3 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +3 -1
- package/src/components/AppHeader/AppHeader.scss +134 -101
- package/src/components/AppHeader/AppHeader.stories.tsx +48 -14
- package/src/components/AppHeader/AppHeader.tsx +142 -121
- package/src/components/AttachmentButton/AttachmentButton.stories.tsx +2 -0
- package/src/components/AttachmentButton/AttachmentButton.tsx +23 -16
- package/src/components/AttachmentButton/types.ts +2 -0
- package/src/components/Icon/Icon.tsx +2 -1
- package/src/components/Icon/Icons.scss +5 -0
- package/src/components/Icon/iconList.ts +14 -1
- package/src/components/Icon/types.ts +1 -1
- package/src/components/MenuOption/MenuOption.scss +19 -2
- package/src/components/MenuOption/MenuOption.tsx +9 -1
- package/src/components/MenuOption/types.ts +12 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +2 -0
- package/src/components/Tooltip/Tooltip.scss +1 -1
- package/src/components/Tooltip/Tooltip.stories.tsx +4 -3
- package/src/components/Tooltip/Tooltip.tsx +2 -2
- /package/lib/components/ExcelFile/{ColorBarselector → ColorBarSelector}/ColorBarSelector.d.ts +0 -0
@@ -29,11 +29,42 @@ const defaultArgs = {
|
|
29
29
|
};
|
30
30
|
const projectList = [
|
31
31
|
{
|
32
|
-
label:
|
33
|
-
|
34
|
-
|
32
|
+
label:
|
33
|
+
'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
|
34
|
+
value:
|
35
|
+
'Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
|
36
|
+
iconName: 'web_icon',
|
37
|
+
},
|
38
|
+
{
|
39
|
+
label: 'Mobile Project',
|
40
|
+
value: 'Mobile Project',
|
41
|
+
iconName: 'mobile_icon',
|
42
|
+
},
|
43
|
+
{
|
44
|
+
label: 'Web & Mobile Project',
|
45
|
+
value: 'Web & Mobile Project',
|
46
|
+
iconName: 'web&mobile_icon',
|
47
|
+
},
|
48
|
+
{
|
49
|
+
label: 'Sales Force',
|
50
|
+
value: 'Sales Force',
|
51
|
+
iconName: 'sales_force',
|
52
|
+
},
|
53
|
+
{
|
54
|
+
label: 'MS Dynamic',
|
55
|
+
value: 'MS Dynamic',
|
56
|
+
iconName: 'ms_dynamic',
|
57
|
+
},
|
58
|
+
{
|
59
|
+
label: 'Test',
|
60
|
+
value: 'test',
|
61
|
+
iconName: 'mobile_icon',
|
62
|
+
},
|
63
|
+
{
|
64
|
+
label: 'Web Service',
|
65
|
+
value: 'Web Service',
|
66
|
+
iconName: '',
|
35
67
|
},
|
36
|
-
{ label: 'Test Project2', value: 'Test Project2', iconName: 'plus_icon' },
|
37
68
|
];
|
38
69
|
const headerMenuItems = [
|
39
70
|
{ label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
|
@@ -82,12 +113,14 @@ const headerMenuItems = [
|
|
82
113
|
path: 'Scripts',
|
83
114
|
quickMenuItems: [
|
84
115
|
{
|
85
|
-
|
86
|
-
|
116
|
+
label:'Element',
|
117
|
+
quickMenuName: 'Element',
|
118
|
+
iconName: 'element',
|
87
119
|
},
|
88
120
|
{
|
89
|
-
|
90
|
-
|
121
|
+
label:'Project Element',
|
122
|
+
quickMenuName: 'Project Element',
|
123
|
+
iconName: 'project_element',
|
91
124
|
},
|
92
125
|
{
|
93
126
|
quickMenuName: 'Sun Icon',
|
@@ -111,8 +144,9 @@ const headerMenuItems = [
|
|
111
144
|
},
|
112
145
|
];
|
113
146
|
const headerHiddenMenuItems = [
|
114
|
-
{ label: '
|
115
|
-
{ label: 'Approval Request', value: 'Approval Request', icon: '
|
147
|
+
{ label: 'Defects', value: 'Defects', icon: 'defects' },
|
148
|
+
{ label: 'Approval Request', value: 'Approval Request', icon: 'approval_pending' },
|
149
|
+
{ label: 'Configuration', value: 'Configuration', icon: 'configuration' },
|
116
150
|
];
|
117
151
|
const headerRightSideContent = (
|
118
152
|
<div>
|
@@ -135,13 +169,13 @@ export const SampleAppHeader: Story = {
|
|
135
169
|
};
|
136
170
|
export const Controlled: Story = {
|
137
171
|
render: () => {
|
138
|
-
const [selectedMenuItem, setSelectedMenuItem] = useState('
|
172
|
+
const [selectedMenuItem, setSelectedMenuItem] = useState('Projects');
|
139
173
|
const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
|
140
174
|
const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
|
141
175
|
const [selectedProject, setSelectedProject] = useState({
|
142
|
-
label: '',
|
143
|
-
value: '',
|
144
|
-
iconName: '',
|
176
|
+
label: 'All Projects',
|
177
|
+
value: 'All Projects',
|
178
|
+
iconName: 'all_projects',
|
145
179
|
});
|
146
180
|
const handleMenuClick = (item: appHeaderMenuItemProps) => {
|
147
181
|
setSelectedMenuItem(item.label);
|
@@ -6,6 +6,7 @@ import Typography from '../Typography';
|
|
6
6
|
import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
|
7
7
|
import AllProjectsDropdown from '../AllProjectsDropdown';
|
8
8
|
import MenuOption from '../MenuOption';
|
9
|
+
import Tooltip from '../Tooltip';
|
9
10
|
|
10
11
|
const AppHeader: React.FC<AppHeaderProps> = ({
|
11
12
|
logoIconName = 'fireflink_icon',
|
@@ -26,133 +27,153 @@ const AppHeader: React.FC<AppHeaderProps> = ({
|
|
26
27
|
onMoreMenuOptionClick = () => {},
|
27
28
|
}) => {
|
28
29
|
return (
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
</div>
|
35
|
-
{leftContent && (
|
36
|
-
<div className="ff-app-header-left-content">{leftContent}</div>
|
37
|
-
)}
|
30
|
+
<div className="ff-app-header-main">
|
31
|
+
<div className="ff-app-header">
|
32
|
+
<div className="ff-app-header-left-container">
|
33
|
+
<div className="ff-app-header-logo-icon">
|
34
|
+
<Icon color="" name={logoIconName} height={24} width={21} />
|
38
35
|
</div>
|
39
|
-
{
|
40
|
-
<div className="ff-app-header-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
36
|
+
{leftContent && (
|
37
|
+
<div className="ff-app-header-left-content">{leftContent}</div>
|
38
|
+
)}
|
39
|
+
</div>
|
40
|
+
{!checkEmpty(appHeaderMenuItems) && (
|
41
|
+
<div className="ff-app-header-nav-bar">
|
42
|
+
{projectsList && !checkEmpty(projectsList) && (
|
43
|
+
<div>
|
44
|
+
{
|
45
|
+
<AllProjectsDropdown
|
46
|
+
onClick={onProjectMenuClick}
|
47
|
+
options={projectsList}
|
48
|
+
selectedOption={selectedProject}
|
49
|
+
onMenuClick={onProjectDropdownLabelClick}
|
50
|
+
selected={selectedMenu === 'Projects'}
|
51
|
+
/>
|
52
|
+
}
|
53
|
+
</div>
|
54
|
+
)}
|
55
|
+
<div className="ff-app-header-nav-bar-items fontSm">
|
56
|
+
{appHeaderMenuItems.map((menuItem) => {
|
57
|
+
return (
|
58
|
+
<div
|
59
|
+
className={classNames('ff-app-header-nav-bar-item', {
|
60
|
+
['ff-app-header-nav-bar-item--selected']:
|
61
|
+
menuItem.label === selectedMenu,
|
62
|
+
})}
|
63
|
+
key={menuItem.label}
|
64
|
+
>
|
65
|
+
<Typography
|
66
|
+
as="div"
|
67
|
+
className="ff-app-header-nav-bar-item-label"
|
68
|
+
lineHeight="18px"
|
69
|
+
onClick={() => onMenuClick(menuItem)}
|
63
70
|
>
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
menuItem.subMenuItems.map((subMenuItem) => {
|
75
|
-
return (
|
76
|
-
<div
|
77
|
-
key={subMenuItem.label}
|
78
|
-
className="ff-app-header-submenu-container"
|
79
|
-
>
|
80
|
-
<Typography
|
81
|
-
as="div"
|
82
|
-
className={classNames(
|
83
|
-
'ff-app-header-nav-bar-submenu-item',
|
84
|
-
{
|
85
|
-
['ff-app-header-nav-bar-submenu-item--selected']:
|
86
|
-
subMenuItem.label === selectedSubMenu,
|
87
|
-
}
|
88
|
-
)}
|
89
|
-
lineHeight="18px"
|
90
|
-
onClick={() => onSubMenuClick(subMenuItem)}
|
71
|
+
{menuItem.label}
|
72
|
+
</Typography>
|
73
|
+
{menuItem.label === selectedMenu &&
|
74
|
+
menuItem?.subMenuItems && (
|
75
|
+
<>
|
76
|
+
{menuItem.subMenuItems.map((subMenuItem) => {
|
77
|
+
return (
|
78
|
+
<div
|
79
|
+
key={subMenuItem.label}
|
80
|
+
className="ff-app-header-submenu-container"
|
91
81
|
>
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
82
|
+
<Typography
|
83
|
+
as="div"
|
84
|
+
className={classNames(
|
85
|
+
'ff-app-header-nav-bar-submenu-item',
|
86
|
+
{
|
87
|
+
['ff-app-header-nav-bar-submenu-item--selected']:
|
88
|
+
subMenuItem.label === selectedSubMenu,
|
89
|
+
}
|
90
|
+
)}
|
91
|
+
lineHeight="18px"
|
92
|
+
onClick={() => onSubMenuClick(subMenuItem)}
|
93
|
+
>
|
94
|
+
{subMenuItem.label}
|
95
|
+
</Typography>
|
96
|
+
</div>
|
97
|
+
);
|
98
|
+
})}
|
99
|
+
{menuItem.subMenuItems.map((subMenuItem) => {
|
100
|
+
return (
|
101
|
+
<div
|
102
|
+
key={subMenuItem.label}
|
103
|
+
className="ff-app-header-submenu-container"
|
104
|
+
>
|
105
|
+
{subMenuItem.label === selectedSubMenu &&
|
106
|
+
subMenuItem?.quickMenuItems && (
|
107
|
+
<div className="ff-app-header-quickmenu-container">
|
108
|
+
<div>
|
109
|
+
<Icon name="vertical_separator" />
|
110
|
+
</div>
|
111
|
+
{subMenuItem.quickMenuItems.map(
|
112
|
+
(quickMenuItem) => {
|
113
|
+
return (
|
114
|
+
<>
|
115
|
+
<div
|
116
|
+
key={quickMenuItem.iconName}
|
117
|
+
onClick={() =>
|
118
|
+
onQuickMenuClick(quickMenuItem)
|
115
119
|
}
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
120
|
+
className={classNames(
|
121
|
+
'ff-app-header-nav-bar-quickmenu-item',
|
122
|
+
{
|
123
|
+
['ff-app-header-nav-bar-quickmenu-item--selected']:
|
124
|
+
quickMenuItem.iconName ===
|
125
|
+
selectedQuickMenu,
|
126
|
+
}
|
127
|
+
)}
|
128
|
+
>
|
129
|
+
<Tooltip
|
130
|
+
title={quickMenuItem?.label}
|
131
|
+
>
|
132
|
+
<Icon
|
133
|
+
name={quickMenuItem.iconName}
|
134
|
+
height={16}
|
135
|
+
width={16}
|
136
|
+
hoverEffect={true}
|
137
|
+
/>
|
138
|
+
</Tooltip>
|
139
|
+
</div>
|
140
|
+
</>
|
141
|
+
);
|
142
|
+
}
|
143
|
+
)}
|
144
|
+
</div>
|
145
|
+
)}
|
146
|
+
</div>
|
147
|
+
);
|
148
|
+
})}
|
149
|
+
</>
|
150
|
+
)}
|
147
151
|
</div>
|
148
|
-
)
|
152
|
+
);
|
153
|
+
})}
|
149
154
|
</div>
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
155
|
+
{appHeaderHiddenMenuItems &&
|
156
|
+
!checkEmpty(appHeaderHiddenMenuItems) && (
|
157
|
+
<div className="more-menu">
|
158
|
+
<MenuOption
|
159
|
+
iconName="more"
|
160
|
+
options={appHeaderHiddenMenuItems}
|
161
|
+
onOptionClick={onMoreMenuOptionClick}
|
162
|
+
variant="dark"
|
163
|
+
dropdownPlacement="down"
|
164
|
+
zIndex={1001}
|
165
|
+
tooltipTitle="More"
|
166
|
+
optionCardVariant="primary"
|
167
|
+
/>
|
168
|
+
</div>
|
169
|
+
)}
|
170
|
+
</div>
|
171
|
+
)}
|
172
|
+
{rightContent && (
|
173
|
+
<div className="ff-app-header-right-content">{rightContent}</div>
|
174
|
+
)}
|
175
|
+
</div>
|
176
|
+
</div>
|
156
177
|
);
|
157
178
|
};
|
158
179
|
export default AppHeader;
|
@@ -13,6 +13,8 @@ const meta: Meta<typeof AttachmentButton> = {
|
|
13
13
|
maxFiles: { control: 'number' },
|
14
14
|
buttonLabel: { control: 'text' },
|
15
15
|
showSelectedFiles: { control: 'boolean' },
|
16
|
+
deleteButton: { control: 'boolean' },
|
17
|
+
addAttachmentButton:{control:'boolean'}
|
16
18
|
},
|
17
19
|
};
|
18
20
|
|
@@ -17,12 +17,15 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
|
|
17
17
|
buttonLabel = 'Select Files',
|
18
18
|
showSelectedFiles = true,
|
19
19
|
buttonVariant = 'primary',
|
20
|
+
deleteButton = true,
|
21
|
+
addAttachmentButton = true,
|
20
22
|
}) => {
|
21
23
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
22
24
|
const [fileError, setFileError] = useState<string>('');
|
23
25
|
const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
|
24
26
|
|
25
27
|
const handleAttachmentClick = () => {
|
28
|
+
setFileError('');
|
26
29
|
fileInputRef.current?.click();
|
27
30
|
};
|
28
31
|
|
@@ -82,7 +85,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
|
|
82
85
|
multiple
|
83
86
|
accept="*"
|
84
87
|
/>
|
85
|
-
{
|
88
|
+
{fileError && (
|
86
89
|
<Toaster
|
87
90
|
isOpen={!!fileError}
|
88
91
|
variant="info"
|
@@ -90,27 +93,31 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
|
|
90
93
|
toastMessage={fileError}
|
91
94
|
zIndex={10000000}
|
92
95
|
/>
|
93
|
-
|
96
|
+
)}
|
94
97
|
{showSelectedFiles &&
|
95
98
|
selectedFiles.map((file, index) => (
|
96
99
|
<div key={file.name} className="ff-attachment-files">
|
97
100
|
<Typography color="var(--brand-color)">{file.name}</Typography>
|
98
|
-
|
99
|
-
|
100
|
-
name="delete"
|
101
|
-
hoverEffect={true}
|
102
|
-
color="var(--ff-delete-button-attachment)"
|
103
|
-
onClick={() => handleDeleteFile(index)}
|
104
|
-
/>
|
105
|
-
</Tooltip>
|
106
|
-
{index === selectedFiles.length - 1 &&
|
107
|
-
selectedFiles.length < maxFiles && (
|
108
|
-
<Tooltip title="add attachment">
|
101
|
+
{deleteButton && (
|
102
|
+
<Tooltip title="Delete">
|
109
103
|
<Icon
|
110
|
-
|
111
|
-
|
112
|
-
|
104
|
+
name="delete"
|
105
|
+
hoverEffect={true}
|
106
|
+
color="var(--ff-delete-button-attachment)"
|
107
|
+
variant="danger"
|
108
|
+
onClick={() => handleDeleteFile(index)}
|
113
109
|
/>
|
110
|
+
</Tooltip>
|
111
|
+
)}
|
112
|
+
{index === selectedFiles.length - 1 &&
|
113
|
+
selectedFiles.length < maxFiles &&
|
114
|
+
addAttachmentButton && (
|
115
|
+
<Tooltip title="Add Attachment">
|
116
|
+
<Icon
|
117
|
+
name="add_file"
|
118
|
+
hoverEffect={true}
|
119
|
+
onClick={handleAttachmentClick}
|
120
|
+
/>
|
114
121
|
</Tooltip>
|
115
122
|
)}
|
116
123
|
</div>
|
@@ -54,7 +54,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
|
|
54
54
|
className: classNames('ff-icon-container', {
|
55
55
|
'ff-icon-click': hoverEffect,
|
56
56
|
'ff-icon-disabled': disabled,
|
57
|
-
'ff-icon-dark': variant ===
|
57
|
+
'ff-icon-dark': variant === 'dark',
|
58
|
+
'ff-icon-danger': variant === 'danger',
|
58
59
|
[className]: !!className,
|
59
60
|
}),
|
60
61
|
...props,
|
@@ -207,7 +207,13 @@ import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_
|
|
207
207
|
import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
|
208
208
|
import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
|
209
209
|
import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
|
210
|
-
|
210
|
+
import ProjectElement from '../../assets/icons/project_element.svg?react';
|
211
|
+
import Element from '../../assets/icons/element.svg?react';
|
212
|
+
import StepGroup from '../../assets/icons/step_group.svg?react';
|
213
|
+
import Variable from '../../assets/icons/variable.svg?react';
|
214
|
+
import Defects from '../../assets/icons/defects.svg?react';
|
215
|
+
import ApprovalPending from '../../assets/icons/approval_pending.svg?react';
|
216
|
+
import Configuration from '../../assets/icons/configuration.svg?react';
|
211
217
|
|
212
218
|
Components['success'] = ToastSuccessIcon;
|
213
219
|
Components['delete_info'] = DeleteInfoIcon;
|
@@ -411,5 +417,12 @@ Components['run_automation_scripts'] = RunAutomationScriptsIcon;
|
|
411
417
|
Components['eye_open_icon'] = EyeOpenIcon;
|
412
418
|
Components['replace_icon']=ReplaceIcon;
|
413
419
|
Components['header_preset'] = HeaderPreset;
|
420
|
+
Components['project_element'] = ProjectElement;
|
421
|
+
Components['element'] = Element;
|
422
|
+
Components['step_group'] = StepGroup;
|
423
|
+
Components['variable'] = Variable;
|
424
|
+
Components['defects'] = Defects;
|
425
|
+
Components['approval_pending'] = ApprovalPending;
|
426
|
+
Components['configuration'] = Configuration;
|
414
427
|
|
415
428
|
export default Components;
|
@@ -51,16 +51,33 @@
|
|
51
51
|
background: var(--option-card-bg-color);
|
52
52
|
overflow: hidden;
|
53
53
|
min-height: 32px;
|
54
|
-
min-width:
|
54
|
+
min-width: 110px;
|
55
55
|
width: max-content;
|
56
56
|
border-radius: 4px;
|
57
|
+
&--primary{
|
58
|
+
background: var(--brand-color);
|
59
|
+
color: var(--primary-button-text-color);
|
60
|
+
svg {
|
61
|
+
path {
|
62
|
+
fill: var(--primary-icon-color);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
:hover{
|
66
|
+
color: var(--brand-color);
|
67
|
+
svg {
|
68
|
+
path {
|
69
|
+
fill: var(--brand-color);
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
57
74
|
.ff-options {
|
58
75
|
@extend .fontSm;
|
59
76
|
cursor: pointer;
|
60
77
|
border-radius: 3px;
|
61
78
|
display: flex;
|
62
79
|
align-items: center;
|
63
|
-
padding:
|
80
|
+
padding: 4px;
|
64
81
|
gap: 8px;
|
65
82
|
&:hover {
|
66
83
|
background-color: var(--hover-color);
|
@@ -31,6 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
|
|
31
31
|
)}
|
32
32
|
<Typography
|
33
33
|
as="label"
|
34
|
+
lineHeight='18px'
|
34
35
|
color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
|
35
36
|
>
|
36
37
|
{option.label}
|
@@ -46,6 +47,7 @@ const OptionCard = ({
|
|
46
47
|
closeDropdown,
|
47
48
|
zIndex,
|
48
49
|
dropdownPlacement,
|
50
|
+
variant,
|
49
51
|
}: OptionCardProps) => {
|
50
52
|
const themeContext = useContext(ThemeContext);
|
51
53
|
const currentTheme = themeContext?.currentTheme;
|
@@ -95,7 +97,11 @@ const OptionCard = ({
|
|
95
97
|
|
96
98
|
return createPortal(
|
97
99
|
<div
|
98
|
-
className={classNames(
|
100
|
+
className={classNames(
|
101
|
+
'ff-option-card',
|
102
|
+
[{ 'ff-option-card--primary': variant === 'primary' }],
|
103
|
+
currentTheme
|
104
|
+
)}
|
99
105
|
style={{ ...style, zIndex }}
|
100
106
|
ref={optionCardRef}
|
101
107
|
>
|
@@ -121,6 +127,7 @@ const MenuOption = ({
|
|
121
127
|
variant = 'light',
|
122
128
|
zIndex = 99,
|
123
129
|
dropdownPlacement = 'down',
|
130
|
+
optionCardVariant
|
124
131
|
}: MenuOptionProps) => {
|
125
132
|
const [isClicked, setIsClicked] = useState(false);
|
126
133
|
const menuRef = useRef<HTMLDivElement>(null);
|
@@ -202,6 +209,7 @@ const MenuOption = ({
|
|
202
209
|
closeDropdown={closeDropDown}
|
203
210
|
zIndex={zIndex}
|
204
211
|
dropdownPlacement={dropdownPlacement}
|
212
|
+
variant={optionCardVariant}
|
205
213
|
/>
|
206
214
|
)}
|
207
215
|
</div>
|
@@ -91,6 +91,12 @@ interface OptionCardProps {
|
|
91
91
|
* @optional
|
92
92
|
*/
|
93
93
|
dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
|
94
|
+
/**
|
95
|
+
* Variant for backgroung color of options card.
|
96
|
+
* @type {string}
|
97
|
+
* @optional
|
98
|
+
*/
|
99
|
+
variant?: 'primary';
|
94
100
|
}
|
95
101
|
|
96
102
|
interface MenuOptionProps {
|
@@ -194,6 +200,12 @@ interface MenuOptionProps {
|
|
194
200
|
* @optional
|
195
201
|
*/
|
196
202
|
zIndex?: number;
|
203
|
+
/**
|
204
|
+
* Variant for backgroung color of options card.
|
205
|
+
* @type {string}
|
206
|
+
* @optional
|
207
|
+
*/
|
208
|
+
optionCardVariant?: 'primary';
|
197
209
|
}
|
198
210
|
|
199
211
|
interface OptionProps {
|
@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import RadioGroup from './RadioGroup';
|
3
3
|
import { useState } from 'react';
|
4
4
|
import Icon from '../Icon';
|
5
|
+
import React from 'react';
|
6
|
+
import { Option } from '../MultiSelect/MultiSelectTypes';
|
5
7
|
|
6
8
|
const meta: Meta<typeof RadioGroup> = {
|
7
9
|
title: 'Components/RadioGroup',
|