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

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