@redocly/theme 0.1.11 → 0.1.12

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

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

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

@@ -1,67 +0,0 @@
-// 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>
-`;

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

@@ -1,275 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PageNavigation renders 1`] = `
-.c2 {
-  -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);
-}
-
-.c2:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:hover {
-  border: 2px solid var(--button-active-background-color);
-  background-color: transparent;
-}
-
-.c2:active {
-  border: 2px solid var(--button-outlined-active-border-color);
-}
-
-.c1 + .c1 {
-  margin-left: 0.85em;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  margin: 25px 0px;
-}
-
-<div
-  class="c0"
-  data-component-name="PageNavigation/PageNavigation"
->
-  <a
-    class="c1 c2 button-color-default"
-    data-component-name="ui/Button"
-    href="https://previous-page"
-    role="button"
-    to="https://previous-page"
-    variant="outlined"
-  >
-    Back to 
-    The Previous Page
-  </a>
-  <a
-    class="c1 c2 button-color-default"
-    data-component-name="ui/Button"
-    href="https://next-page"
-    role="button"
-    to="https://next-page"
-    variant="outlined"
-  >
-    Next to 
-    The Next Page
-  </a>
-</div>
-`;
-
-exports[`PageNavigation renders with missing next and previous pages 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  margin: 25px 0px;
-}
-
-<div
-  class="c0"
-  data-component-name="PageNavigation/PageNavigation"
->
-  <div>
-     
-  </div>
-  <div>
-     
-  </div>
-</div>
-`;
-
-exports[`PageNavigation renders with next page only 1`] = `
-.c2 {
-  -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);
-}
-
-.c2:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:hover {
-  border: 2px solid var(--button-active-background-color);
-  background-color: transparent;
-}
-
-.c2:active {
-  border: 2px solid var(--button-outlined-active-border-color);
-}
-
-.c1 + .c1 {
-  margin-left: 0.85em;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  margin: 25px 0px;
-}
-
-<div
-  class="c0"
-  data-component-name="PageNavigation/PageNavigation"
->
-  <div>
-     
-  </div>
-  <a
-    class="c1 c2 button-color-default"
-    data-component-name="ui/Button"
-    href="https://next-page"
-    role="button"
-    to="https://next-page"
-    variant="outlined"
-  >
-    Next to 
-    The Next Page
-  </a>
-</div>
-`;
-
-exports[`PageNavigation renders with previous page only 1`] = `
-.c2 {
-  -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);
-}
-
-.c2:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c2:hover {
-  border: 2px solid var(--button-active-background-color);
-  background-color: transparent;
-}
-
-.c2:active {
-  border: 2px solid var(--button-outlined-active-border-color);
-}
-
-.c1 + .c1 {
-  margin-left: 0.85em;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  margin: 25px 0px;
-}
-
-<div
-  class="c0"
-  data-component-name="PageNavigation/PageNavigation"
->
-  <a
-    class="c1 c2 button-color-default"
-    data-component-name="ui/Button"
-    href="https://previous-page"
-    role="button"
-    to="https://previous-page"
-    variant="outlined"
-  >
-    Back to 
-    The Previous Page
-  </a>
-  <div>
-     
-  </div>
-</div>
-`;

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

@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PreviousPageLink renders when prevPage 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"
->
-  Back to 
-  The Previous Page
-</a>
-`;
-
-exports[`PreviousPageLink renders when prevPage is null 1`] = `
-<div>
-   
-</div>
-`;

package/src/Panel/CodePanel.stories.tsx

@@ -1,26 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { PanelComponentProps, CodePanel } from '@theme/Panel';
-
-export default {
-  title: 'Components/Panels/CodePanel',
-  component: CodePanel,
-} as ComponentMeta<typeof CodePanel>;
-
-// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <CodePanel {...args}>Code Panel body</CodePanel>
-);
-
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Code Panel header',
-  expanded: false,
-};
-
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Code Panel header',
-  expanded: true,
-};

package/src/Panel/ContentPanel.stories.tsx

@@ -1,26 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { ContentPanel, PanelComponentProps } from '@theme/Panel';
-
-export default {
-  title: 'Components/Panels/ContentPanel',
-  component: ContentPanel,
-} as ComponentMeta<typeof ContentPanel>;
-
-// TODO: find the way to avoid using JSXElementConstructor<PanelComponentProps> and fix types for ComponentStory<typeof CodePanel>
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <ContentPanel {...args}>Content Panel Body</ContentPanel>
-);
-
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Content Panel Header',
-  expanded: false,
-};
-
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Content Panel Header',
-  expanded: true,
-};

package/src/Panel/Panel.stories.tsx

@@ -1,56 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-
-import { Panel, PanelHeaderProps, PanelComponentProps } from '@theme/Panel';
-
-export default {
-  title: 'Components/Panels/Panel (base)',
-  component: Panel,
-} as ComponentMeta<typeof Panel>;
-
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <Panel {...args}>Panel body</Panel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  header: 'Panel header',
-};
-
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Panel header (click me)',
-  expanded: false,
-};
-
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Panel header (click me)',
-  expanded: true,
-};
-
-export const HeaderAsFunction = Template.bind({});
-HeaderAsFunction.args = {
-  header: (props: PanelHeaderProps) => <div>Custom Header component: {JSON.stringify(props)}</div>,
-};
-
-export const HeaderAsComponent = Template.bind({});
-HeaderAsComponent.args = {
-  header: <i>Header component</i>,
-};
-
-export const WithoutHeader = Template.bind({});
-WithoutHeader.args = {};
-
-// TODO: change to normal name after fixing problem with stories order!
-export const WithDemoAnimation = Template.bind({});
-WithDemoAnimation.args = {
-  expanded: false,
-  header: 'Panel header',
-};
-WithDemoAnimation.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-
-  await userEvent.click(canvas.getByTestId('panel-header'));
-};

package/src/Panel/__tests__/CodePanel.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { CodePanel } from '@theme/Panel';
-
-describe('CodePanel', () => {
-  it('renders collapsed', () => {
-    const { container } = render(
-      <CodePanel header={'CodePanel header'} expanded={false}>
-        CodePanel body
-      </CodePanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders expanded', () => {
-    const { container } = render(
-      <CodePanel header={'CodePanel header'} expanded={true}>
-        CodePanel body
-      </CodePanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Panel/__tests__/ContentPanel.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ContentPanel } from '@theme/Panel';
-
-describe('ContentPanel', () => {
-  it('renders collapsed', () => {
-    const { container } = render(
-      <ContentPanel header={'ContentPanel header'} expanded={false}>
-        ContentPanel body
-      </ContentPanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders expanded', () => {
-    const { container } = render(
-      <ContentPanel header={'ContentPanel header'} expanded={true}>
-        ContentPanel body
-      </ContentPanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});