/
ComponentCategory.js
107 lines (96 loc) 路 2.85 KB
/
ComponentCategory.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
import React from 'react';
import PropTypes from 'prop-types';
import {
Accordion,
AccordionToggle,
AccordionContent,
Box,
Flex,
Typography,
} from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import styled from 'styled-components';
import { useIntl } from 'react-intl';
import { ComponentIcon } from '../../ComponentIcon';
export const ComponentCategory = ({
category,
components,
variant,
isOpen,
onAddComponent,
onToggle,
}) => {
const { formatMessage } = useIntl();
const handleToggle = () => {
onToggle(category);
};
return (
<Accordion expanded={isOpen} onToggle={handleToggle} size="S">
<AccordionToggle
variant={variant}
title={formatMessage({ id: category, defaultMessage: category })}
togglePosition="left"
/>
<AccordionContent>
<Box paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>
<Grid>
{components.map(({ componentUid, info: { displayName, icon } }) => (
<ComponentBox
key={componentUid}
as="button"
type="button"
background="neutral100"
justifyContent="center"
onClick={onAddComponent(componentUid)}
hasRadius
height={pxToRem(84)}
shrink={0}
borderColor="neutral200"
>
<Flex direction="column" gap={1} alignItems="center" justifyContent="center">
<ComponentIcon icon={icon} />
<Typography variant="pi" fontWeight="bold" textColor="neutral600">
{formatMessage({ id: displayName, defaultMessage: displayName })}
</Typography>
</Flex>
</ComponentBox>
))}
</Grid>
</Box>
</AccordionContent>
</Accordion>
);
};
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, ${140 / 16}rem);
grid-gap: ${({ theme }) => theme.spaces[1]};
`;
const ComponentBox = styled(Flex)`
&:focus,
&:hover {
border: 1px solid ${({ theme }) => theme.colors.primary200};
background: ${({ theme }) => theme.colors.primary100};
${Typography} {
color: ${({ theme }) => theme.colors.primary600};
}
/* > Flex > ComponentIcon */
> div > div:first-child {
background: ${({ theme }) => theme.colors.primary200};
color: ${({ theme }) => theme.colors.primary600};
}
}
`;
ComponentCategory.defaultProps = {
components: [],
isOpen: false,
variant: 'primary',
};
ComponentCategory.propTypes = {
category: PropTypes.string.isRequired,
components: PropTypes.array,
isOpen: PropTypes.bool,
onAddComponent: PropTypes.func.isRequired,
onToggle: PropTypes.func.isRequired,
variant: PropTypes.oneOf(['primary', 'secondary']),
};