Skip to content

Commit

Permalink
Fix #290 - Bugs related to Alert Timeline in web-alert-manager
Browse files Browse the repository at this point in the history
  • Loading branch information
sam-dassana committed Apr 14, 2021
1 parent 2e1b4f5 commit c506af5
Show file tree
Hide file tree
Showing 10 changed files with 60 additions and 53 deletions.
3 changes: 2 additions & 1 deletion src/components/Accordion/Header.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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}>
Expand Down
32 changes: 28 additions & 4 deletions src/components/Accordion/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { AccordionProps } from './types'
import cn from 'classnames'
import { createUseStyles } from 'react-jss'
import { Header } from './Header'
Expand All @@ -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

Expand All @@ -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 = [],
Expand Down Expand Up @@ -69,5 +95,3 @@ export const Accordion: FC<AccordionProps> = ({
</div>
)
}

export type { AccordionProps, Panel } from './types'
28 changes: 0 additions & 28 deletions src/components/Accordion/types.ts

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/Code/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -81,6 +81,6 @@ export const Code: FC<CodeProps> = ({
: JSON.stringify(code, null, '\t')}
</code>
</pre>
</>
</div>
)
}
3 changes: 3 additions & 0 deletions src/components/Code/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const { dark, light } = ThemeType

const {
colors: { blacks, grays },
font,
fontWeight,
spacing
} = styleguide
Expand Down Expand Up @@ -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
Expand Down
24 changes: 15 additions & 9 deletions src/components/Tabs/Tab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand Down
12 changes: 6 additions & 6 deletions src/components/Tabs/Tabs.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
]

Expand Down
2 changes: 1 addition & 1 deletion src/components/Timeline/Timeline.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
1 change: 1 addition & 0 deletions src/components/Timeline/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const useStyles = createUseStyles({
...generateThemedTimelineItemStyles(light),
borderRadius,
flexGrow: 1,
height: '100%',
marginLeft: spacing['m+']
},
wrapper: {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Timeline/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
ExpandSingleProps,
Panel,
SharedAccordionProps
} from '../Accordion/types'
} from '../Accordion'

export enum TimelineState {
alwaysExpanded = 'alwaysExpanded',
Expand Down

0 comments on commit c506af5

Please sign in to comment.