pixel-react 1.7.1 → 1.7.2

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -1,189 +1,189 @@
-@use '../../assets/styles/mixins';
-
-.ff-all-project {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  .ff-all-project-dropdown {
-    width: fit-content;
-    border-radius: 16px;
-    // background-color: var(--ff-all-projects-default-color);
-    color: var(--expandable-menu-default-bg);
-    line-height: 18px;
-    @include mixins.center-content();
-    padding: 3px;
-    cursor: pointer;
-    &--selected {
-      background-color: var(--primary-icon-color);
-      border-radius: 20px;
-      .ff-all-project-container {
-        border-radius: 20px;
-        box-shadow: 0px 4px 4px 0px #00000040 inset;
-        background: linear-gradient(
-          90deg,
-          var(--brand-color) 0%,
-          var(--button-background-gradient-color) 100%
-        );
-        text-wrap-mode: nowrap;
-      }
-    }
-    &:not(.ff-all-project-dropdown--selected):hover {
-      .projects-label {
-        position: relative;
-        white-space: nowrap;
-        &:hover::after {
-          animation: oscillate-border-width 0.5s ease-in-out forwards;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          top: 20px;
-          left: 0%;
-          width: 0%;
-          height: 2px;
-          background-color: var(--ff-app-header-menu-border-bottom-color);
-          border-radius: 4px;
-          transition: width 0.15s ease-in-out;
-        }
-      }
-    }
-    .ff-all-project-container {
-      display: flex;
-      padding: 4px;
-      gap: 4px;
-      justify-content: center;
-      text-wrap-mode: nowrap;
-      .label-icon {
-        height: 16px;
-        width: 16px;
-        @include mixins.center-content();
-      }
-    }
-  }
-  .ff-projects-dropdown {
-    width: 202px;
-    position: absolute;
-    top: 50px;
-    padding: 1px;
-    border: 0.5px solid var(--expandable-menu-default-bg);
-    border-radius: 4px;
-    background-color: var(--secondary-icon-color);
-    color: var(--primary-icon-color);
-    .ff-projects-search {
-      width: 100%;
-      margin-bottom: 1px;
-      input {
-        height: 30px;
-        width: inherit;
-        border-radius: 4px;
-        border-style: none;
-        &::placeholder {
-          padding-left: 28px;
-          font-size: 8px;
-          line-height: 12px;
-        }
-      }
-      span {
-        position: absolute;
-        top: 11px;
-        left: 8px;
-      }
-    }
-    .scroll {
-      max-height: 150px;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      &::-webkit-scrollbar {
-        width: 2px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background: var(--primary-icon-color);
-        border-radius: 2px;
-      }
-    }
-    .ff-all-projects-options {
-      @include mixins.center-content();
-      justify-content: flex-start;
-      gap: 4px;
-
-      .ff-projects-icons {
-        @include mixins.center-content();
-        height: 24px;
-        width: 24px;
-        svg {
-          path {
-            fill: var(--primary-icon-color);
-          }
-        }
-      }
-    }
-    .ff-all-projects-options.ff-selected-option,
-    .ff-all-projects-options:hover {
-      background-color: var(--primary-icon-color);
-      color: var(--secondary-icon-color);
-      svg {
-        path {
-          fill: var(--secondary-icon-color);
-        }
-      }
-    }
-    .option-card {
-      .ff-projects-options {
-        @include mixins.center-content();
-        justify-content: flex-start;
-        gap: 4px;
-        white-space: nowrap;
-        .ff-projects-icons {
-          @include mixins.center-content();
-          height: 24px;
-          width: 24px;
-          svg {
-            path {
-              fill: var(--primary-icon-color);
-            }
-          }
-        }
-      }
-      .ff-projects-options.ff-selected-option,
-      .ff-projects-options:hover {
-        background-color: var(--primary-icon-color);
-        color: var(--secondary-icon-color);
-        svg {
-          path {
-            fill: var(--secondary-icon-color);
-          }
-        }
-      }
-    }
-    .ff-selected-option {
-      @include mixins.center-content();
-      justify-content: flex-start;
-      gap: 4px;
-      background-color: var(--primary-icon-color);
-      color: var(--secondary-icon-color);
-      border-radius: 4px;
-      .ff-projects-icons {
-        svg {
-          path {
-            fill: var(--secondary-icon-color);
-          }
-        }
-      }
-    }
-  }
-}
-@keyframes oscillate-border-width {
-  0% {
-    width: 50%;
-    left: 25%;
-  }
-  50% {
-    width: 70%;
-    left: 15%;
-  }
-  100% {
-    width: 50%;
-    left: 25%;
-  }
-}
+@use '../../assets/styles/mixins';
+
+.ff-all-project {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  .ff-all-project-dropdown {
+    width: fit-content;
+    border-radius: 16px;
+    // background-color: var(--ff-all-projects-default-color);
+    color: var(--expandable-menu-default-bg);
+    line-height: 18px;
+    @include mixins.center-content();
+    padding: 3px;
+    cursor: pointer;
+    &--selected {
+      background-color: var(--primary-icon-color);
+      border-radius: 20px;
+      .ff-all-project-container {
+        border-radius: 20px;
+        box-shadow: 0px 4px 4px 0px #00000040 inset;
+        background: linear-gradient(
+          90deg,
+          var(--brand-color) 0%,
+          var(--button-background-gradient-color) 100%
+        );
+        text-wrap-mode: nowrap;
+      }
+    }
+    &:not(.ff-all-project-dropdown--selected):hover {
+      .projects-label {
+        position: relative;
+        white-space: nowrap;
+        &:hover::after {
+          animation: oscillate-border-width 0.5s ease-in-out forwards;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 0%;
+          width: 0%;
+          height: 2px;
+          background-color: var(--ff-app-header-menu-border-bottom-color);
+          border-radius: 4px;
+          transition: width 0.15s ease-in-out;
+        }
+      }
+    }
+    .ff-all-project-container {
+      display: flex;
+      padding: 4px;
+      gap: 4px;
+      justify-content: center;
+      text-wrap-mode: nowrap;
+      .label-icon {
+        height: 16px;
+        width: 16px;
+        @include mixins.center-content();
+      }
+    }
+  }
+  .ff-projects-dropdown {
+    width: 202px;
+    position: absolute;
+    top: 50px;
+    padding: 1px;
+    border: 0.5px solid var(--expandable-menu-default-bg);
+    border-radius: 4px;
+    background-color: var(--secondary-icon-color);
+    color: var(--primary-icon-color);
+    .ff-projects-search {
+      width: 100%;
+      margin-bottom: 1px;
+      input {
+        height: 30px;
+        width: inherit;
+        border-radius: 4px;
+        border-style: none;
+        &::placeholder {
+          padding-left: 28px;
+          font-size: 8px;
+          line-height: 12px;
+        }
+      }
+      span {
+        position: absolute;
+        top: 11px;
+        left: 8px;
+      }
+    }
+    .scroll {
+      max-height: 150px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      &::-webkit-scrollbar {
+        width: 2px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: var(--primary-icon-color);
+        border-radius: 2px;
+      }
+    }
+    .ff-all-projects-options {
+      @include mixins.center-content();
+      justify-content: flex-start;
+      gap: 4px;
+
+      .ff-projects-icons {
+        @include mixins.center-content();
+        height: 24px;
+        width: 24px;
+        svg {
+          path {
+            fill: var(--primary-icon-color);
+          }
+        }
+      }
+    }
+    .ff-all-projects-options.ff-selected-option,
+    .ff-all-projects-options:hover {
+      background-color: var(--primary-icon-color);
+      color: var(--secondary-icon-color);
+      svg {
+        path {
+          fill: var(--secondary-icon-color);
+        }
+      }
+    }
+    .option-card {
+      .ff-projects-options {
+        @include mixins.center-content();
+        justify-content: flex-start;
+        gap: 4px;
+        white-space: nowrap;
+        .ff-projects-icons {
+          @include mixins.center-content();
+          height: 24px;
+          width: 24px;
+          svg {
+            path {
+              fill: var(--primary-icon-color);
+            }
+          }
+        }
+      }
+      .ff-projects-options.ff-selected-option,
+      .ff-projects-options:hover {
+        background-color: var(--primary-icon-color);
+        color: var(--secondary-icon-color);
+        svg {
+          path {
+            fill: var(--secondary-icon-color);
+          }
+        }
+      }
+    }
+    .ff-selected-option {
+      @include mixins.center-content();
+      justify-content: flex-start;
+      gap: 4px;
+      background-color: var(--primary-icon-color);
+      color: var(--secondary-icon-color);
+      border-radius: 4px;
+      .ff-projects-icons {
+        svg {
+          path {
+            fill: var(--secondary-icon-color);
+          }
+        }
+      }
+    }
+  }
+}
+@keyframes oscillate-border-width {
+  0% {
+    width: 50%;
+    left: 25%;
+  }
+  50% {
+    width: 70%;
+    left: 15%;
+  }
+  100% {
+    width: 50%;
+    left: 25%;
+  }
+}

package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx

@@ -1,117 +1,117 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AllProjectsDropdown from './AllProjectsDropdown';
-import React, { useState } from 'react';
-import { optionsType } from './types';
-
-const meta: Meta<typeof AllProjectsDropdown> = {
-  title: 'Components/AllProjectsDropdown',
-  component: AllProjectsDropdown,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof AllProjectsDropdown>;
-const options = [
-  {
-    label:
-      'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
-    value:
-      'Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
-    iconName: 'web_icon',
-  },
-  {
-    label: 'Mobile Project',
-    value: 'Mobile Project',
-    iconName: 'mobile_icon',
-  },
-  {
-    label: 'Web & Mobile Project',
-    value: 'Web & Mobile Project',
-    iconName: 'web&mobile_icon',
-  },
-  {
-    label: 'Sales Force',
-    value: 'Sales Force',
-    iconName: 'sales_force',
-  },
-  {
-    label: 'MS Dynamic',
-    value: 'MS Dynamic',
-    iconName: 'ms_dynamic',
-  },
-  {
-    label: 'Test',
-    value: 'test',
-    iconName: 'mobile_icon',
-  },
-  {
-    label: 'Web Service',
-    value: 'Web Service',
-    iconName: '',
-  },
-];
-export const Default: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState({
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    });
-
-    const handleSelectedOption = (option: optionsType) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <div
-        style={{
-          backgroundColor: 'var(--brand-color)',
-          height: 50,
-          width: 120,
-          padding: 10,
-        }}
-      >
-        <AllProjectsDropdown
-          options={options}
-          onClick={handleSelectedOption}
-          selectedOption={selectedOption}
-        />
-      </div>
-    );
-  },
-};
-export const Selected: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState({
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    });
-
-    const handleSelectedOption = (option: optionsType) => {
-      setSelectedOption(option);
-    };
-
-    return (
-      <div
-        style={{
-          backgroundColor: 'var(--brand-color)',
-          height: 50,
-          width: 120,
-          padding: 10,
-        }}
-      >
-        <AllProjectsDropdown
-          options={options}
-          onClick={handleSelectedOption}
-          selectedOption={selectedOption}
-          selected={true}
-        />
-      </div>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import AllProjectsDropdown from './AllProjectsDropdown';
+import React, { useState } from 'react';
+import { optionsType } from './types';
+
+const meta: Meta<typeof AllProjectsDropdown> = {
+  title: 'Components/AllProjectsDropdown',
+  component: AllProjectsDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof AllProjectsDropdown>;
+const options = [
+  {
+    label:
+      'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
+    value:
+      'Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
+    iconName: 'web_icon',
+  },
+  {
+    label: 'Mobile Project',
+    value: 'Mobile Project',
+    iconName: 'mobile_icon',
+  },
+  {
+    label: 'Web & Mobile Project',
+    value: 'Web & Mobile Project',
+    iconName: 'web&mobile_icon',
+  },
+  {
+    label: 'Sales Force',
+    value: 'Sales Force',
+    iconName: 'sales_force',
+  },
+  {
+    label: 'MS Dynamic',
+    value: 'MS Dynamic',
+    iconName: 'ms_dynamic',
+  },
+  {
+    label: 'Test',
+    value: 'test',
+    iconName: 'mobile_icon',
+  },
+  {
+    label: 'Web Service',
+    value: 'Web Service',
+    iconName: '',
+  },
+];
+export const Default: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState({
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
+    });
+
+    const handleSelectedOption = (option: optionsType) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <div
+        style={{
+          backgroundColor: 'var(--brand-color)',
+          height: 50,
+          width: 120,
+          padding: 10,
+        }}
+      >
+        <AllProjectsDropdown
+          options={options}
+          onClick={handleSelectedOption}
+          selectedOption={selectedOption}
+        />
+      </div>
+    );
+  },
+};
+export const Selected: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState({
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
+    });
+
+    const handleSelectedOption = (option: optionsType) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <div
+        style={{
+          backgroundColor: 'var(--brand-color)',
+          height: 50,
+          width: 120,
+          padding: 10,
+        }}
+      >
+        <AllProjectsDropdown
+          options={options}
+          onClick={handleSelectedOption}
+          selectedOption={selectedOption}
+          selected={true}
+        />
+      </div>
+    );
+  },
+};
+
+export default meta;