pixel-react 1.7.1 → 1.7.2

package/src/components/Chip/Chip.scss

@@ -1,95 +1,95 @@
-@use '../../assets/styles/fonts' as *;
-
-@mixin chip-variant-background($color) {
-  background-color: $color;
-  color: var(--ff-chip-bg);
-}
-
-.ff-chip-wrapper {
-  display: inline-flex;
-  margin: 5px;
-  justify-content: center;
-  align-items: center;
-
-  .ff-default-chip-style {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    width: fit-content;
-    gap: 5px;
-    height: 17px;
-    border-radius: 25px;
-    padding: 1px 6px;
-    line-height: 15px;
-    border: none;
-    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
-      padding 0.4s ease-in-out;
-    box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
-      -1px -1px 2px 0px var(--ff-chip-bg) inset,
-      1px -1px 2px 0px var(--ff-chips-blur-color) inset,
-      -1px -1px 2px 0px var(--ff-chips-blur-color),
-      1px 1px 2px 0px var(--ff-chip-bg);
-    &--fullText:hover {
-      box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
-        -1px -1px 2px 0px var(--ff-chip-bg) inset,
-        1px -1px 2px 0px var(--ff-chips-blur-color) inset,
-        -1px -1px 2px 0px var(--ff-chips-blur-color),
-        1px 1px 2px 0px var(--ff-chip-bg);
-      padding-right: 7px;
-    }
-
-    &--primary {
-      @include chip-variant-background(var(--ff-chips-fill-color));
-      color: var(--ff-chip-text-color);
-    }
-
-    &--success {
-      @include chip-variant-background(var(--ff-success));
-    }
-
-    &--error {
-      @include chip-variant-background(var(--ff-error-light));
-    }
-    &--warning {
-      @include chip-variant-background(var(--ff-warning));
-    }
-    &--custom {
-      @extend .fontSm;
-      background: #610b861a; //TODO: add color code name
-      color: #610b86; //TODO: add color code name
-      padding: 2px 8px;
-      border-radius: 12px;
-      cursor: pointer;
-      white-space: nowrap;
-      box-shadow: none;
-      transition: background-color 0.3s ease, color 0.3s ease;
-      &:hover {
-        background-color: #610b86; //TODO: add color code name
-        color: #fdfaff; //TODO: add color code name
-      }
-    }
-    &--public {
-      @include chip-variant-background(var(--public-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--partial-public {
-      @include chip-variant-background(var(--partial-public-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--private {
-      @include chip-variant-background(var(--private-chip-bg-color));
-      color: var(--license_header_text_color);
-    }
-
-    &--disabled {
-      @include chip-variant-background(var(--disabled-chip-bg-color));
-      color: var(--table-column-text-color);
-    }
-    &--count {
-      @include chip-variant-background(var(--impact-list-chip-bg-color));
-      color: var(--ff-chip-text-color);
-    }
-  }
-}
+@use '../../assets/styles/fonts' as *;
+
+@mixin chip-variant-background($color) {
+  background-color: $color;
+  color: var(--ff-chip-bg);
+}
+
+.ff-chip-wrapper {
+  display: inline-flex;
+  margin: 5px;
+  justify-content: center;
+  align-items: center;
+
+  .ff-default-chip-style {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: fit-content;
+    gap: 5px;
+    height: 17px;
+    border-radius: 25px;
+    padding: 1px 6px;
+    line-height: 15px;
+    border: none;
+    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
+      padding 0.4s ease-in-out;
+    box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chip-bg) inset,
+      1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chips-blur-color),
+      1px 1px 2px 0px var(--ff-chip-bg);
+    &--fullText:hover {
+      box-shadow: 1px 1px 3px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chip-bg) inset,
+        1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chips-blur-color),
+        1px 1px 2px 0px var(--ff-chip-bg);
+      padding-right: 7px;
+    }
+
+    &--primary {
+      @include chip-variant-background(var(--ff-chips-fill-color));
+      color: var(--ff-chip-text-color);
+    }
+
+    &--success {
+      @include chip-variant-background(var(--ff-success));
+    }
+
+    &--error {
+      @include chip-variant-background(var(--ff-error-light));
+    }
+    &--warning {
+      @include chip-variant-background(var(--ff-warning));
+    }
+    &--custom {
+      @extend .fontSm;
+      background: #610b861a; //TODO: add color code name
+      color: #610b86; //TODO: add color code name
+      padding: 2px 8px;
+      border-radius: 12px;
+      cursor: pointer;
+      white-space: nowrap;
+      box-shadow: none;
+      transition: background-color 0.3s ease, color 0.3s ease;
+      &:hover {
+        background-color: #610b86; //TODO: add color code name
+        color: #fdfaff; //TODO: add color code name
+      }
+    }
+    &--public {
+      @include chip-variant-background(var(--public-chip-bg-color));
+      color: var(--license_header_text_color);
+    }
+
+    &--partial-public {
+      @include chip-variant-background(var(--partial-public-chip-bg-color));
+      color: var(--license_header_text_color);
+    }
+
+    &--private {
+      @include chip-variant-background(var(--private-chip-bg-color));
+      color: var(--license_header_text_color);
+    }
+
+    &--disabled {
+      @include chip-variant-background(var(--disabled-chip-bg-color));
+      color: var(--table-column-text-color);
+    }
+    &--count {
+      @include chip-variant-background(var(--impact-list-chip-bg-color));
+      color: var(--ff-chip-text-color);
+    }
+  }
+}

package/src/components/Chip/Chip.stories.tsx

@@ -1,126 +1,126 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Chip from './Chip';
-import '../../assets/styles/_colors.scss';
-import './Chip.scss';
-import Typography from '../Typography';
-
-const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
-  component: Chip,
-  parameters: {
-    layout: 'left',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Chip>;
-
-const defaultArgs = {
-  label: 'SM 0',
-};
-
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'primary',
-    fullText: 'Sub Modules 0',
-  },
-};
-
-export const withoutExpand: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export const Group: Story = {
-  render: () => {
-    const items = ['Item 1', 'Item 2', 'Item 3'];
-
-    return (
-      <Typography as="div">
-        {items.map((item) => (
-          <Chip
-            key={item}
-            label={item}
-            variant="primary"
-            fullText="hover item"
-          />
-        ))}
-      </Typography>
-    );
-  },
-};
-export const CustomChip: Story = {
-  render: () => {
-    const items = ['Item 1', 'Item 2', 'Item 3'];
-
-    return (
-      <Typography as="div">
-        {items.map((item) => (
-          <Chip key={item} label={item} variant="custom" />
-        ))}
-      </Typography>
-    );
-  },
-};
-
-export const Success: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'success',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const Errors: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'error',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const Warning: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'warning',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const Public: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'public',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const PartialPublic: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'partial-public',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const Private: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'private',
-    fullText: 'Sub Modules 0',
-  },
-};
-export const Disabled: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'disabled',
-    fullText: 'Sub Modules 0',
-  },    
-};
-export const Count: Story = {
-  args: {
-    ...defaultArgs,
-    variant: 'count',
-    fullText: 'Sub Modules 0',
-  },
-};
-
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Chip from './Chip';
+import '../../assets/styles/_colors.scss';
+import './Chip.scss';
+import Typography from '../Typography';
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  parameters: {
+    layout: 'left',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Chip>;
+
+const defaultArgs = {
+  label: 'SM 0',
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'primary',
+    fullText: 'Sub Modules 0',
+  },
+};
+
+export const withoutExpand: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const Group: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip
+            key={item}
+            label={item}
+            variant="primary"
+            fullText="hover item"
+          />
+        ))}
+      </Typography>
+    );
+  },
+};
+export const CustomChip: Story = {
+  render: () => {
+    const items = ['Item 1', 'Item 2', 'Item 3'];
+
+    return (
+      <Typography as="div">
+        {items.map((item) => (
+          <Chip key={item} label={item} variant="custom" />
+        ))}
+      </Typography>
+    );
+  },
+};
+
+export const Success: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'success',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'error',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'warning',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Public: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'public',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const PartialPublic: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'partial-public',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Private: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'private',
+    fullText: 'Sub Modules 0',
+  },
+};
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'disabled',
+    fullText: 'Sub Modules 0',
+  },    
+};
+export const Count: Story = {
+  args: {
+    ...defaultArgs,
+    variant: 'count',
+    fullText: 'Sub Modules 0',
+  },
+};
+
 export default meta;

package/src/components/Chip/Chip.tsx

@@ -1,39 +1,39 @@
-import { useState } from 'react';
-import './Chip.scss';
-import classNames from 'classnames';
-import { ChipsProps } from './types';
-import Typography from '../Typography';
-
-const Chip = ({
-  label = '',
-  fullText = '',
-  variant = 'primary',
-  onClick = () => {},
-}: ChipsProps) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const labelText = isHovered && fullText ? fullText : label;
-  const handleOnMouseEnter = () => setIsHovered(true);
-  const handleOnMouseLeave = () => setIsHovered(false);
-
-  return (
-    <div className="ff-chip-wrapper">
-      <button
-        onMouseEnter={handleOnMouseEnter}
-        onMouseLeave={handleOnMouseLeave}
-        onClick={onClick}
-        className={classNames(
-          `ff-default-chip-style ff-default-chip-style--${variant}`,
-          { ['ff-default-chip-style--fullText']: !!fullText }
-        )}
-      >
-        {labelText && (
-          <Typography as="p" fontSize={10} fontWeight="semi-bold">
-            {labelText}
-          </Typography>
-        )}
-      </button>
-    </div>
-  );
-};
-
-export default Chip;
+import { useState } from 'react';
+import './Chip.scss';
+import classNames from 'classnames';
+import { ChipsProps } from './types';
+import Typography from '../Typography';
+
+const Chip = ({
+  label = '',
+  fullText = '',
+  variant = 'primary',
+  onClick = () => {},
+}: ChipsProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const labelText = isHovered && fullText ? fullText : label;
+  const handleOnMouseEnter = () => setIsHovered(true);
+  const handleOnMouseLeave = () => setIsHovered(false);
+
+  return (
+    <div className="ff-chip-wrapper">
+      <button
+        onMouseEnter={handleOnMouseEnter}
+        onMouseLeave={handleOnMouseLeave}
+        onClick={onClick}
+        className={classNames(
+          `ff-default-chip-style ff-default-chip-style--${variant}`,
+          { ['ff-default-chip-style--fullText']: !!fullText }
+        )}
+      >
+        {labelText && (
+          <Typography as="p" fontSize={10} fontWeight="semi-bold">
+            {labelText}
+          </Typography>
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default Chip;

package/src/components/Chip/index.ts

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

package/src/components/Chip/types.ts

@@ -1,19 +1,19 @@
-export interface ChipsProps {
-  /**
-   * The text to be displayed on the Chip.
-   */
-  label: string;
-  /**
-   * The text to be displayed on hover.
-   */
-  fullText?: string;
-  /**
-   * The variant of the Chip.
-   */
-  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
-
-  /**
-   * The callback function to be executed when the Chip is clicked.
-   */
-  onClick?: () => void;
-}
+export interface ChipsProps {
+  /**
+   * The text to be displayed on the Chip.
+   */
+  label: string;
+  /**
+   * The text to be displayed on hover.
+   */
+  fullText?: string;
+  /**
+   * The variant of the Chip.
+   */
+  variant?: 'primary' | 'success' | 'error' | 'warning' | 'custom' | 'public' | 'partial-public' | 'private' | 'disabled' | 'count';
+
+  /**
+   * The callback function to be executed when the Chip is clicked.
+   */
+  onClick?: () => void;
+}