Skip to content

Commit e6d9425

Browse files
ovflowdovflowd
committed
chore: code review changes
1 parent 608f388 commit e6d9425

File tree

12 files changed

+151
-41
lines changed

12 files changed

+151
-41
lines changed

‎apps/site/components/Downloads/DownloadReleasesTable/index.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,22 @@ import FormattedTime from '#site/components/Common/FormattedTime';
66
import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
77
import getReleaseData from '#site/next-data/releaseData';
88

9+
const BADGE_KIND_MAP = {
10+
'End-of-life': 'warning',
11+
Maintenance: 'neutral',
12+
LTS: 'info',
13+
Current: 'default',
14+
Pending: 'default',
15+
} as const;
16+
17+
const BADGE_TEXT_MAP = {
18+
'End-of-life': 'End-of-Life (EOL)',
19+
Maintenance: 'Maintenance LTS',
20+
LTS: 'Active LTS',
21+
Current: 'Current',
22+
Pending: 'Pending',
23+
} as const;
24+
925
const DownloadReleasesTable: FC = async () => {
1026
const releaseData = await getReleaseData();
1127

@@ -35,11 +51,8 @@ const DownloadReleasesTable: FC = async () => {
3551
<FormattedTime date={release.releaseDate} />
3652
</td>
3753
<td data-label="Status">
38-
<Badge
39-
kind={release.status === 'End-of-life' ? 'warning' : 'default'}
40-
size="small"
41-
>
42-
{release.status}
54+
<Badge kind={BADGE_KIND_MAP[release.status]} size="small">
55+
{BADGE_TEXT_MAP[release.status]}
4356
</Badge>
4457
</td>
4558
<td className="download-table-last">

‎apps/site/components/Downloads/ReleaseModal/index.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,38 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
3434
return (
3535
<Modal open={isOpen} onOpenChange={closeModal}>
3636
{release.status === 'End-of-life' && (
37-
<AlertBox
38-
title={t('components.common.alertBox.warning')}
39-
level="warning"
40-
size="small"
41-
>
42-
{t.rich('components.releaseModal.unsupportedVersionWarning', {
43-
link: text => (
44-
<Link
45-
onClick={closeModal}
46-
href="/about/previous-releases#release-schedule"
47-
>
48-
{text}
49-
</Link>
50-
),
51-
})}
52-
</AlertBox>
37+
<div className="mb-4">
38+
<AlertBox
39+
title={t('components.common.alertBox.warning')}
40+
level="warning"
41+
size="small"
42+
>
43+
{t.rich('components.releaseModal.unsupportedVersionWarning', {
44+
link: text => (
45+
<Link
46+
onClick={closeModal}
47+
href="/about/previous-releases#release-schedule"
48+
>
49+
{text}
50+
</Link>
51+
),
52+
})}
53+
</AlertBox>
54+
</div>
5355
)}
5456

5557
{release.status === 'LTS' && (
56-
<AlertBox
57-
title={t('components.common.alertBox.info')}
58-
level="info"
59-
size="small"
60-
>
61-
{t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
62-
link: text => <Link href="/download/current">{text}</Link>,
63-
})}
64-
</AlertBox>
58+
<div className="mb-4">
59+
<AlertBox
60+
title={t('components.common.alertBox.info')}
61+
level="info"
62+
size="small"
63+
>
64+
{t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
65+
link: text => <Link href="/download/current">{text}</Link>,
66+
})}
67+
</AlertBox>
68+
</div>
6569
)}
6670

6771
<Title>{modalHeading}</Title>
@@ -73,8 +77,6 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
7377
</LinkWithArrow>
7478
)}
7579

76-
<h5>{t('components.releaseModal.overview')}</h5>
77-
7880
<ReleaseOverview release={release} />
7981

8082
<h5>{t('components.releaseModal.minorVersions')}</h5>

‎apps/site/pages/en/index.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ layout: home
2828
</Button>
2929

3030
<div className="flex flex-row gap-2 justify-center xs:mt-6">
31-
<WithNodeRelease status="Current">
31+
<WithNodeRelease status="LTS">
3232
{({ release }) =>
33-
<BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
34-
Node.js Current
33+
<BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
34+
Node.js LTS
3535
</BadgeGroup>}
3636
</WithNodeRelease>
3737

38-
<WithNodeRelease status="LTS">
38+
<WithNodeRelease status="Current">
3939
{({ release }) =>
40-
<BadgeGroup size="small" kind="warning" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
41-
Node.js LTS
40+
<BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
41+
Node.js Current
4242
</BadgeGroup>}
4343
</WithNodeRelease>
4444
</div>

‎packages/ui-components/src/Common/AlertBox/index.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,14 @@
7474
}
7575
}
7676

77+
&.neutral {
78+
@apply bg-neutral-600;
79+
80+
.title {
81+
@apply bg-neutral-700;
82+
}
83+
}
84+
7785
code {
7886
/* Ignore the styles from `markdown.css` */
7987
all: unset;

‎packages/ui-components/src/Common/AlertBox/index.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,16 @@ export const Danger: Story = {
5252
},
5353
};
5454

55+
export const Neutral: Story = {
56+
args: {
57+
level: 'neutral',
58+
title: 'Note',
59+
children:
60+
"This is a neutral informational message that doesn't fit into the other alert categories.",
61+
size: 'default',
62+
},
63+
};
64+
5565
export const InMarkdown: Story = {
5666
args: {
5767
level: 'danger',

‎packages/ui-components/src/Common/AlertBox/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react';
44
import styles from './index.module.css';
55

66
type AlertBoxProps = PropsWithChildren<{
7-
level: 'info' | 'success' | 'warning' | 'danger';
7+
level: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
88
title: string;
99
size?: 'default' | 'small';
1010
}>;

‎packages/ui-components/src/Common/Badge/index.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,16 @@
3535
bg-warning-600
3636
dark:border-warning-600;
3737
}
38+
39+
&.info {
40+
@apply border-info-200
41+
bg-info-600
42+
dark:border-info-800;
43+
}
44+
45+
&.neutral {
46+
@apply border-neutral-200
47+
bg-neutral-600
48+
dark:border-neutral-800;
49+
}
3850
}

‎packages/ui-components/src/Common/Badge/index.stories.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,18 @@ export const Warning: Story = {
2323
},
2424
};
2525

26+
export const Info: Story = {
27+
args: {
28+
kind: 'info',
29+
},
30+
};
31+
32+
export const Neutral: Story = {
33+
args: {
34+
kind: 'neutral',
35+
},
36+
};
37+
2638
export const Small: Story = {
2739
args: {
2840
size: 'small',

‎packages/ui-components/src/Common/Badge/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
33

44
import styles from './index.module.css';
55

6-
type BadgeKind = 'default' | 'warning' | 'error';
6+
type BadgeKind = 'default' | 'warning' | 'error' | 'info' | 'neutral';
77
type BadgeSize = 'small' | 'medium';
88

99
type BadgeProps = HTMLAttributes<HTMLSpanElement> & {

‎packages/ui-components/src/Common/BadgeGroup/index.module.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,40 @@
7777
dark:text-warning-300;
7878
}
7979
}
80+
81+
&.info {
82+
@apply border-info-200
83+
bg-info-100
84+
dark:border-info-700
85+
dark:bg-neutral-900;
86+
87+
.icon {
88+
@apply text-info-500
89+
dark:text-info-300;
90+
}
91+
92+
.message,
93+
.message a:not(:hover) {
94+
@apply text-info-700
95+
dark:text-info-300;
96+
}
97+
}
98+
99+
&.neutral {
100+
@apply border-neutral-200
101+
bg-neutral-100
102+
dark:border-neutral-700
103+
dark:bg-neutral-900;
104+
105+
.icon {
106+
@apply text-neutral-500
107+
dark:text-neutral-300;
108+
}
109+
110+
.message,
111+
.message a:not(:hover) {
112+
@apply text-neutral-700
113+
dark:text-neutral-300;
114+
}
115+
}
80116
}

0 commit comments

Comments
 (0)