pixel-react 1.6.6 → 1.6.8

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;
-  }[];
-  /**
-   * 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;
+    }
+  }
+}

package/src/components/TextArea/Textarea.stories.tsx

@@ -1,92 +1,92 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Textarea from './Textarea';
-import { ChangeEvent, useState } from 'react';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-const meta: Meta<typeof Textarea> = {
-  title: 'Components/Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Textarea>;
-
-const defaultArgs = {
-  name: 'textarea',
-  label: '',
-  disabled: false,
-  placeholder: 'Type Your Description Here',
-  value: '',
-  variant: 'primary',
-  rows: 4,
-  cols: 30,
-  capacity: 200,
-  resize: false,
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'default',
-  },
-};
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'primary',
-  },
-};
-export const Disabled: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Description',
-    variant: 'primary',
-    disabled: true,
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [value, setValue] = useState<string>('');
-    const [error, setError] = useState<boolean>(false);
-    const [helperText, setHelperText] = useState<string>();
-
-    const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
-      const value = event.target.value;
-      if (event.target.required) {
-        if (checkEmpty(value)) {
-          setError(true);
-          setHelperText(`${event?.target?.name} is required`);
-        } else {
-          setError(false);
-          setHelperText('');
-        }
-      }
-      setValue(value);
-    };
-    return (
-      <>
-        <Textarea
-          {...defaultArgs}
-          onChange={onChangeHandler}
-          disabled={false}
-          capacity={200}
-          value={value}
-          name="Description"
-          label="Description"
-          placeholder="Type Your Description Here"
-          variant="primary"
-          required={false}
-          error={error}
-          helperText={helperText}
-        />
-      </>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Textarea from './Textarea';
+import React ,{ ChangeEvent, useState } from 'react';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Textarea>;
+
+const defaultArgs = {
+  name: 'textarea',
+  label: '',
+  disabled: false,
+  placeholder: 'Type Your Description Here',
+  value: '',
+  variant: 'primary',
+  rows: 4,
+  cols: 30,
+  capacity: 200,
+  resize: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'default',
+  },
+};
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Description',
+    variant: 'primary',
+    disabled: true,
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>();
+
+    const onChangeHandler = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      const value = event.target.value;
+      if (event.target.required) {
+        if (checkEmpty(value)) {
+          setError(true);
+          setHelperText(`${event?.target?.name} is required`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+      setValue(value);
+    };
+    return (
+      <>
+        <Textarea
+          {...defaultArgs}
+          onChange={onChangeHandler}
+          disabled={false}
+          capacity={200}
+          value={value}
+          name="Description"
+          label="Description"
+          placeholder="Type Your Description Here"
+          variant="primary"
+          required={false}
+          error={error}
+          helperText={helperText}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;