Update with stickersheet and ignore hover styles when toggle is disabled

vimeo · Aug 15, 2023 · 41871a8 · 41871a8
1 parent c8f16de
commit 41871a8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/src/components/inputs/Input/Input.style.ts b/src/components/inputs/Input/Input.style.ts
@@ -107,11 +107,11 @@ function fauxToggleChecked({ toggle, theme }) {
         }
       }
 
-      :hover:checked ~ ${Faux} {
+      :hover:checked:not(:disabled) ~ ${Faux} {
         background: ${darken(0.1, checkedColor)};
         border-color: ${darken(0.1, checkedColor)};
       }
-      :hover ~ ${Faux} {
+      :hover:not(:disabled) ~ ${Faux} {
         background: ${darken(0.1, unCheckedColor)};
         border-color: transparent;
       }

diff --git a/src/components/inputs/Toggle/Toggle.story.tsx b/src/components/inputs/Toggle/Toggle.story.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Toggle, Props } from './Toggle';
 
@@ -10,17 +10,17 @@ export default {
   title: 'components/Toggle',
   component: Toggle,
   argTypes: {
-    status: { table: { disable: true } },
     messages: { table: { disable: true } },
     src: { table: { disable: true } },
-    label: { control: { disable: true } },
+    label: { control: { type: null } },
     icon: {
-      control: { disable: true },
+      control: { type: null },
     },
+    onKeyPress: { control: { type: null } },
   },
 };
 
-const Template: Story<Props> = (args) => {
+const Template: StoryFn<Props> = (args) => {
   return (
     <Layout.StoryVertical>
       <Toggle {...args} label="Toggle" name="demoToggle" />
@@ -35,3 +35,33 @@ const Template: Story<Props> = (args) => {
 };
 export const Controls = Template.bind({});
 Controls.storyName = 'Toggle';
+
+const statuses = ['default', 'positive', 'negative'];
+const disabled = [true, false];
+const stickers = [true, false].flatMap((checked) =>
+  disabled.flatMap((disable) =>
+    statuses.flatMap((status) => ({
+      disabled: disable,
+      checked,
+      status,
+    }))
+  )
+);
+console.log(stickers);
+export const StickerSheet = () => {
+  return (
+    <>
+      {stickers.map((sticker, i) => (
+        <Toggle
+          key={i}
+          {...sticker}
+          label={`${
+            sticker.disabled ? 'disabled' : 'not disabled'
+          } | ${
+            sticker.checked ? 'checked' : 'not checked'
+          } | status: ${sticker.status}`}
+        />
+      ))}
+    </>
+  );
+};