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.
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Drawer/Types.d.ts +4 -0
- package/lib/components/StatusCard/types.d.ts +7 -1
- package/lib/index.d.ts +12 -1
- package/lib/index.esm.js +45 -22
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +45 -22
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AppHeader/AppHeader.scss +2 -2
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -0
- package/src/components/Charts/BarChart/BarChart.tsx +7 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +16 -17
- package/src/components/Drawer/Drawer.scss +2 -2
- package/src/components/Drawer/Drawer.stories.tsx +1 -0
- package/src/components/Drawer/Drawer.tsx +2 -1
- package/src/components/Drawer/Types.ts +4 -0
- package/src/components/Editor/VariableDropdown.scss +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +8 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +3 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +21 -2
- package/src/components/Icon/iconList.ts +0 -2
- package/src/components/StatusCard/StatusCard.scss +47 -4
- package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
- package/src/components/StatusCard/StatusCard.tsx +28 -5
- package/src/components/StatusCard/types.ts +15 -10
- package/src/components/Toastify/Toastify.tsx +1 -0
package/package.json
CHANGED
@@ -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:
|
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:
|
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;
|
@@ -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
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
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
|
-
|
134
|
+
width: 100%;
|
135
|
+
border-radius: 0 0 8px 8px;
|
136
136
|
}
|
137
137
|
}
|
138
138
|
}
|
@@ -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
|
@@ -105,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
|
|
105
105
|
|
106
106
|
return (
|
107
107
|
<th
|
108
|
-
style={{ minWidth: `${columnWidth}px`, position: '
|
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={
|
20
|
-
'ff-spreadsheet-header--selected': selected,
|
21
|
-
})}
|
19
|
+
className={'ff-spreadsheet-corner-header'}
|
22
20
|
onClick={handleClick}
|
23
21
|
tabIndex={0}
|
24
22
|
>
|
25
|
-
<
|
26
|
-
|
27
|
-
|
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
|
};
|
@@ -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
|
-
|
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
|
-
|
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:
|
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:
|
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
|
}
|
@@ -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> = ({
|
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
|
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=
|
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
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
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
|
+
}
|