pixel-react 1.1.8 → 1.1.9

package/src/components/Icon/Icons.scss

@@ -10,9 +10,8 @@
   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';
 
@@ -94,8 +114,12 @@ 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 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 +162,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 +228,13 @@ 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;
 
 export default Components;

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/index.ts

@@ -46,6 +46,7 @@ import Paper from './components/Paper';
 import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
 import NLPInput from './components/NLPInput';
+import IconRadioGroup from './components/IconRadioGroup';
 import MachineInputField from './components/MachineInputField';
 import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 import AttachmentButton from './components/AttachmentButton';
@@ -119,6 +120,7 @@ export {
   MachineInputField,
   SequentialConnectingBranch,
   AttachmentButton,
+  IconRadioGroup,
 
   // utils exports
   checkEmpty,