@redocly/theme 0.1.10 → 0.1.11

package/src/Navbar/__tests__/Navbar.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { Navbar, NavbarMenu } from '@theme/Navbar';
+import { NavbarLogo } from '@theme/NavbarLogo';
+
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+  return {
+    __esModule: true,
+    ...originalModule,
+    useLocation: jest.fn().mockReturnValue({ pathname: '/' }),
+  };
+});
+
+describe('Navbar', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <Navbar
+        logo={
+          <NavbarLogo
+            logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
+          />
+        }
+        menu={
+          <NavbarMenu
+            menuItems={[
+              { type: 'link', link: 'https://google.com', label: 'Google' },
+              { type: 'link', link: '/', label: 'Test' },
+            ]}
+          />
+        }
+        search={<span> Search </span>}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders with empty menu items', () => {
+    const { container } = renderWithTheme(
+      <Navbar
+        logo={
+          <NavbarLogo
+            logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
+          />
+        }
+        menu={<NavbarMenu menuItems={[]} />}
+        search={<span> Search </span>}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Navbar/__tests__/__snapshots__/Navbar.test.tsx.snap

@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar renders 1`] = `
+.c0 {
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: var(--navbar-text-color);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: 10px var(--sidebar-margin-left);
+  background: var(--navbar-background-color);
+  font-family: var(--h-font-family);
+}
+
+.c3 {
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: none;
+}
+
+.c6 {
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: var(--navbar-item-active-background-color);
+}
+
+.c4 {
+  color: var(--navbar-text-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 {
+  color: var(--navbar-item-active-text-color);
+  -webkit-text-decoration: var(--navbar-item-active-text-decoration);
+  text-decoration: var(--navbar-item-active-text-decoration);
+}
+
+.c5 {
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.c2 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.c1 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+@media screen and (min-width:85rem) {
+  .c0 {
+    padding: 10px var(--sidebar-margin-left);
+    font-size: 1rem;
+  }
+}
+
+@media print {
+  .c0 {
+    background: transparent;
+    display: none;
+  }
+
+  .c0 > :not(a,img) {
+    display: none !important;
+  }
+
+  .c0 img {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+@media screen and (min-width:85rem) {
+  .c2 {
+    display: block;
+  }
+}
+
+<nav
+  class="c0"
+  data-component-name="Navbar/Navbar"
+>
+  <a
+    href="/test/"
+    to="/test/"
+  >
+    <img
+      alt="test"
+      class="c1"
+      data-component-name="NavbarLogo/NavbarLogo"
+      src="https://picsum.photos/id/2/400/100"
+    />
+  </a>
+  <ul
+    class="c2"
+    data-component-name="Navbar/NavbarMenu"
+  >
+    <li
+      class="c3"
+      data-component-name="Navbar/NavbarItem"
+    >
+      <a
+        class="c4"
+        href="https://google.com"
+        to="https://google.com"
+      >
+        <span
+          class="c5"
+        >
+          Google
+        </span>
+      </a>
+    </li>
+    <li
+      class="c6"
+      data-component-name="Navbar/NavbarItem"
+    >
+      <a
+        class="c7"
+        href="/"
+        to="/"
+      >
+        <span
+          class="c5"
+        >
+          Test
+        </span>
+      </a>
+    </li>
+  </ul>
+  <span>
+     Search 
+  </span>
+</nav>
+`;
+
+exports[`Navbar renders with empty menu items 1`] = `
+.c0 {
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: var(--navbar-text-color);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: 10px var(--sidebar-margin-left);
+  background: var(--navbar-background-color);
+  font-family: var(--h-font-family);
+}
+
+.c1 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+@media screen and (min-width:85rem) {
+  .c0 {
+    padding: 10px var(--sidebar-margin-left);
+    font-size: 1rem;
+  }
+}
+
+@media print {
+  .c0 {
+    background: transparent;
+    display: none;
+  }
+
+  .c0 > :not(a,img) {
+    display: none !important;
+  }
+
+  .c0 img {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+<nav
+  class="c0"
+  data-component-name="Navbar/Navbar"
+>
+  <a
+    href="/test/"
+    to="/test/"
+  >
+    <img
+      alt="test"
+      class="c1"
+      data-component-name="NavbarLogo/NavbarLogo"
+      src="https://picsum.photos/id/2/400/100"
+    />
+  </a>
+  <span>
+     Search 
+  </span>
+</nav>
+`;

package/src/NavbarLogo/NavbarLogo.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
 
 export default {
-  title: 'Components/NavbarLogo',
+  title: 'Portal/NavbarLogo',
   component: NavbarLogo,
 } as ComponentMeta<typeof NavbarLogo>;
 

package/src/PageNavigation/PageNavigation.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+
+export default {
+  title: 'Portal/PageNavigation',
+  component: PageNavigation,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+} as ComponentMeta<typeof PageNavigation>;
+
+const Template: ComponentStory<typeof PageNavigation> = () => (
+  <div style={{ maxWidth: '400px' }}>
+    <PageNavigation />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/PageNavigation/__tests__/NextPageLink.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
+import { usePageData } from '@portal/hooks/usePageData';
+
+jest.mock('@portal/hooks/usePageData');
+
+describe('NextPageLink', () => {
+  it('renders when nextPage is null', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({ prevPage: null, nextPage: null });
+
+    const { container } = renderWithTheme(<NextPageLink />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders when nextPage exists', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: null,
+      nextPage: { type: 'link', label: 'The Next Page', link: 'https://test.com' },
+    });
+
+    const { container } = renderWithTheme(<NextPageLink />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/PageNavigation/__tests__/PageNavigation.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+import { usePageData } from '@portal/hooks/usePageData';
+
+jest.mock('@portal/hooks/usePageData');
+
+describe('PageNavigation', () => {
+  it('renders', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: { type: 'link', label: 'The Previous Page', link: 'https://previous-page' },
+      nextPage: { type: 'link', label: 'The Next Page', link: 'https://next-page' },
+    });
+
+    const { container } = renderWithTheme(<PageNavigation />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with previous page only', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: { type: 'link', label: 'The Previous Page', link: 'https://previous-page' },
+      nextPage: null,
+    });
+
+    const { container } = renderWithTheme(<PageNavigation />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with missing next and previous pages', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: null,
+      nextPage: null,
+    });
+
+    const { container } = renderWithTheme(<PageNavigation />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with next page only', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: null,
+      nextPage: { type: 'link', label: 'The Next Page', link: 'https://next-page' },
+    });
+
+    const { container } = renderWithTheme(<PageNavigation />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/PageNavigation/__tests__/PreviousPageLink.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
+import { usePageData } from '@portal/hooks/usePageData';
+
+jest.mock('@portal/hooks/usePageData');
+
+describe('PreviousPageLink', () => {
+  it('renders when prevPage is null', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({ prevPage: null, nextPage: null });
+
+    const { container } = renderWithTheme(<PreviousPageLink />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders when prevPage exists', () => {
+    (usePageData as jest.MockedFn<any>).mockReturnValue({
+      prevPage: { type: 'link', label: 'The Previous Page', link: 'https://test.com' },
+      nextPage: null,
+    });
+
+    const { container } = renderWithTheme(<PreviousPageLink />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/PageNavigation/__tests__/__snapshots__/NextPageLink.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NextPageLink renders when nextPage exists 1`] = `
+.c1 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  width: auto;
+  outline: none;
+  border: none;
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  font-size: 14px;
+  padding: 2px 20px;
+  cursor: pointer;
+  -webkit-transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  transition: background-color 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
+  line-height: 1;
+  font-family: var(--button-font-family);
+  box-shadow: var(--button-box-shadow);
+  color: var(--button-background-color);
+  border: 2px solid var(--button-background-color);
+  background-color: transparent;
+  font-size: var(--button-large-font-size);
+  padding: var(--button-large-padding);
+  min-width: var(--button-large-min-width);
+}
+
+.c1:hover {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:active {
+  box-shadow: var(--button-active-box-shadow);
+}
+
+.c1:hover {
+  border: 2px solid var(--button-active-background-color);
+  background-color: transparent;
+}
+
+.c1:active {
+  border: 2px solid var(--button-outlined-active-border-color);
+}
+
+.c0 + .c0 {
+  margin-left: 0.85em;
+}
+
+<a
+  class="c0 c1 button-color-default"
+  data-component-name="ui/Button"
+  href="https://test.com"
+  role="button"
+  to="https://test.com"
+  variant="outlined"
+>
+  Next to 
+  The Next Page
+</a>
+`;
+
+exports[`NextPageLink renders when nextPage is null 1`] = `
+<div>
+   
+</div>
+`;