Skip to content

Commit d12f6e4

Browse files
efekrsklbmuenzenmeyercanerakdas
authored
feat: add toggle to show/hide LTS releases (nodejs#8263)
* feat: add switch in eol table * feat: translation keys * refactor: client renaming * fix: dont create arrow fn onCheckedChange * chore: use tilde for version * refactor: rename prop * fixes test, but does it? * fix: add use client directive * fix: apply motion safe Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Efe <[email protected]> * refactor: use size instead of w&h Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Efe <[email protected]> * fix: use motion safe Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Efe <[email protected]> * refactor: use import type for types Co-authored-by: Caner Akdas <[email protected]> Signed-off-by: Efe <[email protected]> * fix: adjust focus visible ring offset * chore: update pnpm lock * revert: releaseData.mjs changes * revert: tablebody * feat: implement the switch in html/css only * revert: @radix-ui/react-switch install * revert: pnpm.lock * revert: tests * feat: new stories * ci: don't mind me triggering the ci --------- Signed-off-by: Efe <[email protected]> Co-authored-by: Brian Muenzenmeyer <[email protected]> Co-authored-by: Caner Akdas <[email protected]>
1 parent fc3bd6b commit d12f6e4

File tree

7 files changed

+151
-20
lines changed

7 files changed

+151
-20
lines changed

‎apps/site/components/EOL/EOLReleaseTable/TableBody.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const EOLReleaseTableBody: FC<EOLReleaseTableBodyProps> = ({
2828
<tbody>
2929
{eolReleases.map(release => (
3030
<Fragment key={release.major}>
31-
<tr>
31+
<tr data-lts={!!release.codename}>
3232
<td data-label="Version">
3333
v{release.major} {release.codename ? `(${release.codename})` : ''}
3434
</td>

‎apps/site/components/EOL/EOLReleaseTable/index.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@reference "../../../styles/index.css";
2+
3+
.eolTableWrapper {
4+
@apply contents;
5+
}
6+
7+
.eolTableWrapper:has(input[type='checkbox']:checked) tr[data-lts='false'] {
8+
@apply hidden;
9+
}

‎apps/site/components/EOL/EOLReleaseTable/index.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import Switch from '@node-core/ui-components/Common/Switch';
12
import { getTranslations } from 'next-intl/server';
23
import type { FC } from 'react';
34

45
import provideReleaseData from '#site/next-data/providers/releaseData';
56
import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
67
import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
78

9+
import styles from './index.module.css';
810
import EOLReleaseTableBody from './TableBody';
911

1012
const EOLReleaseTable: FC = async () => {
@@ -18,24 +20,27 @@ const EOLReleaseTable: FC = async () => {
1820
const t = await getTranslations();
1921

2022
return (
21-
<table id="tbVulnerabilities">
22-
<thead>
23-
<tr>
24-
<th>
25-
{t('components.eolTable.version')} (
26-
{t('components.eolTable.codename')})
27-
</th>
28-
<th>{t('components.eolTable.lastUpdated')}</th>
29-
<th>{t('components.eolTable.vulnerabilities')}</th>
30-
<th>{t('components.eolTable.details')}</th>
31-
</tr>
32-
</thead>
33-
34-
<EOLReleaseTableBody
35-
eolReleases={eolReleases}
36-
vulnerabilities={vulnerabilities}
37-
/>
38-
</table>
23+
<div className={styles.eolTableWrapper}>
24+
<Switch id="hide-non-lts" label={t('components.eolTable.hideNonLts')} />
25+
<table id="tbVulnerabilities">
26+
<thead>
27+
<tr>
28+
<th>
29+
{t('components.eolTable.version')} (
30+
{t('components.eolTable.codename')})
31+
</th>
32+
<th>{t('components.eolTable.lastUpdated')}</th>
33+
<th>{t('components.eolTable.vulnerabilities')}</th>
34+
<th>{t('components.eolTable.details')}</th>
35+
</tr>
36+
</thead>
37+
38+
<EOLReleaseTableBody
39+
eolReleases={eolReleases}
40+
vulnerabilities={vulnerabilities}
41+
/>
42+
</table>
43+
</div>
3944
);
4045
};
4146

‎packages/i18n/src/locales/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,8 @@
214214
"releaseDate": "Released at",
215215
"lastUpdated": "Last updated",
216216
"vulnerabilities": "Vulnerabilities",
217-
"details": "Details"
217+
"details": "Details",
218+
"hideNonLts": "Hide non-LTS versions"
218219
},
219220
"minorReleasesTable": {
220221
"version": "Version",

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@reference "../../styles/index.css";
2+
3+
.switch {
4+
@apply inline-flex
5+
justify-end
6+
gap-3;
7+
8+
.label {
9+
@apply cursor-pointer
10+
select-none
11+
text-sm
12+
font-medium
13+
text-neutral-800
14+
dark:text-neutral-200;
15+
}
16+
17+
.input {
18+
@apply sr-only;
19+
}
20+
21+
.root {
22+
@apply w-10.5
23+
relative
24+
inline-flex
25+
h-6
26+
cursor-pointer
27+
items-center
28+
rounded-full
29+
bg-black
30+
motion-safe:transition-colors
31+
motion-safe:duration-100
32+
motion-safe:ease-out
33+
dark:bg-neutral-700;
34+
}
35+
36+
.input:focus-visible + .root {
37+
@apply ring-2
38+
ring-green-500
39+
ring-offset-2
40+
ring-offset-neutral-100
41+
dark:ring-green-400
42+
dark:ring-offset-neutral-900;
43+
}
44+
45+
.input:checked + .root {
46+
@apply bg-green-600;
47+
}
48+
49+
.thumb {
50+
@apply pointer-events-none
51+
block
52+
size-5
53+
translate-x-0.5
54+
rounded-full
55+
bg-white
56+
ring-0
57+
motion-safe:transition-transform
58+
motion-safe:duration-100
59+
motion-safe:ease-out;
60+
}
61+
62+
.input:checked + .root .thumb {
63+
@apply translate-x-5;
64+
}
65+
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import Switch from '#ui/Common/Switch';
4+
5+
type Story = StoryObj<typeof Switch>;
6+
type Meta = MetaObj<typeof Switch>;
7+
8+
export const WithLabel: Story = {
9+
args: {
10+
label: 'Enable Feature',
11+
},
12+
};
13+
14+
export const WithoutLabel: Story = {};
15+
16+
export default {
17+
component: Switch,
18+
parameters: {
19+
layout: 'centered',
20+
},
21+
} as Meta;

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import classNames from 'classnames';
2+
import type { FC, PropsWithChildren, InputHTMLAttributes } from 'react';
3+
4+
import styles from './index.module.css';
5+
6+
type SwitchProps = InputHTMLAttributes<HTMLInputElement> & {
7+
id: string;
8+
label?: string;
9+
thumbClassName?: string;
10+
};
11+
12+
const Switch: FC<PropsWithChildren<SwitchProps>> = ({
13+
label,
14+
className,
15+
thumbClassName,
16+
id,
17+
...props
18+
}) => {
19+
return (
20+
<label className={styles.switch}>
21+
{label && <span className={styles.label}>{label}</span>}
22+
<input id={id} type="checkbox" className={styles.input} {...props} />
23+
<div className={classNames(styles.root, className)}>
24+
<div className={classNames(styles.thumb, thumbClassName)} />
25+
</div>
26+
</label>
27+
);
28+
};
29+
30+
export default Switch;

0 commit comments

Comments
 (0)