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.
Files changed (64) hide show
  1. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  2. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  3. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  4. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  5. package/lib/components/AddButton/AddButton.d.ts +5 -0
  6. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  7. package/lib/components/AddButton/index.d.ts +1 -0
  8. package/lib/components/AddButton/types.d.ts +4 -0
  9. package/lib/components/AttachImage/AttachImage.stories.d.ts +7 -0
  10. package/lib/components/AttachmentButton/types.d.ts +2 -0
  11. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +6 -0
  12. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +8 -0
  13. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +7 -0
  14. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +8 -0
  15. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +6 -0
  16. package/lib/components/EditTextField/EditTextField.stories.d.ts +10 -0
  17. package/lib/components/Editor/Editor.stories.d.ts +6 -0
  18. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +4 -0
  19. package/lib/components/Excel/ExcelFile.stories.d.ts +6 -0
  20. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  21. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  22. package/lib/components/Icon/types.d.ts +1 -1
  23. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +2 -0
  24. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  25. package/lib/components/MenuOption/types.d.ts +12 -0
  26. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +1 -0
  27. package/lib/components/Select/Select.stories.d.ts +1 -0
  28. package/lib/components/StatusCard/StatusCard.stories.d.ts +11 -0
  29. package/lib/index.d.ts +10 -2
  30. package/lib/index.esm.js +119 -74
  31. package/lib/index.esm.js.map +1 -1
  32. package/lib/index.js +119 -74
  33. package/lib/index.js.map +1 -1
  34. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  35. package/package.json +1 -1
  36. package/src/assets/Themes/BaseTheme.scss +2 -1
  37. package/src/assets/Themes/DarkTheme.scss +1 -0
  38. package/src/assets/icons/approval_pending.svg +8 -0
  39. package/src/assets/icons/configuration.svg +3 -0
  40. package/src/assets/icons/defects.svg +8 -0
  41. package/src/assets/icons/element.svg +4 -0
  42. package/src/assets/icons/project_element.svg +4 -0
  43. package/src/assets/icons/step_group.svg +10 -0
  44. package/src/assets/icons/success.svg +7 -3
  45. package/src/assets/icons/variable.svg +3 -0
  46. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +3 -1
  47. package/src/components/AppHeader/AppHeader.scss +134 -101
  48. package/src/components/AppHeader/AppHeader.stories.tsx +48 -14
  49. package/src/components/AppHeader/AppHeader.tsx +142 -121
  50. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +2 -0
  51. package/src/components/AttachmentButton/AttachmentButton.tsx +23 -16
  52. package/src/components/AttachmentButton/types.ts +2 -0
  53. package/src/components/Icon/Icon.tsx +2 -1
  54. package/src/components/Icon/Icons.scss +5 -0
  55. package/src/components/Icon/iconList.ts +14 -1
  56. package/src/components/Icon/types.ts +1 -1
  57. package/src/components/MenuOption/MenuOption.scss +19 -2
  58. package/src/components/MenuOption/MenuOption.tsx +9 -1
  59. package/src/components/MenuOption/types.ts +12 -0
  60. package/src/components/RadioGroup/RadioGroup.stories.tsx +2 -0
  61. package/src/components/Tooltip/Tooltip.scss +1 -1
  62. package/src/components/Tooltip/Tooltip.stories.tsx +4 -3
  63. package/src/components/Tooltip/Tooltip.tsx +2 -2
  64. /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: 'Test Project1',
33
- value: 'Test Project1',
34
- iconName: 'plus_icon',
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
- quickMenuName: 'Delete Icon',
86
- iconName: 'delete',
116
+ label:'Element',
117
+ quickMenuName: 'Element',
118
+ iconName: 'element',
87
119
  },
88
120
  {
89
- quickMenuName: 'Details Icon',
90
- iconName: 'details',
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: 'Configuration', value: 'Configuration', icon: 'plus_icon' },
115
- { label: 'Approval Request', value: 'Approval Request', icon: 'plus_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('Test Data');
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
- <div className="ff-app-header">
31
- <div className="ff-app-header-left-container">
32
- <div className="ff-app-header-logo-icon">
33
- <Icon color="" name={logoIconName} height={24} width={21} />
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
- {!checkEmpty(appHeaderMenuItems) && (
40
- <div className="ff-app-header-nav-bar">
41
- {projectsList && !checkEmpty(projectsList) && (
42
- <div>
43
- {
44
- <AllProjectsDropdown
45
- onClick={onProjectMenuClick}
46
- options={projectsList}
47
- selectedOption={selectedProject}
48
- onMenuClick={onProjectDropdownLabelClick}
49
- selected={selectedMenu === 'Projects'}
50
- />
51
- }
52
- </div>
53
- )}
54
- <div className="ff-app-header-nav-bar-items fontSm">
55
- {appHeaderMenuItems.map((menuItem) => {
56
- return (
57
- <div
58
- className={classNames('ff-app-header-nav-bar-item', {
59
- ['ff-app-header-nav-bar-item--selected']:
60
- menuItem.label === selectedMenu,
61
- })}
62
- key={menuItem.label}
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
- <Typography
65
- as="div"
66
- className="ff-app-header-nav-bar-item-label"
67
- lineHeight="18px"
68
- onClick={() => onMenuClick(menuItem)}
69
- >
70
- {menuItem.label}
71
- </Typography>
72
- {menuItem.label === selectedMenu &&
73
- menuItem?.subMenuItems &&
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
- {subMenuItem.label}
93
- </Typography>
94
- {subMenuItem.label === selectedSubMenu &&
95
- subMenuItem?.quickMenuItems && (
96
- <div className="ff-app-header-quickmenu-container">
97
- <div>
98
- <Icon name="vertical_separator" />
99
- </div>
100
- {subMenuItem.quickMenuItems.map(
101
- (quickMenuItem) => {
102
- return (
103
- <>
104
- <div
105
- key={quickMenuItem.iconName}
106
- onClick={() =>
107
- onQuickMenuClick(quickMenuItem)
108
- }
109
- className={classNames(
110
- 'ff-app-header-nav-bar-quickmenu-item',
111
- {
112
- ['ff-app-header-nav-bar-quickmenu-item--selected']:
113
- quickMenuItem.path ===
114
- selectedQuickMenu,
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
- <Icon
119
- name={quickMenuItem.iconName}
120
- height={24}
121
- width={24}
122
- />
123
- </div>
124
- </>
125
- );
126
- }
127
- )}
128
- </div>
129
- )}
130
- </div>
131
- );
132
- })}
133
- </div>
134
- );
135
- })}
136
- </div>
137
- {appHeaderHiddenMenuItems &&
138
- !checkEmpty(appHeaderHiddenMenuItems) && (
139
- <div>
140
- <MenuOption
141
- iconName="more"
142
- options={appHeaderHiddenMenuItems}
143
- onOptionClick={onMoreMenuOptionClick}
144
- variant="dark"
145
- dropdownPlacement="down"
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
- {rightContent && (
152
- <div className="ff-app-header-right-content">{rightContent}</div>
153
- )}
154
- </div>
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
- {/* {fileError && ( */}
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
- <Tooltip title="delete">
99
- <Icon
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
- name="add_file"
111
- hoverEffect={true}
112
- onClick={handleAttachmentClick}
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>
@@ -8,4 +8,6 @@ export interface AttachmentUploaderProps {
8
8
  buttonLabel?: string;
9
9
  showSelectedFiles?: boolean;
10
10
  buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
11
+ deleteButton: boolean;
12
+ addAttachmentButton: boolean;
11
13
  }
@@ -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 === "dark",
57
+ 'ff-icon-dark': variant === 'dark',
58
+ 'ff-icon-danger': variant === 'danger',
58
59
  [className]: !!className,
59
60
  }),
60
61
  ...props,
@@ -5,6 +5,11 @@
5
5
  padding: 4px;
6
6
  box-sizing: content-box;
7
7
 
8
+ &.ff-icon-danger {
9
+ &:hover {
10
+ background-color: var(--ff-icon-color-danger-variant);
11
+ }
12
+ }
8
13
  &.ff-icon-dark {
9
14
  background-color: var(--brand-color);
10
15
  &.ff-icon-click {
@@ -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;
@@ -7,7 +7,7 @@ export interface IconProps {
7
7
  onClick?: (data?: any) => void;
8
8
  hoverEffect?: boolean;
9
9
  disabled?: boolean;
10
- variant?: "dark" | "light";
10
+ variant?: "dark" | "light" | 'danger';
11
11
  x?:string;
12
12
  y?:string;
13
13
  chartIcon?:boolean
@@ -51,16 +51,33 @@
51
51
  background: var(--option-card-bg-color);
52
52
  overflow: hidden;
53
53
  min-height: 32px;
54
- min-width: 112px;
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: 8px;
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('ff-option-card', currentTheme)}
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',
@@ -16,7 +16,7 @@
16
16
  color: var(--tooltip-text-color);
17
17
  text-align: center;
18
18
  border-radius: 5px;
19
- padding: 6px 12px;
19
+ padding: 4px 8px;
20
20
  opacity: 0;
21
21
  z-index: 10000;
22
22