pixel-react 1.0.3 → 1.0.4

package/src/components/StatusButton/StatusButton.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StatusButton from './StatusButton';
+
+const meta: Meta<typeof StatusButton> = {
+  title: 'Components/StatusButton',
+  component: StatusButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StatusButton>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Passed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Passed',
+    status: 'passed',
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Failed',
+    status: 'failed',
+  },
+};
+
+export const Running: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Running',
+    status: 'running',
+  },
+};
+
+export const Terminated: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Terminated',
+    status: 'terminated',
+  },
+};
+
+export const Skipped: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Skipped',
+    status: 'skipped',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    status: 'warning',
+  },
+};
+
+export const PartiallyExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Partially Executed',
+    status: 'partially-executed',
+  },
+};
+
+export const Aborted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Aborted',
+    status: 'aborted',
+  },
+};
+
+export const NotExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Not Executed',
+    status: 'not-executed',
+  },
+};
+
+export default meta;

package/src/components/StatusButton/StatusButton.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import './StatusButton.scss';
+import { StatusButtonProps } from './types';
+import Typography from '../Typography';
+
+const StatusButton = ({
+  status = 'passed',
+  label = '',
+  onClick = () => {},
+  className = '',
+  style = {},
+  disabled = false,
+  ...props
+}: StatusButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'ff-status-button',
+        `ff-status-button--${status}`,
+        className
+      )}
+      style={style}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      <Typography
+        as="div"
+        fontWeight="semi-bold"
+        lineHeight="16px"
+        textAlign="center"
+        className="ff-status-button__text"
+      >
+        {label}
+      </Typography>
+    </button>
+  );
+};
+
+export default StatusButton;

package/src/components/StatusButton/index.ts

@@ -0,0 +1 @@
+export { default } from './StatusButton';

package/src/components/StatusButton/types.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+
+export interface StatusButtonProps {
+  /**
+   * Status of the button
+   */
+  status:
+    | 'passed'
+    | 'failed'
+    | 'running'
+    | 'skipped'
+    | 'warning'
+    | 'terminated'
+    | 'partially-executed'
+    | 'aborted'
+    | 'not-executed';
+  /**
+   * Button label (status text)
+   */
+  label?: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+}

package/src/components/Table/Table.scss

@@ -44,7 +44,7 @@
         transform: translateX(20px);
       }
       &:hover {
-        background-color: var(--slider-table-color);
+        background-color: var(--hover-color);
 
         .icon-container {
           opacity: 1;
@@ -75,7 +75,7 @@
     background-color: var(--brand-color);
   }
   .secondary-bg {
-    background-color: var(--primary-icon-color);
+    background-color: var(--slider-table-color);
   }
   .default-bg {
     background-color: transparent;

package/src/components/Tabs/Tabs.scss

@@ -68,6 +68,9 @@
         }
       }
     }
+    &--no-border {
+      border: none;
+    }
   }
 
   .ff-tab-content {

package/src/components/Tabs/Tabs.stories.tsx

@@ -101,4 +101,35 @@ export const TabsWithDisabledTab: Story = {
   },
 };
 
+export const WithoutBorder: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
+
+    const tabsData = [
+      { label: 'Tab--1', component: <TabContentOne /> },
+      { label: 'Tab--2', component: <TabContentTwo /> },
+      { label: 'Tab--3', component: <TabContentThree /> },
+    ];
+
+    return (
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <Tabs
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />{' '}
+        <hr />
+        <Tabs
+          variant="capsule"
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />
+      </div>
+    );
+  },
+};
+
 export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -9,6 +9,7 @@ const Tabs = ({
   tabsData,
   activeTabId,
   onTabClick,
+  noBorder = false,
 }: TabsProps) => {
   const tabs = tabsData.map((tab, index) => ({
     id: index.toString(),
@@ -19,7 +20,11 @@ const Tabs = ({
 
   return (
     <div className={`ff-tabs-container`}>
-      <div className={`ff-tab-row--${variant}`}>
+      <div
+        className={classNames(`ff-tab-row--${variant}`, {
+          'ff-tab-row--no-border': noBorder,
+        })}
+      >
         {tabs.map((tab) => (
           <button
             key={tab.id}

package/src/components/Tabs/types.ts

@@ -10,7 +10,7 @@ export interface Tab {
   /**
    * The content to display when this tab is active.
    */
-  component: JSX.Element | React.ReactNode;
+  component?: JSX.Element | React.ReactNode;
   /**
    * Optional property to indicate if the tab is disabled.
    */
@@ -21,7 +21,7 @@ export interface TabsProps {
   /**
    * An array of tab objects containing label, component, and optional disabled status.
    */
-  tabsData: { label: string; component: JSX.Element; disabled?: boolean }[];
+  tabsData: { label: string; component?: JSX.Element; disabled?: boolean }[];
   /**
    * Defines the styling variant of the tabs.
    */
@@ -35,4 +35,8 @@ export interface TabsProps {
    * onTabClick : function updates the active tab state when a user interacts with the tabs,
    */
   onTabClick: (id: string) => void;
+  /**
+   * noBorder:true , removes the outer border from tabs
+   */
+  noBorder?: boolean;
 }

package/src/index.ts

@@ -13,6 +13,7 @@ import RadialChart from './components/Charts/RadialChart';
 import ExpandableMenu from './components/ExpandableMenu';
 import Select from './components/Select/Select';
 import TextArea from './components/TextArea';
+import StatusButton from './components/StatusButton';
 
 import MenuOption from './components/MenuOption';
 import Table from './components/Table/Table';
@@ -35,6 +36,7 @@ import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
+import StateDropdown from './components/StateDropdown';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -80,6 +82,9 @@ export {
   Tabs,
   Checkbox,
   Search,
+  StateDropdown,
+  StatusButton,
+
 
   // utils exports
   checkEmpty,

package/vite.config.js

@@ -11,12 +11,4 @@ export default {
       },
     }),
   ],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        // This option tells Vite to use Dart Sass for SCSS processing
-        implementation: require('sass'),
-      },
-    },
-  },
 };