pixel-react 1.8.1 → 1.8.3

package/src/components/Button/types.ts

@@ -1,90 +1,90 @@
-import { ReactNode } from 'react';
-import { DynamicObj } from '../CreateVariable/types';
-
-export interface ButtonProps {
-  /**
-   * Variant of the button
-   */
-  variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label?: string;
-  /**
-   * Type of the button
-   */
-
-  type?: 'button' | 'submit';
-
-  disabled?: boolean;
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /**
-   * Button content
-   */
-  children?: ReactNode;
-  /**
-   * Button id
-   */
-  id?: string;
-  /**
-   * onSubmit function handler
-   */
-  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /**
-   * react ref for the button
-   */
-  ref?: any;
-  /**
-   * Classname for the button
-   */
-  className?: string;
-  /**
-   * Additional styles for the button
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Give icon name availble in storybook that to be on left side of button
-   */
-  iconName?: string;
-  /**
-   * Give icon name availble in storybook that to be on left side of button
-   */
-  iconPosition?: 'left' | 'right';
-  transparentBackground?: boolean;
-  /**
-   * form to accept form id in string
-   */
-  form?: string;
-
-  /**
-   * Is the Type ChooseFile for the button
-   */
-  isChooseFile?: boolean;
-
-  /**
-   * Custom Width for the button
-   */
-  buttonWidth?: string;
-
-  /**
-   * selectedfile object will be send.
-   */
-  selectedFile?: File | DynamicObj | null;
-
-  /**
-   * handleCloseIcon function will set to the initial state .
-   */
-  handleCloseIcon?: () => void;
-}
+import { ReactNode } from 'react';
+import { DynamicObj } from '../CreateVariable/types';
+
+export interface ButtonProps {
+  /**
+   * Variant of the button
+   */
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label?: string;
+  /**
+   * Type of the button
+   */
+
+  type?: 'button' | 'submit';
+
+  disabled?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * onSubmit function handler
+   */
+  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * react ref for the button
+   */
+  ref?: any;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconName?: string;
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconPosition?: 'left' | 'right';
+  transparentBackground?: boolean;
+  /**
+   * form to accept form id in string
+   */
+  form?: string;
+
+  /**
+   * Is the Type ChooseFile for the button
+   */
+  isChooseFile?: boolean;
+
+  /**
+   * Custom Width for the button
+   */
+  buttonWidth?: string;
+
+  /**
+   * selectedfile object will be send.
+   */
+  selectedFile?: File | DynamicObj | null;
+
+  /**
+   * handleCloseIcon function will set to the initial state .
+   */
+  handleCloseIcon?: () => void;
+}

package/src/components/Charts/BarChart/BarChart.scss

@@ -1,69 +1,69 @@
-@use '../../../assets/styles/fonts';
-.ff-bar-chart-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  svg {
-    display: block;
-  }
-
-  .ff-legend-container {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    padding-right: 10px;
-    .ff-bar-chart-legend {
-      width: 290px;
-      margin-top: 10px;
-      display: flex;
-      justify-content: flex-end;
-
-      .ff-bar-chart-legend-item {
-        display: flex;
-        align-items: center;
-
-        .ff-bar-chart-legend-item-circle {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          margin-right: 5px;
-          border-radius: 50%;
-        }
-      }
-
-      .ff-legend-label {
-        margin-left: 5px;
-      }
-    }
-  }
-  .ff-bar-chart-icon {
-    position: absolute;
-    pointer-events: none;
-    width: 24px;
-    height: 24px;
-  }
-
-  .ff-bar-chart-icon-wrapper {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .ff-bar-chart-labels {
-    @extend .fontSm;
-    font-weight: 400;
-    color: var(--text-color);
-  }
-  .ff-bar-chart-tooltip {
-    position: absolute;
-    padding: 5px 10px;
-    background-color: var(--tooltip-bg-color);
-    color: var(--primary-icon-color);
-    border-radius: 4px;
-    pointer-events: none;
-    @extend .fontSm;
-    font-weight: 600;
-  }
-}
+@use '../../../assets/styles/fonts';
+.ff-bar-chart-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  svg {
+    display: block;
+  }
+
+  .ff-legend-container {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 10px;
+    .ff-bar-chart-legend {
+      width: 290px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: flex-end;
+
+      .ff-bar-chart-legend-item {
+        display: flex;
+        align-items: center;
+
+        .ff-bar-chart-legend-item-circle {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          margin-right: 5px;
+          border-radius: 50%;
+        }
+      }
+
+      .ff-legend-label {
+        margin-left: 5px;
+      }
+    }
+  }
+  .ff-bar-chart-icon {
+    position: absolute;
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+  }
+
+  .ff-bar-chart-icon-wrapper {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .ff-bar-chart-labels {
+    @extend .fontSm;
+    font-weight: 400;
+    color: var(--text-color);
+  }
+  .ff-bar-chart-tooltip {
+    position: absolute;
+    padding: 5px 10px;
+    background-color: var(--tooltip-bg-color);
+    color: var(--primary-icon-color);
+    border-radius: 4px;
+    pointer-events: none;
+    @extend .fontSm;
+    font-weight: 600;
+  }
+}

package/src/components/Charts/BarChart/BarChart.stories.tsx

@@ -1,70 +1,70 @@
-import { Meta, StoryObj } from '@storybook/react';
-import BarChart from './BarChart';
-
-const meta: Meta<typeof BarChart> = {
-  title: 'Components/BarChart',
-  component: BarChart,
-  parameters: {
-    layout: 'bottom',
-  },
-  argTypes: {
-    barWidth: { control: 'number' },
-    height: { control: 'number' },
-    data: { control: 'object' },
-    colors: { control: 'object' },
-    xAxisLabel: { control: 'text' },
-    yAxisLabel: { control: 'text' },
-    barGap: { control: 'number' },
-    barBorderRadius: { control: 'number' },
-    legend: { control: 'boolean' },
-    showXAxisLabels: { control: 'boolean' },
-    iconSize: { control: 'number' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof BarChart>;
-
-export const BarChartDashboard: Story = {
-  args: {
-    data: [
-      { label: 'FireFox', value: 10 },
-      { label: 'Edge', value: 20 },
-      { label: 'Chrome', value: 25 },
-      { label: 'Safari', value: 10 },
-      { label: 'IE', value: 1 },
-      { label: 'Opera', value: 15 },
-    ],
-    barWidth: 20,
-    height: 250,
-    colors: [
-      ['#FFC300', '#FF5733'],
-      ['#01D34F', '#013E7C'],
-      ['#FFC107', '#E4AD09'],
-      ['#5FC2F5', '#3061C5'],
-      ['#00BBEF', '#0FA2CB'],
-      ['#9C0000', '#9C0000'],
-    ],
-
-    xAxisLabel: 'Status',
-    yAxisLabel: 'Count',
-    padding: 30,
-    barGap: 40,
-    barBorderRadius: 0,
-    legend: false,
-    showXAxisLabels: true,
-    legendPosition: 'top',
-    icons: [
-      'fire_fox',
-      'edge',
-      'chrome_icon',
-      'safari_icon',
-      'internet_explorer',
-      'opera',
-    ],
-    iconSize: 20,
-    onSelectedBar: (label) => {
-      console.log(label);
-    },
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import BarChart from './BarChart';
+
+const meta: Meta<typeof BarChart> = {
+  title: 'Components/BarChart',
+  component: BarChart,
+  parameters: {
+    layout: 'bottom',
+  },
+  argTypes: {
+    barWidth: { control: 'number' },
+    height: { control: 'number' },
+    data: { control: 'object' },
+    colors: { control: 'object' },
+    xAxisLabel: { control: 'text' },
+    yAxisLabel: { control: 'text' },
+    barGap: { control: 'number' },
+    barBorderRadius: { control: 'number' },
+    legend: { control: 'boolean' },
+    showXAxisLabels: { control: 'boolean' },
+    iconSize: { control: 'number' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BarChart>;
+
+export const BarChartDashboard: Story = {
+  args: {
+    data: [
+      { label: 'FireFox', value: 10 },
+      { label: 'Edge', value: 20 },
+      { label: 'Chrome', value: 25 },
+      { label: 'Safari', value: 10 },
+      { label: 'IE', value: 1 },
+      { label: 'Opera', value: 15 },
+    ],
+    barWidth: 20,
+    height: 250,
+    colors: [
+      ['#FFC300', '#FF5733'],
+      ['#01D34F', '#013E7C'],
+      ['#FFC107', '#E4AD09'],
+      ['#5FC2F5', '#3061C5'],
+      ['#00BBEF', '#0FA2CB'],
+      ['#9C0000', '#9C0000'],
+    ],
+
+    xAxisLabel: 'Status',
+    yAxisLabel: 'Count',
+    padding: 30,
+    barGap: 40,
+    barBorderRadius: 0,
+    legend: false,
+    showXAxisLabels: true,
+    legendPosition: 'top',
+    icons: [
+      'fire_fox',
+      'edge',
+      'chrome_icon',
+      'safari_icon',
+      'internet_explorer',
+      'opera',
+    ],
+    iconSize: 20,
+    onSelectedBar: (label) => {
+      console.log(label);
+    },
+  },
+};