pixel-react 1.8.0 → 1.8.1

package/src/components/Checkbox/Checkbox.scss

@@ -1,148 +1,148 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-checkbox--overlay {
-  @include mixins.center-content();
-  cursor: pointer;
-  position: relative;
-
-  .ff-checkbox-input {
-    display: none;
-  }
-
-  .ff-checkbox-custom {
-    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
-    box-sizing: border-box;
-    border-radius: 2px;
-    margin-right: 4px;
-    background-color: var(--checkbox-bg-color);
-    position: relative;
-    @include mixins.center-content;
-    @include mixins.transition(border-color, background-color);
-    .ff-tick-icon {
-      padding: 2px !important; // I used important because icon component have some issue with padding because of that
-    }
-    &::before {
-      content: '';
-      width: 9px;
-      height: 2px;
-      background-color: var(--checkbox-partial-color);
-      border-radius: 2px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(180deg);
-      opacity: 0;
-      @include mixins.transition(border-color, background-color);
-    }
-
-    &::after {
-      content: '';
-      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
-      border-radius: 4px;
-      position: absolute;
-      opacity: 0;
-      background-color: var(--checkbox-hover-color);
-      z-index: -1;
-      @include mixins.transition(border-color, background-color);
-    }
-    &:hover {
-      border-color: var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  .ff-checkbox-input:checked + .ff-checkbox-custom {
-    background: var(--brand-color);
-    border-color: var(--brand-color);
-    &.ff-checkbox-checked {
-      &--passed {
-        background-color: var(--ff-card-passed-status-bg-color);
-        border-color: var(--ff-card-passed-status-bg-color);
-      }
-      &--failed {
-        background-color: var(--ff-card-failed-status-bg-color);
-        border-color: var(--ff-card-failed-status-bg-color);
-      }
-      &--warning {
-        background-color: var(--ff-card-warning-status-bg-color);
-        border-color: var(--ff-card-warning-status-bg-color);
-      }
-      &--skipped {
-        background-color: var(--ff-card-skipped-status-bg-color);
-        border-color: var(--ff-card-skipped-status-bg-color);
-      }
-      &--flaky {
-        background-color: var(-- ff-card-flaky-status-bg-color);
-        border-color: var(-- ff-card-flaky-status-bg-color);
-      }
-    }
-  }
-
-  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
-    background: var(--brand-color);
-    &.ff-checkbox-checked {
-      &--passed {
-        background: var(--ff-card-passed-status-bg-color);
-      }
-      &--failed {
-        background: var(--ff-card-failed-status-bg-color);
-      }
-      &--warning {
-        background: var(--ff-card-warning-status-bg-color);
-      }
-      &--skipped {
-        background: var(--ff-card-skipped-status-bg-color);
-      }
-      &--flaky {
-        background: var(-- ff-card-flaky-status-bg-color);
-      }
-    }
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  .ff-checkbox-input:disabled + .ff-checkbox-custom {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border: 1px solid var(--checkbox-border-color);
-    &::after {
-      opacity: 0;
-    }
-  }
-  .ff-storybook-checkbox--partial {
-    background-color: var(--brand-color);
-    border: none;
-    &::before {
-      opacity: 1;
-    }
-
-    &:hover {
-      background-color: var(--brand-color);
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  .ff-checkbox {
-    &--passed {
-      border-color: var(--ff-card-passed-status-bg-color);
-    }
-    &--failed {
-      border-color: var(--ff-card-failed-status-bg-color);
-    }
-    &--warning {
-      border-color: var(--ff-card-warning-status-bg-color);
-    }
-    &--skipped {
-      border-color: var(--ff-card-skipped-status-bg-color);
-    }
-    &--flaky {
-      border-color: var(-- ff-card-flaky-status-bg-color);
-    }
-  }
-}
+@use '../../assets/styles/fonts';
+@use '../../assets/styles/mixins';
+
+.ff-checkbox--overlay {
+  @include mixins.center-content();
+  cursor: pointer;
+  position: relative;
+
+  .ff-checkbox-input {
+    display: none;
+  }
+
+  .ff-checkbox-custom {
+    @include mixins.box(16px, 1px solid var(--checkbox-border-color));
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin-right: 4px;
+    background-color: var(--checkbox-bg-color);
+    position: relative;
+    @include mixins.center-content;
+    @include mixins.transition(border-color, background-color);
+    .ff-tick-icon {
+      padding: 2px !important; // I used important because icon component have some issue with padding because of that
+    }
+    &::before {
+      content: '';
+      width: 9px;
+      height: 2px;
+      background-color: var(--checkbox-partial-color);
+      border-radius: 2px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(180deg);
+      opacity: 0;
+      @include mixins.transition(border-color, background-color);
+    }
+
+    &::after {
+      content: '';
+      @include mixins.box(16px, 4px solid var(--checkbox-hover-color));
+      border-radius: 4px;
+      position: absolute;
+      opacity: 0;
+      background-color: var(--checkbox-hover-color);
+      z-index: -1;
+      @include mixins.transition(border-color, background-color);
+    }
+    &:hover {
+      border-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  .ff-checkbox-input:checked + .ff-checkbox-custom {
+    background: var(--brand-color);
+    border-color: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background-color: var(--ff-card-passed-status-bg-color);
+        border-color: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background-color: var(--ff-card-failed-status-bg-color);
+        border-color: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background-color: var(--ff-card-warning-status-bg-color);
+        border-color: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background-color: var(--ff-card-skipped-status-bg-color);
+        border-color: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background-color: var(-- ff-card-flaky-status-bg-color);
+        border-color: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
+  }
+
+  .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
+    background: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  .ff-checkbox-input:disabled + .ff-checkbox-custom {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border: 1px solid var(--checkbox-border-color);
+    &::after {
+      opacity: 0;
+    }
+  }
+  .ff-storybook-checkbox--partial {
+    background-color: var(--brand-color);
+    border: none;
+    &::before {
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--brand-color);
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  .ff-checkbox {
+    &--passed {
+      border-color: var(--ff-card-passed-status-bg-color);
+    }
+    &--failed {
+      border-color: var(--ff-card-failed-status-bg-color);
+    }
+    &--warning {
+      border-color: var(--ff-card-warning-status-bg-color);
+    }
+    &--skipped {
+      border-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &--flaky {
+      border-color: var(-- ff-card-flaky-status-bg-color);
+    }
+  }
+}

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,78 +1,78 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
-import { useState } from 'react';
-import React from 'react';
-
-const meta: Meta<typeof Checkbox> = {
-  component: Checkbox,
-  title: 'Components/Checkbox',
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(true); // Default starts as checked
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <Checkbox
-        label="Default Checkbox"
-        id="default-checkbox"
-        name="default"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const Partial: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(true); // Default starts as checked
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <Checkbox
-        label="Partial Checkbox"
-        id="partial-checkbox"
-        name="partial"
-        partial={true}
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked(event.target.checked);
-    };
-
-    return (
-      <Checkbox
-        label={checked ? 'Checked! Click to uncheck.' : 'Click here to check.'}
-        id="controlled-checkbox"
-        name="controlled"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+import { useState } from 'react';
+import React from 'react';
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  title: 'Components/Checkbox',
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true); // Default starts as checked
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
+    };
+
+    return (
+      <Checkbox
+        label="Default Checkbox"
+        id="default-checkbox"
+        name="default"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const Partial: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true); // Default starts as checked
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
+    };
+
+    return (
+      <Checkbox
+        label="Partial Checkbox"
+        id="partial-checkbox"
+        name="partial"
+        partial={true}
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
+    };
+
+    return (
+      <Checkbox
+        label={checked ? 'Checked! Click to uncheck.' : 'Click here to check.'}
+        id="controlled-checkbox"
+        name="controlled"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -1,57 +1,57 @@
-import React, { useEffect, useState } from 'react';
-import './Checkbox.scss';
-import classNames from 'classnames';
-import Icon from '../Icon';
-import { CheckboxProps } from './types';
-import '../../assets/styles/_colors.scss';
-import Typography from '../Typography';
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  id,
-  name,
-  label,
-  disabled = false,
-  checked: initialChecked = false,
-  partial = false,
-  onChange,
-  variant,
-}) => {
-  const [checked, setChecked] = useState(initialChecked);
-
-  useEffect(() => {
-    setChecked(initialChecked);
-  }, [initialChecked]);
-
-  return (
-    <label className="ff-checkbox--overlay" htmlFor={id}>
-      <input
-        type="checkbox"
-        className="ff-checkbox-input"
-        id={id}
-        name={name}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
-      <span
-        className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked,
-          'ff-storybook-checkbox--partial': partial && !checked,
-          [`ff-checkbox--${variant}`]: variant,
-          [`ff-checkbox-checked--${variant}`]: checked && variant,
-        })}
-      >
-        {checked && (
-          <Icon
-            name="tick"
-            color="var(--primary-icon-color)"
-            className="ff-tick-icon"
-          />
-        )}
-      </span>
-      <Typography as="span">{label}</Typography>
-    </label>
-  );
-};
-
-export default Checkbox;
+import React, { useEffect, useState } from 'react';
+import './Checkbox.scss';
+import classNames from 'classnames';
+import Icon from '../Icon';
+import { CheckboxProps } from './types';
+import '../../assets/styles/_colors.scss';
+import Typography from '../Typography';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  name,
+  label,
+  disabled = false,
+  checked: initialChecked = false,
+  partial = false,
+  onChange,
+  variant,
+}) => {
+  const [checked, setChecked] = useState(initialChecked);
+
+  useEffect(() => {
+    setChecked(initialChecked);
+  }, [initialChecked]);
+
+  return (
+    <label className="ff-checkbox--overlay" htmlFor={id}>
+      <input
+        type="checkbox"
+        className="ff-checkbox-input"
+        id={id}
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+      />
+      <span
+        className={classNames('ff-checkbox-custom', {
+          'ff-checkbox-checked': checked,
+          'ff-storybook-checkbox--partial': partial && !checked,
+          [`ff-checkbox--${variant}`]: variant,
+          [`ff-checkbox-checked--${variant}`]: checked && variant,
+        })}
+      >
+        {checked && (
+          <Icon
+            name="tick"
+            color="var(--primary-icon-color)"
+            className="ff-tick-icon"
+          />
+        )}
+      </span>
+      <Typography as="span">{label}</Typography>
+    </label>
+  );
+};
+
+export default Checkbox;

package/src/components/Checkbox/types.ts

@@ -1,34 +1,34 @@
-export interface CheckboxProps {
-  /**
-   * Unique ID for the checkbox input
-   */
-  id?: string;
-  /**
-   * Name attribute for the checkbox input
-   */
-  name?: string;
-  /**
-   * Optional side label
-   */
-  label?: string;
-  /**
-   * Optional disable attribute
-   */
-  disabled?: boolean;
-  /**
-   * Optional checked attribute to prefill
-   */
-  checked?: boolean;
-  /**
-   * Optional onChange function
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * For partially checked checkbox
-   */
-  partial?: boolean;
-  /**
-   * For variant color
-   */
-  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
-}
+export interface CheckboxProps {
+  /**
+   * Unique ID for the checkbox input
+   */
+  id?: string;
+  /**
+   * Name attribute for the checkbox input
+   */
+  name?: string;
+  /**
+   * Optional side label
+   */
+  label?: string;
+  /**
+   * Optional disable attribute
+   */
+  disabled?: boolean;
+  /**
+   * Optional checked attribute to prefill
+   */
+  checked?: boolean;
+  /**
+   * Optional onChange function
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * For partially checked checkbox
+   */
+  partial?: boolean;
+  /**
+   * For variant color
+   */
+  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
+}