@redocly/theme 0.1.11 → 0.1.12

package/src/Layout/__tests__/PageLayout.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { PageLayout } from '@theme/Layout/PageLayout';
-
-describe('PageLayout', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <PageLayout sidebar={<div>sidebar</div>}>
-        <div>test content</div>
-      </PageLayout>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Layout/__tests__/RootLayout.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { RootLayout } from '@theme/Layout/RootLayout';
-
-describe('RootLayout', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <RootLayout footer={<div>footer</div>} navbar={<div>navbar</div>}>
-        <div>content</div>
-      </RootLayout>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageLayout renders 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height));
-}
-
-.c1 {
-  -webkit-flex: 1 0 0;
-  -ms-flex: 1 0 0;
-  flex: 1 0 0;
-  width: 0;
-  max-width: 100%;
-}
-
-<div
-  class="c0"
-  data-component-name="Layout/PageLayout"
->
-  <div>
-    sidebar
-  </div>
-  <div
-    class="c1"
-  >
-    <div>
-      test content
-    </div>
-  </div>
-</div>
-`;

package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RootLayout renders 1`] = `
-<div
-  class=""
-  data-component-name="Layout/RootLayout"
->
-  <div>
-    navbar
-  </div>
-  <div>
-    content
-  </div>
-  <div>
-    footer
-  </div>
-</div>
-`;

package/src/Navbar/Navbar.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Navbar } from './Navbar';
-import { NavbarMenu } from './NavbarMenu';
-
-import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
-
-export default {
-  title: 'Components/Navbar',
-  component: Navbar,
-} as ComponentMeta<typeof Navbar>;
-
-const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args} />;
-
-export const Main = Template.bind({});
-Main.args = {
-  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: '/test/', label: 'Test' },
-      ]}
-    />
-  ),
-  search: <span> search </span>,
-};

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

@@ -1,55 +0,0 @@
-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

@@ -1,256 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
-
-export default {
-  title: 'Portal/NavbarLogo',
-  component: NavbarLogo,
-} as ComponentMeta<typeof NavbarLogo>;
-
-const Template: ComponentStory<typeof NavbarLogo> = (args) => <NavbarLogo {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  logo: {
-    image: 'https://redocly.github.io/redoc/petstore-logo.png',
-    link: 'http://redocly.com/',
-    altText: 'Pet Store',
-  },
-};

package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { NavbarLogo } from '@theme/NavbarLogo';
-
-describe('NavbarLogo', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          image: 'https://test.com/logo.png',
-          altText: 'Navbar Logo',
-          link: 'https://test.com/',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders without link', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          image: 'https://test.com/logo.png',
-          altText: 'Navbar Logo',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders nothing, if no image provided', () => {
-    const { container } = renderWithTheme(
-      <NavbarLogo
-        logo={{
-          altText: 'Navbar Logo',
-          link: 'https://test.com/',
-        }}
-      />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-});

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

@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavbarLogo renders 1`] = `
-.c0 {
-  max-width: var(--logo-max-width);
-  max-height: var(--logo-max-height);
-  height: var(--logo-height);
-  margin: var(--logo-margin);
-}
-
-<a
-  href="https://test.com/"
-  to="https://test.com/"
->
-  <img
-    alt="Navbar Logo"
-    class="c0"
-    data-component-name="NavbarLogo/NavbarLogo"
-    src="https://test.com/logo.png"
-  />
-</a>
-`;
-
-exports[`NavbarLogo renders without link 1`] = `
-.c0 {
-  max-width: var(--logo-max-width);
-  max-height: var(--logo-max-height);
-  height: var(--logo-height);
-  margin: var(--logo-margin);
-}
-
-<img
-  alt="Navbar Logo"
-  class="c0"
-  data-component-name="NavbarLogo/NavbarLogo"
-  src="https://test.com/logo.png"
-/>
-`;

package/src/OperationBadge/OperationBadge.stories.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { OperationBadge } from '@theme/OperationBadge';
-
-export default {
-  title: 'Components/OperationBadge',
-  component: OperationBadge,
-  argTypes: {},
-} as ComponentMeta<typeof OperationBadge>;
-
-const Template: ComponentStory<typeof OperationBadge> = (args) => (
-  <OperationBadge {...args}>Default</OperationBadge>
-);
-
-export const Default = Template.bind({});
-Default.args = {};
-
-const TemplateAll: ComponentStory<typeof OperationBadge> = () => (
-  <>
-    <OperationBadge type="get">get</OperationBadge>
-    <OperationBadge type="post">post</OperationBadge>
-    <OperationBadge type="put">put</OperationBadge>
-    <OperationBadge type="delete">delete</OperationBadge>
-    <OperationBadge type="options">options</OperationBadge>
-    <OperationBadge type="patch">patch</OperationBadge>
-    <OperationBadge type="basic">basic</OperationBadge>
-    <OperationBadge type="link">link</OperationBadge>
-    <OperationBadge type="head">head</OperationBadge>
-    <OperationBadge type="hook">hook</OperationBadge>
-  </>
-);
-
-export const All = TemplateAll.bind({});
-All.args = {};

package/src/OperationBadge/__tests__/OperationBadge.test.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { OperationBadge } from '@theme/OperationBadge';
-
-describe('OperationBadge', () => {
-  it('renders basic', () => {
-    const { container } = render(<OperationBadge type={'basic'}>basic</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders get', () => {
-    const { container } = render(<OperationBadge type={'get'}>get</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders post', () => {
-    const { container } = render(<OperationBadge type={'post'}>post</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders put', () => {
-    const { container } = render(<OperationBadge type={'put'}>put</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders delete', () => {
-    const { container } = render(<OperationBadge type={'delete'}>delete</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders options', () => {
-    const { container } = render(<OperationBadge type={'options'}>options</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders patch', () => {
-    const { container } = render(<OperationBadge type={'patch'}>patch</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders link', () => {
-    const { container } = render(<OperationBadge type={'link'}>link</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders head', () => {
-    const { container } = render(<OperationBadge type={'head'}>head</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-  it('renders hook', () => {
-    const { container } = render(<OperationBadge type={'hook'}>hook</OperationBadge>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});