pixel-react 1.6.9 → 1.7.0

package/src/components/Tabs/Tabs.tsx

@@ -1,71 +1,71 @@
-import { TabsProps } from './types';
-import './Tabs.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import '../../assets/styles/_colors.scss';
-
-const Tabs = ({
-  variant = 'default',
-  tabsData,
-  activeTabId,
-  onTabClick,
-  noBorder = false,
-}: TabsProps) => {
-  return (
-    <div className={`ff-tabs-container`}>
-      <div
-        className={classNames(`ff-tab-row--${variant}`, {
-          'ff-tab-row--no-border': noBorder,
-        })}
-      >
-        {tabsData.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => !tab.disabled && onTabClick(tab.id)}
-            disabled={tab.disabled}
-            className={classNames(`ff-tab-button--${variant}`, {
-              disabled: tab.disabled,
-              active: activeTabId === tab.id,
-            })}
-          >
-            <div className="label-count-section">
-              <Typography
-                children={tab.label}
-                lineHeight="18px"
-                fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
-                color={
-                  activeTabId === tab.id
-                    ? 'var(--tabs-label-active-color)'
-                    : 'var(--tabs-label-default-color)'
-                }
-                className={classNames('ff-tab-label', {
-                  'ff-tab-label--active': activeTabId === tab.id,
-                })}
-              />
-              {variant === 'default' && tab.count && (
-                <span
-                  className={classNames('tab-count', {
-                    'tab-count--active': activeTabId === tab.id,
-                  })}
-                >
-                  {tab.count}
-                </span>
-              )}
-            </div>
-
-            <div
-              className={classNames('ff-tab-bar', {
-                'ff-tab-bar--active': activeTabId === tab.id,
-              })}
-            ></div>
-          </button>
-        ))}
-      </div>
-      <div className={`ff-tab-content`}>
-        {tabsData.find((tab) => tab.id === activeTabId)?.component}
-      </div>
-    </div>
-  );
-};
-
-export default Tabs;
+import { TabsProps } from './types';
+import './Tabs.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+
+const Tabs = ({
+  variant = 'default',
+  tabsData,
+  activeTabId,
+  onTabClick,
+  noBorder = false,
+}: TabsProps) => {
+  return (
+    <div className={`ff-tabs-container`}>
+      <div
+        className={classNames(`ff-tab-row--${variant}`, {
+          'ff-tab-row--no-border': noBorder,
+        })}
+      >
+        {tabsData.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => !tab.disabled && onTabClick(tab.id)}
+            disabled={tab.disabled}
+            className={classNames(`ff-tab-button--${variant}`, {
+              disabled: tab.disabled,
+              active: activeTabId === tab.id,
+            })}
+          >
+            <div className="label-count-section">
+              <Typography
+                children={tab.label}
+                lineHeight="18px"
+                fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
+                color={
+                  activeTabId === tab.id
+                    ? 'var(--tabs-label-active-color)'
+                    : 'var(--tabs-label-default-color)'
+                }
+                className={classNames('ff-tab-label', {
+                  'ff-tab-label--active': activeTabId === tab.id,
+                })}
+              />
+              {variant === 'default' && tab.count && (
+                <span
+                  className={classNames('tab-count', {
+                    'tab-count--active': activeTabId === tab.id,
+                  })}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </div>
+
+            <div
+              className={classNames('ff-tab-bar', {
+                'ff-tab-bar--active': activeTabId === tab.id,
+              })}
+            ></div>
+          </button>
+        ))}
+      </div>
+      <div className={`ff-tab-content`}>
+        {tabsData.find((tab) => tab.id === activeTabId)?.component}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/Tabs/index.ts

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

package/src/components/Tabs/types.ts

@@ -1,48 +1,48 @@
-export interface Tab {
-  /**
-   * Unique identifier for the tab, for handling click events.
-   */
-  id: string;
-  /**
-   * Display label for the tab.
-   */
-  label: string;
-  /**
-   * The content to display when this tab is active.
-   */
-  component?: JSX.Element | React.ReactNode;
-  /**
-   * Optional property to indicate if the tab is disabled.
-   */
-  disabled?: boolean;
-}
-
-export interface TabsProps {
-  /**
-   * An array of tab objects containing label, component, and optional disabled status.
-   */
-  tabsData: {
-    id: string;
-    label: string;
-    component?: JSX.Element;
-    disabled?: boolean;
-    count?: number | string;
-  }[];
-  /**
-   * Defines the styling variant of the tabs.
-   */
-  variant?: 'default' | 'capsule';
-  /**
-   * activeTabId : The ID of the currently active tab.
-   */
-  activeTabId: string;
-
-  /**
-   * onTabClick : function updates the active tab state when a user interacts with the tabs,
-   */
-  onTabClick: (id: string) => void;
-  /**
-   * noBorder:true , removes the outer border from tabs
-   */
-  noBorder?: boolean;
-}
+export interface Tab {
+  /**
+   * Unique identifier for the tab, for handling click events.
+   */
+  id: string;
+  /**
+   * Display label for the tab.
+   */
+  label: string;
+  /**
+   * The content to display when this tab is active.
+   */
+  component?: JSX.Element | React.ReactNode;
+  /**
+   * Optional property to indicate if the tab is disabled.
+   */
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  /**
+   * An array of tab objects containing label, component, and optional disabled status.
+   */
+  tabsData: {
+    id: string;
+    label: string;
+    component?: JSX.Element;
+    disabled?: boolean;
+    count?: number | string;
+  }[];
+  /**
+   * Defines the styling variant of the tabs.
+   */
+  variant?: 'default' | 'capsule';
+  /**
+   * activeTabId : The ID of the currently active tab.
+   */
+  activeTabId: string;
+
+  /**
+   * onTabClick : function updates the active tab state when a user interacts with the tabs,
+   */
+  onTabClick: (id: string) => void;
+  /**
+   * noBorder:true , removes the outer border from tabs
+   */
+  noBorder?: boolean;
+}

package/src/components/TextArea/Textarea.scss

@@ -1,144 +1,144 @@
-@use '../../assets/styles/fonts';
-
-.ff-textarea-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  gap: 5px;
-  @extend .fontSm;
-  .msg-character-count {
-    @extend .font-size-8;
-    display: flex;
-    color: var(--text-area-default-color);
-    justify-content: flex-end;
-  }
-  .ff-textarea {
-    padding: 8px;
-    width: 100%;
-    min-height: 80px;
-    gap: 0px;
-    border: 1px solid var(--default-icon-color);
-    border-radius: 4px;
-    outline: none;
-    line-height: 18px;
-    font-weight: 400;
-    &--resize {
-      resize: none;
-    }
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      &:hover {
-        border-color: var(--default-icon-color);
-        color: inherit;
-      }
-    }
-    &::placeholder {
-      opacity: 0;
-    }
-    &--danger {
-      border-color: var(--error_light);
-    }
-    &--transparentBackground {
-      background: transparent;
-    }
-  }
-
-  .ff-textarea-label-container {
-    @extend .ff-textarea;
-    display: flex;
-    position: absolute;
-    border: none;
-    outline: none;
-    margin-top: 1px;
-    transition: all 0.3s ease-in-out;
-
-    .ff-textarea-label {
-      padding: 1px;
-      height: 10px;
-      width: auto;
-      background-color: var(--drawer-footer-bg);
-      color: var(--text-area-default-color);
-      &--danger {
-        color: var(--error_light);
-      }
-    }
-
-    .required-asterisk {
-      color: var(--error_light);
-    }
-  }
-  &:hover {
-    .ff-textarea-label {
-      color: var(--text-color);
-    }
-    .ff-textarea {
-      border-color: var(--text-color);
-    }
-  }
-  &:focus-within {
-    .ff-textarea-label-container {
-      font-weight: 400;
-      line-height: 12px;
-      letter-spacing: 0.5px;
-      text-align: left;
-      top: -6px;
-      @extend .font-size-8;
-      background-color: transparent;
-      padding: 0px 2px;
-      margin-left: 7px;
-    }
-    .ff-textarea-label {
-      &--primary {
-        color: var(--brand-color);
-      }
-    }
-    .ff-textarea {
-      &--primary {
-        border-color: var(--brand-color);
-      }
-
-      &::placeholder {
-        opacity: 1;
-        margin-bottom: 1px;
-        @extend .font-size-8;
-      }
-    }
-  }
-
-  .ff-textarea-message {
-    @extend .font-size-8;
-    padding: 0px 4px;
-    margin-left: 8px;
-    line-height: 12px;
-    &--danger {
-      color: var(--error_light);
-    }
-  }
-
-  &--float {
-    .ff-textarea-label-container {
-      letter-spacing: 0.5px;
-      top: -6px;
-      @extend .font-size-8;
-      background-color: transparent;
-      line-height: 12px;
-      padding: 0px 2px;
-      margin-left: 7px;
-    }
-  }
-  &--disabled {
-    &:hover {
-      .ff-textarea-label {
-        color: var(--text-area-default-color);
-      }
-      .ff-textarea {
-        border-color: var(--default-icon-color);
-      }
-    }
-    cursor: not-allowed;
-    .ff-textarea-label-container {
-      cursor: not-allowed;
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-textarea-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: 5px;
+  @extend .fontSm;
+  .msg-character-count {
+    @extend .font-size-8;
+    display: flex;
+    color: var(--text-area-default-color);
+    justify-content: flex-end;
+  }
+  .ff-textarea {
+    padding: 8px;
+    width: 100%;
+    min-height: 80px;
+    gap: 0px;
+    border: 1px solid var(--default-icon-color);
+    border-radius: 4px;
+    outline: none;
+    line-height: 18px;
+    font-weight: 400;
+    &--resize {
+      resize: none;
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover {
+        border-color: var(--default-icon-color);
+        color: inherit;
+      }
+    }
+    &::placeholder {
+      opacity: 0;
+    }
+    &--danger {
+      border-color: var(--error_light);
+    }
+    &--transparentBackground {
+      background: transparent;
+    }
+  }
+
+  .ff-textarea-label-container {
+    @extend .ff-textarea;
+    display: flex;
+    position: absolute;
+    border: none;
+    outline: none;
+    margin-top: 1px;
+    transition: all 0.3s ease-in-out;
+
+    .ff-textarea-label {
+      padding: 1px;
+      height: 10px;
+      width: auto;
+      background-color: var(--drawer-footer-bg);
+      color: var(--text-area-default-color);
+      &--danger {
+        color: var(--error_light);
+      }
+    }
+
+    .required-asterisk {
+      color: var(--error_light);
+    }
+  }
+  &:hover {
+    .ff-textarea-label {
+      color: var(--text-color);
+    }
+    .ff-textarea {
+      border-color: var(--text-color);
+    }
+  }
+  &:focus-within {
+    .ff-textarea-label-container {
+      font-weight: 400;
+      line-height: 12px;
+      letter-spacing: 0.5px;
+      text-align: left;
+      top: -6px;
+      @extend .font-size-8;
+      background-color: transparent;
+      padding: 0px 2px;
+      margin-left: 7px;
+    }
+    .ff-textarea-label {
+      &--primary {
+        color: var(--brand-color);
+      }
+    }
+    .ff-textarea {
+      &--primary {
+        border-color: var(--brand-color);
+      }
+
+      &::placeholder {
+        opacity: 1;
+        margin-bottom: 1px;
+        @extend .font-size-8;
+      }
+    }
+  }
+
+  .ff-textarea-message {
+    @extend .font-size-8;
+    padding: 0px 4px;
+    margin-left: 8px;
+    line-height: 12px;
+    &--danger {
+      color: var(--error_light);
+    }
+  }
+
+  &--float {
+    .ff-textarea-label-container {
+      letter-spacing: 0.5px;
+      top: -6px;
+      @extend .font-size-8;
+      background-color: transparent;
+      line-height: 12px;
+      padding: 0px 2px;
+      margin-left: 7px;
+    }
+  }
+  &--disabled {
+    &:hover {
+      .ff-textarea-label {
+        color: var(--text-area-default-color);
+      }
+      .ff-textarea {
+        border-color: var(--default-icon-color);
+      }
+    }
+    cursor: not-allowed;
+    .ff-textarea-label-container {
+      cursor: not-allowed;
+    }
+  }
+}