migration(Layout): newFooter

components/NewFooter/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tests for Footer component renders correctly 1`] = `
+<div>
+  <footer
+    class="footer"
+  >
+    <ul
+      class="left"
+    >
+      <li>
+        <a
+          aria-label="Node.js Trademark Policy - PDF (Opens in new tab)"
+          class="link"
+          href="https://trademark-policy.openjsf.org/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          components.footer.links.trademark
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Privacy Policy - PDF (Opens in new tab)"
+          class="link"
+          href="https://privacy-policy.openjsf.org/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          components.footer.links.privacy
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="https://github.com/openjs-foundation/cross-project-council/blob/main/CODE_OF_CONDUCT.md#contributor-covenant-code-of-conduct"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          components.footer.links.codeOfConduct
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="/en/about/security"
+        >
+          components.footer.links.security
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="/en/about"
+        >
+          components.footer.links.about
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="/en/blog"
+        >
+          components.footer.links.blog
+        </a>
+      </li>
+    </ul>
+    <ul
+      class="right"
+    >
+      <li>
+        © OpenJS Foundation
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Github Page (opens in new tab)"
+          href="https://github.com/nodejs/node"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 496 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Mastodon (opens in new tab)"
+          href="https://mastodon.social/@[email protected]"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 448 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Twitter (opens in new tab)"
+          href="https://twitter.com/nodejs"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="Node.js Slack (opens in new tab)"
+          href="https://slack.openjsf.org"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 448 512"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z"
+            />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </footer>
+</div>
+`;

components/NewFooter/__tests__/index.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import Footer from '..';
+
+// mock useRouter
+jest.mock('next/router', () => ({
+  useRouter() {
+    return {
+      locale: 'en',
+    };
+  },
+}));
+
+jest.mock('../../../hooks/useLocale', () => ({
+  useLocale: () => ({
+    currentLocale: { code: 'en', name: 'English', localName: 'English' },
+  }),
+}));
+
+describe('Tests for Footer component', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <Footer />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

components/NewFooter/index.module.scss

@@ -0,0 +1,102 @@
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 0;
+  margin-top: auto;
+
+  @media (max-width: 900px) {
+    flex-direction: column;
+  }
+
+  .left {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: space-between;
+    list-style: none;
+
+    li a {
+      color: var(--color-text-primary);
+
+      &:hover {
+        color: var(--color-brand-primary);
+      }
+    }
+
+    > li:first-of-type {
+      border-right: 1px solid var(--black5);
+      margin-right: 12px;
+      padding-right: 12px;
+      padding-top: 0;
+    }
+
+    @media (max-width: 900px) {
+      align-items: center;
+      flex-direction: column;
+      height: 10rem;
+      justify-content: center;
+
+      > li:first-of-type {
+        border-right: none;
+        margin-right: 0;
+        padding: 6px 0;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: space-between;
+    list-style: none;
+    margin-right: 20px;
+
+    > li svg {
+      height: 1.8rem;
+      width: 1.8rem;
+    }
+
+    @media (max-width: 900px) {
+      margin: 0;
+
+      > li:first-of-type {
+        margin-left: 0;
+        margin-right: auto;
+      }
+
+      > li {
+        margin-left: 18px;
+      }
+    }
+  }
+
+  .left,
+  .right {
+    > li {
+      font-size: 12px;
+      height: 24px;
+      margin-right: 32px;
+
+      @media (max-width: 900px) {
+        margin-right: 0;
+        padding: 6px 0;
+      }
+    }
+
+    @media (max-width: 900px) {
+      padding: 6px 18px;
+    }
+  }
+
+  .link {
+    text-decoration: none;
+  }
+
+  svg {
+    fill: var(--color-text-secondary);
+    height: 1.8rem;
+    width: 1.8rem;
+  }
+}

components/NewFooter/index.stories.tsx

@@ -0,0 +1,11 @@
+import Footer from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Footer>;
+type Meta = MetaObj<typeof Footer>;
+
+export const Default: Story = {};
+
+export default {
+  component: Footer,
+} as Meta;