pixel-react 1.0.3 → 1.0.5
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/.yarn/install-state.gz +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/AddResourceButton/type.d.ts +13 -10
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +1 -0
- package/lib/components/InputWithDropdown/types.d.ts +4 -0
- package/lib/components/MenuOption/types.d.ts +1 -1
- package/lib/components/Select/Select.d.ts +1 -1
- package/lib/components/Select/types.d.ts +5 -1
- package/lib/components/StateDropdown/StateDropdown.d.ts +3 -0
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
- package/lib/components/StateDropdown/StateDropdownTypes.d.ts +11 -0
- package/lib/components/StateDropdown/index.d.ts +1 -0
- package/lib/components/StatusButton/StatusButton.d.ts +4 -0
- package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
- package/lib/components/StatusButton/index.d.ts +1 -0
- package/lib/components/StatusButton/types.d.ts +35 -0
- package/lib/components/Tabs/Tabs.d.ts +1 -1
- package/lib/components/Tabs/Tabs.stories.d.ts +1 -0
- package/lib/components/Tabs/types.d.ts +6 -2
- package/lib/index.d.ts +84 -11
- package/lib/index.esm.js +339 -86
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +342 -86
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/rollup.config.mjs +0 -3
- package/src/assets/Themes/BaseTheme.scss +45 -16
- package/src/assets/Themes/DarkTheme.scss +48 -10
- package/src/assets/icons/active_license_icon.svg +3 -0
- package/src/assets/icons/delete.svg +2 -16
- package/src/assets/icons/delete_info.svg +17 -0
- package/src/assets/icons/details.svg +3 -0
- package/src/assets/icons/edit_icon.svg +5 -0
- package/src/assets/icons/expired_license_icon.svg +3 -0
- package/src/assets/icons/expiringSoon_license_icon.svg +3 -0
- package/src/assets/icons/export_collection_icon.svg +13 -0
- package/src/assets/icons/hide_icon.svg +9 -0
- package/src/assets/icons/impactList.svg +6 -0
- package/src/assets/icons/run_icon.svg +26 -0
- package/src/assets/icons/view_icon.svg +3 -0
- package/src/assets/utils/functionUtils.ts +5 -5
- package/src/components/AddButton/AddButton.scss +38 -0
- package/src/components/AddButton/AddButton.stories.tsx +24 -0
- package/src/components/AddButton/AddButton.tsx +25 -0
- package/src/components/AddButton/index.ts +1 -0
- package/src/components/AddButton/types.ts +4 -0
- package/src/components/AddResourceButton/type.ts +42 -10
- package/src/components/Button/index.ts +1 -1
- package/src/components/Icon/iconList.ts +24 -2
- package/src/components/Input/Input.stories.tsx +1 -1
- package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +59 -2
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +3 -1
- package/src/components/InputWithDropdown/types.ts +4 -0
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/Search/Search.scss +70 -72
- package/src/components/Select/Select.tsx +29 -25
- package/src/components/Select/types.ts +5 -1
- package/src/components/StateDropdown/StateDropdown.stories.tsx +99 -0
- package/src/components/StateDropdown/StateDropdown.tsx +218 -0
- package/src/components/StateDropdown/StateDropdownTypes.tsx +21 -0
- package/src/components/StateDropdown/index.ts +1 -0
- package/src/components/StatusButton/StatusButton.scss +90 -0
- package/src/components/StatusButton/StatusButton.stories.tsx +91 -0
- package/src/components/StatusButton/StatusButton.tsx +40 -0
- package/src/components/StatusButton/index.ts +1 -0
- package/src/components/StatusButton/types.ts +45 -0
- package/src/components/Table/Table.scss +2 -2
- package/src/components/Tabs/Tabs.scss +3 -0
- package/src/components/Tabs/Tabs.stories.tsx +31 -0
- package/src/components/Tabs/Tabs.tsx +6 -1
- package/src/components/Tabs/types.ts +6 -2
- package/src/index.ts +7 -0
- package/vite.config.js +0 -8
- package/lib/index.css +0 -404
- package/lib/index.esm.css +0 -404
@@ -0,0 +1,91 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import StatusButton from './StatusButton';
|
3
|
+
|
4
|
+
const meta: Meta<typeof StatusButton> = {
|
5
|
+
title: 'Components/StatusButton',
|
6
|
+
component: StatusButton,
|
7
|
+
parameters: {
|
8
|
+
layout: 'centered',
|
9
|
+
},
|
10
|
+
tags: ['autodocs'],
|
11
|
+
};
|
12
|
+
|
13
|
+
type Story = StoryObj<typeof StatusButton>;
|
14
|
+
|
15
|
+
const defaultArgs = {
|
16
|
+
disabled: false,
|
17
|
+
};
|
18
|
+
|
19
|
+
export const Passed: Story = {
|
20
|
+
args: {
|
21
|
+
...defaultArgs,
|
22
|
+
label: 'Passed',
|
23
|
+
status: 'passed',
|
24
|
+
},
|
25
|
+
};
|
26
|
+
|
27
|
+
export const Failed: Story = {
|
28
|
+
args: {
|
29
|
+
...defaultArgs,
|
30
|
+
label: 'Failed',
|
31
|
+
status: 'failed',
|
32
|
+
},
|
33
|
+
};
|
34
|
+
|
35
|
+
export const Running: Story = {
|
36
|
+
args: {
|
37
|
+
...defaultArgs,
|
38
|
+
label: 'Running',
|
39
|
+
status: 'running',
|
40
|
+
},
|
41
|
+
};
|
42
|
+
|
43
|
+
export const Terminated: Story = {
|
44
|
+
args: {
|
45
|
+
...defaultArgs,
|
46
|
+
label: 'Terminated',
|
47
|
+
status: 'terminated',
|
48
|
+
},
|
49
|
+
};
|
50
|
+
|
51
|
+
export const Skipped: Story = {
|
52
|
+
args: {
|
53
|
+
...defaultArgs,
|
54
|
+
label: 'Skipped',
|
55
|
+
status: 'skipped',
|
56
|
+
},
|
57
|
+
};
|
58
|
+
|
59
|
+
export const Warning: Story = {
|
60
|
+
args: {
|
61
|
+
...defaultArgs,
|
62
|
+
label: 'Warning',
|
63
|
+
status: 'warning',
|
64
|
+
},
|
65
|
+
};
|
66
|
+
|
67
|
+
export const PartiallyExecuted: Story = {
|
68
|
+
args: {
|
69
|
+
...defaultArgs,
|
70
|
+
label: 'Partially Executed',
|
71
|
+
status: 'partially-executed',
|
72
|
+
},
|
73
|
+
};
|
74
|
+
|
75
|
+
export const Aborted: Story = {
|
76
|
+
args: {
|
77
|
+
...defaultArgs,
|
78
|
+
label: 'Aborted',
|
79
|
+
status: 'aborted',
|
80
|
+
},
|
81
|
+
};
|
82
|
+
|
83
|
+
export const NotExecuted: Story = {
|
84
|
+
args: {
|
85
|
+
...defaultArgs,
|
86
|
+
label: 'Not Executed',
|
87
|
+
status: 'not-executed',
|
88
|
+
},
|
89
|
+
};
|
90
|
+
|
91
|
+
export default meta;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import classNames from 'classnames';
|
2
|
+
import './StatusButton.scss';
|
3
|
+
import { StatusButtonProps } from './types';
|
4
|
+
import Typography from '../Typography';
|
5
|
+
|
6
|
+
const StatusButton = ({
|
7
|
+
status = 'passed',
|
8
|
+
label = '',
|
9
|
+
onClick = () => {},
|
10
|
+
className = '',
|
11
|
+
style = {},
|
12
|
+
disabled = false,
|
13
|
+
...props
|
14
|
+
}: StatusButtonProps) => {
|
15
|
+
return (
|
16
|
+
<button
|
17
|
+
className={classNames(
|
18
|
+
'ff-status-button',
|
19
|
+
`ff-status-button--${status}`,
|
20
|
+
className
|
21
|
+
)}
|
22
|
+
style={style}
|
23
|
+
onClick={onClick}
|
24
|
+
disabled={disabled}
|
25
|
+
{...props}
|
26
|
+
>
|
27
|
+
<Typography
|
28
|
+
as="div"
|
29
|
+
fontWeight="semi-bold"
|
30
|
+
lineHeight="16px"
|
31
|
+
textAlign="center"
|
32
|
+
className="ff-status-button__text"
|
33
|
+
>
|
34
|
+
{label}
|
35
|
+
</Typography>
|
36
|
+
</button>
|
37
|
+
);
|
38
|
+
};
|
39
|
+
|
40
|
+
export default StatusButton;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './StatusButton';
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
|
3
|
+
export interface StatusButtonProps {
|
4
|
+
/**
|
5
|
+
* Status of the button
|
6
|
+
*/
|
7
|
+
status:
|
8
|
+
| 'passed'
|
9
|
+
| 'failed'
|
10
|
+
| 'running'
|
11
|
+
| 'skipped'
|
12
|
+
| 'warning'
|
13
|
+
| 'terminated'
|
14
|
+
| 'partially-executed'
|
15
|
+
| 'aborted'
|
16
|
+
| 'not-executed';
|
17
|
+
/**
|
18
|
+
* Button label (status text)
|
19
|
+
*/
|
20
|
+
label?: string;
|
21
|
+
/**
|
22
|
+
* Optional click handler
|
23
|
+
*/
|
24
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
25
|
+
/**
|
26
|
+
* Button content
|
27
|
+
*/
|
28
|
+
children?: ReactNode;
|
29
|
+
/**
|
30
|
+
* Button id
|
31
|
+
*/
|
32
|
+
id?: string;
|
33
|
+
/**
|
34
|
+
* Disabled state
|
35
|
+
*/
|
36
|
+
disabled?: boolean;
|
37
|
+
/**
|
38
|
+
* Classname for the button
|
39
|
+
*/
|
40
|
+
className?: string;
|
41
|
+
/**
|
42
|
+
* Additional styles for the button
|
43
|
+
*/
|
44
|
+
style?: React.CSSProperties;
|
45
|
+
}
|
@@ -44,7 +44,7 @@
|
|
44
44
|
transform: translateX(20px);
|
45
45
|
}
|
46
46
|
&:hover {
|
47
|
-
background-color: var(--
|
47
|
+
background-color: var(--hover-color);
|
48
48
|
|
49
49
|
.icon-container {
|
50
50
|
opacity: 1;
|
@@ -75,7 +75,7 @@
|
|
75
75
|
background-color: var(--brand-color);
|
76
76
|
}
|
77
77
|
.secondary-bg {
|
78
|
-
background-color: var(--
|
78
|
+
background-color: var(--slider-table-color);
|
79
79
|
}
|
80
80
|
.default-bg {
|
81
81
|
background-color: transparent;
|
@@ -101,4 +101,35 @@ export const TabsWithDisabledTab: Story = {
|
|
101
101
|
},
|
102
102
|
};
|
103
103
|
|
104
|
+
export const WithoutBorder: Story = {
|
105
|
+
render: () => {
|
106
|
+
const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
|
107
|
+
|
108
|
+
const tabsData = [
|
109
|
+
{ label: 'Tab--1', component: <TabContentOne /> },
|
110
|
+
{ label: 'Tab--2', component: <TabContentTwo /> },
|
111
|
+
{ label: 'Tab--3', component: <TabContentThree /> },
|
112
|
+
];
|
113
|
+
|
114
|
+
return (
|
115
|
+
<div style={{ display: 'flex', gap: '10px' }}>
|
116
|
+
<Tabs
|
117
|
+
tabsData={tabsData}
|
118
|
+
activeTabId={activeTabIdDefault}
|
119
|
+
onTabClick={setActiveTabIdDefault}
|
120
|
+
noBorder={true}
|
121
|
+
/>{' '}
|
122
|
+
<hr />
|
123
|
+
<Tabs
|
124
|
+
variant="capsule"
|
125
|
+
tabsData={tabsData}
|
126
|
+
activeTabId={activeTabIdDefault}
|
127
|
+
onTabClick={setActiveTabIdDefault}
|
128
|
+
noBorder={true}
|
129
|
+
/>
|
130
|
+
</div>
|
131
|
+
);
|
132
|
+
},
|
133
|
+
};
|
134
|
+
|
104
135
|
export default meta;
|
@@ -9,6 +9,7 @@ const Tabs = ({
|
|
9
9
|
tabsData,
|
10
10
|
activeTabId,
|
11
11
|
onTabClick,
|
12
|
+
noBorder = false,
|
12
13
|
}: TabsProps) => {
|
13
14
|
const tabs = tabsData.map((tab, index) => ({
|
14
15
|
id: index.toString(),
|
@@ -19,7 +20,11 @@ const Tabs = ({
|
|
19
20
|
|
20
21
|
return (
|
21
22
|
<div className={`ff-tabs-container`}>
|
22
|
-
<div
|
23
|
+
<div
|
24
|
+
className={classNames(`ff-tab-row--${variant}`, {
|
25
|
+
'ff-tab-row--no-border': noBorder,
|
26
|
+
})}
|
27
|
+
>
|
23
28
|
{tabs.map((tab) => (
|
24
29
|
<button
|
25
30
|
key={tab.id}
|
@@ -10,7 +10,7 @@ export interface Tab {
|
|
10
10
|
/**
|
11
11
|
* The content to display when this tab is active.
|
12
12
|
*/
|
13
|
-
component
|
13
|
+
component?: JSX.Element | React.ReactNode;
|
14
14
|
/**
|
15
15
|
* Optional property to indicate if the tab is disabled.
|
16
16
|
*/
|
@@ -21,7 +21,7 @@ export interface TabsProps {
|
|
21
21
|
/**
|
22
22
|
* An array of tab objects containing label, component, and optional disabled status.
|
23
23
|
*/
|
24
|
-
tabsData: { label: string; component
|
24
|
+
tabsData: { label: string; component?: JSX.Element; disabled?: boolean }[];
|
25
25
|
/**
|
26
26
|
* Defines the styling variant of the tabs.
|
27
27
|
*/
|
@@ -35,4 +35,8 @@ export interface TabsProps {
|
|
35
35
|
* onTabClick : function updates the active tab state when a user interacts with the tabs,
|
36
36
|
*/
|
37
37
|
onTabClick: (id: string) => void;
|
38
|
+
/**
|
39
|
+
* noBorder:true , removes the outer border from tabs
|
40
|
+
*/
|
41
|
+
noBorder?: boolean;
|
38
42
|
}
|
package/src/index.ts
CHANGED
@@ -13,6 +13,7 @@ import RadialChart from './components/Charts/RadialChart';
|
|
13
13
|
import ExpandableMenu from './components/ExpandableMenu';
|
14
14
|
import Select from './components/Select/Select';
|
15
15
|
import TextArea from './components/TextArea';
|
16
|
+
import StatusButton from './components/StatusButton';
|
16
17
|
|
17
18
|
import MenuOption from './components/MenuOption';
|
18
19
|
import Table from './components/Table/Table';
|
@@ -35,6 +36,8 @@ import Tabs from './components/Tabs';
|
|
35
36
|
import HighlightText from './components/HighlightText';
|
36
37
|
import Checkbox from './components/Checkbox';
|
37
38
|
import Search from './components/Search/Search';
|
39
|
+
import StateDropdown from './components/StateDropdown';
|
40
|
+
import AddButton from './components/AddButton';
|
38
41
|
|
39
42
|
// Utils imports
|
40
43
|
import { checkEmpty } from './utils/checkEmpty/checkEmpty';
|
@@ -80,6 +83,10 @@ export {
|
|
80
83
|
Tabs,
|
81
84
|
Checkbox,
|
82
85
|
Search,
|
86
|
+
StateDropdown,
|
87
|
+
StatusButton,
|
88
|
+
AddButton,
|
89
|
+
|
83
90
|
|
84
91
|
// utils exports
|
85
92
|
checkEmpty,
|