Apr 12, 2020 · Apr 12, 2020
diff --git a/web-app/src/components/Button/index.tsx b/web-app/src/components/Button/index.tsx
  onClick?: () => void
  size?: 'small' | 'medium' | 'large'
  iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
  warning?: boolean
 }

 const Button = (props: Props) => (
    style={props.style}
    size={props.size}
    iconSize={props.iconSize}
    warning={props.warning}
  >
    {props.children}
  </AlifdButton>
diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx

 const styles = {
  container: {
    color: '#D8000C',
    backgroundColor: '#FFBABA',
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
    justifyContent: 'center' as 'center',
    alignItems: 'center' as 'center',
    border: '0.5rem solid #FFBABA',
    padding: '1rem',
    width: '100%',
    height: '100%',
  },
  content: {
    textAlign: 'center' as 'center',
    color: 'rgb(40, 40, 40);',
  },
  options: {
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
    alignItems: 'center',
  },
  button: {
    margin: '0.5rem',
    width: '10rem',
  },
 }

 interface Props {

  return (
    <div css={styles.container}>
      <h1>Error</h1>
      <Markdown>{error.message}</Markdown>
      <h1>Oops!</h1>
      <div css={styles.content}>
        <Markdown>{error.message}</Markdown>
      </div>
      <br />
      <br />
      {/* Actions */}
      {error.actions &&
        error.actions.map((a) => (
          <Button type="secondary" onClick={() => send({ type: a.transition })}>
            {a.label}
          </Button>
        ))}
      <div css={styles.options}>
        {error.actions &&
          error.actions.map((a) => (
            <Button type="normal" warning style={styles.button} onClick={() => send({ type: a.transition })}>
              {a.label}
            </Button>
          ))}
      </div>
    </div>
  )
 }
diff --git a/web-app/stories/Error.stories.tsx b/web-app/stories/Error.stories.tsx
 import * as E from '../../typings/error'
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 import ErrorView from '../src/components/Error'
 import SideBarDecorator from './utils/SideBarDecorator'

 storiesOf('Error', module)
  .addDecorator(SideBarDecorator)
  .add('Error', () => {
    const error: E.ErrorMessage = {
      type: 'UnknownError',
      message: '### Message summary\n\nSome message about what went wrong under here',
      actions: [
        { label: 'First', transition: 'FIRST' },
        { label: 'Second', transition: 'SECOND' },
      ],
    }
    return <ErrorView error={error} send={action('send')} />
  })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,6 +9,7 @@ interface Props {
		onClick?: () => void
		size?: 'small' \| 'medium' \| 'large'
		iconSize?: 'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \| 'xxl' \| 'xxxl'
		warning?: boolean
		}

		const Button = (props: Props) => (
Expand All		@@ -19,6 +20,7 @@ const Button = (props: Props) => (
		style={props.style}
		size={props.size}
		iconSize={props.iconSize}
		warning={props.warning}
		>
		{props.children}
		</AlifdButton>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,12 +7,28 @@ import Button from '../../components/Button'

		const styles = {
		container: {
		color: '#D8000C',
		backgroundColor: '#FFBABA',
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		justifyContent: 'center' as 'center',
		alignItems: 'center' as 'center',
		border: '0.5rem solid #FFBABA',
		padding: '1rem',
		width: '100%',
		height: '100%',
		},
		content: {
		textAlign: 'center' as 'center',
		color: 'rgb(40, 40, 40);',
		},
		options: {
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		alignItems: 'center',
		},
		button: {
		margin: '0.5rem',
		width: '10rem',
		},
		}

		interface Props {
Expand All		@@ -34,15 +50,21 @@ const ErrorMarkdown = ({ error, send }: Props) => {

		return (
		<div css={styles.container}>
		<h1>Error</h1>
		<Markdown>{error.message}</Markdown>
		<h1>Oops!</h1>
		<div css={styles.content}>
		<Markdown>{error.message}</Markdown>
		</div>
		<br />
		<br />
		{/* Actions */}
		{error.actions &&
		error.actions.map((a) => (
		<Button type="secondary" onClick={() => send({ type: a.transition })}>
		{a.label}
		</Button>
		))}
		<div css={styles.options}>
		{error.actions &&
		error.actions.map((a) => (
		<Button type="normal" warning style={styles.button} onClick={() => send({ type: a.transition })}>
		{a.label}
		</Button>
		))}
		</div>
		</div>
		)
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,20 @@
		import * as E from '../../typings/error'
		import { action } from '@storybook/addon-actions'
		import { storiesOf } from '@storybook/react'
		import React from 'react'
		import ErrorView from '../src/components/Error'
		import SideBarDecorator from './utils/SideBarDecorator'

		storiesOf('Error', module)
		.addDecorator(SideBarDecorator)
		.add('Error', () => {
		const error: E.ErrorMessage = {
		type: 'UnknownError',
		message: '### Message summary\n\nSome message about what went wrong under here',
		actions: [
		{ label: 'First', transition: 'FIRST' },
		{ label: 'Second', transition: 'SECOND' },
		],
		}
		return <ErrorView error={error} send={action('send')} />
		})