pixel-react 1.8.1 → 1.8.2

package/src/components/Toggle/Toggle.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import classNames from 'classnames';
-import { ToggleProps } from './types';
-import './Toggle.scss';
-import Icon from '../Icon';
-
-const Toggle: React.FC<ToggleProps> = ({
-  onChange,
-  variant = 'primary',
-  disabled,
-  checked = false,
-  id = 'toggle',
-  size = 'large',
-  icon,
-}) => {
-  const handleChange = (e: any) => {
-    if (onChange) {
-      onChange(e);
-    }
-  };
-
-  const baseIconSizes = {
-    large: 10,
-    medium: 8,
-    small: 6,
-  };
-
-  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
-
-  const defaultIcons = {
-    checked: {
-      name: 'check_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-    unchecked: {
-      name: 'wrong_mark',
-      width: defaultIconSize,
-      height: defaultIconSize,
-    },
-  };
-
-  const iconNames = {
-    checked: { ...defaultIcons.checked, ...icon?.checked },
-    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
-  };
-
-  return (
-    <div className="ff--switch-container">
-      <input
-        className="ff--switch-checkbox"
-        id={`ff-toggle-${id}`}
-        type="checkbox"
-        disabled={!!disabled}
-        onChange={handleChange}
-        checked={checked}
-      />
-      <label
-        className={classNames(
-          `ff--switch-label default--${size} ff--switch-label--${variant}`,
-          {
-            'ff--switch-label--disabled': disabled,
-          }
-        )}
-        htmlFor={`ff-toggle-${id}`}
-      >
-        <span
-          className={classNames(
-            `ff--switch-button ff--switch-button--${size}`,
-            {
-              checked: checked,
-            }
-          )}
-        >
-          {checked ? (
-            <Icon
-              name={iconNames.checked.name}
-              width={iconNames.checked.width}
-              height={iconNames.checked.height}
-              className={`ff-checked-icon--${variant}`}
-            />
-          ) : (
-            <Icon
-              name={iconNames.unchecked.name}
-              width={iconNames.unchecked.width}
-              height={iconNames.unchecked.height}
-              className={`ff-unchecked-icon--${variant}`}
-            />
-          )}
-        </span>
-      </label>
-    </div>
-  );
-};
-
-export default Toggle;
+import React from 'react';
+import classNames from 'classnames';
+import { ToggleProps } from './types';
+import './Toggle.scss';
+import Icon from '../Icon';
+
+const Toggle: React.FC<ToggleProps> = ({
+  onChange,
+  variant = 'primary',
+  disabled,
+  checked = false,
+  id = 'toggle',
+  size = 'large',
+  icon,
+}) => {
+  const handleChange = (e: any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const baseIconSizes = {
+    large: 10,
+    medium: 8,
+    small: 6,
+  };
+
+  const defaultIconSize = baseIconSizes[size as 'small' | 'medium' | 'large'];
+
+  const defaultIcons = {
+    checked: {
+      name: 'check_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+    unchecked: {
+      name: 'wrong_mark',
+      width: defaultIconSize,
+      height: defaultIconSize,
+    },
+  };
+
+  const iconNames = {
+    checked: { ...defaultIcons.checked, ...icon?.checked },
+    unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
+  };
+
+  return (
+    <div className="ff--switch-container">
+      <input
+        className="ff--switch-checkbox"
+        id={`ff-toggle-${id}`}
+        type="checkbox"
+        disabled={!!disabled}
+        onChange={handleChange}
+        checked={checked}
+      />
+      <label
+        className={classNames(
+          `ff--switch-label default--${size} ff--switch-label--${variant}`,
+          {
+            'ff--switch-label--disabled': disabled,
+          }
+        )}
+        htmlFor={`ff-toggle-${id}`}
+      >
+        <span
+          className={classNames(
+            `ff--switch-button ff--switch-button--${size}`,
+            {
+              checked: checked,
+            }
+          )}
+        >
+          {checked ? (
+            <Icon
+              name={iconNames.checked.name}
+              width={iconNames.checked.width}
+              height={iconNames.checked.height}
+              className={`ff-checked-icon--${variant}`}
+            />
+          ) : (
+            <Icon
+              name={iconNames.unchecked.name}
+              width={iconNames.unchecked.width}
+              height={iconNames.unchecked.height}
+              className={`ff-unchecked-icon--${variant}`}
+            />
+          )}
+        </span>
+      </label>
+    </div>
+  );
+};
+
+export default Toggle;

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/types.ts

@@ -1,43 +1,43 @@
-export interface ToggleProps {
-  /**
-   * Optional onChange handler
-   */
-  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
-  /**
-   * Optional disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Optional checked state
-   */
-  checked?: boolean;
-  /**
-   * Optional id
-   */
-  id?: string;
-  /**
-   * What background color to occur upon toggled
-   */
-  variant?: 'primary' | 'secondary';
-
-  /**
-   * Defines the size of the toggle
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
-   *
-   * @property checked - Icon configuration for the checked state.
-   * @property unchecked - Icon configuration for the unchecked state.
-   *
-   * @example
-   * {
-   *   checked: { name: 'checked-icon', width: 24, height: 24 },
-   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
-   * }
-   */
-  icon?: {
-    checked?: { name: string; width: number; height: number };
-    unchecked?: { name: string; width: number; height: number };
-  };
-}
+export interface ToggleProps {
+  /**
+   * Optional onChange handler
+   */
+  onChange?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked state
+   */
+  checked?: boolean;
+  /**
+   * Optional id
+   */
+  id?: string;
+  /**
+   * What background color to occur upon toggled
+   */
+  variant?: 'primary' | 'secondary';
+
+  /**
+   * Defines the size of the toggle
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Optional icon configuration for the toggle. This allows for custom icons to be used for both the checked and unchecked states.
+   *
+   * @property checked - Icon configuration for the checked state.
+   * @property unchecked - Icon configuration for the unchecked state.
+   *
+   * @example
+   * {
+   *   checked: { name: 'checked-icon', width: 24, height: 24 },
+   *   unchecked: { name: 'unchecked-icon', width: 24, height: 24 }
+   * }
+   */
+  icon?: {
+    checked?: { name: string; width: number; height: number };
+    unchecked?: { name: string; width: number; height: number };
+  };
+}

package/src/components/ToggleSwitch/ToggleSwitch.scss

@@ -1,59 +1,59 @@
-/* Container Styling */
-.toggle-container {
-    display: flex;
-    background-color: var(--base-bg-color);
-    height: 24px;
-    border-radius: 6px;
-    padding: 4px 2px;
-    overflow: hidden;
-    width: fit-content;
-    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
-    inset -1px -1px 2px var(--base-bg-color),
-    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
-    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-  }
-  
-  /* Button Styling */
-  .toggle-button {
-    padding: 4px 2px;
-    font-size: 10px;
-    font-weight: 500;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    background-color: var(--base-bg-color);
-    color: var(--ff-toggle-switch-off-color);
-    outline: none;
-    transition: all 0.3s ease;
-    min-width: 24px;
-    height: 20px;
-    text-align: center;
-    box-shadow: 
-    inset 1px 1px 2px 0 var(--base-bg-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    1px -1px 2px 0 var(--ff-chips-blur-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color)
-  }
-  
-  /* Active Button */
-  .toggle-button.active {
-    background-color: var(--ff-line-number-bg);
-    color: var(--base-bg-color);
-    box-shadow: 
-    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
-    1px 1px 3px 0 var(--ff-chips-blur-color),
-    -1px -1px 2px 0 var(--base-bg-color),
-    -1px 1px 2px 0 var(--ff-chips-blur-color);
-  }
-  
-  /* Button Hover Effect */
-  .toggle-button:hover {
-    background-color: var(--hover-color);
-    color: var(--brand-color);
-  }
-  
+/* Container Styling */
+.toggle-container {
+    display: flex;
+    background-color: var(--base-bg-color);
+    height: 24px;
+    border-radius: 6px;
+    padding: 4px 2px;
+    overflow: hidden;
+    width: fit-content;
+    box-shadow: 1px 1px 2px 0px var(--base-bg-color),
+    inset -1px -1px 2px var(--base-bg-color),
+    inset 1px -1px 2px var(--ff-toggle-switch-shadow-color),
+    inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+  
+  /* Button Styling */
+  .toggle-button {
+    padding: 4px 2px;
+    font-size: 10px;
+    font-weight: 500;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: var(--base-bg-color);
+    color: var(--ff-toggle-switch-off-color);
+    outline: none;
+    transition: all 0.3s ease;
+    min-width: 24px;
+    height: 20px;
+    text-align: center;
+    box-shadow: 
+    inset 1px 1px 2px 0 var(--base-bg-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    1px -1px 2px 0 var(--ff-chips-blur-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color)
+  }
+  
+  /* Active Button */
+  .toggle-button.active {
+    background-color: var(--ff-line-number-bg);
+    color: var(--base-bg-color);
+    box-shadow: 
+    inset -1px -1px 2px 0 var(--ff-chips-blur-color),
+    1px 1px 3px 0 var(--ff-chips-blur-color),
+    -1px -1px 2px 0 var(--base-bg-color),
+    -1px 1px 2px 0 var(--ff-chips-blur-color);
+  }
+  
+  /* Button Hover Effect */
+  .toggle-button:hover {
+    background-color: var(--hover-color);
+    color: var(--brand-color);
+  }
+  
   

package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -1,52 +1,52 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import ToggleSwitch from "./ToggleSwitch";
-import React, { useState } from "react";
-
-
-const meta: Meta<typeof ToggleSwitch> = {
-  title: "Components/ToggleSwitch",
-  component: ToggleSwitch,
-  tags: ["autodocs"],
-  argTypes: {
-    selected: {
-      control: { type: "radio" }, 
-      options: ["Automation", "Manual"],
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ToggleSwitch>;
-
-export const Default: Story = {
-  args: {
-    selected: "Automation", 
-    firstButton: "Automation",
-    secondButton: "Manual",
-    handleClick: () => {},
-  },
-};
-
-export const Switch: Story = {
-  render: () => {
-    const ToggleSwitchWrapper = () => {
-      const [selected, setSelected] = useState<string>("Automation");
-
-      const handleChange = (selectedSwitch: string) => {
-        setSelected(selectedSwitch);
-      };
-
-      return (
-        <ToggleSwitch
-          selected={selected}
-          firstButton="Automation"
-          secondButton="Manual"
-          handleClick={handleChange}
-        />
-      );
-    };
-
-    return <ToggleSwitchWrapper />;
-  },
-};
+import type { Meta, StoryObj } from "@storybook/react";
+import ToggleSwitch from "./ToggleSwitch";
+import React, { useState } from "react";
+
+
+const meta: Meta<typeof ToggleSwitch> = {
+  title: "Components/ToggleSwitch",
+  component: ToggleSwitch,
+  tags: ["autodocs"],
+  argTypes: {
+    selected: {
+      control: { type: "radio" }, 
+      options: ["Automation", "Manual"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleSwitch>;
+
+export const Default: Story = {
+  args: {
+    selected: "Automation", 
+    firstButton: "Automation",
+    secondButton: "Manual",
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const ToggleSwitchWrapper = () => {
+      const [selected, setSelected] = useState<string>("Automation");
+
+      const handleChange = (selectedSwitch: string) => {
+        setSelected(selectedSwitch);
+      };
+
+      return (
+        <ToggleSwitch
+          selected={selected}
+          firstButton="Automation"
+          secondButton="Manual"
+          handleClick={handleChange}
+        />
+      );
+    };
+
+    return <ToggleSwitchWrapper />;
+  },
+};

package/src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -1,30 +1,30 @@
-import React, { type JSX } from "react";
-import "./ToggleSwitch.scss";
-
-interface ToggleSwitchProps {
-  firstButton:string,
-  secondButton:string,
-  handleClick:(selected:string)=>void,
-  selected:string
-}
-
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ selected = "text",firstButton='File',secondButton='File',handleClick}):JSX.Element => {
-  return (
-    <div className="toggle-container">
-      <button
-        className={`toggle-button ${selected === firstButton ? "active" : ""}`}
-        onClick={() => handleClick(firstButton)}
-      >
-        {firstButton}
-      </button>
-      <button
-        className={`toggle-button ${selected === secondButton ? "active" : ""}`}
-        onClick={() => handleClick(secondButton)}
-      >
-        {secondButton}
-      </button>
-    </div>
-  );
-};
-
-export default ToggleSwitch;
+import React, { type JSX } from "react";
+import "./ToggleSwitch.scss";
+
+interface ToggleSwitchProps {
+  firstButton:string,
+  secondButton:string,
+  handleClick:(selected:string)=>void,
+  selected:string
+}
+
+const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ selected = "text",firstButton='File',secondButton='File',handleClick}):JSX.Element => {
+  return (
+    <div className="toggle-container">
+      <button
+        className={`toggle-button ${selected === firstButton ? "active" : ""}`}
+        onClick={() => handleClick(firstButton)}
+      >
+        {firstButton}
+      </button>
+      <button
+        className={`toggle-button ${selected === secondButton ? "active" : ""}`}
+        onClick={() => handleClick(secondButton)}
+      >
+        {secondButton}
+      </button>
+    </div>
+  );
+};
+
+export default ToggleSwitch;

package/src/components/ToggleSwitch/index.ts

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

package/src/components/Tooltip/Tooltip.scss

@@ -1,27 +1,27 @@
-@use '../../assets/styles/fonts';
-
-.ff-tooltip-container {
-  cursor: pointer;
-  display: inline-block;
-}
-
-.ff-tooltip {
-  @extend .fontSm;
-  position: fixed;
-  width: max-content;
-  max-width: 60vw;
-  word-wrap: break-word;
-  background-color: var(--tooltip-bg-color);
-  line-height: 18px;
-  color: var(--tooltip-text-color);
-  text-align: center;
-  border-radius: 5px;
-  padding: 4px 8px;
-  opacity: 0;
-  z-index: 10000;
-
-  &--visible {
-    opacity: 1;
-    transition: opacity 0.3s;
-  }
-}
+@use '../../assets/styles/fonts';
+
+.ff-tooltip-container {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.ff-tooltip {
+  @extend .fontSm;
+  position: fixed;
+  width: max-content;
+  max-width: 60vw;
+  word-wrap: break-word;
+  background-color: var(--tooltip-bg-color);
+  line-height: 18px;
+  color: var(--tooltip-text-color);
+  text-align: center;
+  border-radius: 5px;
+  padding: 4px 8px;
+  opacity: 0;
+  z-index: 10000;
+
+  &--visible {
+    opacity: 1;
+    transition: opacity 0.3s;
+  }
+}