pixel-react 1.0.8 → 1.1.0

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/Icon/iconList.ts

@@ -26,6 +26,7 @@ import MoonStarsIcon from '../../assets/icons/moon_stars.svg?react';
 import SunIcon from '../../assets/icons/sun_icon.svg?react';
 import CheckMarkIcon from '../../assets/icons/check_mark.svg?react';
 import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
+import FireflinkIcon from '../../assets/Icons/fireflink_icon.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
@@ -45,6 +46,7 @@ import ImpactListIcon from '../../assets/icons/impactList.svg?react';
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import VerticalSeparator from '../../assets/icons/vertical_separator.svg?react';
 import CollapseIcon from '../../assets/icons/collapse-icon.svg?react';
 import ExpandIcon from '../../assets/icons/expand-icon.svg?react';
 import CopyIcon from '../../assets/icons/copy-icon.svg?react';
@@ -52,6 +54,17 @@ import DownloadFile from '../../assets/icons/download-icon.svg?react';
 import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
 import LicenseInfo from '../../assets/icons/license_info.svg?react';
 import LicenseWarning from '../../assets/icons/license_warning.svg?react';
+import DownloadIcon from '../../assets/icons/download_icon.svg?react';
+import WebIcon from '../../assets/icons/web_icon.svg?react';
+import WebMobileIcon from '../../assets/icons/web&mobile_icon.svg?react';
+import MobileIcon from '../../assets/icons/mobile_icon.svg?react';
+import SalesForceIcon from '../../assets/icons/sales_force.svg?react';
+import MSDynamicIcon from '../../assets/icons/ms_dynamic.svg?react';
+import AllProjectsIcon from '../../assets/icons/all_projects.svg?react';
+import AndroidIcon from '../../assets/icons/android_icon.svg?react';
+
+import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
+import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
 //icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -78,6 +91,7 @@ Components['moon_stars_icon'] = MoonStarsIcon;
 Components['sun_icon'] = SunIcon;
 Components['check_mark'] = CheckMarkIcon;
 Components['wrong_mark'] = WrongMarkIcon;
+Components['fireflink_icon'] = FireflinkIcon;
 Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
@@ -97,6 +111,7 @@ Components['add_variable'] = AddVariable;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
+Components['vertical_separator'] = VerticalSeparator;
 Components['collapse_icon'] = CollapseIcon;
 Components['refresh_icon'] = RefreshIcon;
 Components['download_file'] = DownloadFile;
@@ -104,5 +119,16 @@ Components['copy_icon'] = CopyIcon;
 Components['expand_icon'] = ExpandIcon;
 Components['license_info'] = LicenseInfo;
 Components['license_warning'] = LicenseWarning;
+Components['download_icon'] = DownloadIcon;
+Components['web_icon'] = WebIcon;
+Components['web&mobile_icon'] = WebMobileIcon;
+Components['mobile_icon'] = MobileIcon;
+Components['sales_force'] = SalesForceIcon;
+Components['ms_dynamic'] = MSDynamicIcon;
+Components['all_projects'] = AllProjectsIcon;
+Components['android_icon'] = AndroidIcon;
+
+Components['select_license'] = SwitchLicenseIcon;
+Components['fireflink-logo'] = FireflinkLogo;
 
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -21,8 +21,8 @@
   }
   .icon-name {
     min-width: 33px;
-    min-height: 20px;
     color: var(--primary-icon-color);
+    @include mixins.center-content();
   }
   &:hover {
     border: 1px solid var(--secondary-icon-color);
@@ -32,6 +32,7 @@
       min-height: 20px;
       font-weight: 600;
       color: var(--secondary-icon-color);
+      @include mixins.center-content();
     }
     .ff-icon-color {
       path {

package/src/components/Input/types.ts

@@ -6,7 +6,7 @@ export interface InputProps {
   /**
    * Label | field label to be displayed
    */
-  label: string;
+  label?: string;
   /**
    * value | input field value
    */

package/src/components/InputWithDropdown/types.ts

@@ -14,7 +14,7 @@ export interface InputWithDropdownProps {
   /**
    * Label | field label to be displayed
    */
-  label: string;
+  label?: string;
 
   /**
    * value | input field value
@@ -26,8 +26,6 @@ export interface InputWithDropdownProps {
    */
   variant?: 'default' | 'primary';
 
-  
-
   /**
    * error | If true, error message will be displayed
    */

package/src/components/Modal/Modal.stories.tsx

@@ -22,8 +22,10 @@ export const DefaultModalStory: Story = {
     isHeaderDisplayed: true,
     headerContent: <h2>title</h2>,
     children: <h2>Hello</h2>,
-    isFooterDisplayed:true,
+    isFooterDisplayed: true,
     footerContent: <Button variant="primary" label="continue" />,
+    customWidth: '660px',
+    customHeight: 'auto',
   },
 };
 
@@ -52,7 +54,9 @@ export const Controlled: Story = {
             children={<div>Hello</div>}
             ariaHideApp={true}
             isFooterDisplayed={true}
-            footerContent={<Button variant="primary" label='continue'/>}
+            footerContent={<Button variant="primary" label="continue" />}
+            customWidth="660px"
+            customHeight="auto"
           />
         )}
       </>