Fix #290 - Bugs related to Alert Timeline in web-alert-manager

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}>

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'

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>
 	)
 }

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

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': {

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>
 	}
 ]
 

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'

src/components/Timeline/index.tsx

@@ -25,6 +25,7 @@ const useStyles = createUseStyles({
 		...generateThemedTimelineItemStyles(light),
 		borderRadius,
 		flexGrow: 1,
+		height: '100%',
 		marginLeft: spacing['m+']
 	},
 	wrapper: {

src/components/Timeline/types.ts

@@ -3,7 +3,7 @@ import {
 	ExpandSingleProps,
 	Panel,
 	SharedAccordionProps
-} from '../Accordion/types'
+} from '../Accordion'
 
 export enum TimelineState {
 	alwaysExpanded = 'alwaysExpanded',