Skip to content

Commit 4eca18b

Browse files
HinataKah0ovflowd
HinataKah0
and
ovflowd
authored
feat: add CrossLink component (#5781)
* feat: add CrossLink component * chore: add neutral 950 color * Apply suggestions from code review Signed-off-by: Claudio W <cwunder@gnome.org> --------- Signed-off-by: Claudio W <cwunder@gnome.org> Co-authored-by: Claudio W <cwunder@gnome.org>
1 parent e9bffbd commit 4eca18b

7 files changed

Lines changed: 139 additions & 2 deletions

File tree

‎.storybook/preview-body.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<body
2-
class="bg-white font-open-sans text-black dark:bg-black dark:text-white"
2+
class="bg-white font-open-sans text-neutral-950 dark:bg-neutral-950 dark:text-white"
33
></body>

‎components/Common/CrossLink/index.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.crossLink {
2+
@apply flex
3+
flex-col
4+
items-start
5+
gap-2
6+
rounded
7+
border
8+
border-solid
9+
border-neutral-300
10+
bg-white
11+
p-3
12+
dark:border-neutral-900
13+
dark:bg-neutral-950;
14+
15+
.header {
16+
@apply flex
17+
items-center
18+
gap-2
19+
self-stretch
20+
text-xs
21+
text-neutral-800
22+
dark:text-neutral-100;
23+
24+
&.reverse {
25+
@apply flex-row-reverse
26+
justify-start;
27+
}
28+
29+
.icon {
30+
@apply h-4
31+
w-4
32+
text-neutral-600
33+
dark:text-neutral-400;
34+
}
35+
}
36+
37+
.content {
38+
@apply self-stretch
39+
truncate
40+
text-sm
41+
text-neutral-900
42+
dark:text-white;
43+
44+
&.reverse {
45+
@apply text-right;
46+
}
47+
}
48+
}

‎components/Common/CrossLink/index.stories.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
import CrossLink from './index';
3+
4+
type Story = StoryObj<typeof CrossLink>;
5+
type Meta = MetaObj<typeof CrossLink>;
6+
7+
export const Prev: Story = {
8+
args: {
9+
type: 'previous',
10+
text: 'How to install Node.js',
11+
url: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
12+
},
13+
decorators: [
14+
Story => (
15+
<div className="w-[305px]">
16+
<Story />
17+
</div>
18+
),
19+
],
20+
};
21+
22+
export const Next: Story = {
23+
args: {
24+
type: 'next',
25+
text: 'How much JavaScript do you need to know to use Node.js?',
26+
url: 'https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/',
27+
},
28+
decorators: [
29+
Story => (
30+
<div className="w-[305px]">
31+
<Story />
32+
</div>
33+
),
34+
],
35+
};
36+
37+
export default { component: CrossLink } as Meta;

‎components/Common/CrossLink/index.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import styles from './index.module.css';
2+
import classNames from 'classnames';
3+
import LocalizedLink from '@/components/LocalizedLink';
4+
import PrevNextArrow from '@/components/Common/PrevNextArrow';
5+
import { FormattedMessage } from 'react-intl';
6+
import type { FC } from 'react';
7+
8+
type CrossLinkProps = {
9+
type: 'previous' | 'next';
10+
text: string;
11+
url: string;
12+
};
13+
14+
const CrossLink: FC<CrossLinkProps> = ({ type, text, url }) => (
15+
<LocalizedLink className={styles.crossLink} href={url}>
16+
<span
17+
className={classNames(styles.header, {
18+
[styles.reverse]: type === 'next',
19+
})}
20+
>
21+
<PrevNextArrow className={styles.icon} type={type} />
22+
<FormattedMessage id={`components.common.crossLink.${type}`} />
23+
</span>
24+
25+
<span
26+
className={classNames(styles.content, {
27+
[styles.reverse]: type === 'next',
28+
})}
29+
>
30+
{text}
31+
</span>
32+
</LocalizedLink>
33+
);
34+
35+
export default CrossLink;

‎components/Common/PrevNextArrow/index.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
2+
import type { FC, SVGAttributes } from 'react';
3+
4+
type PrevNextArrowProps = {
5+
type: 'previous' | 'next';
6+
} & SVGAttributes<SVGSVGElement>;
7+
8+
const PrevNextArrow: FC<PrevNextArrowProps> = ({ type, ...extra }) => {
9+
const ChevronComponent =
10+
type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
11+
12+
return <ChevronComponent {...extra} />;
13+
};
14+
15+
export default PrevNextArrow;

‎i18n/locales/en.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@
3434
"components.header.buttons.toggleDarkMode": "Toggle dark/light mode",
3535
"components.pagination.next": "Newer | ",
3636
"components.pagination.previous": "Older",
37+
"components.common.crossLink.previous": "Prev",
38+
"components.common.crossLink.next": "Next",
3739
"layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
3840
"layouts.blogIndex.currentYear": "News from {year}",
3941
"components.api.jsonLink.title": "View as JSON",

‎tailwind.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default {
3131
700: '#6E7B83',
3232
800: '#556066',
3333
900: '#2C3437',
34+
950: '#0D121C',
3435
},
3536
danger: {
3637
100: '#FBF1F0',
@@ -88,7 +89,6 @@ export default {
8889
900: '#411526',
8990
},
9091
white: '#FFFFFF',
91-
black: '#0D121C',
9292
},
9393
fontSize: {
9494
xs: ['0.75rem', '1rem'],

0 commit comments

Comments
 (0)