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