All files / client/components/Common Icons.stories.tsx

0% Statements 0/8
100% Branches 0/0
0% Functions 0/2
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                                                                                                                               
import React from 'react'
import styled from 'styled-components'
import { storiesOf } from '@storybook/react'
import Icon, { IconName } from './Icon'
import * as Icons from './Icons'
 
const IconList = styled.ul`
  display: flex;
  flex-wrap: wrap;
`
 
const IconListTooltip = styled.div`
  position: absolute;
  display: none;
  bottom: 0;
  padding: 16px;
  border-radius: 4px;
  color: #ffffff;
  background: #333333;
  white-space: nowrap;
`
 
const IconListItem = styled.li`
  position: relative;
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 120px;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 5px;
  cursor: pointer;
 
  &:hover ${IconListTooltip} {
    display: block;
  }
`
 
const StyledIcon = styled(Icon)`
  width: 30px;
`
 
const IconListText = styled.div`
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 10px;
`
 
storiesOf('Common/Icons', module).add('Default', () => (
  <IconList>
    {Object.keys(Icons).map(name => (
      <IconListItem key={name} data-name={name}>
        <StyledIcon name={name as IconName} />
        <IconListText>{name}</IconListText>
        <IconListTooltip>{name}</IconListTooltip>
      </IconListItem>
    ))}
  </IconList>
))