pixel-react 1.6.5 → 1.6.6

package/src/components/IconRadioGroup/IconRadioGroup.tsx

@@ -1,73 +1,73 @@
-import React, { useState, useEffect } from 'react';
-import classNames from 'classnames';
-import './IconRadioGroup.scss';
-import Icon from '../Icon/Icon';
-import { IconRadioItem, IconRadioGroupProps } from './type';
-import Tooltip from '../Tooltip';
-
-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)}
-        >
-          <Tooltip title={item.iconLabel}>
-            <div
-              className={classNames('icon-container', {
-                selected: selectedValue === item.iconName,
-              })}
-            >
-              <Icon
-                name={item.iconName}
-                hoverEffect={false}
-                color={
-                  selectedValue === item.iconName
-                    ? 'var(--drawer-footer-bg)'
-                    : 'var(--brand-color)'
-                }
-              />
-            </div>
-          </Tooltip>
-        </div>
-      ))}
-      <div className="line-connector"></div>
-    </div>
-  );
-};
-
-export default IconRadioGroup;
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import './IconRadioGroup.scss';
+import Icon from '../Icon/Icon';
+import { IconRadioItem, IconRadioGroupProps } from './type';
+import Tooltip from '../Tooltip';
+
+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)}
+        >
+          <Tooltip title={item.iconLabel}>
+            <div
+              className={classNames('icon-container', {
+                selected: selectedValue === item.iconName,
+              })}
+            >
+              <Icon
+                name={item.iconName}
+                hoverEffect={false}
+                color={
+                  selectedValue === item.iconName
+                    ? 'var(--drawer-footer-bg)'
+                    : 'var(--brand-color)'
+                }
+              />
+            </div>
+          </Tooltip>
+        </div>
+      ))}
+      <div className="line-connector"></div>
+    </div>
+  );
+};
+
+export default IconRadioGroup;

package/src/components/IconRadioGroup/index.ts

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

package/src/components/IconRadioGroup/type.ts

@@ -1,50 +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;
-  }
+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/Input/Input.scss

@@ -1,159 +1,159 @@
-@use '../../assets/styles/fonts';
-
-.ff-input-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  .ff-input {
-    padding: 6px 8px;
-    border: 1px solid var(--input-default-border-color);
-    border-radius: 4px;
-    outline: none;
-    line-height: 18px;
-    @extend .fontSm;
-    &--medium {
-      padding: 10px 9px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-    &::placeholder {
-      opacity: 0;
-      @extend .fontXs;
-      line-height: 15px;
-    }
-    &--disabled {
-      background: transparent;
-      border-color: var(--input-default-border-color);
-    }
-    &--danger {
-      border-color: var(--input-error-text-color);
-    }
-    &--transparentBackground {
-      background: transparent;
-    }
-    &--no-border {
-      border: none;
-    }
-    &--placeholder {
-      &::placeholder {
-        opacity: 1;
-      }
-    }
-  }
-
-  .ff-input-label-container {
-    @extend .ff-input;
-    display: flex;
-    gap: 2px;
-    position: absolute;
-    border: none;
-    outline: none;
-    line-height: 18px;
-    margin-top: 1px;
-    transition: all 0.3s ease-in-out;
-    &--medium {
-      line-height: 25px;
-    }
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-        background-color: var(--input-label-bg-color);
-      }
-    }
-
-    .required-asterisk {
-      color: var(--input-error-text-color);
-    }
-  }
-  &:hover {
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--no-hover {
-        color: var(--input-default-label-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-      }
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-    }
-    .ff-input {
-      border-color: var(--brand-color);
-      &--no-hover {
-        border-color: var(--input-default-border-color);
-      }
-      &--disabled {
-        background: transparent;
-        border-color: var(--input-default-border-color);
-      }
-      &--danger {
-        border-color: var(--input-error-text-color);
-      }
-    }
-  }
-  &:focus-within {
-    .ff-input-label-container {
-      top: -9px;
-      @extend .fontXs;
-      background-color: var(--input-label-bg-color);
-      line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
-    }
-    .ff-input-label {
-      &--primary {
-        color: var(--brand-color);
-      }
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-    }
-    .ff-input {
-      border-color: var(--brand-color);
-
-      &--danger {
-        border-color: var(--input-error-text-color);
-      }
-
-      &::placeholder {
-        opacity: 1;
-        margin-bottom: 1px;
-      }
-    }
-  }
-
-  .ff-input-message {
-    @extend .fontXs;
-    padding: 0px 4px;
-    margin-left: 8px;
-    line-height: 15px;
-    &--danger {
-      color: var(--input-error-text-color);
-    }
-  }
-
-  &--float {
-    .ff-input-label-container {
-      //re-written label container code to place it at on border
-      top: -9px;
-      font-size: 10px;
-      background-color: var(--input-label-bg-color);
-      line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
-    }
-    &--disabled {
-      cursor: not-allowed;
-      .ff-input-label-container {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-input-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .ff-input {
+    padding: 6px 8px;
+    border: 1px solid var(--input-default-border-color);
+    border-radius: 4px;
+    outline: none;
+    line-height: 18px;
+    @extend .fontSm;
+    &--medium {
+      padding: 10px 9px;
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+    &::placeholder {
+      opacity: 0;
+      @extend .fontXs;
+      line-height: 15px;
+    }
+    &--disabled {
+      background: transparent;
+      border-color: var(--input-default-border-color);
+    }
+    &--danger {
+      border-color: var(--input-error-text-color);
+    }
+    &--transparentBackground {
+      background: transparent;
+    }
+    &--no-border {
+      border: none;
+    }
+    &--placeholder {
+      &::placeholder {
+        opacity: 1;
+      }
+    }
+  }
+
+  .ff-input-label-container {
+    @extend .ff-input;
+    display: flex;
+    gap: 2px;
+    position: absolute;
+    border: none;
+    outline: none;
+    line-height: 18px;
+    margin-top: 1px;
+    transition: all 0.3s ease-in-out;
+    &--medium {
+      line-height: 25px;
+    }
+    .ff-input-label {
+      color: var(--input-default-label-color);
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+      &--disabled {
+        color: var(--input-default-border-color);
+        background-color: var(--input-label-bg-color);
+      }
+    }
+
+    .required-asterisk {
+      color: var(--input-error-text-color);
+    }
+  }
+  &:hover {
+    .ff-input-label {
+      color: var(--input-default-label-color);
+      &--no-hover {
+        color: var(--input-default-label-color);
+      }
+      &--disabled {
+        color: var(--input-default-border-color);
+      }
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+    }
+    .ff-input {
+      border-color: var(--brand-color);
+      &--no-hover {
+        border-color: var(--input-default-border-color);
+      }
+      &--disabled {
+        background: transparent;
+        border-color: var(--input-default-border-color);
+      }
+      &--danger {
+        border-color: var(--input-error-text-color);
+      }
+    }
+  }
+  &:focus-within {
+    .ff-input-label-container {
+      top: -9px;
+      @extend .fontXs;
+      background-color: var(--input-label-bg-color);
+      line-height: 15px;
+      padding: 0px 2px;
+      margin-left: 10px;
+    }
+    .ff-input-label {
+      &--primary {
+        color: var(--brand-color);
+      }
+      &--danger {
+        color: var(--input-error-text-color);
+      }
+    }
+    .ff-input {
+      border-color: var(--brand-color);
+
+      &--danger {
+        border-color: var(--input-error-text-color);
+      }
+
+      &::placeholder {
+        opacity: 1;
+        margin-bottom: 1px;
+      }
+    }
+  }
+
+  .ff-input-message {
+    @extend .fontXs;
+    padding: 0px 4px;
+    margin-left: 8px;
+    line-height: 15px;
+    &--danger {
+      color: var(--input-error-text-color);
+    }
+  }
+
+  &--float {
+    .ff-input-label-container {
+      //re-written label container code to place it at on border
+      top: -9px;
+      font-size: 10px;
+      background-color: var(--input-label-bg-color);
+      line-height: 15px;
+      padding: 0px 2px;
+      margin-left: 10px;
+    }
+    &--disabled {
+      cursor: not-allowed;
+      .ff-input-label-container {
+        cursor: not-allowed;
+      }
+    }
+  }
+}