feat: add CrossLink component (nodejs#5781)

* feat: add CrossLink component * chore: add neutral 950 color * Apply suggestions from code review Signed-off-by: Claudio W <[email protected]> --------- Signed-off-by: Claudio W <[email protected]> Co-authored-by: Claudio W <[email protected]>
niyashiyas · Sep 26, 2023 · 4eca18b · 4eca18b
1 parent e9bffbd
commit 4eca18b
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 2 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,3 +1,3 @@
 <body
-  class="bg-white font-open-sans text-black dark:bg-black dark:text-white"
+  class="bg-white font-open-sans text-neutral-950 dark:bg-neutral-950 dark:text-white"
 ></body>
diff --git a/components/Common/CrossLink/index.module.css b/components/Common/CrossLink/index.module.css
@@ -0,0 +1,48 @@
+.crossLink {
+  @apply flex
+    flex-col
+    items-start
+    gap-2
+    rounded
+    border
+    border-solid
+    border-neutral-300
+    bg-white
+    p-3
+    dark:border-neutral-900
+    dark:bg-neutral-950;
+
+  .header {
+    @apply flex
+      items-center
+      gap-2
+      self-stretch
+      text-xs
+      text-neutral-800
+      dark:text-neutral-100;
+
+    &.reverse {
+      @apply flex-row-reverse
+        justify-start;
+    }
+
+    .icon {
+      @apply h-4
+        w-4
+        text-neutral-600
+        dark:text-neutral-400;
+    }
+  }
+
+  .content {
+    @apply self-stretch
+      truncate
+      text-sm
+      text-neutral-900
+      dark:text-white;
+
+    &.reverse {
+      @apply text-right;
+    }
+  }
+}
diff --git a/components/Common/CrossLink/index.stories.tsx b/components/Common/CrossLink/index.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import CrossLink from './index';
+
+type Story = StoryObj<typeof CrossLink>;
+type Meta = MetaObj<typeof CrossLink>;
+
+export const Prev: Story = {
+  args: {
+    type: 'previous',
+    text: 'How to install Node.js',
+    url: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
+  },
+  decorators: [
+    Story => (
+      <div className="w-[305px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Next: Story = {
+  args: {
+    type: 'next',
+    text: 'How much JavaScript do you need to know to use Node.js?',
+    url: 'https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/',
+  },
+  decorators: [
+    Story => (
+      <div className="w-[305px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default { component: CrossLink } as Meta;
diff --git a/components/Common/CrossLink/index.tsx b/components/Common/CrossLink/index.tsx
@@ -0,0 +1,35 @@
+import styles from './index.module.css';
+import classNames from 'classnames';
+import LocalizedLink from '@/components/LocalizedLink';
+import PrevNextArrow from '@/components/Common/PrevNextArrow';
+import { FormattedMessage } from 'react-intl';
+import type { FC } from 'react';
+
+type CrossLinkProps = {
+  type: 'previous' | 'next';
+  text: string;
+  url: string;
+};
+
+const CrossLink: FC<CrossLinkProps> = ({ type, text, url }) => (
+  <LocalizedLink className={styles.crossLink} href={url}>
+    <span
+      className={classNames(styles.header, {
+        [styles.reverse]: type === 'next',
+      })}
+    >
+      <PrevNextArrow className={styles.icon} type={type} />
+      <FormattedMessage id={`components.common.crossLink.${type}`} />
+    </span>
+
+    <span
+      className={classNames(styles.content, {
+        [styles.reverse]: type === 'next',
+      })}
+    >
+      {text}
+    </span>
+  </LocalizedLink>
+);
+
+export default CrossLink;
diff --git a/components/Common/PrevNextArrow/index.tsx b/components/Common/PrevNextArrow/index.tsx
@@ -0,0 +1,15 @@
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
+import type { FC, SVGAttributes } from 'react';
+
+type PrevNextArrowProps = {
+  type: 'previous' | 'next';
+} & SVGAttributes<SVGSVGElement>;
+
+const PrevNextArrow: FC<PrevNextArrowProps> = ({ type, ...extra }) => {
+  const ChevronComponent =
+    type === 'previous' ? ChevronLeftIcon : ChevronRightIcon;
+
+  return <ChevronComponent {...extra} />;
+};
+
+export default PrevNextArrow;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -34,6 +34,8 @@
   "components.header.buttons.toggleDarkMode": "Toggle dark/light mode",
   "components.pagination.next": "Newer | ",
   "components.pagination.previous": "Older",
+  "components.common.crossLink.previous": "Prev",
+  "components.common.crossLink.next": "Next",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
   "layouts.blogIndex.currentYear": "News from {year}",
   "components.api.jsonLink.title": "View as JSON",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,6 +31,7 @@ export default {
         700: '#6E7B83',
         800: '#556066',
         900: '#2C3437',
+        950: '#0D121C',
       },
       danger: {
         100: '#FBF1F0',
@@ -88,7 +89,6 @@ export default {
         900: '#411526',
       },
       white: '#FFFFFF',
-      black: '#0D121C',
     },
     fontSize: {
       xs: ['0.75rem', '1rem'],