From c506af576d1cf74995966420df1839362443a7ea Mon Sep 17 00:00:00 2001
From: sam-m-m <sam@dassana.io>
Date: Tue, 13 Apr 2021 15:42:30 -0700
Subject: [PATCH] Fix #290 - Bugs related to Alert Timeline in
 web-alert-manager

---
 src/components/Accordion/Header.tsx          |  3 +-
 src/components/Accordion/index.tsx           | 32 +++++++++++++++++---
 src/components/Accordion/types.ts            | 28 -----------------
 src/components/Code/index.tsx                |  6 ++--
 src/components/Code/utils.ts                 |  3 ++
 src/components/Tabs/Tab.tsx                  | 24 +++++++++------
 src/components/Tabs/Tabs.stories.tsx         | 12 ++++----
 src/components/Timeline/Timeline.stories.tsx |  2 +-
 src/components/Timeline/index.tsx            |  1 +
 src/components/Timeline/types.ts             |  2 +-
 10 files changed, 60 insertions(+), 53 deletions(-)
 delete mode 100644 src/components/Accordion/types.ts

diff --git a/src/components/Accordion/Header.tsx b/src/components/Accordion/Header.tsx
index d2c87918..a5ec7243 100644
--- a/src/components/Accordion/Header.tsx
+++ b/src/components/Accordion/Header.tsx
@@ -1,7 +1,7 @@
 import { CollapseIndicator } from './CollapseIndicator'
 import { createUseStyles } from 'react-jss'
 import { generateHeaderStyles } from './utils'
-import { Panel } from './types'
+import { Panel } from './index'
 import React, { FC } from 'react'
 import { styleguide, themes, ThemeType } from '../assets/styles'
 
@@ -36,6 +36,7 @@ export const Header: FC<Props> = ({
 	title
 }: Props) => {
 	const classes = useStyles()
+
 	return (
 		<div className={classes.header} onClick={onHeaderClick}>
 			<div className={classes.titleWrapper}>
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index 57861e7f..e26efa1b 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -1,4 +1,3 @@
-import { AccordionProps } from './types'
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { Header } from './Header'
@@ -9,7 +8,7 @@ import {
 	getInitialExpandedKeys,
 	getUpdatedExpandedKeys
 } from './utils'
-import React, { FC, Key, useState } from 'react'
+import React, { FC, Key, ReactNode, useState } from 'react'
 
 const { dark, light } = ThemeType
 
@@ -23,6 +22,33 @@ const useStyles = createUseStyles({
 	}
 })
 
+export interface Panel {
+	classes?: string[]
+	content: ReactNode
+	headerRightContent?: ReactNode
+	key: Key
+	title: ReactNode
+}
+
+export interface SharedAccordionProps {
+	classes?: string[]
+	defaultExpandedKeys?: Key[]
+	panels: Panel[]
+}
+
+export interface ExpandSingleProps {
+	expandMultiple: false
+	expandAllOnMount?: never
+}
+
+export interface ExpandMultipleProps {
+	expandMultiple: true
+	expandAllOnMount?: boolean
+}
+
+export type AccordionProps = (ExpandSingleProps | ExpandMultipleProps) &
+	SharedAccordionProps
+
 export const Accordion: FC<AccordionProps> = ({
 	classes = [],
 	defaultExpandedKeys = [],
@@ -69,5 +95,3 @@ export const Accordion: FC<AccordionProps> = ({
 		</div>
 	)
 }
-
-export type { AccordionProps, Panel } from './types'
diff --git a/src/components/Accordion/types.ts b/src/components/Accordion/types.ts
deleted file mode 100644
index 9744eaae..00000000
--- a/src/components/Accordion/types.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Key, ReactNode } from 'react'
-
-export interface Panel {
-	classes?: string[]
-	content: ReactNode
-	headerRightContent?: ReactNode
-	key: Key
-	title: ReactNode
-}
-
-export interface SharedAccordionProps {
-	classes?: string[]
-	defaultExpandedKeys?: Key[]
-	panels: Panel[]
-}
-
-export interface ExpandSingleProps {
-	expandMultiple: false
-	expandAllOnMount?: never
-}
-
-export interface ExpandMultipleProps {
-	expandMultiple: true
-	expandAllOnMount?: boolean
-}
-
-export type AccordionProps = (ExpandSingleProps | ExpandMultipleProps) &
-	SharedAccordionProps
diff --git a/src/components/Code/index.tsx b/src/components/Code/index.tsx
index 0e3289fe..b08fbac5 100644
--- a/src/components/Code/index.tsx
+++ b/src/components/Code/index.tsx
@@ -69,10 +69,10 @@ export const Code: FC<CodeProps> = ({
 	}
 
 	return (
-		<>
+		<div className={cn(classes)}>
 			{search && <Input {...searchProps} onChange={onSearch} />}
 			<pre
-				className={cn({ 'line-numbers': lineNumbers }, classes)}
+				className={cn({ 'line-numbers': lineNumbers })}
 				contentEditable={!readOnly}
 			>
 				<code className={`language-${language}`} ref={codeRef}>
@@ -81,6 +81,6 @@ export const Code: FC<CodeProps> = ({
 						: JSON.stringify(code, null, '\t')}
 				</code>
 			</pre>
-		</>
+		</div>
 	)
 }
diff --git a/src/components/Code/utils.ts b/src/components/Code/utils.ts
index 1e15438b..4aeab3a8 100644
--- a/src/components/Code/utils.ts
+++ b/src/components/Code/utils.ts
@@ -5,6 +5,7 @@ const { dark, light } = ThemeType
 
 const {
 	colors: { blacks, grays },
+	font,
 	fontWeight,
 	spacing
 } = styleguide
@@ -103,11 +104,13 @@ export const useStyles = createUseStyles({
 			},
 			[codeSelector]: {
 				...generateThemedPreCodeStyles(light),
+				...font.label,
 				fontFamily: 'Fira Code, monospace',
 				fontWeight: fontWeight.light,
 				textShadow: 'none'
 			},
 			...generateThemedCodeStyles(light),
+			...font.label,
 			fontFamily: 'Fira Code, monospace',
 			fontWeight: fontWeight.light,
 			margin: 0
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
index e48b9241..f5c5ad71 100644
--- a/src/components/Tabs/Tab.tsx
+++ b/src/components/Tabs/Tab.tsx
@@ -6,23 +6,29 @@ import { styleguide, ThemeType } from 'components/assets/styles'
 
 const { dark, light } = ThemeType
 
-const { fontWeight, spacing } = styleguide
+const {
+	colors: { blacks },
+	font,
+	fontWeight,
+	spacing
+} = styleguide
 
 const useStyles = createUseStyles({
-	activeTab: {
-		...generateThemedActiveTabStyles(light),
-		borderBottom: '1px solid'
-	},
+	activeTab: {},
 	tab: {
 		'&$activeTab': {
-			fontWeight: fontWeight.regular
+			...generateThemedActiveTabStyles(light)
 		},
+		...font.body,
+		borderBottom: '1px solid transparent',
+		color: blacks['lighten-50'],
 		cursor: 'pointer',
 		display: 'inline-block',
-		fontWeight: fontWeight.light,
+		fontWeight: fontWeight.regular,
 		listStyle: 'none',
-		marginRight: spacing.m,
-		padding: spacing.s
+		margin: { left: spacing.m, right: spacing.m },
+		padding: { bottom: spacing.m, top: spacing.m },
+		textAlign: 'center'
 	},
 	// eslint-disable-next-line sort-keys
 	'@global': {
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 9720947c..c6e6deff 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -45,14 +45,14 @@ const TabPane: FC<TabPaneProps> = ({ children }: TabPaneProps) => {
 
 const tabConfig: TabConfig[] = [
 	{
-		key: 'foo',
-		label: 'Foo',
-		render: () => <TabPane>Foo content text</TabPane>
+		key: 'lorem',
+		label: 'Lorem',
+		render: () => <TabPane>Banana mochi muffin</TabPane>
 	},
 	{
-		key: 'bar',
-		label: 'Bar',
-		render: () => <TabPane>Bar content text</TabPane>
+		key: 'ipsum',
+		label: 'Ipsum',
+		render: () => <TabPane>Pineapple upside down cake</TabPane>
 	}
 ]
 
diff --git a/src/components/Timeline/Timeline.stories.tsx b/src/components/Timeline/Timeline.stories.tsx
index cf245c37..123e95c7 100644
--- a/src/components/Timeline/Timeline.stories.tsx
+++ b/src/components/Timeline/Timeline.stories.tsx
@@ -32,13 +32,13 @@ const mockTimelineConfig: TimelineConfig[] = [
 		title: 'Title 1'
 	},
 	{
+		alwaysExpanded: true,
 		content: <Content>Content2</Content>,
 		headerRightContent: '2 hours ago',
 		key: 2,
 		title: 'Title 2'
 	},
 	{
-		alwaysExpanded: true,
 		content: <Content>Content3</Content>,
 		key: 3,
 		title: 'Title 3'
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index 7ddf32c3..8cb68999 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -25,6 +25,7 @@ const useStyles = createUseStyles({
 		...generateThemedTimelineItemStyles(light),
 		borderRadius,
 		flexGrow: 1,
+		height: '100%',
 		marginLeft: spacing['m+']
 	},
 	wrapper: {
diff --git a/src/components/Timeline/types.ts b/src/components/Timeline/types.ts
index afc734ef..f5a5efa6 100644
--- a/src/components/Timeline/types.ts
+++ b/src/components/Timeline/types.ts
@@ -3,7 +3,7 @@ import {
 	ExpandSingleProps,
 	Panel,
 	SharedAccordionProps
-} from '../Accordion/types'
+} from '../Accordion'
 
 export enum TimelineState {
 	alwaysExpanded = 'alwaysExpanded',