1 | import _List from 'reakit/List';
|
2 | import { theme } from 'styled-tools';
|
3 |
|
4 | import { Box } from '../primitives';
|
5 | import styled, { css, space } from '../styled';
|
6 | import { ListItemProps } from './ListItem';
|
7 | import { ListProps } from './List';
|
8 |
|
9 | export const orderedProperties = css`
|
10 | list-style-type: decimal;
|
11 |
|
12 | & & {
|
13 | list-style-type: lower-alpha;
|
14 | }
|
15 |
|
16 | & & & {
|
17 | list-style-type: lower-roman;
|
18 | }
|
19 |
|
20 | & {
|
21 | ${theme('fannypack.List.ordered')};
|
22 | }
|
23 | `;
|
24 |
|
25 | export const horizontalProperties = css`
|
26 | & li {
|
27 | display: inline-block;
|
28 | margin-right: 1rem;
|
29 | margin-bottom: unset;
|
30 | }
|
31 |
|
32 | & {
|
33 | ${theme('fannypack.List.horizontal')};
|
34 | }
|
35 | `;
|
36 |
|
37 | export const ListItem = styled(Box)<ListItemProps>`
|
38 | margin-bottom: 0.2rem;
|
39 |
|
40 | & {
|
41 | ${theme('fannypack.List.item.base')};
|
42 | }
|
43 | `;
|
44 |
|
45 | export const List = styled(_List)<ListProps>`
|
46 | list-style: unset;
|
47 | list-style-type: none;
|
48 |
|
49 | &:not(:last-child) {
|
50 | margin-bottom: ${space(4)}rem;
|
51 | }
|
52 |
|
53 | & & {
|
54 | margin-left: ${space(4)}rem;
|
55 | }
|
56 |
|
57 | & {
|
58 | ${props => props.isOrdered && orderedProperties};
|
59 | }
|
60 |
|
61 | & {
|
62 | ${props => props.isHorizontal && horizontalProperties};
|
63 | }
|
64 |
|
65 | & {
|
66 | ${theme('fannypack.List.base')};
|
67 | }
|
68 | `;
|
69 |
|
70 | export default List;
|