pixel-react 1.7.2 → 1.7.4

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 (28) hide show
  1. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  2. package/lib/components/Drawer/Types.d.ts +4 -0
  3. package/lib/components/StatusCard/types.d.ts +7 -1
  4. package/lib/index.d.ts +12 -1
  5. package/lib/index.esm.js +45 -22
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +45 -22
  8. package/lib/index.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/AppHeader/AppHeader.scss +2 -2
  11. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -0
  12. package/src/components/Charts/BarChart/BarChart.tsx +7 -0
  13. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +16 -17
  14. package/src/components/Drawer/Drawer.scss +2 -2
  15. package/src/components/Drawer/Drawer.stories.tsx +1 -0
  16. package/src/components/Drawer/Drawer.tsx +2 -1
  17. package/src/components/Drawer/Types.ts +4 -0
  18. package/src/components/Editor/VariableDropdown.scss +1 -0
  19. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +1 -1
  20. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +8 -7
  21. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +3 -1
  22. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +21 -2
  23. package/src/components/Icon/iconList.ts +0 -2
  24. package/src/components/StatusCard/StatusCard.scss +47 -4
  25. package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
  26. package/src/components/StatusCard/StatusCard.tsx +28 -5
  27. package/src/components/StatusCard/types.ts +15 -10
  28. package/src/components/Toastify/Toastify.tsx +1 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.7.2",
4
+ "version": "1.7.4",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -36,7 +36,7 @@
36
36
  flex: 1 1 auto;
37
37
  overflow: hidden;
38
38
  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
39
- max-width: 100px; /* Initial max-width */
39
+ max-width: 150px; /* Initial max-width */
40
40
  &:not(.ff-app-header-nav-bar-item--selected):hover::after {
41
41
  animation: oscillate-border-width 0.5s ease-in-out forwards;
42
42
  }
@@ -60,7 +60,7 @@
60
60
  background-color: var(--primary-icon-color);
61
61
  border-radius: 20px;
62
62
  flex-grow: 12; /* Increase size on hover */
63
- max-width: 550px;
63
+ max-width: 700px;
64
64
  opacity: 1;
65
65
  .ff-app-header-nav-bar-item-label {
66
66
  box-shadow: 0px 4px 4px 0px #00000040 inset;
@@ -63,5 +63,8 @@ export const BarChartDashboard: Story = {
63
63
  'opera',
64
64
  ],
65
65
  iconSize: 20,
66
+ onSelectedBar: (label) => {
67
+ console.log(label);
68
+ },
66
69
  },
67
70
  };
@@ -22,6 +22,7 @@ type BarChartProps = {
22
22
  backgroundColor?: string;
23
23
  legendPosition?: 'top' | 'bottom';
24
24
  legendGap?: number;
25
+ onSelectedBar?: (_label: string) => void;
25
26
  };
26
27
 
27
28
  const BarChart: React.FC<BarChartProps> = ({
@@ -41,6 +42,7 @@ const BarChart: React.FC<BarChartProps> = ({
41
42
  iconSize,
42
43
  legendPosition = 'bottom',
43
44
  legendGap = 5,
45
+ onSelectedBar = (_label) => {},
44
46
  }) => {
45
47
  const [tooltip, setTooltip] = useState<{
46
48
  visible: boolean;
@@ -120,6 +122,10 @@ const BarChart: React.FC<BarChartProps> = ({
120
122
  });
121
123
  };
122
124
 
125
+ const handleSelectLabel = (label: string) => {
126
+ onSelectedBar(label);
127
+ };
128
+
123
129
  return (
124
130
  <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
125
131
  {legend && legendPosition === 'top' && (
@@ -232,6 +238,7 @@ const BarChart: React.FC<BarChartProps> = ({
232
238
  }
233
239
  onMouseMove={handleMouseMove}
234
240
  onMouseLeave={handleMouseLeave}
241
+ onClick={() => handleSelectLabel(item.label)}
235
242
  ></rect>
236
243
 
237
244
  {showXAxisLabels && (
@@ -135,23 +135,22 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
135
135
  />
136
136
  )}
137
137
  </div>
138
- {showDropdown && (
139
- isHash ? (
140
- <OptionsDropdown
141
- position="relative"
142
- width={dropdownWidth}
143
- filteredOptions={filteredOptions}
144
- onSelectVariable={handleDropdownClick}
145
- />
146
- ) : (
147
- <VariableDropdown
148
- position="relative"
149
- width={dropdownWidth}
150
- optionsList={variableList}
151
- onSelectVariable={handleDropdownClick}
152
- />
153
- )
154
- )}
138
+ {showDropdown &&
139
+ (isHash ? (
140
+ <OptionsDropdown
141
+ position="relative"
142
+ width={dropdownWidth}
143
+ filteredOptions={filteredOptions}
144
+ onSelectVariable={handleDropdownClick}
145
+ />
146
+ ) : (
147
+ <VariableDropdown
148
+ position="absolute"
149
+ width={dropdownWidth}
150
+ optionsList={variableList}
151
+ onSelectVariable={handleDropdownClick}
152
+ />
153
+ ))}
155
154
  </div>
156
155
  );
157
156
  };
@@ -99,7 +99,6 @@
99
99
  }
100
100
  .ff-custom-header {
101
101
  background-color: var(--drawer-footer-bg);
102
- padding: 4px 8px;
103
102
  width: 100%;
104
103
  }
105
104
  }
@@ -132,7 +131,8 @@
132
131
  }
133
132
  .ff-custom-footer {
134
133
  background-color: var(--drawer-footer-bg);
135
- padding: 4px 8px;
134
+ width: 100%;
135
+ border-radius: 0 0 8px 8px;
136
136
  }
137
137
  }
138
138
  }
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import Drawer from './Drawer';
3
4
  import { useState } from 'react';
@@ -39,6 +39,7 @@ const Drawer: FC<DrawerProps> = ({
39
39
  height,
40
40
  width,
41
41
  right = 0,
42
+ overflow,
42
43
  }: DrawerProps) => {
43
44
  const [isExpanded, setIsExpanded] = useState(false);
44
45
 
@@ -88,7 +89,7 @@ const Drawer: FC<DrawerProps> = ({
88
89
  className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
89
90
  'ff-drawer--open': isOpen,
90
91
  })}
91
- style={{ zIndex, top, height, width, right }}
92
+ style={{ zIndex, top, height, width, right, overflow }}
92
93
  >
93
94
  {showHeader && (
94
95
  <div
@@ -154,4 +154,8 @@ export interface DrawerProps {
154
154
  * Position from right
155
155
  */
156
156
  right?: string | number;
157
+ /**
158
+ * Custom overflow for the drawer
159
+ */
160
+ overflow?: string;
157
161
  }
@@ -10,6 +10,7 @@
10
10
  overflow-y: auto;
11
11
  &.absolute {
12
12
  position: absolute;
13
+ top: 34px;
13
14
  }
14
15
  &.relative {
15
16
  position: relative;
@@ -105,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
105
105
 
106
106
  return (
107
107
  <th
108
- style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
108
+ style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
109
109
  className={classNames('ff-spreadsheet-header', {
110
110
  'ff-spreadsheet-header--selected': selected,
111
111
  })}
@@ -16,16 +16,17 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
16
16
  }, [onSelect]);
17
17
  return (
18
18
  <th
19
- className={classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
20
- 'ff-spreadsheet-header--selected': selected,
21
- })}
19
+ className={'ff-spreadsheet-corner-header'}
22
20
  onClick={handleClick}
23
21
  tabIndex={0}
24
22
  >
25
- <Icon
26
- variant={selected ? 'dark' : 'light'}
27
- name="excel_corner_menu"
28
- />
23
+ <div
24
+ className={classNames('corner-header', {
25
+ 'ff-spreadsheet-header--selected': selected,
26
+ })}
27
+ >
28
+ <Icon variant={selected ? 'dark' : 'light'} name="excel_corner_menu" />
29
+ </div>
29
30
  </th>
30
31
  );
31
32
  };
@@ -1,5 +1,7 @@
1
1
  import * as Types from './types';
2
2
 
3
- const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
3
+ const HeaderRow: Types.HeaderRowComponent = (props) => (
4
+ <tr className="ff-spreadsheet-row-header" {...props} />
5
+ );
4
6
 
5
7
  export default HeaderRow;
@@ -53,7 +53,6 @@
53
53
  border-collapse: collapse;
54
54
  table-layout: fixed;
55
55
  }
56
-
57
56
  .ff-spreadsheet-cell {
58
57
  outline: none;
59
58
  position: relative;
@@ -93,11 +92,31 @@
93
92
  color: var(--readonly-text-color);
94
93
  text-align: center;
95
94
  z-index: 1000;
95
+ position: sticky;
96
96
  }
97
97
 
98
98
  .ff-spreadsheet-corner-header {
99
- padding-left: 20px;
99
+ position: fixed;
100
+ z-index: 2000;
101
+ }
102
+
103
+ .ff-spreadsheet-row-header {
104
+ // position: relative;
105
+ height: 34px;
106
+ }
107
+
108
+ .corner-header {
109
+ border: 0.1px solid var(--border-color);
110
+ background-color: var(--header-background-color);
111
+ position: absolute;
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: center;
100
115
  z-index: 1100;
116
+ top: -1px;
117
+ width: 60px;
118
+ height: 34px;
119
+ left: -1px;
101
120
  }
102
121
 
103
122
  .ff-spreadsheet-header--selected {
@@ -82,7 +82,6 @@ import IpkFileType from '../../assets/icons/ipk_file_type.svg?react';
82
82
  import TxtFileType from '../../assets/icons/txt_file_type.svg?react';
83
83
  import GifFileType from '../../assets/icons/gif_file_type.svg?react';
84
84
  import JpgFileType from '../../assets/icons/jpg_file_type.svg?react';
85
-
86
85
  import InfoIcon from '../../assets/icons/info_icon.svg?react';
87
86
  import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
88
87
  import HideIcon from '../../assets/icons/hide_icon.svg?react';
@@ -421,7 +420,6 @@ Components['add_testcase'] = AddTestCaseIcon;
421
420
  Components['automation_testcase'] = AutomationTestCaseIcon;
422
421
  Components['manual_testcase'] = ManualTestCaseIcon;
423
422
  Components['back_icon'] = BackIcon;
424
-
425
423
  Components['sause_lab'] = SauseLabIcon;
426
424
  Components['local'] = LocalIcon;
427
425
  Components['internet_explorer'] = InternetExplorerIcon;
@@ -1,6 +1,5 @@
1
1
  .ff-card-container {
2
- width: 120px;
3
- height: 93px;
2
+ height: 78px;
4
3
  display: flex;
5
4
  align-items: center;
6
5
  border: 1px solid var(--border-color);
@@ -31,14 +30,14 @@
31
30
  }
32
31
 
33
32
  .ff-status-bar {
34
- width: 24px;
33
+ width: 12%;
35
34
  height: 100%;
36
35
  display: flex;
37
36
  flex-direction: column;
38
37
  justify-content: start;
39
38
  align-items: center;
40
39
  border-right: 1px solid var(--border-color);
41
- gap: 30px;
40
+ gap: 17px;
42
41
 
43
42
  .ff-status-text {
44
43
  transform: rotate(-90deg);
@@ -49,18 +48,23 @@
49
48
 
50
49
  &.passed .ff-status-bar {
51
50
  background-color: var(--ff-card-passed-status-bg-color);
51
+ color: var(--base-bg-color);
52
52
  }
53
53
  &.failed .ff-status-bar {
54
54
  background-color: var(--ff-card-failed-status-bg-color);
55
+ color: var(--base-bg-color);
55
56
  }
56
57
  &.warning .ff-status-bar {
57
58
  background-color: var(--ff-card-warning-status-bg-color);
59
+ color: var(--base-bg-color);
58
60
  }
59
61
  &.skipped .ff-status-bar {
60
62
  background-color: var(--ff-card-skipped-status-bg-color);
63
+ color: var(--base-bg-color);
61
64
  }
62
65
  &.flaky .ff-status-bar {
63
66
  background-color: var(--ff-card-flaky-status-bg-color);
67
+ color: var(--base-bg-color);
64
68
  }
65
69
 
66
70
  .ff-content {
@@ -91,4 +95,43 @@
91
95
  &.flaky .ff-number {
92
96
  color: var(--ff-card-flaky-status-bg-color);
93
97
  }
98
+
99
+ &.toggled {
100
+ &.passed .ff-status-bar {
101
+ background-color: var(--base-bg-color);
102
+ color: var(--ff-card-passed-status-bg-color);
103
+ }
104
+ &.failed .ff-status-bar {
105
+ background-color: var(--base-bg-color);
106
+ color: var(--ff-card-failed-status-bg-color);
107
+ }
108
+ &.warning .ff-status-bar {
109
+ background-color: var(--base-bg-color);
110
+ color: var(--ff-card-warning-status-bg-color);
111
+ }
112
+ &.skipped .ff-status-bar {
113
+ background-color: var(--base-bg-color);
114
+ color: var(--ff-card-skipped-status-bg-color);
115
+ }
116
+ &.flaky .ff-status-bar {
117
+ background-color: var(--base-bg-color);
118
+ color: var(--ff-card-flaky-status-bg-color);
119
+ }
120
+
121
+ &.passed .ff-content {
122
+ background-color: var(--ff-card-passed-status-bg-color);
123
+ }
124
+ &.failed .ff-content {
125
+ background-color: var(--ff-card-failed-status-bg-color);
126
+ }
127
+ &.warning .ff-content {
128
+ background-color: var(--ff-card-warning-status-bg-color);
129
+ }
130
+ &.skipped .ff-content {
131
+ background-color: var(--ff-card-skipped-status-bg-color);
132
+ }
133
+ &.flaky .ff-content {
134
+ background-color: var(--ff-card-flaky-status-bg-color);
135
+ }
136
+ }
94
137
  }
@@ -18,6 +18,7 @@ export const Passed: Story = {
18
18
  status: 'Passed',
19
19
  count: 66,
20
20
  text: 'Scripts were passed all the time.',
21
+ style:{width:'200px'},
21
22
  },
22
23
  };
23
24
 
@@ -1,12 +1,31 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import './StatusCard.scss';
3
3
  import { CardProps } from './types';
4
4
  import Typography from '../Typography';
5
5
  import Icon from '../Icon';
6
6
 
7
- const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
7
+ const StatusCard: React.FC<CardProps> = ({
8
+ icon,
9
+ status,
10
+ count,
11
+ text,
12
+ style = { width: '196.4px' },
13
+ onSelectedStatus = (_status) => {},
14
+ }) => {
15
+ const [isToggled, setIsToggled] = useState<boolean>(false);
16
+
17
+ const handleSelectStatus = (status: string) => {
18
+ setIsToggled(true);
19
+ onSelectedStatus(status);
20
+ };
8
21
  return (
9
- <div className={`ff-card-container ${status.toLowerCase()}`}>
22
+ <div
23
+ className={`ff-card-container ${status.toLowerCase()} ${
24
+ isToggled ? 'toggled' : ''
25
+ }`}
26
+ style={style}
27
+ onClick={() => handleSelectStatus(status)}
28
+ >
10
29
  <div className="ff-status-bar">
11
30
  <div>
12
31
  <Icon name={icon} height={20} width={20} hoverEffect={false} />
@@ -14,7 +33,6 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
14
33
  <Typography
15
34
  fontWeight="semi-bold"
16
35
  fontSize="10px"
17
- color="var(--ff-status-card-text-color)"
18
36
  textAlign="center"
19
37
  lineHeight="15px"
20
38
  className="ff-status-text"
@@ -29,6 +47,7 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
29
47
  fontSize="24px"
30
48
  className="ff-number"
31
49
  lineHeight="36px"
50
+ color={isToggled ? 'var(--base-bg-color)' : ''}
32
51
  >
33
52
  {count}
34
53
  </Typography>
@@ -37,7 +56,11 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
37
56
  fontSize="10px"
38
57
  className="ff-text"
39
58
  lineHeight="15px"
40
- color="var(--ff-card-status-text-color)"
59
+ color={
60
+ isToggled
61
+ ? 'var(--base-bg-color)'
62
+ : 'var(--ff-card-status-text-color)'
63
+ }
41
64
  >
42
65
  {text}
43
66
  </Typography>
@@ -1,11 +1,16 @@
1
1
  export interface CardProps {
2
- /** The icon to display in the card */
3
- icon: string;
4
- /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
5
- status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
6
- /** The number displayed in the card */
7
- count: number | string;
8
- /** The description text displayed at the bottom of the card */
9
- text: string;
10
- }
11
-
2
+ /** The icon to display in the card */
3
+ icon: string;
4
+ /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
5
+ status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
6
+ /** The number displayed in the card */
7
+ count: number | string;
8
+ /** The description text displayed at the bottom of the card */
9
+ text: string;
10
+ /** Inline Styling */
11
+ style?: React.CSSProperties;
12
+ /** toggle update */
13
+ handleToggleStatus?: (_status: boolean) => void;
14
+ /** call back */
15
+ onSelectedStatus?: (_status: string) => void;
16
+ }
@@ -73,6 +73,7 @@ export const Toastify = () => {
73
73
  variant={toastProps.variant}
74
74
  toastTitle={toastProps.toastTitle}
75
75
  toastMessage={toastProps.toastMessage}
76
+ zIndex={1000000000}
76
77
  />
77
78
  );
78
79
  };