Redsign/new header

components/ActiveLocalizedLink.tsx

@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router';
+import { useState, useEffect, type FC } from 'react';
+import classNames from 'classnames';
+import LocalizedLink from './LocalizedLink';
+import type { LinkProps } from 'next/link';
+import type { PropsWithChildren } from 'react';
+
+type ActiveLocalizedLinkProps = PropsWithChildren &
+  LinkProps & {
+    className?: string;
+    activeClassName: string;
+  };
+
+const ActiveLocalizedLink: FC<ActiveLocalizedLinkProps> = ({
+  children,
+  activeClassName,
+  className,
+  ...props
+}) => {
+  const { asPath, isReady } = useRouter();
+  const [computedClassName, setComputedClassName] = useState(className);
+
+  useEffect(() => {
+    // Check if the router fields are updated client-side
+    if (isReady) {
+      // Dynamic route will be matched via props.as
+      // Static route will be matched via props.href
+      const linkPathName = new URL(
+        (props.as || props.href) as string,
+        location.href
+      ).pathname;
+
+      // Using URL().pathname to get rid of query and hash
+      const currentPathName = new URL(asPath, location.href).pathname;
+
+      const newClassName = classNames(className, {
+        activeClassName: linkPathName === currentPathName,
+      });
+
+      if (newClassName !== computedClassName) {
+        setComputedClassName(newClassName);
+      }
+    }
+  }, [
+    asPath,
+    isReady,
+    props.as,
+    props.href,
+    activeClassName,
+    className,
+    computedClassName,
+  ]);
+
+  return (
+    <LocalizedLink className={computedClassName} {...props}>
+      {children}
+    </LocalizedLink>
+  );
+};
+
+export default ActiveLocalizedLink;

components/Api/DataTag/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data Tag component renders with blue background color when tag is 'M' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="M"
+  >
+    M
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with red background color when tag is 'E' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="E"
+  >
+    E
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with yellow background color when tag is 'C' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="C"
+  >
+    C
+  </span>
+</div>
+`;

components/Api/DataTag/__tests__/index.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import DataTag from '../index';
+
+describe('Data Tag component', () => {
+  it(`renders with red background color when tag is 'E'`, () => {
+    const { container } = render(<DataTag tag="E" />);
+
+    expect(container).toHaveStyle('background-color: var(--danger6)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with yellow background color when tag is 'C'`, () => {
+    const { container } = render(<DataTag tag="C" />);
+
+    expect(container).toHaveStyle('background-color: var(--warning4)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with blue background color when tag is 'M'`, () => {
+    const { container } = render(<DataTag tag="M" />);
+
+    expect(container).toHaveStyle('background-color: var(--info6)');
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/Alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Alert component should render correctly 1`] = `
+<div>
+  <div
+    class="alert"
+  />
+</div>
+`;
+
+exports[`Alert component should support passing children into the component 1`] = `
+<div>
+  <div
+    class="alert"
+  >
+    This is an alert
+  </div>
+</div>
+`;

components/Article/Alert/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import Alert from '../index';
+
+describe('Alert component', () => {
+  it('should render correctly', () => {
+    const { container } = render(<Alert />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing children into the component', () => {
+    const { container } = render(<Alert>This is an alert</Alert>);
+
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/AuthorList/Author/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Author component does not render without a username 1`] = `
+<div>
+  <li>
+    <a
+      aria-label="components.article.author.githubLinkLabel"
+      class="link"
+      href="https://github.com/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <img
+        alt=""
+        data-nimg="1"
+        decoding="async"
+        height="0"
+        loading="lazy"
+        src="http://localhost/_next/image?url=https%3A%2F%2Fgithub.com%2F.png%3Fsize%3D0&w=16&q=75"
+        srcset="/_next/image?url=https%3A%2F%2Fgithub.com%2F.png%3Fsize%3D0&w=16&q=75 1x"
+        style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"
+        width="0"
+      />
+    </a>
+  </li>
+</div>
+`;
+
+exports[`Author component renders correctly 1`] = `
+<div>
+  <li>
+    <a
+      aria-label="components.article.author.githubLinkLabel"
+      class="link"
+      href="https://github.com/test-author"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <img
+        alt="test-author"
+        data-nimg="1"
+        decoding="async"
+        height="60"
+        loading="lazy"
+        src="http://localhost/_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=128&q=75"
+        srcset="/_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=128&q=75 2x"
+        style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"
+        width="60"
+      />
+    </a>
+  </li>
+</div>
+`;

components/Article/AuthorList/Author/__tests__/index.test.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import Author from '..';
+
+describe('Author component', () => {
+  it('renders correctly', () => {
+    const username = 'test-author';
+    const { container } = render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <Author username={username} size={60} />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('does not render without a username', () => {
+    const { container } = render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <Author username="" size={0} />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/AuthorList/__tests__/__snapshots__/authors-list.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AuthorsList component renders correctly 1`] = `
+<div>
+  <div
+    class="authorList"
+  >
+    components.article.authorList.title
+    <ul>
+      <li>
+        <a
+          aria-label="components.article.author.githubLinkLabel"
+          class="link"
+          href="https://github.com/test-author"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="test-author"
+            data-nimg="1"
+            decoding="async"
+            height="60"
+            loading="lazy"
+            src="http://localhost/_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=128&q=75"
+            srcset="/_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fgithub.com%2Ftest-author.png%3Fsize%3D60&w=128&q=75 2x"
+            style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"
+            width="60"
+          />
+        </a>
+      </li>
+      <li>
+        <a
+          aria-label="components.article.author.githubLinkLabel"
+          class="link"
+          href="https://github.com/another-test-author"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img
+            alt="another-test-author"
+            data-nimg="1"
+            decoding="async"
+            height="60"
+            loading="lazy"
+            src="http://localhost/_next/image?url=https%3A%2F%2Fgithub.com%2Fanother-test-author.png%3Fsize%3D60&w=128&q=75"
+            srcset="/_next/image?url=https%3A%2F%2Fgithub.com%2Fanother-test-author.png%3Fsize%3D60&w=64&q=75 1x, /_next/image?url=https%3A%2F%2Fgithub.com%2Fanother-test-author.png%3Fsize%3D60&w=128&q=75 2x"
+            style="color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"
+            width="60"
+          />
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+`;

components/Article/AuthorList/__tests__/authors-list.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import AuthorsList from '..';
+
+describe('AuthorsList component', () => {
+  it('renders correctly', () => {
+    const authors = ['test-author', 'another-test-author'];
+    const { container } = render(
+      <IntlProvider locale="en" onError={() => {}}>
+        <AuthorsList authors={authors} />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

components/Article/BlockQuote/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockQuote component should render correctly 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  />
+</div>
+`;
+
+exports[`BlockQuote component should support passing children into the component 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  >
+    This is a block quote
+  </div>
+</div>
+`;
+
+exports[`BlockQuote component should support passing multiple children into the component 1`] = `
+<div>
+  <div
+    class="blockQuote"
+  >
+    <p>
+      This is a block quote
+    </p>
+    <p>
+      This is a block quote
+    </p>
+  </div>
+</div>
+`;

components/Article/BlockQuote/__tests__/index.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import BlockQuote from '../index';
+
+describe('BlockQuote component', () => {
+  it('should render correctly', () => {
+    const { container } = render(<BlockQuote />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing children into the component', () => {
+    const { container } = render(
+      <BlockQuote>This is a block quote</BlockQuote>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should support passing multiple children into the component', () => {
+    const { container } = render(
+      <BlockQuote>
+        <p>This is a block quote</p>
+        <p>This is a block quote</p>
+      </BlockQuote>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});