-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
components.js
120 lines (109 loc) · 2.82 KB
/
components.js
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/** @jsx jsx */
import { jsx } from '@emotion/core';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import { withPseudoState } from 'react-pseudo-state';
import { PlusIcon } from '@arch-ui/icons';
import { Card } from '@arch-ui/card';
import { colors, gridSize } from '@arch-ui/theme';
import { LoadingIndicator } from '@arch-ui/loading';
import { A11yText } from '@arch-ui/typography';
export const HeaderInset = props => (
<div css={{ paddingLeft: gridSize * 2, paddingRight: gridSize * 2 }} {...props} />
);
const BOX_GUTTER = `${gridSize * 2}px`;
const BoxElement = styled(Card)`
color: ${colors.N40};
display: block;
padding: ${BOX_GUTTER};
position: relative;
&:hover,
&:focus {
outline: 0;
text-decoration: none;
}
`;
export const BoxComponent = ({
focusOrigin,
isActive,
isHover,
isFocus,
list,
meta,
onCreateClick,
...props
}) => {
const { label, singular } = list;
return (
<BoxElement as={Link} isInteractive title={`Go to ${label}`} {...props}>
<A11yText>Go to {label}</A11yText>
<Name
isHover={isHover || isFocus}
// this is aria-hidden since the label above shows the label already
// so if this wasn't aria-hidden screen readers would read the label twice
aria-hidden
>
{label}
</Name>
<Count meta={meta} />
<CreateButton
title={`Create ${singular}`}
isHover={isHover || isFocus}
onClick={onCreateClick}
>
<PlusIcon />
<A11yText>Create {singular}</A11yText>
</CreateButton>
</BoxElement>
);
};
export const Box = withPseudoState(BoxComponent);
export const Name = styled.span(
({ isHover }) => `
border-bottom: 1px solid ${isHover ? colors.B.A50 : 'transparent'};
color: ${colors.primary};
display: inline-block;
box-sizing: border-box;
font-size: 1.1rem;
font-weight: 500;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
transition: border-color 80ms linear;
white-space: nowrap;
padding-right: 2em;
`
);
export const Count = ({ meta }) => {
const isLoading = meta === undefined;
const count = (meta && meta.count) || 0;
return isLoading ? (
<div css={{ height: '0.85em' }}>
<LoadingIndicator />
</div>
) : (
<div css={{ fontSize: '0.85em' }}>{`${count} Item${count !== 1 ? 's' : ''}`}</div>
);
};
export const CreateButton = styled.button(
({ isHover }) => `
align-items: center;
background-color: ${isHover ? colors.N20 : colors.N10};
border-radius: 2px;
border: 0;
color: white;
cursor: pointer;
display: flex;
height: 24px;
justify-content: center;
outline: 0;
position: absolute;
right: ${BOX_GUTTER};
top: ${BOX_GUTTER};
transition: background-color 80ms linear;
width: 24px;
&:hover, &:focus {
background-color: ${colors.create};
}
`
);