pixel-react 1.1.8 → 1.2.0

package/src/components/Icon/Icon.stories.tsx

@@ -6,6 +6,12 @@ const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+    },
+  },
 };
 
 type Story = StoryObj<typeof Icon>;
@@ -34,4 +40,25 @@ export const AllIcons: Story = {
   },
 };
 
+export const DarkVariantIcons: Story = {
+  args: {
+    name: 'hamburger_menu',
+    color: 'var(--ff-icon-color-dark-variant)',
+    variant: 'dark',
+    hoverEffect: true, 
+  },
+  render: (args) => {
+    const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
+    const iconColor = args.variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : 'var(--brand-color)';
+
+    return (
+      <div style={{ backgroundColor, padding: '20px' }}>
+        <Icon {...args} color={iconColor} height={16} width={16} />
+      </div>
+    );
+  },
+};
+
+
+
 export default meta;

package/src/components/Icon/Icon.tsx

@@ -15,6 +15,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       hoverEffect = false,
       className = '',
       disabled = false,
+      variant = "light",
       ...props
     },
     ref
@@ -28,6 +29,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       return null;
     }
 
+    const iconColor = variant === "dark" ? 'var(--ff-icon-color-dark-variant)'  : color;
+
     return (
       <span
         ref={ref}
@@ -36,11 +39,12 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
         className={classNames('ff-icon-container', {
           'ff-icon-click': !!hoverEffect,
           'ff-icon-disabled': disabled,
+          'ff-icon-dark': variant === "dark",
           [className]: !!className,
         })}
         {...props}
       >
-        <IconComponent height="100%" width="100%" style={{ color: color }} />
+        <IconComponent height="100%" width="100%" style={{ color: iconColor }} />
       </span>
     );
   }

package/src/components/Icon/Icons.scss

@@ -1,18 +1,28 @@
-
 .ff-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 4px;
+  &.ff-icon-dark {
+    background-color: var(--brand-color);
+    &.ff-icon-click {
+      &:hover {
+        border-radius: 4px;
+        background-color: white;
+        svg path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
 }
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 4px;
   box-sizing: content-box;
   &:hover {
-    border-radius: 50%;
-    background-color: var(--drawer-footer-bg);
-    box-shadow: 0px 0px 16px var(--toggle-strip-shadow);
+    border-radius: 4px;
+    background-color: var(--ff-icon-hover-fill-color);
     & > svg {
       color: var(--brand-color);
     }

package/src/components/Icon/iconList.ts

@@ -43,6 +43,23 @@ import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
 import ImpactListIcon from '../../assets/icons/impactList.svg?react';
+import FormatePainter from '../../assets/icons/formate_painter.svg?react';
+import Bold from '../../assets/icons/bold.svg?react';
+import Italic from '../../assets/icons/italic.svg?react';
+import StrikeThrough from '../../assets/icons/strike_through.svg?react';
+import Underline from '../../assets/icons/underline.svg?react';
+import DoubleUnderline from '../../assets/icons/double_underline.svg?react';
+import AllBorders from '../../assets/icons/all_borders.svg?react';
+import BorderBottom from '../../assets/icons/border_bottom.svg?react';
+import BorderLeft from '../../assets/icons/border_left.svg?react';
+import BorderRight from '../../assets/icons/border_right.svg?react';
+import BorderTop from '../../assets/icons/border_top.svg?react';
+import NoBorder from '../../assets/icons/no_border.svg?react';
+import TextAlignCenter from '../../assets/icons/text_align_center.svg?react';
+import TextAlignLeft from '../../assets/icons/text_align_left.svg?react';
+import TextAlignRight from '../../assets/icons/text_align_right.svg?react';
+import TextColor from '../../assets/icons/text_color.svg?react';
+import FillColor from '../../assets/icons/fill_color.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';
@@ -70,6 +87,9 @@ 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 NoAccessIcon from '../../assets/icons/no_access_icon.svg?react';
+import FullAccessIcon from '../../assets/icons/full_access_icon.svg?react';
+import ViewAccessIcon from '../../assets/icons/view_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
@@ -93,9 +113,14 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 
+import CloneIcon from '../../assets/icons/clone_icon.svg?react';
+import MoveIcon from '../../assets/icons/move_icon.svg?react';
+import Jira from '../../assets/icons/jira.svg?react';
+import HistoryIcon from '../../assets//icons/history_icon.svg?react';
+import LinkedDefects from '../../assets//icons/linked_defects.svg?react';
 
-//icons
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
 Components['warning'] = WarningIcon;
@@ -138,6 +163,23 @@ Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['add_variable'] = AddVariable;
+Components['formate_painter'] = FormatePainter;
+Components['bold'] = Bold;
+Components['italic'] = Italic;
+Components['strike_through'] = StrikeThrough;
+Components['underline'] = Underline;
+Components['double_underline'] = DoubleUnderline;
+Components['border_left'] = BorderLeft;
+Components['border_right'] = BorderRight;
+Components['border_bottom'] = BorderBottom;
+Components['border_top'] = BorderTop;
+Components['all_borders'] = AllBorders;
+Components['no_border'] = NoBorder;
+Components['text_align_center'] = TextAlignCenter;
+Components['text_align_left'] = TextAlignLeft;
+Components['text_align_right'] = TextAlignRight;
+Components['text_color'] = TextColor;
+Components['fill_color'] = FillColor;
 Components['info'] = InfoIcon;
 Components['calendar_icon'] = CalendarIcon;
 Components['hide_icon'] = HideIcon;
@@ -187,5 +229,14 @@ Components['notification_icon'] = NotificationIcon;
 Components['nlp_help_icon'] = NLPHelpIcon;
 Components['update_icon'] = UpdateIcon;
 Components['add_file'] = AddFile;
+Components['clone_icon'] = CloneIcon;
+Components['move_icon'] = MoveIcon;
+Components['jira'] = Jira;
+Components['history'] = HistoryIcon;
+Components['linked_defects'] = LinkedDefects;
+Components['no_access_icon'] = NoAccessIcon;
+Components['full_access_icon'] = FullAccessIcon;
+Components['view_access_icon'] = ViewAccessIcon;
+Components['eye_closed'] = EyeClosed;
 
 export default Components;

package/src/components/Icon/types.ts

@@ -7,4 +7,5 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
+  variant?: "dark" | "light";
 }

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -0,0 +1,60 @@
+.ff-icon-radio-group {
+  width: 237px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 47px;
+  position: relative;
+}
+
+.ff-icon-radio-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+
+  &.selected {
+    background-color: var(--brand-color);
+  }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .icon-container {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    background: var(--drawer-footer-bg);
+
+    &.selected {
+      background-color: var(--brand-color);
+    }
+
+    .icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.line-connector {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--border-color);
+  z-index: -1;
+  border-radius: 2px 0px 0px 0px;
+  opacity: 0px;
+}

package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx

@@ -0,0 +1,108 @@
+import { Meta, StoryObj } from '@storybook/react';
+import IconRadioGroup from './IconRadioGroup';
+import { useState } from 'react';
+
+const meta: Meta<typeof IconRadioGroup> = {
+  title: 'Components/IconRadioGroup',
+  component: IconRadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconRadioGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={(selectedItem) => console.log('Selected:', selectedItem)}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithDisabledOption: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: true,
+        disableMessage: 'user dont have access',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={() => {}}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import './IconRadioGroup.scss';
+import Icon from '../Icon/Icon';
+import { IconRadioItem, IconRadioGroupProps } from './type';
+
+const IconRadioGroup: React.FC<IconRadioGroupProps> = ({
+  items,
+  onButtonClick,
+  selectedValue: initialSelectedValue = null,
+  onChange,
+  className = '',
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string | null>(
+    initialSelectedValue
+  );
+
+  useEffect(() => {
+    if (initialSelectedValue !== selectedValue) {
+      setSelectedValue(initialSelectedValue);
+    }
+  }, [initialSelectedValue, selectedValue]);
+
+  const handleButtonClick = (item: IconRadioItem) => {
+    if (item.disabled) return;
+
+    const newSelectedValue = item.iconName;
+    setSelectedValue(newSelectedValue);
+
+    if (onChange) {
+      onChange(newSelectedValue);
+    }
+
+    onButtonClick(item);
+  };
+
+  return (
+    <div className={classNames('ff-icon-radio-group', className)}>
+      {items.map((item) => (
+        <div
+          key={item.iconName}
+          className={classNames('ff-icon-radio-button', {
+            selected: selectedValue === item.iconName,
+            disabled: item.disabled,
+          })}
+          onClick={() => handleButtonClick(item)}
+        >
+          <div
+            className={classNames('icon-container', {
+              selected: selectedValue === item.iconName,
+            })}
+          >
+            <Icon
+              name={item.iconName}
+              height={14}
+              width={14}
+              hoverEffect={false}
+              color={
+                selectedValue === item.iconName
+                  ? 'var(--drawer-footer-bg)'
+                  : 'var(--brand-color)'
+              }
+            />
+          </div>
+        </div>
+      ))}
+      <div className="line-connector"></div>
+    </div>
+  );
+};
+
+export default IconRadioGroup;

package/src/components/IconRadioGroup/index.ts

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

package/src/components/IconRadioGroup/type.ts

@@ -0,0 +1,50 @@
+export interface IconRadioItem {
+    /**
+     * The unique name for the icon, used to load the corresponding icon.
+     */
+    iconName: string;
+  
+    /**
+     * The display label for the icon. This can be used for accessibility purposes.
+     */
+    iconLabel: string;
+  
+    /**
+     * Flag to determine if the icon option is disabled.
+     */
+    disabled?: boolean;
+  
+    /**
+     * Message to display when the option is disabled.
+     */
+    disableMessage?: string;
+  }
+  
+  export interface IconRadioGroupProps {
+    /**
+     * Array of icon items that make up the radio button group.
+     */
+    items: IconRadioItem[];
+  
+    /**
+     * Callback function called when a button/icon is clicked. 
+     * It returns the selected item.
+     */
+    onButtonClick: (selectedItem: IconRadioItem) => void;
+  
+    /**
+     * The currently selected icon value
+     */
+    selectedValue?: string | null;
+  
+    /**
+     * Callback function to notify parent of selection change.
+     */
+    onChange?: (selected: string | null) => void;
+  
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+  }
+  

package/src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -54,7 +55,13 @@ const Modal: React.FC<ModalProps> = ({
       onClick={shouldCloseOnOverlayClick ? onClose : undefined}
     >
       <div
-        className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        className={classNames(
+          `ff-modal-content ${currentTheme} ${contentClassName}`,
+          {
+            'modal-bottom-border': !isFooterDisplayed,
+            'modal-top-border': !isHeaderDisplayed,
+          }
+        )}
         style={{ width: customWidth, height: customHeight }}
         onClick={(e) => e.stopPropagation()}
         aria-label={contentLabel}

package/src/components/Modal/modal.scss

@@ -15,7 +15,6 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px;
   padding: 8px;
   
   .ff-modal-header {
@@ -24,6 +23,15 @@
   }
 }
 
+.modal-bottom-border {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+.modal-top-border {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
 .ff-modal-footer {
   background-color: var(--expandable-menu-option-bg);
   max-width: 100%;
@@ -35,5 +43,5 @@
   justify-content: end;
   align-items: center;
   gap: 8px;
-  padding: 4px 16px;
+  padding: 4px 8px;
 }

package/src/components/Table/Table.scss

@@ -3,7 +3,14 @@
 .ff-fixed-header-table {
   overflow-y: auto;
 }
-
+.ff-table-icon {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  margin-right: 10px;
+  z-index: 100;
+  cursor: pointer;
+}
 .ff-table {
   width: 100%;
   th,
@@ -16,7 +23,6 @@
     tr {
       th {
         @extend .fontMd;
-        color: var(--text-color);
         border-bottom: 1px solid var(--slider-table-color);
         text-transform: uppercase;
       }
@@ -54,7 +60,7 @@
       }
       td {
         position: relative;
-        color: var(--text-color);
+        color: var(--table-column-text-color);
         @extend .fontSm;
 
         &.clickable-cell {
@@ -81,6 +87,12 @@
   .default-bg {
     background-color: transparent;
   }
+  .default-color {
+    color: var(--table-header-text-color);
+  }
+  .primary-color {
+    color: var(--brand-color);
+  }
 }
 .border-borderRadius {
   border: 1px solid var(--slider-table-color);
@@ -104,4 +116,4 @@
 tbody tr.disabled-row {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}