Skip to content

Commit dc629cf

Browse files
dzole0311dzole0311
committed
Merge branch 'main' into feat-publish-veda-ui-to-npm
2 parents ad9e8a4 + ac99317 commit dc629cf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1392
-1376
lines changed

‎app/scripts/components/common/aoi/use-aoi-controls.ts‎

Lines changed: 0 additions & 134 deletions
This file was deleted.

‎app/scripts/components/common/blocks/block-map.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ function MapBlock(props: MapBlockProps) {
206206
parallels: projectionParallels
207207
});
208208
return {
209-
...projection,
209+
...(projection as object),
210210
id: projectionId
211211
};
212212
} else {

‎app/scripts/components/common/card/classic.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react';
2+
import format from 'date-fns/format';
3+
import styled from 'styled-components';
4+
import {
5+
CardBody,
6+
CardHeader,
7+
CardHeadline,
8+
CardTitle,
9+
CardOverline,
10+
CardLabel,
11+
CardFooter,
12+
CardFigure,
13+
CardItem
14+
} from './styles';
15+
import { CardComponentProps, ExternalLinkFlag } from '.';
16+
import { useVedaUI } from '$context/veda-ui-provider';
17+
18+
export const ClassicCardItem = styled(CardItem)`
19+
background: transparent;
20+
`;
21+
22+
export default function ClassicCard(props: CardComponentProps) {
23+
const {
24+
title,
25+
description,
26+
date,
27+
overline,
28+
imgSrc,
29+
imgAlt,
30+
parentTo,
31+
tagLabels,
32+
footerContent,
33+
hideExternalLinkBadge
34+
} = props;
35+
36+
let isExternalLink;
37+
38+
if ('isExternalLink' in props) {
39+
({ isExternalLink } = props);
40+
}
41+
42+
const { Link } = useVedaUI();
43+
44+
const CardContent = (
45+
<>
46+
<CardHeader>
47+
<CardHeadline>
48+
<CardTitle>{title}</CardTitle>
49+
<CardOverline as='div'>
50+
{hideExternalLinkBadge !== true && isExternalLink && (
51+
<ExternalLinkFlag />
52+
)}
53+
{!isExternalLink &&
54+
tagLabels &&
55+
parentTo &&
56+
tagLabels.map((label) => (
57+
<CardLabel as={Link} to={parentTo} key={label}>
58+
{label}
59+
</CardLabel>
60+
))}
61+
{date ? (
62+
<>
63+
published on{' '}
64+
<time dateTime={format(date, 'yyyy-MM-dd')}>
65+
{format(date, 'MMM d, yyyy')}
66+
</time>
67+
</>
68+
) : (
69+
overline
70+
)}
71+
</CardOverline>
72+
</CardHeadline>
73+
</CardHeader>
74+
{description && (
75+
<CardBody>
76+
<p>{description}</p>
77+
</CardBody>
78+
)}
79+
{footerContent && <CardFooter>{footerContent}</CardFooter>}
80+
<CardFigure src={imgSrc} isCoverOrFeatured={false}>
81+
<img src={imgSrc} alt={imgAlt} loading='lazy' />
82+
</CardFigure>
83+
</>
84+
);
85+
86+
return CardContent;
87+
}

‎app/scripts/components/common/card/cover.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import format from 'date-fns/format';
3+
import styled from 'styled-components';
4+
import { themeVal } from '@devseed-ui/theme-provider';
5+
import {
6+
CardBody,
7+
CardHeader,
8+
CardHeadline,
9+
CardTitle,
10+
CardOverline,
11+
CardLabel,
12+
CardFooter,
13+
CardFigure,
14+
CardItem
15+
} from './styles';
16+
import { CardComponentProps, ExternalLinkFlag } from '.';
17+
import { useVedaUI } from '$context/veda-ui-provider';
18+
import { variableGlsp } from '$styles/variable-utils';
19+
20+
export const CoverCardItem = styled(CardItem)`
21+
padding-top: ${variableGlsp(2)};
22+
background: ${themeVal('color.base-400')};
23+
color: ${themeVal('color.surface')};
24+
justify-content: flex-end;
25+
26+
${CardFigure} {
27+
position: absolute;
28+
inset: 0;
29+
z-index: -1;
30+
background: ${themeVal('color.base-400')};
31+
}
32+
33+
${CardOverline} {
34+
color: ${themeVal('color.surface-400a')};
35+
}
36+
`;
37+
38+
export default function CoverCard(props: CardComponentProps) {
39+
const {
40+
title,
41+
description,
42+
date,
43+
overline,
44+
imgSrc,
45+
imgAlt,
46+
parentTo,
47+
tagLabels,
48+
footerContent,
49+
hideExternalLinkBadge
50+
} = props;
51+
52+
let isExternalLink;
53+
54+
if ('isExternalLink' in props) {
55+
({ isExternalLink } = props);
56+
}
57+
58+
const { Link } = useVedaUI();
59+
60+
const CardContent = (
61+
<>
62+
<CardHeader>
63+
<CardHeadline>
64+
<CardTitle>{title}</CardTitle>
65+
<CardOverline as='div'>
66+
{hideExternalLinkBadge !== true && isExternalLink && (
67+
<ExternalLinkFlag />
68+
)}
69+
{!isExternalLink &&
70+
tagLabels &&
71+
parentTo &&
72+
tagLabels.map((label) => (
73+
<CardLabel as={Link} to={parentTo} key={label}>
74+
{label}
75+
</CardLabel>
76+
))}
77+
{date ? (
78+
<>
79+
published on{' '}
80+
<time dateTime={format(date, 'yyyy-MM-dd')}>
81+
{format(date, 'MMM d, yyyy')}
82+
</time>
83+
</>
84+
) : (
85+
overline
86+
)}
87+
</CardOverline>
88+
</CardHeadline>
89+
</CardHeader>
90+
{description && (
91+
<CardBody>
92+
<p>{description}</p>
93+
</CardBody>
94+
)}
95+
{footerContent && <CardFooter>{footerContent}</CardFooter>}
96+
<CardFigure src={imgSrc} isCoverOrFeatured={true}>
97+
<img src={imgSrc} alt={imgAlt} loading='lazy' />
98+
</CardFigure>
99+
</>
100+
);
101+
102+
return CardContent;
103+
}

0 commit comments

Comments
 (0)