From b5ac25ecd76788f05ff33af8dd98208c8147d50f Mon Sep 17 00:00:00 2001
From: Jessica-Koch <jessicakoch136@icloud.com>
Date: Sun, 25 Aug 2019 19:15:54 -0700
Subject: [PATCH 1/3] convert state to hooks in color blindness file for a11y
 addon

---
 addons/a11y/src/components/ColorBlindness.tsx | 65 ++++++++-----------
 1 file changed, 26 insertions(+), 39 deletions(-)

diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index 377030466d5b..6c419a892481 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component, ReactNode } from 'react';
+import React, { Component, ReactNode, useState } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 
@@ -34,13 +34,6 @@ const ColorIcon = styled.span(
   })
 );
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface ColorBlindnessProps {}
-
-interface ColorBlindnessState {
-  active: string | null;
-}
-
 const baseList = [
   'protanopia',
   'protanomaly',
@@ -86,45 +79,39 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
   })),
 ];
 
-export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
-  state: ColorBlindnessState = {
-    active: null,
-  };
+export function ColorBlindness() {
+  const [active, setActiveState] = useState(null);
 
-  setActive = (active: string | null) => {
+  const setActive = (activeState: string | null): void => {
     const iframe = getIframe();
 
     if (iframe) {
-      iframe.style.filter = getFilter(active);
-      this.setState({
-        active,
+      iframe.style.filter = getFilter(activeState);
+      setActiveState({
+        active: activeState,
       });
     } else {
       logger.error('Cannot find Storybook iframe');
     }
   };
 
-  render() {
-    const { active } = this.state;
-
-    return (
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        tooltip={({ onHide }) => {
-          const colorList = getColorList(active, i => {
-            this.setActive(i);
-            onHide();
-          });
-          return <TooltipLinkList links={colorList} />;
-        }}
-        closeOnClick
-        onDoubleClick={() => this.setActive(null)}
-      >
-        <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
-          <Icons icon="mirror" />
-        </IconButton>
-      </WithTooltip>
-    );
-  }
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => {
+        const colorList = getColorList(active, i => {
+          setActive(i);
+          onHide();
+        });
+        return <TooltipLinkList links={colorList} />;
+      }}
+      closeOnClick
+      onDoubleClick={() => setActive(null)}
+    >
+      <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
+        <Icons icon="mirror" />
+      </IconButton>
+    </WithTooltip>
+  );
 }

From 249f6cd186cace8153a2e3a95d8878572c0bcbac Mon Sep 17 00:00:00 2001
From: Jessica-Koch <jessicakoch136@icloud.com>
Date: Sun, 25 Aug 2019 20:06:26 -0700
Subject: [PATCH 2/3] remove unused import variable

---
 addons/a11y/src/components/ColorBlindness.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index 6c419a892481..9e69e8cee536 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 

From 71bb3b36b2ffa528739493cc012d9d72fcb1320f Mon Sep 17 00:00:00 2001
From: Jessica-Koch <jessicakoch136@icloud.com>
Date: Sun, 25 Aug 2019 21:09:53 -0700
Subject: [PATCH 3/3] type colorblindness f=component

---
 addons/a11y/src/components/ColorBlindness.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/a11y/src/components/ColorBlindness.tsx b/addons/a11y/src/components/ColorBlindness.tsx
index 9e69e8cee536..50e6a35f14dc 100644
--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@@ -79,7 +79,7 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
   })),
 ];
 
-export function ColorBlindness() {
+export const ColorBlindness: React.FC = () => {
   const [active, setActiveState] = useState(null);
 
   const setActive = (activeState: string | null): void => {
@@ -114,4 +114,4 @@ export function ColorBlindness() {
       </IconButton>
     </WithTooltip>
   );
-}
+};