Skip to content

Commit 2a5d26f

Browse files
ovflowdbmuenzenmeyeravivkellercanerakdas
authored
feat: icons with versions (#7962)
* feat: icons with versions * chore: no margin on mobile * chore: lts explanation * fix: css hover for links on dark color not so different * chore: just tiny copyright * chore: use actual link * Apply suggestion from @bmuenzenmeyer Co-authored-by: Brian Muenzenmeyer <[email protected]> Signed-off-by: Claudio Wunder <[email protected]> * Apply suggestion from @avivkeller Co-authored-by: Aviv Keller <[email protected]> Signed-off-by: Claudio Wunder <[email protected]> * chore: code review changes * chore: tiny text update * chore: by the honour of grayskull * Update apps/site/pages/en/index.mdx Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Claudio Wunder <[email protected]> --------- Signed-off-by: Claudio Wunder <[email protected]> Co-authored-by: Brian Muenzenmeyer <[email protected]> Co-authored-by: Aviv Keller <[email protected]> Co-authored-by: Caner Akdas <[email protected]>
1 parent a459447 commit 2a5d26f

File tree

14 files changed

+197
-47
lines changed

14 files changed

+197
-47
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/next.mdx.use.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use strict';
22

3+
import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup';
4+
35
import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
46
import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings';
57
import WithBadgeGroup from './components/withBadgeGroup';
@@ -19,6 +21,8 @@ export const mdxComponents = {
1921
WithBanner,
2022
// HOC for providing Badge Data
2123
WithBadgeGroup,
24+
// Standalone Badge Group
25+
BadgeGroup,
2226
// Renders an container for Upcoming Node.js Meetings
2327
UpcomingMeetings,
2428
};

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

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,33 @@ layout: home
1717
<div className="flex gap-4">
1818

1919
<div className="flex flex-col gap-2">
20-
<Button kind="special" className="!hidden dark:!block" href="/download">Install Node.js</Button>
20+
<Button kind="special" className="!hidden dark:!block" href="/download">Get Node.js®</Button>
2121

22-
<Button kind="primary" className="!block dark:!hidden" href="/download">Install Node.js</Button>
22+
<Button kind="primary" className="!block dark:!hidden" href="/download">Get Node.js®</Button>
2323

2424
<Button kind="secondary" className="!block" href="/blog/announcements/node-18-eol-support">
2525
<span>Get security support</span>
2626
<br />
2727
<small className="!text-xs">for Node.js 18 and below</small>
2828
</Button>
29+
30+
<div className="flex flex-col xs:flex-row gap-2 justify-center xs:mt-6">
31+
<WithNodeRelease status="LTS">
32+
{({ release }) =>
33+
<BadgeGroup size="small" kind="info" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
34+
Node.js LTS
35+
</BadgeGroup>}
36+
</WithNodeRelease>
37+
38+
<WithNodeRelease status="Current">
39+
{({ release }) =>
40+
<BadgeGroup size="small" badgeText={release.versionWithPrefix} href={`/blog/release/${release.versionWithPrefix}`}>
41+
Node.js Current
42+
</BadgeGroup>}
43+
</WithNodeRelease>
44+
</div>
45+
46+
<span className="italic text-center text-xs! text-neutral-800 dark:text-neutral-600">"LTS" refers to the long-term support version of Node.js. <Link href="/about/previous-releases">Learn more about Node.js releases.</Link></span>
2947
</div>
3048

3149
</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: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ 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';
7+
type BadgeSize = 'small' | 'medium';
78

89
type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
9-
size?: 'small' | 'medium';
10+
size?: BadgeSize;
1011
kind?: BadgeKind;
1112
};
1213

0 commit comments

Comments
 (0)