pixel-react 1.0.0

package/src/assets/styles/_colors.scss

@@ -0,0 +1,145 @@
+$brand-color: #71347b;
+$text-color: #1e161f;
+$icons-default-color: #71347b;
+$default-icon-color: #a3a3a3;
+$border-color: #f0e7f4;
+$disable-color: #71347b80;
+$hover-color: #f7ebff;
+$pop-up-background-blur: #14041c;
+$drawer-footer-bg: #ffffff;
+$slider-table-color: #efe1f9;
+$tooltip-bg-color: #1e161f;
+$tooltip-text-color: #ffffff;
+$toggle-strip-color: #cfd1e2;
+$toggle-cross-color: #aeb0c0;
+$toggle-strip-shadow: #00000040; // TODO : Color Name is Not Provided By Designers
+$toggle-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
+$toggle-disable-icon-color: #767994; // TODO : Color Name is Not Provided By Designers
+$arrow-button-bg-color: #ffffff; // TODO : Color Name is Not Provided By Designers
+$shadow-strip-enable-shadow: #141a60;
+$text-bg-highlight: #f5fb00;
+$toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);
+$drawer-footer-border: #f0e7f4;
+$primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);
+$table-header-color: #f0e7f4;
+$table-lines-color: #d7b5e3;
+$primary-button-color: linear-gradient(
+  188.79deg,
+  #71347b 2.94%,
+  #46164d 93.09%
+);
+
+$primary-button-hover: linear-gradient(
+  179.06deg,
+  #8d3b9a 3.49%,
+  #781f86 99.22%
+);
+
+$primary-button-disable: linear-gradient(180deg, #46164d 0%, $brand-color 100%);
+$primary-button-text-color: #ffffff;
+$secondary-button-color-text: linear-gradient(
+  179.06deg,
+  #71347b 3.49%,
+  #46164d 99.22%
+);
+$secondary-button-text-color: #46164d;
+$secondary-button-hover: linear-gradient(
+  179.06deg,
+  #71347b0d 3.49%,
+  #46164d0d 99.22%
+);
+$tertiary-button-color: linear-gradient(
+  179.06deg,
+  #71347b0d 3.49%,
+  #46164d0d 99.22%
+);
+$tertiary-button-hover: linear-gradient(
+  179.06deg,
+  #71347b1a 3.49%,
+  #46164d1a 99.22%
+);
+$delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);
+$delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);
+$delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);
+$secondary-button-color: linear-gradient(180deg, #46164d 0%, #71347b 100%);
+$secondary-icon-color: #71347b;
+
+///!-----------------------------------------------------------------------------------------------------
+
+$drawer-title-color: #252c37;
+$button-bg-color: #f6ebff;
+$description-text: #d9d9d9;
+$error_light: #e42525;
+$text-area-border-hover: #1e161f;
+$text-area-border-color: #a3a3a3;
+$default-color: #747474;
+
+///!-----------------------------------------------------------------------------------------------------
+
+$description-text: #d9d9d9;
+$ff-success: #079455;
+$ff-warning: #f79009;
+$ff-error-light: #e42525;
+$ff-chips-fill-color: #f9d5ff;
+$ff-chips-blur-color: #575757;
+$hovered-add-button-color: #fce9ff; // TODO: Change the color variable name
+$arrows-button-border-color: #ded1e5; // TODO: Change the color variable name
+$add-icon-hover-color: #431b4a; ////TODO: color need to be add into style guide
+
+$add-icon-hover-color: #431b4a; //TODO : Color Name is Not Provided By Designers
+$default-icon-color: #a3a3a3;
+$expandable-menu-default-bg: #fdfaff;
+$expandable-menu-option-bg: #610b861a;
+$file-dropzone-default-color: #71347b1a;
+$file-dropzone-selected-color: #71347b33;
+$file-details-container-shadow: #1e161f29;
+$file-details-bg: #ffffff;
+
+:root {
+  --tooltip-bg-color: #{$tooltip-bg-color};
+  --status-approved-text-color: #016102;
+  --status-warning-text-color: #ff8b00;
+  --status-rejected-text-color: #c60202;
+  --status-skipped-text-color: #3c3838;
+  --status-approved-bg-color: #c6efcd;
+  --status-rejected-bg-color: #f7d9d9;
+  --status-warning-bg-color: #fae2c6; // TODO: Change the color variable name
+  --status-skipped-bg-color: #c4c3c3; // TODO: Change the color variable name
+  --brand-color: #{$brand-color};
+  --icons-default-color: #{$icons-default-color};
+  --default-icon-color: #{$default-icon-color};
+  --default-color: #747474; // todo color need to be add into style guide
+  --primary-icon-color: #ffffff;
+  --secondary-icon-color: #71347b;
+  --system-color--error: #c50303;
+  --hover-color: #{$hover-color};
+  --brand2-color: #610b86; // Todo:Change the color variable name
+  --status-warning-hover-bg-color: #fcd8ac; // Todo:Change the color variable name
+  --status-percentage-growth-bg-color: #ecedf8; // Todo:Change the color variable name
+  --primary-icon-color: #ffffff;
+  --secondary-icon-color: #71347b;
+  --expandable-menu-default-bg: #{$expandable-menu-default-bg}; // TODO: Change the color variable name
+  --expandable-menu-option-bg: #{$expandable-menu-option-bg}; // TODO: Change the color variable name
+  --text-color: #{$text-color};
+  --file-dropzone-default-color: #{$file-dropzone-default-color};
+  --file-dropzone-selected-color: #{$file-dropzone-selected-color};
+  --file-details-container-shadow: #{$file-details-container-shadow}; // TODO: Change the color variable name
+  --file-details-bg: #{$file-details-bg}; // TODO: Change the color variable name
+  --error-light: #{$error_light};
+
+  --tabs-label-default-color: #{tabs-label-default-color};
+  --tabs-label-active-color: #{tabs-label-active-color};
+  --tabs-border-color: #{tabs-border-color};
+  --tabs-bg-color: #{tabs-bg-color};
+  --tab-bg-color: #{tab-bg-color};
+  --toggle-button-bg-color: #{$toggle-button-bg-color}; // TODO: Change the color variable name
+  --toggle-strip-shadow: #{$toggle-strip-shadow}; // TODO: Change the color variable name
+  --toggle-strip-color: #{$toggle-strip-color}; // TODO: Change the color variable name
+  --disable-color: #{$disable-color};
+  --toggle-strip-color: #{$toggle-strip-color};
+  --add-icon-hover-color: #{$add-icon-hover-color}; // TODO: Change the color variable name
+  --arrows-button-border-color: #{$arrows-button-border-color}; // TODO: Change the color variable name
+  --arrow-button-bg-color: #{$arrow-button-bg-color}; // TODO: Change the color variable name
+  --text-bg-highlight: #{$text-bg-highlight};
+  --slider-table-color: #{$slider-table-color};
+}

package/src/assets/styles/_fonts.scss

@@ -0,0 +1,68 @@
+@mixin fontPoppins($size: 16px) {
+  font-family: 'Poppins', sans-serif;
+  font-size: $size;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 400;
+  src: local('Poppins-Regular'),
+    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 500;
+  src: local('Poppins-Medium'),
+    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 600;
+  src: local('Poppins-SemiBold'),
+    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-weight: 700;
+  src: local('Poppins-Bold'),
+    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
+}
+
+.fontXs {
+  @include fontPoppins(10px);
+}
+
+.fontSm {
+  @include fontPoppins(12px);
+}
+
+.fontMd {
+  @include fontPoppins(14px);
+}
+
+.fontLg {
+  @include fontPoppins(16px);
+}
+
+.fontXL {
+  @include fontPoppins(18px);
+}
+
+.font2Xl {
+  @include fontPoppins(24px);
+}
+
+.font-size-8 {
+  @include fontPoppins(8px);
+}
+
+.font-size-32 {
+  @include fontPoppins(32px);
+}
+
+.font-size-80 {
+  @include fontPoppins(80px);
+}

package/src/assets/styles/_mixins.scss

@@ -0,0 +1,20 @@
+// Mixin for centering content
+@mixin center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Mixin for transition effects
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+//Mixin for height, width and border
+@mixin box($size, $border: none) {
+  width: $size;
+  height: $size;
+  @if $border != none {
+    border: $border;
+  }
+}

package/src/assets/utils/functionUtils.ts

@@ -0,0 +1,5 @@
+export const isFunction = (functionToCheck: any) => {
+  return (
+    functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
+  );
+};

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,45 @@
+@import '../../assets/styles/colors';
+@import '../../assets/styles/fonts';
+
+.ff-accordion {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  min-width: fit-content;
+  .accordion-header {
+    display: flex;
+    justify-content: space-between;
+    min-height: 32px;
+    .header-title {
+      padding: 8px;
+    }
+
+    .accordion-arrow {
+      display: flex;
+      padding: 8px;
+      align-items: center;
+      transition: transform 0.3s ease;
+      &.expanded {
+        transform: rotate(180deg);
+      }
+      &:hover {
+        color: var(--tooltip-bg-color);
+      }
+    }
+
+    &.expanded {
+      background-color: var(
+        --hover-color
+      ); //todo need to replace this color once it is available in the design system
+      border-bottom: 1px solid var(--hover-color);
+    }
+  }
+  .accordion-header:hover {
+    background-color: var(
+      --hover-color
+    ); //todo need to replace this color once it is available in the design system
+  }
+
+  .accordion-content {
+    padding: 4px;
+  }
+}

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+import Icon from '../Icon';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Accordion>;
+const defaultArgs = {
+  headerTitle: 'Accordion',
+};
+
+export const SampleAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    headerTitle: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <Icon name="accordion_header_icon" />
+        <span>Home and Web</span>
+      </div>
+    ),
+  },
+};
+
+export default meta;

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import './Accordion.scss';
+import Icon from '../Icon';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+
+/**
+ * Accordion UI component
+ */
+const Accordion = ({
+  headerTitle = '',
+  color,
+  minHeight = '32px', // Default min-height for accordion content
+  accordionContent = <>This is accordion content</>,
+  disable = false,
+  disableInfoMessage = '',
+}: AccordionProps) => {
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
+
+  const onAccordionClick = () => {
+    setIsAccordionExpanded(!isAccordionExpanded);
+  };
+  return (
+    <div className="ff-accordion">
+      <Tooltip title={disableInfoMessage}>
+        <div
+          className={`accordion-header ${disable && 'ff-disabled'} ${
+            isAccordionExpanded && 'expanded'
+          }`}
+          style={{ color: color || '--tooltip-bg-color' }}
+        >
+          <Typography
+            as="div"
+            className="header-title"
+            fontWeight="semi-bold"
+            lineHeight="18px"
+          >
+            {headerTitle}
+          </Typography>
+
+          <Icon
+            name={'arrow_up'}
+            hoverEffect={false}
+            className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
+            onClick={() => {
+              !disable && onAccordionClick();
+            }}
+          />
+        </div>
+      </Tooltip>
+      {!disable && isAccordionExpanded && (
+        <div style={{ minHeight }} className="accordion-content">
+          {accordionContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/types.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+export interface AccordionProps {
+  /**
+   * Accordion Header Title
+   */
+  headerTitle: string | JSX.Element;
+  /**
+   * Content that to be shown while Accordion is expanded
+   */
+  accordionContent: ReactNode;
+  /**
+   * Custom color for the Accordion header
+   */
+  color?: string;
+  /**
+   * Minimum height for the Accordion
+   */
+  minHeight?: string;
+  /**
+   * Property to disable accordion
+   */
+  disable?: boolean;
+  /**
+   * Info message to user for disabling accordion
+   */
+  disableInfoMessage?: string;
+}

package/src/components/AddResourceButton/AddButton.scss

@@ -0,0 +1,36 @@
+.ff-add-button-container {
+  position: relative;
+  border: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: transparent;
+  &.ff-hovered-add-button--primary {
+    background-color: var(--hover-color);
+  }
+  .ff-hovered-add-icon--primary {
+    svg {
+      path {
+        fill: var(--add-icon-hover-color);
+      }
+    }
+  }
+  .ff-add-icon--primary {
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+  }
+  .ff-add-button {
+    position: absolute;
+    border: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: none;
+  }
+}

package/src/components/AddResourceButton/AddButton.stories.tsx

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+import { AddResourceButtonProps } from './type';
+
+const meta: Meta<typeof AddButton> = {
+  title: 'Components/AddResourceButton',
+  component: AddButton,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof AddButton>;
+
+export const Default: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'plus',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const TwoArrowsButtons: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const ThreeArrowsButton: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Automation Script',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Manual Test Case',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Pre / Post Condition',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Authorization',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'down',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export default meta;

package/src/components/AddResourceButton/AddButton.tsx

@@ -0,0 +1,121 @@
+import './AddButton.scss';
+import ArrowsButton from './ArrowsButton/ArrowsButton';
+import Icon from '../Icon';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  AddResourceButtonProps,
+  DirectionalArrow,
+  validateArrows,
+} from './type';
+import usePortalPosition from '../../hooks/usePortalPosition';
+
+const AddButton = ({
+  id = 'AddModule',
+  variant = 'primary',
+  directionalArrow = [
+    {
+      direction: 'right',
+      menuOptions: [
+        { label: 'Sub Module', value: 'sub_module', icon: '', disable: false },
+      ],
+    },
+  ],
+  zIndex = 99,
+}: AddResourceButtonProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const [positionArrowContainer, setPositionArrowContainer] = useState<{
+    left: number;
+    top: number;
+  }>({ left: 0, top: 0 });
+  const [activeArrow, setActiveArrow] = useState<string>('');
+  const arrowContainerRef = useRef<HTMLDivElement>(null);
+  const validArrows = validateArrows(directionalArrow);
+  const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
+
+  const handleHover = () => {
+    if (!activeArrow) {
+      setIsHovered(true);
+    }
+    const { positionX, positionY } = portalPosition(arrowContainerRef);
+    setPositionArrowContainer({ left: positionX, top: positionY });
+  };
+
+  const handleLeave = () => {
+    setIsHovered(false);
+    setActiveArrow('');
+  };
+
+  const handleArrowClick = (direction: string) => {
+    if (activeArrow === direction) {
+      setActiveArrow('');
+      setIsHovered(false);
+    } else {
+      setActiveArrow(direction);
+      setIsHovered(true);
+    }
+  };
+
+  const getArrowButtonClass = () => {
+    const directions = validArrows
+      .map((arrow: { direction: string }) => arrow.direction)
+      .sort()
+      .join('-');
+    return `ff-${directions}`;
+  };
+
+  return (
+    <div
+      className={`ff-add-button-container ${
+        isHovered ? `ff-hovered-add-button--${variant}` : ''
+      }`}
+      id={id}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleLeave}
+      ref={arrowContainerRef}
+    >
+      <span className="ff-add-button">
+        <Icon
+          name="plus_icon"
+          width={16}
+          height={16}
+          className={
+            isHovered
+              ? `ff-hovered-add-icon--${variant}`
+              : `ff-add-icon--${variant}`
+          }
+        />
+      </span>
+
+      {isHovered &&
+        createPortal(
+          <div
+            className={`ff-arrow-buttons-container ${getArrowButtonClass()}`}
+            onMouseEnter={handleHover}
+            onMouseLeave={handleLeave}
+            style={{
+              left: positionArrowContainer.left,
+              top: positionArrowContainer.top,
+              zIndex: zIndex,
+            }}
+          >
+            {directionalArrow.map(
+              ({ direction, menuOptions }: DirectionalArrow, index: number) => (
+                <ArrowsButton
+                  key={index}
+                  direction={direction}
+                  onArrowClick={() => handleArrowClick(direction)}
+                  menuOptions={menuOptions}
+                  isActive={activeArrow === direction}
+                  variant={variant}
+                />
+              )
+            )}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default AddButton;