pixel-react 1.0.7 → 1.0.9

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import ffid from '../../utils/ffID/ffid';
+import { truncateText } from '../../utils/truncateText/truncateText';
+import './AllProjectsDropdown.scss';
+import classNames from 'classnames';
+
+const AllProjectsDropdown = () => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState({
+    label: 'All Projects',
+    value: 'All Projects',
+    iconName: 'all_projects',
+  });
+  const [search, setSearch] = useState(true);
+
+  let options = [
+    {
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
+    },
+    {
+      label: 'Pantaloon Project',
+      value: 'Pantaloon Web Project',
+      iconName: 'web_icon',
+    },
+    {
+      label: 'Mobile Project',
+      value: 'Mobile Project',
+      iconName: 'mobile_icon',
+    },
+    {
+      label: 'Web & Mobile Project',
+      value: 'Web & Mobile Project',
+      iconName: 'web&mobile_icon',
+    },
+    {
+      label: 'Sales Force',
+      value: 'Sales Force',
+      iconName: 'sales_force',
+    },
+    {
+      label: 'MS Dynamic',
+      value: 'MS Dynamic',
+      iconName: 'ms_dynamic',
+    },
+    {
+      label: 'Web Service',
+      value: 'Web Service',
+      iconName: '',
+    },
+  ];
+
+  const handleSelect = () => {
+    setShowOptions(!showOptions);
+  };
+
+  const handleSelectOption = (option: {
+    label: string;
+    value: string;
+    iconName: string;
+  }) => {
+    setSelectedOptions(option);
+    setShowOptions(false);
+  };
+
+  const handleInput = () => {
+    setSearch(false);
+  };
+
+  return (
+    <div className={classNames('ff-all-project')}>
+      <div
+        onClick={handleSelect}
+        className={classNames('ff-all-project-dropdown')}
+      >
+        <Typography
+          as={'div'}
+          lineHeight={'18px'}
+          fontSize={12}
+          fontWeight={'regular'}
+          className={classNames('projects-label')}
+        >
+          {truncateText(selectedOptions.label, 12)}
+        </Typography>
+        <div className={classNames('label-icon')}>
+          <Icon
+            name="arrows_down_icon"
+            color="var(--primary-icon-color)"
+            height={8}
+            width={8}
+          />
+        </div>
+      </div>
+      {showOptions && (
+        <div className={classNames('ff-dropdown')}>
+          <div className={classNames('ff-search')}>
+            {search && <Icon name="search" height={8} width={8} />}
+            <input
+              type="text"
+              placeholder="Search Project"
+              onClick={() => handleInput()}
+            />
+          </div>
+          <div
+            className={classNames(
+              'option-card',
+              `${options.length > 4 ? 'scroll' : ''}`
+            )}
+          >
+            {options.map((option) => (
+              <div
+                key={ffid()}
+                onClick={() => handleSelectOption(option)}
+                className={classNames(
+                  'projects-options',
+                  `${
+                    option.label === 'All Projects' ? 'all-projects-option' : ''
+                  }`
+                )}
+              >
+                <div className={classNames('projects-icons')}>
+                  <Icon
+                    name={option.iconName}
+                    height={12}
+                    width={12}
+                    color={
+                      option.label === 'All Projects'
+                        ? 'var(--secondary-icon-color)'
+                        : 'var(--primary-icon-color);'
+                    }
+                  />
+                </div>
+                <Typography key={ffid()} as={'div'} lineHeight={'30px'}>
+                  {option.label}
+                </Typography>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AllProjectsDropdown;

package/src/components/AllProjectsDropdown/index.ts

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

package/src/components/AppHeader/AppHeader.scss

@@ -0,0 +1,67 @@
+.ff-app-header {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--brand-color);
+  padding-left: 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  .ff-app-header-logo-icon {
+    padding: 8px;
+    height: 24px;
+  }
+  .ff-app-header-nav-bar {
+    display: flex;
+    align-items: center;
+    background-color: var(--brand-color);
+    transform: translateY(12px);
+    border-radius: 20px;
+    padding: 5px;
+    .ff-app-header-nav-bar-items {
+      display: flex;
+      align-items: center;
+      .ff-app-header-nav-bar-item {
+        margin-left: 8px;
+        color: var(--ff-header-text-color);
+        cursor: pointer;
+        display: flex;
+        &--selected {
+          padding: 3px;
+          background-color: var(--primary-icon-color);
+          border-radius: 20px;
+          .ff-app-header-nav-bar-item-label {
+            background-color: var(--brand-color);
+            border-radius: 20px;
+            padding: 4px 8px;
+          }
+        }
+        .ff-app-header-submenu-container {
+          display: flex;
+          .ff-app-header-nav-bar-submenu-item {
+            color: var(--ff-header-submenu-text-color);
+            align-content: center;
+            padding-left: 8px;
+            &--selected{
+              color: var(--ff-header-submenu-highlight-text-color);
+            }
+          }
+          .ff-app-header-quickmenu-container {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+    .ff-app-header-more-icon {
+      svg {
+        path {
+          fill: var(--primary-icon-color);
+        }
+        cursor: pointer;
+      }
+    }
+  }
+  .ff-app-header-right-content {
+    height: 24px;
+    padding: 8px;
+  }
+}

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AppHeader from './AppHeader';
+import Icon from '../Icon';
+import { useState } from 'react';
+
+const meta: Meta<typeof AppHeader> = {
+  title: 'Components/AppHeader',
+  component: AppHeader,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof AppHeader>;
+const defaultArgs = {
+  logoIconName: 'fireflink_icon',
+  rightContent: (
+    <div>
+      <Icon name="logo" />
+    </div>
+  ),
+};
+
+const headerMenuItems = [
+  {
+    menuName: 'Dashboard',
+    subMenuItems: [],
+  },
+  {
+    menuName: 'Repo',
+    subMenuItems: [
+      {
+        subMenuName: 'Elements',
+        quickMenuItems: [],
+      },
+      {
+        subMenuName: 'Program Elements',
+        quickMenuItems: [],
+      },
+      {
+        subMenuName: 'Step Groups',
+        quickMenuItems: [
+          {
+            quickMenuName: 'Success Icon',
+            quickMenuIconName: 'success',
+          },
+          {
+            quickMenuName: 'Warning Icon',
+            quickMenuIconName: 'warning',
+          },
+          {
+            quickMenuName: 'Info Icon',
+            quickMenuIconName: 'info',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    menuName: 'Test Data',
+    subMenuItems: [],
+  },
+  {
+    menuName: 'Test Dev',
+    subMenuItems: [
+      {
+        subMenuName: 'Scripts',
+        quickMenuItems: [
+          {
+            quickMenuName: 'Delete Icon',
+            quickMenuIconName: 'delete',
+          },
+          {
+            quickMenuName: 'Details Icon',
+            quickMenuIconName: 'details',
+          },
+          {
+            quickMenuName: 'Sun Icon',
+            quickMenuIconName: 'sun_icon',
+          },
+          {
+            quickMenuName: 'Moon Stars Icon',
+            quickMenuIconName: 'moon_stars_icon',
+          },
+          {
+            quickMenuName: 'Impact List Icon',
+            quickMenuIconName: 'impactList',
+          },
+        ],
+      },
+      {
+        subMenuName: 'Executions',
+        quickMenuItems: [],
+      },
+    ],
+  },
+];
+const headerHiddenMenuItems = ['Configuration', 'Approval Request'];
+const headerRightSideContent = (
+  <div>
+    <Icon name="logo" />
+  </div>
+);
+
+export const SampleAppHeader: Story = {
+  args: {
+    ...defaultArgs,
+    rightContent: (
+      <div>
+        <Icon name="logo" />
+      </div>
+    ),
+    appHeaderMenuItems: headerMenuItems,
+    appHeaderHiddenMenuItems: headerHiddenMenuItems,
+    selectedMenu: 'Repo',
+  },
+};
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
+    const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
+    const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
+    const handleMenuClick = (item: string) => {
+      setSelectedMenuItem(item);
+    };
+    const handleSubMenuClick = (item: string) => {
+      setSelectedSubMenuItem(item);
+    };
+    const handleQuickMenuClick = (item: string) => {
+      setSelectedQuickMenuItem(item);
+    };
+
+    return (
+      <>
+        <div>
+          <AppHeader
+            logoIconName="fireflink_icon"
+            rightContent={headerRightSideContent}
+            appHeaderMenuItems={headerMenuItems}
+            appHeaderHiddenMenuItems={headerHiddenMenuItems}
+            projectsList={[]}
+            selectedMenu={selectedMenuItem}
+            selectedSubMenu={selectedSubMenuItem}
+            selectedQuickMenu={selectedQuickMenuItem}
+            onMenuClick={handleMenuClick}
+            onSubMenuClick={handleSubMenuClick}
+            onQuickMenuClick={handleQuickMenuClick}
+          />
+        </div>
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,124 @@
+import { AppHeaderProps } from './types';
+import Icon from '../Icon';
+import './AppHeader.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  logoIconName = 'fireflink_icon',
+  rightContent,
+  appHeaderMenuItems,
+  selectedMenu,
+  selectedSubMenu,
+  selectedQuickMenu,
+  onMenuClick = () => {},
+  onSubMenuClick = () => {},
+  onQuickMenuClick = () => {},
+}) => {
+  return (
+    <>
+      <div className="ff-app-header">
+        <div className="ff-app-header-logo-icon">
+          <Icon color="" name={logoIconName} height={24} width={21} />
+        </div>
+        <div className="ff-app-header-nav-bar">
+          <div>All projects</div>
+          <div className="ff-app-header-nav-bar-items fontSm">
+            {appHeaderMenuItems.map((menuItem) => {
+              return (
+                <div
+                  className={classNames('ff-app-header-nav-bar-item', {
+                    ['ff-app-header-nav-bar-item--selected']:
+                      menuItem.menuName === selectedMenu,
+                  })}
+                  key={menuItem.menuName}
+                  onClick={() => onMenuClick(menuItem.menuName)}
+                >
+                  <Typography
+                    as="div"
+                    className="ff-app-header-nav-bar-item-label"
+                    lineHeight="18px"
+                  >
+                    {menuItem.menuName}
+                  </Typography>
+                  {menuItem.menuName === selectedMenu &&
+                    menuItem?.subMenuItems &&
+                    menuItem.subMenuItems.map((subMenuItem) => {
+                      return (
+                        <div
+                          key={subMenuItem.subMenuName}
+                          onClick={() =>
+                            onSubMenuClick(subMenuItem.subMenuName)
+                          }
+                          className="ff-app-header-submenu-container"
+                        >
+                          <Typography
+                            as="div"
+                            className={classNames(
+                              'ff-app-header-nav-bar-submenu-item',
+                              {
+                                ['ff-app-header-nav-bar-submenu-item--selected']:
+                                  subMenuItem.subMenuName === selectedSubMenu,
+                              }
+                            )}
+                            lineHeight="18px"
+                          >
+                            {subMenuItem.subMenuName}
+                          </Typography>
+                          {subMenuItem.subMenuName === selectedSubMenu &&
+                            subMenuItem?.quickMenuItems && (
+                              <div className="ff-app-header-quickmenu-container">
+                                <div>
+                                  <Icon name="vertical_separator" />
+                                </div>
+                                {subMenuItem.quickMenuItems.map(
+                                  (quickMenuItem) => {
+                                    return (
+                                      <>
+                                        <div
+                                          key={quickMenuItem.quickMenuIconName}
+                                          onClick={() =>
+                                            onQuickMenuClick(
+                                              quickMenuItem.quickMenuName
+                                            )
+                                          }
+                                          className={classNames(
+                                            'ff-app-header-nav-bar-quickmenu-item',
+                                            {
+                                              ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                quickMenuItem.quickMenuName ===
+                                                selectedQuickMenu,
+                                            }
+                                          )}
+                                        >
+                                          <Icon
+                                            name={
+                                              quickMenuItem.quickMenuIconName
+                                            }
+                                            height={24}
+                                            width={24}
+                                          />
+                                        </div>
+                                      </>
+                                    );
+                                  }
+                                )}
+                              </div>
+                            )}
+                        </div>
+                      );
+                    })}
+                </div>
+              );
+            })}
+          </div>
+          <div>
+            <Icon name="more" className="ff-app-header-more-icon" />
+          </div>
+        </div>
+        <div className="ff-app-header-right-content">{rightContent}</div>
+      </div>
+    </>
+  );
+};
+export default AppHeader;

package/src/components/AppHeader/index.ts

@@ -0,0 +1 @@
+export { default } from "./AppHeader";

package/src/components/AppHeader/types.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+
+export interface AppHeaderProps {
+  logoIconName: string;
+  rightContent: ReactNode;
+  projectsList: string[];
+  appHeaderMenuItems: appHeaderMenuItemProps[];
+  appHeaderHiddenMenuItems: string[];
+  selectedMenu: string;
+  selectedSubMenu : string;
+  selectedQuickMenu : string;
+  onMenuClick ?:  (text: any) => void;
+  onSubMenuClick ?:  (text: any) => void;
+  onQuickMenuClick ?:  (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+  menuName: string;
+  subMenuItems: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+  subMenuName: string;
+  quickMenuItems: appHeaderQuickMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+  quickMenuName: string;
+  quickMenuIconName: string;
+}

package/src/components/GridLayout/GridLayout.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Container, Row, Col } from './GridLayout';
-import './GridLayoutStory.scss'
+import './GridLayoutStory.scss';
 
 const meta: Meta<typeof Container> = {
   title: 'Components/GridLayout',
@@ -27,31 +27,21 @@ export const Grid: ContainerStory = {
       <Container {...args}>
         <Row>
           <Col size={4}>
-            <div className='one'>
-              Column 1
-            </div>
+            <div className="one">Column 1</div>
           </Col>
           <Col size={4}>
-            <div className='two'>
-              Column 2
-            </div>
+            <div className="two">Column 2</div>
           </Col>
           <Col size={4}>
-            <div className='three'>
-              Column 3
-            </div>
+            <div className="three">Column 3</div>
           </Col>
         </Row>
         <Row>
           <Col size={6}>
-            <div className='four'>
-              Column 4
-            </div>
+            <div className="four">Column 4</div>
           </Col>
           <Col size={6}>
-            <div className='five'>
-              Column 5
-            </div>
+            <div className="five">Column 5</div>
           </Col>
         </Row>
       </Container>
@@ -67,57 +57,29 @@ export const Grid2: ContainerStory = {
       <Container {...args}>
         <Row gap="20px">
           <Col size={3}>
-            <div
-              className='one'
-            >
-              Column 1 (size 3)
-            </div>
+            <div className="one">Column 1 (size 3)</div>
           </Col>
           <Col size={6}>
-            <div
-              className='two'
-            >
-              Column 2 (size 6)
-            </div>
+            <div className="two">Column 2 (size 6)</div>
           </Col>
           <Col size={3}>
-            <div
-              className='three'
-            >
-              Column 3 (size 3)
-            </div>
+            <div className="three">Column 3 (size 3)</div>
           </Col>
         </Row>
         <Row gap="10px">
           <Col size={4}>
-            <div
-              className='four'
-            >
-              Column 4 (size 4)
-            </div>
+            <div className="four">Column 4 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='five'
-            >
-              Column 5 (size 4)
-            </div>
+            <div className="five">Column 5 (size 4)</div>
           </Col>
           <Col size={4}>
-            <div
-              className='one'
-            >
-              Column 6 (size 4)
-            </div>
+            <div className="one">Column 6 (size 4)</div>
           </Col>
         </Row>
         <Row gap="15px">
           <Col size={12}>
-            <div
-              className='two'
-            >
-              Full-width column (size 12)
-            </div>
+            <div className="two">Full-width column (size 12)</div>
           </Col>
         </Row>
       </Container>

package/src/components/GridLayout/GridLayout.tsx

@@ -2,29 +2,31 @@
 import React from 'react';
 import './GridLayout.scss';
 import { ContainerProps, RowProps, ColProps } from './types';
+import cx from 'classnames'
 
 export const Container: React.FC<ContainerProps> = ({
   children,
   fluid = false,
   gap = '0px',
+  className=''
 }) => {
-  const className = fluid ? 'ff-container-fluid' : 'ff-container';
+  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return (
-    <div className={className} style={{ gap }}>
+    <div className={cx(containerClassName,className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Row: React.FC<RowProps> = ({ children, gap = '0px' }) => {
+export const Row: React.FC<RowProps> = ({ children, gap = '0px',className='' }) => {
   return (
-    <div className="ff-row" style={{ gap }}>
+    <div className={cx("ff-row",className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Col: React.FC<ColProps> = ({ children, size = 12 }) => {
-  const className = `ff-col-${size}`;
-  return <div className={className}>{children}</div>;
+export const Col: React.FC<ColProps> = ({ children, size = 12,className='' }) => {
+  const colClassName = `ff-col-${size}`;
+  return <div className={cx(colClassName,className)}>{children}</div>;
 };