[Draft] feat: migrate DownloadCards component

.storybook/main.ts

@@ -3,7 +3,11 @@ import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: ['../components/**/*.stories.tsx'],
-  addons: ['@storybook/addon-controls', '@storybook/addon-interactions'],
+  addons: [
+    '@storybook/addon-controls',
+    '@storybook/addon-interactions',
+    'storybook-addon-module-mock',
+  ],
   framework: { name: '@storybook/nextjs', options: {} },
   features: { storyStoreV7: true },
   docs: { autodocs: 'tag' },

components/Downloads/DownloadCards/DownloadCard/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Downloads/DownloadCards/DownloadCard NotSelected smoke-test 1`] = `
+<li role="tab"
+    id="tabdownload-card-MAC"
+    aria-selected="false"
+    aria-disabled="false"
+    aria-controls="paneldownload-card-MAC"
+    tabindex="0"
+    data-rttab="true"
+>
+  <div>
+    <img alt="MAC Installer"
+         loading="lazy"
+         width="48"
+         height="48"
+         decoding="async"
+         data-nimg="1"
+         srcset="/static/images/logos/mac-download-logo.svg?w=48&amp;q=75 1x, /static/images/logos/mac-download-logo.svg?w=96&amp;q=75 2x"
+         src="/static/images/logos/mac-download-logo.svg?w=96&amp;q=75"
+         style="color: transparent;"
+    >
+  </div>
+  <p>
+    MAC Installer
+  </p>
+  <p data-testid="lts">
+    node-v18.15.0.pkg
+  </p>
+</li>
+`;
+
+exports[`Downloads/DownloadCards/DownloadCard Selected smoke-test 1`] = `
+<li role="tab"
+    id="tabdownload-card-MAC"
+    aria-selected="false"
+    aria-disabled="false"
+    aria-controls="paneldownload-card-MAC"
+    tabindex="0"
+    data-rttab="true"
+>
+  <div>
+    <img alt="MAC Installer"
+         loading="lazy"
+         width="56"
+         height="56"
+         decoding="async"
+         data-nimg="1"
+         srcset="/static/images/logos/mac-download-logo.svg?w=64&amp;q=75 1x, /static/images/logos/mac-download-logo.svg?w=128&amp;q=75 2x"
+         src="/static/images/logos/mac-download-logo.svg?w=128&amp;q=75"
+         style="color: transparent;"
+    >
+    <a href="https://nodejs.org/dist/v18.15.0/node-v18.15.0.pkg">
+      <svg stroke="currentColor"
+           fill="currentColor"
+           stroke-width="0"
+           viewbox="0 0 24 24"
+           height="1em"
+           width="1em"
+           xmlns="http://www.w3.org/2000/svg"
+      >
+        <path fill="none"
+              d="M0 0h24v24H0z"
+        >
+        </path>
+        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z">
+        </path>
+      </svg>
+    </a>
+  </div>
+  <p>
+    MAC Installer
+  </p>
+  <p data-testid="lts">
+    node-v18.15.0.pkg
+  </p>
+</li>
+`;

components/Downloads/DownloadCards/DownloadCard/index.module.scss

@@ -0,0 +1,76 @@
+.downloadCard {
+  background-color: var(--color-fill-app);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 4px;
+  box-shadow: 5px 10px 50px rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  outline-offset: 8px;
+  padding: 16px;
+  width: 179px;
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .link {
+    align-items: center;
+    color: var(--black5);
+    display: grid;
+    text-decoration: none;
+    width: auto;
+  }
+
+  .label {
+    font-weight: var(--font-weight-semibold);
+    margin-top: 16px;
+
+    @media (max-width: 620px) {
+      font-size: var(--font-size-caption);
+      margin-top: 16px;
+    }
+  }
+
+  .filename {
+    font-size: var(--font-size-body3);
+    font-weight: var(--font-weight-regular);
+    line-height: 18px;
+
+    @media (max-width: 620px) {
+      font-size: var(--font-size-caption);
+      line-height: 12px;
+    }
+  }
+
+  &Active {
+    border-radius: 4px 4px 0px 0px;
+    border-top: 4px solid var(--brand5);
+
+    .label {
+      margin-top: 24px;
+
+      @media (max-width: 620px) {
+        font-size: var(--font-size-caption);
+        margin-top: 12px;
+      }
+    }
+
+    @media (max-width: 620px) {
+      width: 130px;
+    }
+
+    @media (max-width: 460px) {
+      width: 160px;
+    }
+  }
+
+  @media (max-width: 620px) {
+    margin-top: 16px;
+    padding: 8px;
+    width: 130px;
+  }
+}

components/Downloads/DownloadCards/DownloadCard/index.stories.tsx

@@ -0,0 +1,31 @@
+import DownloadCard from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof DownloadCard>;
+type Meta = MetaObj<typeof DownloadCard>;
+
+export const Selected: Story = {
+  args: {
+    os: 'MAC',
+    icon: 'mac-download-logo.svg',
+    label: 'MAC Installer',
+    download: 'https://nodejs.org/dist/v18.15.0/node-v18.15.0.pkg',
+    filename: 'node-v18.15.0.pkg',
+    selected: true,
+    onSelect: () => {},
+  },
+};
+
+export const NotSelected: Story = {
+  args: {
+    os: 'MAC',
+    icon: 'mac-download-logo.svg',
+    label: 'MAC Installer',
+    download: 'https://nodejs.org/dist/v18.15.0/node-v18.15.0.pkg',
+    filename: 'node-v18.15.0.pkg',
+    selected: false,
+    onSelect: () => {},
+  },
+};
+
+export default { component: DownloadCard } as Meta;

components/Downloads/DownloadCards/DownloadCard/index.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { MdGetApp } from 'react-icons/md';
+import { Tab } from 'react-tabs';
+import Image from 'next/image';
+import styles from './index.module.scss';
+import { useRouter } from '@/hooks/useRouter';
+import type { FC } from 'react';
+import type { UserOS } from '@/types/userOS';
+
+type DownloadCardProps = {
+  os: UserOS;
+  icon: string;
+  label: string;
+  download: string;
+  filename: string;
+  selected: boolean;
+  onSelect: (os: string) => void;
+};
+
+const DownloadCard: FC<DownloadCardProps> = ({
+  os,
+  icon,
+  label,
+  download,
+  filename,
+  selected,
+  onSelect,
+}) => {
+  const { basePath } = useRouter();
+
+  const tabClassNames = classNames(styles.downloadCard, {
+    [styles.downloadCardActive]: selected,
+  });
+  const selectCard = () => onSelect(os);
+  const size = selected ? 56 : 48;
+
+  return (
+    <Tab
+      className={tabClassNames}
+      id={`download-card-${os}`}
+      key={os}
+      onClick={selectCard}
+      selectedClassName={styles.downloadCardActive}
+      tabIndex="0"
+    >
+      <div className={styles.top}>
+        <Image
+          height={size}
+          width={size}
+          src={`${basePath}/static/images/logos/${icon}`}
+          alt={label}
+        />
+        {selected && (
+          <a className={styles.link} href={download}>
+            <MdGetApp />
+          </a>
+        )}
+      </div>
+      <p className={styles.label}>{label}</p>
+      <p className={styles.filename} data-testid="lts">
+        {filename}
+      </p>
+    </Tab>
+  );
+};
+
+export default DownloadCard;

components/Downloads/DownloadCards/__snapshots__/index.stories.tsx.snap

@@ -0,0 +1,108 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Downloads/DownloadCards Default smoke-test 1`] = `
+<div tabindex="-1"
+     data-rttabs="true"
+>
+  <ul role="tablist">
+    <li role="tab"
+        id="tabdownload-card-WIN"
+        aria-selected="false"
+        aria-disabled="false"
+        aria-controls="paneldownload-card-WIN"
+        tabindex="0"
+        data-rttab="true"
+    >
+      <div>
+        <img alt="Windows Installer"
+             loading="lazy"
+             width="56"
+             height="56"
+             decoding="async"
+             data-nimg="1"
+             srcset="/static/images/logos/windows-download-logo.svg?w=64&amp;q=75 1x, /static/images/logos/windows-download-logo.svg?w=128&amp;q=75 2x"
+             src="/static/images/logos/windows-download-logo.svg?w=128&amp;q=75"
+             style="color: transparent;"
+        >
+        <a href="https://nodejs.org/dist/v18.15.0/node-v18.15.0-x64.msi">
+          <svg stroke="currentColor"
+               fill="currentColor"
+               stroke-width="0"
+               viewbox="0 0 24 24"
+               height="1em"
+               width="1em"
+               xmlns="http://www.w3.org/2000/svg"
+          >
+            <path fill="none"
+                  d="M0 0h24v24H0z"
+            >
+            </path>
+            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z">
+            </path>
+          </svg>
+        </a>
+      </div>
+      <p>
+        Windows Installer
+      </p>
+      <p data-testid="lts">
+        node-v18.15.0-x64.msi
+      </p>
+    </li>
+    <li role="tab"
+        id="tabdownload-card-MAC"
+        aria-selected="false"
+        aria-disabled="false"
+        aria-controls="paneldownload-card-MAC"
+        tabindex="0"
+        data-rttab="true"
+    >
+      <div>
+        <img alt="MAC Installer"
+             loading="lazy"
+             width="48"
+             height="48"
+             decoding="async"
+             data-nimg="1"
+             srcset="/static/images/logos/mac-download-logo.svg?w=48&amp;q=75 1x, /static/images/logos/mac-download-logo.svg?w=96&amp;q=75 2x"
+             src="/static/images/logos/mac-download-logo.svg?w=96&amp;q=75"
+             style="color: transparent;"
+        >
+      </div>
+      <p>
+        MAC Installer
+      </p>
+      <p data-testid="lts">
+        node-v18.15.0.pkg
+      </p>
+    </li>
+    <li role="tab"
+        id="tabdownload-card-OTHER"
+        aria-selected="false"
+        aria-disabled="false"
+        aria-controls="paneldownload-card-OTHER"
+        tabindex="0"
+        data-rttab="true"
+    >
+      <div>
+        <img alt="Source Code"
+             loading="lazy"
+             width="48"
+             height="48"
+             decoding="async"
+             data-nimg="1"
+             srcset="/static/images/logos/source-code-download-logo.svg?w=48&amp;q=75 1x, /static/images/logos/source-code-download-logo.svg?w=96&amp;q=75 2x"
+             src="/static/images/logos/source-code-download-logo.svg?w=96&amp;q=75"
+             style="color: transparent;"
+        >
+      </div>
+      <p>
+        Source Code
+      </p>
+      <p data-testid="lts">
+        node-v18.15.0.tar.gz
+      </p>
+    </li>
+  </ul>
+</div>
+`;