-
Notifications
You must be signed in to change notification settings - Fork 27
/
links-card.js
85 lines (82 loc) 路 2.28 KB
/
links-card.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
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Link } from '@commercetools-docs/gatsby-theme-docs';
import { designSystem } from '@commercetools-docs/ui-kit';
import SpacingsStack from '@commercetools-uikit/spacings-stack';
const Container = styled.div`
background-color: ${designSystem.colors.light.surfacePrimary};
border: 1px solid ${designSystem.colors.light.borderPrimary};
border-radius: ${designSystem.tokens.borderRadius6};
padding: ${designSystem.dimensions.spacings.l};
`;
const GridContainer = styled.div`
display: grid;
grid-gap: ${designSystem.dimensions.spacings.l};
grid-auto-columns: 1fr;
grid-template-columns: repeat(
auto-fill,
${designSystem.dimensions.widths.pageNavigation}
);
`;
const LinksList = styled.ul`
list-style: none;
margin: 0;
padding: 0;
> * + * {
margin: ${designSystem.dimensions.spacings.xs} 0 0;
}
`;
const SecondaryExternalLink = props => (
<Link
{...props}
css={css`
font-size: ${designSystem.typography.fontSizes.small};
text-decoration: none;
svg {
width: ${designSystem.dimensions.spacings.m};
height: ${designSystem.dimensions.spacings.m};
* {
fill: ${designSystem.colors.light.link};
}
}
`}
/>
);
const LinksCard = props => (
<Container>
<GridContainer>
{props.linksData.map(linkData => (
<div key={linkData.title}>
<SpacingsStack scale="s">
<div>{linkData.title}</div>
<LinksList>
{linkData.links.map(link => (
<li key={link.to}>
<SecondaryExternalLink href={link.to}>
{link.label}
</SecondaryExternalLink>
</li>
))}
</LinksList>
</SpacingsStack>
</div>
))}
</GridContainer>
</Container>
);
LinksCard.propTypes = {
linksData: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string.isRequired,
links: PropTypes.arrayOf(
PropTypes.shape({
to: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
})
).isRequired,
}).isRequired
).isRequired,
};
export default LinksCard;