Migrate: Source-link (#5364)

* Migrate: Source-link

* Fix: JSON key moved to the end of the file

* Test: Storybook snapshot test

---------

Signed-off-by: Claudio Wunder <cwunder@gnome.org>
Co-authored-by: Claudio Wunder <cwunder@gnome.org>

components/Api/SourceLink/__snapshots__/index.stories.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Api/SourceLink Default smoke-test 1`] = `
+<p class="SourceLink_sourceLinkComponent__1vzdY">
+  Source Code:
+  <a href="https://github.com/nodejs/node/blob/1.0.0/http://nodejs.org/version/1.0.0">
+    http://nodejs.org/version/1.0.0
+  </a>
+</p>
+`;

components/Api/SourceLink/index.module.scss

@@ -0,0 +1,5 @@
+.sourceLinkComponent {
+  font-size: var(--font-size-body3);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+}

components/Api/SourceLink/index.stories.ts

@@ -0,0 +1,14 @@
+import SourceLink from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof SourceLink>;
+type Meta = MetaObj<typeof SourceLink>;
+
+export const Default: Story = {
+  args: {
+    version: '1.0.0',
+    link: 'http://nodejs.org/version/1.0.0',
+  },
+};
+
+export default { component: SourceLink } as Meta;

components/Api/SourceLink/index.tsx

@@ -0,0 +1,20 @@
+import { FormattedMessage } from 'react-intl';
+
+import styles from './index.module.scss';
+import type { FC } from 'react';
+
+type SourceLinkProps = {
+  link: string;
+  version: string;
+};
+
+const SourceLink: FC<SourceLinkProps> = ({ version, link }) => (
+  <p className={styles.sourceLinkComponent}>
+    <FormattedMessage id="components.api.sourceLink" />{' '}
+    <a href={`https://github.com/nodejs/node/blob/${version}/${link}`}>
+      {link}
+    </a>
+  </p>
+);
+
+export default SourceLink;

i18n/locales/en.json

@@ -61,5 +61,6 @@
   "components.common.shellBox.copy": "{copied, select, true {copied}other {copy}}",
   "components.codeBox.copy": "{copied, select, true {copied}other {copy}}",
   "components.api.stability": "Stability: {level} - ",
-  "components.api.jsonLink.title": "View as JSON"
+  "components.api.jsonLink.title": "View as JSON",
+  "components.api.sourceLink": "Source Code:"
 }