pixel-react 1.8.1 → 1.8.3

package/src/components/Toggle/Toggle.scss

@@ -1,133 +1,133 @@
-@use "sass:map";
-$switch-sizes: (
-  small: (
-    button-size: 16px,
-    container-width: 24px,
-    container-height: 10px,
-    translate-x: 10px,
-  ),
-  medium: (
-    button-size: 20px,
-    container-width: 32px,
-    container-height: 14px,
-    translate-x: 14px,
-  ),
-  large: (
-    button-size: 24px,
-    container-width: 40px,
-    container-height: 16px,
-    translate-x: 16px,
-  ),
-);
-
-@mixin switch-size($size) {
-  $button-size: map.get(map.get($switch-sizes, $size), button-size);
-  $container-width: map.get(map.get($switch-sizes, $size), container-width);
-  $container-height: map.get(map.get($switch-sizes, $size), container-height);
-  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
-
-  width: $container-width;
-  height: $container-height;
-
-  .ff--switch-button {
-    width: $button-size;
-    height: $button-size;
-    transform: translateX(0);
-    &.checked {
-      transform: translateX($translate-x);
-    }
-  }
-}
-
-.ff--switch-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-
-  .ff--switch-checkbox {
-    height: 0;
-    width: 0;
-    display: none;
-
-    &:checked {
-      + .ff--switch-label {
-        .ff--switch-button {
-          right: -1px;
-          border: 1px solid var(--brand-color);
-          background: var(--toggle-button-bg-color);
-          transition: all 0.3s;
-          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-          .ff-checked-icon--primary {
-            svg {
-              path {
-                fill: var(--brand-color);
-              }
-            }
-          }
-        }
-
-        &--primary {
-          background: var(--brand-color);
-          transition: all 0.3s;
-        }
-
-        &:disabled {
-          cursor: default;
-          color: var(--disable-color);
-          background: var(--disable-color);
-        }
-      }
-    }
-    &:disabled {
-      cursor: no-drop;
-    }
-  }
-
-  .ff--switch-label {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    border-radius: 8px;
-    position: relative;
-    background: var(--toggle-strip-color);
-    transition: all 0.3s;
-
-    &--disabled {
-      opacity: 0.5;
-      cursor: no-drop;
-    }
-
-    .ff--switch-button {
-      position: absolute;
-      left: 0;
-      border: 1px solid var(--toggle-strip-color);
-      display: flex;
-      background: var(--toggle-button-bg-color);
-      border-radius: 50%;
-      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
-      transition: all 0.3s;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-
-      .ff-unchecked-icon--primary {
-        svg {
-          path {
-            fill: var(--toggle-disable-icon-color);
-          }
-        }
-      }
-    }
-  }
-
-  .default--small {
-    @include switch-size(small);
-  }
-  .default--medium {
-    @include switch-size(medium);
-  }
-  .default--large {
-    @include switch-size(large);
-  }
-}
+@use "sass:map";
+$switch-sizes: (
+  small: (
+    button-size: 16px,
+    container-width: 24px,
+    container-height: 10px,
+    translate-x: 10px,
+  ),
+  medium: (
+    button-size: 20px,
+    container-width: 32px,
+    container-height: 14px,
+    translate-x: 14px,
+  ),
+  large: (
+    button-size: 24px,
+    container-width: 40px,
+    container-height: 16px,
+    translate-x: 16px,
+  ),
+);
+
+@mixin switch-size($size) {
+  $button-size: map.get(map.get($switch-sizes, $size), button-size);
+  $container-width: map.get(map.get($switch-sizes, $size), container-width);
+  $container-height: map.get(map.get($switch-sizes, $size), container-height);
+  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
+
+  width: $container-width;
+  height: $container-height;
+
+  .ff--switch-button {
+    width: $button-size;
+    height: $button-size;
+    transform: translateX(0);
+    &.checked {
+      transform: translateX($translate-x);
+    }
+  }
+}
+
+.ff--switch-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .ff--switch-checkbox {
+    height: 0;
+    width: 0;
+    display: none;
+
+    &:checked {
+      + .ff--switch-label {
+        .ff--switch-button {
+          right: -1px;
+          border: 1px solid var(--brand-color);
+          background: var(--toggle-button-bg-color);
+          transition: all 0.3s;
+          box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+          .ff-checked-icon--primary {
+            svg {
+              path {
+                fill: var(--brand-color);
+              }
+            }
+          }
+        }
+
+        &--primary {
+          background: var(--brand-color);
+          transition: all 0.3s;
+        }
+
+        &:disabled {
+          cursor: default;
+          color: var(--disable-color);
+          background: var(--disable-color);
+        }
+      }
+    }
+    &:disabled {
+      cursor: no-drop;
+    }
+  }
+
+  .ff--switch-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    border-radius: 8px;
+    position: relative;
+    background: var(--toggle-strip-color);
+    transition: all 0.3s;
+
+    &--disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+
+    .ff--switch-button {
+      position: absolute;
+      left: 0;
+      border: 1px solid var(--toggle-strip-color);
+      display: flex;
+      background: var(--toggle-button-bg-color);
+      border-radius: 50%;
+      box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);
+      transition: all 0.3s;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+
+      .ff-unchecked-icon--primary {
+        svg {
+          path {
+            fill: var(--toggle-disable-icon-color);
+          }
+        }
+      }
+    }
+  }
+
+  .default--small {
+    @include switch-size(small);
+  }
+  .default--medium {
+    @include switch-size(medium);
+  }
+  .default--large {
+    @include switch-size(large);
+  }
+}

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,132 +1,132 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import Toggle from './Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'Components/Toggle',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    onChange: { action: 'changed' },
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-    id: { control: 'text' },
-    size: {
-      control: {
-        type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    checked: false,
-    id: 'toggle1',
-    size: 'large',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-    id: 'toggle2',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    ...Default.args,
-    checked: true,
-    id: 'toggle3',
-  },
-};
-
-export const SmallSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle4"
-        size="small"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const MediumSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle5"
-        size="medium"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
-
-export const DynamicIconAndSize: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle7"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-        icon={{
-          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
-          unchecked: { name: 'sun_icon', width: 14, height: 14 },
-        }}
-      />
-    );
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-    const handleChange = (
-      e: React.MouseEvent<HTMLInputElement, MouseEvent>
-    ) => {
-      setChecked((e.target as HTMLInputElement).checked);
-    };
-    return (
-      <Toggle
-        id="toggle8"
-        size="large"
-        checked={checked}
-        onChange={handleChange}
-      />
-    );
-  },
-};
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Toggle from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    onChange: { action: 'changed' },
+    disabled: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    id: { control: 'text' },
+    size: {
+      control: {
+        type: 'select',
+        options: ['small', 'medium', 'large'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    checked: false,
+    id: 'toggle1',
+    size: 'large',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+    id: 'toggle2',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    ...Default.args,
+    checked: true,
+    id: 'toggle3',
+  },
+};
+
+export const SmallSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle4"
+        size="small"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const MediumSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle5"
+        size="medium"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};
+
+export const DynamicIconAndSize: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle7"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+        icon={{
+          checked: { name: 'moon_stars_icon', width: 14, height: 14 },
+          unchecked: { name: 'sun_icon', width: 14, height: 14 },
+        }}
+      />
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = (
+      e: React.MouseEvent<HTMLInputElement, MouseEvent>
+    ) => {
+      setChecked((e.target as HTMLInputElement).checked);
+    };
+    return (
+      <Toggle
+        id="toggle8"
+        size="large"
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+};