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.
Files changed (80) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AddButton/AddButton.d.ts +5 -0
  3. package/lib/components/AddButton/AddButton.stories.d.ts +6 -0
  4. package/lib/components/AddButton/index.d.ts +1 -0
  5. package/lib/components/AddButton/types.d.ts +4 -0
  6. package/lib/components/AddResourceButton/type.d.ts +13 -10
  7. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  8. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +1 -0
  9. package/lib/components/InputWithDropdown/types.d.ts +4 -0
  10. package/lib/components/MenuOption/types.d.ts +1 -1
  11. package/lib/components/Select/Select.d.ts +1 -1
  12. package/lib/components/Select/types.d.ts +5 -1
  13. package/lib/components/StateDropdown/StateDropdown.d.ts +3 -0
  14. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +10 -0
  15. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +11 -0
  16. package/lib/components/StateDropdown/index.d.ts +1 -0
  17. package/lib/components/StatusButton/StatusButton.d.ts +4 -0
  18. package/lib/components/StatusButton/StatusButton.stories.d.ts +14 -0
  19. package/lib/components/StatusButton/index.d.ts +1 -0
  20. package/lib/components/StatusButton/types.d.ts +35 -0
  21. package/lib/components/Tabs/Tabs.d.ts +1 -1
  22. package/lib/components/Tabs/Tabs.stories.d.ts +1 -0
  23. package/lib/components/Tabs/types.d.ts +6 -2
  24. package/lib/index.d.ts +84 -11
  25. package/lib/index.esm.js +339 -86
  26. package/lib/index.esm.js.map +1 -1
  27. package/lib/index.js +342 -86
  28. package/lib/index.js.map +1 -1
  29. package/lib/tsconfig.tsbuildinfo +1 -1
  30. package/package.json +1 -1
  31. package/rollup.config.mjs +0 -3
  32. package/src/assets/Themes/BaseTheme.scss +45 -16
  33. package/src/assets/Themes/DarkTheme.scss +48 -10
  34. package/src/assets/icons/active_license_icon.svg +3 -0
  35. package/src/assets/icons/delete.svg +2 -16
  36. package/src/assets/icons/delete_info.svg +17 -0
  37. package/src/assets/icons/details.svg +3 -0
  38. package/src/assets/icons/edit_icon.svg +5 -0
  39. package/src/assets/icons/expired_license_icon.svg +3 -0
  40. package/src/assets/icons/expiringSoon_license_icon.svg +3 -0
  41. package/src/assets/icons/export_collection_icon.svg +13 -0
  42. package/src/assets/icons/hide_icon.svg +9 -0
  43. package/src/assets/icons/impactList.svg +6 -0
  44. package/src/assets/icons/run_icon.svg +26 -0
  45. package/src/assets/icons/view_icon.svg +3 -0
  46. package/src/assets/utils/functionUtils.ts +5 -5
  47. package/src/components/AddButton/AddButton.scss +38 -0
  48. package/src/components/AddButton/AddButton.stories.tsx +24 -0
  49. package/src/components/AddButton/AddButton.tsx +25 -0
  50. package/src/components/AddButton/index.ts +1 -0
  51. package/src/components/AddButton/types.ts +4 -0
  52. package/src/components/AddResourceButton/type.ts +42 -10
  53. package/src/components/Button/index.ts +1 -1
  54. package/src/components/Icon/iconList.ts +24 -2
  55. package/src/components/Input/Input.stories.tsx +1 -1
  56. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +59 -2
  57. package/src/components/InputWithDropdown/InputWithDropdown.tsx +3 -1
  58. package/src/components/InputWithDropdown/types.ts +4 -0
  59. package/src/components/MenuOption/types.ts +1 -1
  60. package/src/components/Search/Search.scss +70 -72
  61. package/src/components/Select/Select.tsx +29 -25
  62. package/src/components/Select/types.ts +5 -1
  63. package/src/components/StateDropdown/StateDropdown.stories.tsx +99 -0
  64. package/src/components/StateDropdown/StateDropdown.tsx +218 -0
  65. package/src/components/StateDropdown/StateDropdownTypes.tsx +21 -0
  66. package/src/components/StateDropdown/index.ts +1 -0
  67. package/src/components/StatusButton/StatusButton.scss +90 -0
  68. package/src/components/StatusButton/StatusButton.stories.tsx +91 -0
  69. package/src/components/StatusButton/StatusButton.tsx +40 -0
  70. package/src/components/StatusButton/index.ts +1 -0
  71. package/src/components/StatusButton/types.ts +45 -0
  72. package/src/components/Table/Table.scss +2 -2
  73. package/src/components/Tabs/Tabs.scss +3 -0
  74. package/src/components/Tabs/Tabs.stories.tsx +31 -0
  75. package/src/components/Tabs/Tabs.tsx +6 -1
  76. package/src/components/Tabs/types.ts +6 -2
  77. package/src/index.ts +7 -0
  78. package/vite.config.js +0 -8
  79. package/lib/index.css +0 -404
  80. 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(--slider-table-color);
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(--primary-icon-color);
78
+ background-color: var(--slider-table-color);
79
79
  }
80
80
  .default-bg {
81
81
  background-color: transparent;
@@ -68,6 +68,9 @@
68
68
  }
69
69
  }
70
70
  }
71
+ &--no-border {
72
+ border: none;
73
+ }
71
74
  }
72
75
 
73
76
  .ff-tab-content {
@@ -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 className={`ff-tab-row--${variant}`}>
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: JSX.Element | React.ReactNode;
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: JSX.Element; disabled?: boolean }[];
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,
package/vite.config.js CHANGED
@@ -11,12 +11,4 @@ export default {
11
11
  },
12
12
  }),
13
13
  ],
14
- css: {
15
- preprocessorOptions: {
16
- scss: {
17
- // This option tells Vite to use Dart Sass for SCSS processing
18
- implementation: require('sass'),
19
- },
20
- },
21
- },
22
14
  };