Fixed ts lint issues

addons/jest/src/components/Message.tsx

@@ -47,7 +47,7 @@ const Description = styled.div({
   overflowWrap: 'break-word',
 });
 
-const StatusColor = styled.strong(({ status, theme }) => ({
+const StatusColor = styled.strong<{ status: string }>(({ status, theme }) => ({
   color: status === positiveType ? theme.color.positive : theme.color.negative,
   fontWeight: 500,
 }));
@@ -135,10 +135,10 @@ const getTestDetail: (msg: string) => TestDetail = (msg: string) => {
         title = current.substring(0, current.indexOf(titleEndToken)).trim();
         value = getConvertedText(current.substring(current.indexOf(titleEndToken), current.length));
       }
-      testDetail.result = [testDetail.result, title, ' ', value, <br key={index} />];
+      testDetail.result = [...testDetail.result, title, ' ', ...value, <br key={index} />];
     } else {
       // results come in an unexpected format
-      testDetail.result = [testDetail.result, ' ', getConvertedText(current)];
+      testDetail.result = [...testDetail.result, ' ', ...getConvertedText(current)];
     }
   }
 
@@ -149,7 +149,7 @@ interface MessageProps {
   msg: string;
 }
 
-export const Message = props => {
+export const Message = (props: any) => {
   const { msg } = props;
 
   const detail: TestDetail = getTestDetail(msg);

addons/jest/src/components/Panel.tsx

@@ -98,6 +98,7 @@ const Content = styled(({ tests, className }: ContentProps) => (
         .length;
       const failedNumber = result.assertionResults.length - successNumber;
       const passingRate = ((successNumber / result.assertionResults.length) * 100).toFixed(2);
+
       return (
         <section key={name}>
           <SuiteHead>

addons/jest/src/components/Result.tsx

@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import Message from './Message';
 
-const Wrapper = styled.div(({ theme, status }) => ({
+const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({
   display: 'flex',
   width: '100%',
   borderTop: `1px solid ${theme.appBorderColor}`,
@@ -12,7 +12,7 @@ const Wrapper = styled.div(({ theme, status }) => ({
   },
 }));
 
-const HeaderBar = styled.div(({ theme, status }) => ({
+const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   padding: theme.layoutMargin,
   paddingLeft: theme.layoutMargin - 3,
   background: 'none',

lib/components/src/bar/bar.tsx

@@ -57,7 +57,7 @@ export const Bar = styled(({ children, className }) => (
 );
 Bar.displayName = 'Bar';
 
-const BarInner = styled.div((bgColor: any) => ({
+const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
   display: 'flex',
   justifyContent: 'space-between',
   position: 'relative',