pixel-react 1.1.7 → 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';
 
@@ -89,8 +109,17 @@ import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
 import UserProfile from '../../assets/icons/user_profile.svg?react';
 import ContinueSignIn from '../../assets/icons/continue_without_sign.svg?react';
 import CloudServerHost from '../../assets/icons/cloud_server_host_icon.svg?react';
+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 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;
@@ -133,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;
@@ -178,5 +224,17 @@ Components['app_switch'] = AppSwitchIcon;
 Components['user_profile'] = UserProfile;
 Components['continue_without_signin'] = ContinueSignIn;
 Components['cloud_server_host'] = CloudServerHost;
+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/components/Modal/modal.scss

@@ -15,7 +15,7 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px 12px 0 0;
+  border-radius: 12px;
   padding: 8px;
   
   .ff-modal-header {

package/src/components/MultiSelect/MultiSelect.scss

@@ -109,8 +109,8 @@
           }
         }
         .ff-multiselect-more-chip{
-          width: 1rem;
-          @extend .fontXs;
+          width: 1.2rem;
+          @extend .fontSm;
           font-weight: 600;
           line-height: 16px;
           color: var(--brand-color);

package/src/components/RadioButton/RadioButton.scss

@@ -12,87 +12,93 @@
   transition: $properties $duration;
 }
 
-.ff-radio {
-  @extend .fontSm;
-  position: relative;
-  color: var(--text-color);
+.ff-radio-wrapper {
   display: flex;
   align-items: center;
-  cursor: pointer;
-  .ff-radio-input {
-    display: none;
-  }
-  .ff-radio-custom {
-    box-sizing: content-box;
-    @include circle(14px, 1px solid var(--radio-button-border)); //todo
-    position: relative;
-    margin-right: 8px;
-    @include transition(border-color, background-color);
+  gap: 4px;
 
-    &::before {
-      content: '';
-      @include circle(12px);
-      background: #fbfdff; //todo
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      @include transition(background-color);
+  .ff-radio {
+    @extend .fontSm;
+    position: relative;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .ff-radio-input {
+      display: none;
     }
+    .ff-radio-custom {
+      box-sizing: content-box;
+      @include circle(14px, 1px solid var(--radio-button-border)); //todo
+      position: relative;
+      margin-right: 8px;
+      @include transition(border-color, background-color);
 
-    &::after {
-      content: '';
-      @include circle(16px, 4px solid #f7edff); //todo
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      opacity: 0;
-      @include transition(opacity);
-    }
-  }
+      &::before {
+        content: '';
+        @include circle(12px);
+        background: #fbfdff; //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        @include transition(background-color);
+      }
 
-  &:hover .ff-radio-custom {
-    border: 1px solid var(--brand-color);
-    &::before {
-      background-color: var(--drawer-footer-bg);
-    }
-    &::after {
-      opacity: 1;
-      @include transition(opacity);
+      &::after {
+        content: '';
+        @include circle(16px, 4px solid #f7edff); //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        @include transition(opacity);
+      }
     }
-  }
-  .ff-radio-input:checked + .ff-radio-custom {
-    border-color: var(--brand-color);
 
-    &::before {
-      background: var(--brand-color);
-      height: 12px;
-      width: 12px;
+    &:hover .ff-radio-custom {
+      border: 1px solid var(--brand-color);
+      &::before {
+        background-color: var(--drawer-footer-bg);
+      }
+      &::after {
+        opacity: 1;
+        @include transition(opacity);
+      }
     }
-  }
-  .ff-radio-input:disabled + .ff-radio-custom {
-    border: 1px solid var(--radio-button-border);
-    &::before {
-      background: var(--drawer-footer-bg);
+    .ff-radio-input:checked + .ff-radio-custom {
+      border-color: var(--brand-color);
+
+      &::before {
+        background: var(--brand-color);
+        height: 12px;
+        width: 12px;
+      }
     }
+    .ff-radio-input:disabled + .ff-radio-custom {
+      border: 1px solid var(--radio-button-border);
+      &::before {
+        background: var(--drawer-footer-bg);
+      }
 
-    &::after {
-      border: 4px solid var(--radio-button-hover);
-      opacity: 0;
-      @include transition(opacity);
+      &::after {
+        border: 4px solid var(--radio-button-hover);
+        opacity: 0;
+        @include transition(opacity);
+      }
     }
-  }
 
-  .ff-radio-input:checked:disabled + .ff-radio-custom {
-    border-color: var(--brand-color);
-    background-color: var(--drawer-footer-bg);
-    &::before {
-      background: var(--brand-color);
+    .ff-radio-input:checked:disabled + .ff-radio-custom {
+      border-color: var(--brand-color);
+      background-color: var(--drawer-footer-bg);
+      &::before {
+        background: var(--brand-color);
+      }
+    }
+    &--disabled {
+      cursor: default;
+      opacity: 0.5;
     }
-  }
-  &--disabled {
-    cursor: default;
-    opacity: 0.5;
   }
 }

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './RadioButton.scss';
 import classNames from 'classnames';
+import Tooltip from '../Tooltip';
 
 const RadioButton: React.FC<RadioButtonProps> = ({
   label,
@@ -9,23 +10,29 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   onChange,
   value,
   disabled = false,
+  showTooltip = false,
+  tooltipChildren = 'Custom JSX',
+  tooltipTitle = 'Custom JSX',
 }) => {
   return (
-    <label
-      className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
-    >
-      <input
-        disabled={disabled}
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={onChange}
-        className="ff-radio-input"
-      />
-      <span className="ff-radio-custom" />
-      {label}
-    </label>
+    <div className="ff-radio-wrapper">
+      <label
+        className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
+      >
+        <input
+          disabled={disabled}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          className="ff-radio-input"
+        />
+        <span className="ff-radio-custom" />
+        {label}
+      </label>
+      {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
+    </div>
   );
 };
 

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -37,4 +37,22 @@ interface RadioButtonProps {
    * Optional.
    */
   disabled?: boolean;
+
+  /**
+   * Indicates whether the radio button show the tooltip.
+   * Optional.
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipChildren?: React.ReactNode;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipTitle?: React.ReactNode;
 }