convert result component to hook

addons/jest/src/components/Panel.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
 import { ScrollArea, TabsState } from '@storybook/components';
 import { SizeMe } from 'react-sizeme';
 import Result from './Result';
@@ -68,7 +68,7 @@ const SuiteProgress = styled(({ successNumber, result, className }) => (
     <span style={{ width: `${(successNumber / result.assertionResults.length) * 100}%` }} />
   </div>
 ))(({ theme }) => ({
-  width: '40px',
+  width: '30px',
   backgroundColor: theme.color.negative,
   height: '6px',
   top: '3px',
@@ -152,13 +152,19 @@ const Content = styled(({ tests, className }: ContentProps) => (
   flex: '1 1 0%',
 });
 
+const ContentWithTheme = withTheme(Content);
+
 interface PanelProps {
   tests: null | Test[];
 }
 
 const Panel = ({ tests }: PanelProps) => (
   <ScrollArea vertical>
-    {tests ? <Content tests={tests} /> : <NoTests>This story has no tests configured</NoTests>}
+    {tests ? (
+      <ContentWithTheme tests={tests} />
+    ) : (
+      <NoTests>This story has no tests configured</NoTests>
+    )}
   </ScrollArea>
 );
 

addons/jest/src/components/Result.tsx

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import Message from './Message';
@@ -54,51 +54,41 @@ interface ResultProps {
   status: string;
 }
 
-interface ResultState {
-  open: boolean;
-}
+export function Result(props: ResultProps) {
+  const [isOpen, setIsOpen] = useState(false);
 
-export class Result extends Component<ResultProps, ResultState> {
-  state = {
-    open: false,
+  const onToggle = () => {
+    setIsOpen(!isOpen);
   };
 
-  onToggle = () =>
-    this.setState(prevState => ({
-      open: !prevState.open,
-    }));
-
-  render() {
-    const { fullName, title, failureMessages, status } = this.props;
-    const { open } = this.state;
-    return (
-      <Fragment>
-        <Wrapper status={status}>
-          <HeaderBar onClick={this.onToggle} role="button" status={status}>
-            {status === `failed` ? (
-              <Icon
-                icon="chevrondown"
-                size={10}
-                color="#9DA5AB"
-                style={{
-                  transform: `rotate(${open ? 0 : -90}deg)`,
-                }}
-              />
-            ) : null}
-            <div>{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}</div>
-          </HeaderBar>
-        </Wrapper>
-        {open ? (
-          <Fragment>
-            {failureMessages.map((msg: string, i: number) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Message msg={msg} key={i} />
-            ))}
-          </Fragment>
-        ) : null}
-      </Fragment>
-    );
-  }
+  const { fullName, title, failureMessages, status } = props;
+  return (
+    <Fragment>
+      <Wrapper status={status}>
+        <HeaderBar onClick={onToggle} role="button" status={status}>
+          {status === `failed` ? (
+            <Icon
+              icon="chevrondown"
+              size={10}
+              color="#9DA5AB"
+              style={{
+                transform: `rotate(${isOpen ? 0 : -90}deg)`,
+              }}
+            />
+          ) : null}
+          <div>{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}</div>
+        </HeaderBar>
+      </Wrapper>
+      {isOpen ? (
+        <Fragment>
+          {failureMessages.map((msg: string, i: number) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Message msg={msg} key={i} />
+          ))}
+        </Fragment>
+      ) : null}
+    </Fragment>
+  );
 }
 
 export default Result;