pixel-react 1.8.3 → 1.8.4

package/src/components/Icon/index.ts

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

package/src/components/Icon/types.ts

@@ -1,14 +1,14 @@
-export interface IconProps {
-  name: string;
-  className?: string;
-  height?: number;
-  width?: number;
-  color?: string;
-  onClick?: (data?: any) => void;
-  hoverEffect?: boolean;
-  disabled?: boolean;
-  variant?: "dark" | "light" | 'danger';
-  x?:string;
-  y?:string;
-  chartIcon?:boolean
-}
+export interface IconProps {
+  name: string;
+  className?: string;
+  height?: number;
+  width?: number;
+  color?: string;
+  onClick?: (data?: any) => void;
+  hoverEffect?: boolean;
+  disabled?: boolean;
+  variant?: "dark" | "light" | 'danger';
+  x?:string;
+  y?:string;
+  chartIcon?:boolean
+}

package/src/components/IconButton/IconButton.scss

@@ -1,54 +1,54 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-plus-icon {
-  border-radius: 16px;
-  border-style: none;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  @include mixins.center-content();
-  gap: 8px;
-  background-color: var(--hover-color);
-  padding: 2px 8px 2px 2px;
-  border: 1px solid var(--secondary-icon-color);
-  .button-icon {
-    width: 20px;
-    height: 20px;
-    border: 1px solid var(--primary-icon-color);
-    border-radius: 50%;
-    @include mixins.center-content();
-    background-color: var(--secondary-icon-color);
-    .ff-icon-color {
-      path {
-        color: var(--primary-icon-color);
-      }
-    }
-  }
-  .icon-name {
-    color: var(--secondary-icon-color);
-    @include mixins.center-content();
-  }
-  &:hover {
-    border: 1px solid transparent;
-    background-color: var(--secondary-icon-color);
-    .icon-name {
-      font-weight: 600;
-      color: var(--primary-icon-color);
-      @include mixins.center-content();
-    }
-    .button-icon {
-      width: 20px;
-      height: 20px;
-      border: 1px solid transparent;
-      border-radius: 50%;
-      @include mixins.center-content();
-      background-color: var(--hover-color);
-      .ff-icon-color {
-        path {
-          color: var(--secondary-icon-color);
-        }
-      }
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-plus-icon {
+  border-radius: 16px;
+  border-style: none;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  @include mixins.center-content();
+  gap: 8px;
+  background-color: var(--hover-color);
+  padding: 2px 8px 2px 2px;
+  border: 1px solid var(--secondary-icon-color);
+  .button-icon {
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--primary-icon-color);
+    border-radius: 50%;
+    @include mixins.center-content();
+    background-color: var(--secondary-icon-color);
+    .ff-icon-color {
+      path {
+        color: var(--primary-icon-color);
+      }
+    }
+  }
+  .icon-name {
+    color: var(--secondary-icon-color);
+    @include mixins.center-content();
+  }
+  &:hover {
+    border: 1px solid transparent;
+    background-color: var(--secondary-icon-color);
+    .icon-name {
+      font-weight: 600;
+      color: var(--primary-icon-color);
+      @include mixins.center-content();
+    }
+    .button-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      @include mixins.center-content();
+      background-color: var(--hover-color);
+      .ff-icon-color {
+        path {
+          color: var(--secondary-icon-color);
+        }
+      }
+    }
+  }
+}

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,34 +1,34 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import IconButton from './IconButton';
-import React from 'react';
-
-const meta: Meta<typeof IconButton> = {
-  title: 'Components/IconButton',
-  component: IconButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof IconButton>;
-
-export const Default: Story = {
-  args: {
-    label: 'Script',
-    iconName: 'download_icon',
-    onClick: () => {},
-  },
-};
-
-export const PrimaryIconButton: Story = {
-  render: () => {
-    const name = 'Project';
-    const icon = 'plus_user_icon';
-    const onClick = () => {};
-
-    return <IconButton label={name} iconName={icon} onClick={onClick} />;
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import IconButton from './IconButton';
+import React from 'react';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'Script',
+    iconName: 'download_icon',
+    onClick: () => {},
+  },
+};
+
+export const PrimaryIconButton: Story = {
+  render: () => {
+    const name = 'Project';
+    const icon = 'plus_user_icon';
+    const onClick = () => {};
+
+    return <IconButton label={name} iconName={icon} onClick={onClick} />;
+  },
+};
+
+export default meta;

package/src/components/IconButton/IconButton.tsx

@@ -1,33 +1,33 @@
-import { forwardRef } from 'react';
-import Icon from '../Icon';
-import './IconButton.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import { IconButtonProps } from './types';
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
-  label,
-  iconName = 'plus_user_icon',
-  onClick,
-}, ref) => {
-  return (
-    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
-      <div className={classNames('button-icon')}>
-        <Icon
-          height={12}
-          width={12}
-          name={iconName}
-          className={'ff-icon-color'}
-        />
-      </div>
-      <Typography
-        as="div"
-        textAlign="center"
-        className="icon-name"
-        fontWeight="semi-bold"
-      >
-        {label}
-      </Typography>
-    </button>
-  );
-});
+import { forwardRef } from 'react';
+import Icon from '../Icon';
+import './IconButton.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import { IconButtonProps } from './types';
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
+  label,
+  iconName = 'plus_user_icon',
+  onClick,
+}, ref) => {
+  return (
+    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
+      <div className={classNames('button-icon')}>
+        <Icon
+          height={12}
+          width={12}
+          name={iconName}
+          className={'ff-icon-color'}
+        />
+      </div>
+      <Typography
+        as="div"
+        textAlign="center"
+        className="icon-name"
+        fontWeight="semi-bold"
+      >
+        {label}
+      </Typography>
+    </button>
+  );
+});
 export default IconButton;

package/src/components/IconButton/index.ts

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

package/src/components/IconButton/types.ts

@@ -1,6 +1,6 @@
-export interface IconButtonProps {
-  label: string;
-  iconName: string;
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: React.Ref<HTMLButtonElement>;
+export interface IconButtonProps {
+  label: string;
+  iconName: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  ref?: React.Ref<HTMLButtonElement>;
 }

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -1,64 +1,64 @@
-.ff-icon-radio-group {
-  width: 237px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  gap: 47px;
-  position: relative;
-}
-
-.ff-icon-radio-button {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  position: relative;
-  z-index: 5;
-
-  &.selected {
-    background-color: var(--brand-color);
-  }
-
-  &.disabled {
-    opacity: 50%;
-    cursor: not-allowed;
-  }
-
-  .icon-container {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid var(--border-color);
-    background: var(--drawer-footer-bg);
-    &:hover {
-      background: var(--border-color);
-    }
-
-    &.selected {
-      background-color: var(--brand-color);
-    }
-
-    .icon {
-      width: 14px;
-      height: 14px;
-    }
-  }
-}
-
-.line-connector {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--border-color);
-  z-index: 3;
-  border-radius: 2px 0px 0px 0px;
-  opacity: 0px;
-}
+.ff-icon-radio-group {
+  width: 237px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 47px;
+  position: relative;
+}
+
+.ff-icon-radio-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 5;
+
+  &.selected {
+    background-color: var(--brand-color);
+  }
+
+  &.disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+
+  .icon-container {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    background: var(--drawer-footer-bg);
+    &:hover {
+      background: var(--border-color);
+    }
+
+    &.selected {
+      background-color: var(--brand-color);
+    }
+
+    .icon {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+
+.line-connector {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--border-color);
+  z-index: 3;
+  border-radius: 2px 0px 0px 0px;
+  opacity: 0px;
+}

package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx

@@ -1,108 +1,108 @@
-import { Meta, StoryObj } from '@storybook/react';
-import IconRadioGroup from './IconRadioGroup';
-import { useState } from 'react';
-
-const meta: Meta<typeof IconRadioGroup> = {
-  title: 'Components/IconRadioGroup',
-  component: IconRadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof IconRadioGroup>;
-
-export const Default: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        iconName: 'no_access_icon',
-        iconLabel: 'No Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'view_access_icon',
-        iconLabel: 'View Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'edit',
-        iconLabel: 'Edit Access',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'full_access_icon',
-        iconLabel: 'Full Access',
-        disabled: false,
-        disableMessage: '',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<string | null>(null);
-
-    const handleOptionChange = (selected: string | null) => {
-      setSelectedOption(selected);
-    };
-
-    return (
-      <IconRadioGroup
-        items={radioOptions}
-        onButtonClick={(selectedItem) => console.log('Selected:', selectedItem)}
-        onChange={handleOptionChange}
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithDisabledOption: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        iconName: 'no_access_icon',
-        iconLabel: 'No Access',
-        disabled: true,
-        disableMessage: 'user dont have access',
-      },
-      {
-        iconName: 'view_access_icon',
-        iconLabel: 'View',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'edit',
-        iconLabel: 'Edit',
-        disabled: false,
-        disableMessage: '',
-      },
-      {
-        iconName: 'full_access_icon',
-        iconLabel: 'Full Access',
-        disabled: false,
-        disableMessage: '',
-      },
-    ];
-
-    const [selectedOption, setSelectedOption] = useState<string | null>(null);
-
-    const handleOptionChange = (selected: string | null) => {
-      setSelectedOption(selected);
-    };
-
-    return (
-      <IconRadioGroup
-        items={radioOptions}
-        onButtonClick={() => {}}
-        onChange={handleOptionChange}
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import IconRadioGroup from './IconRadioGroup';
+import { useState } from 'react';
+
+const meta: Meta<typeof IconRadioGroup> = {
+  title: 'Components/IconRadioGroup',
+  component: IconRadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconRadioGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View Access',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit Access',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={(selectedItem) => console.log('Selected:', selectedItem)}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithDisabledOption: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        iconName: 'no_access_icon',
+        iconLabel: 'No Access',
+        disabled: true,
+        disableMessage: 'user dont have access',
+      },
+      {
+        iconName: 'view_access_icon',
+        iconLabel: 'View',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'edit',
+        iconLabel: 'Edit',
+        disabled: false,
+        disableMessage: '',
+      },
+      {
+        iconName: 'full_access_icon',
+        iconLabel: 'Full Access',
+        disabled: false,
+        disableMessage: '',
+      },
+    ];
+
+    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+
+    const handleOptionChange = (selected: string | null) => {
+      setSelectedOption(selected);
+    };
+
+    return (
+      <IconRadioGroup
+        items={radioOptions}
+        onButtonClick={() => {}}
+        onChange={handleOptionChange}
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export default meta;