@redocly/theme 0.1.8 → 0.1.11

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

@@ -0,0 +1,38 @@
+// 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/NavbarLogo/index.ts

@@ -0,0 +1 @@
+export * from '@theme/NavbarLogo/NavbarLogo';

package/src/OperationBadge/OperationBadge.stories.tsx

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

package/src/OperationBadge/index.ts

@@ -1 +1 @@
-export * from './OperationBadge';
+export * from '@theme/OperationBadge/OperationBadge';

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>
+`;

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

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

@@ -0,0 +1,67 @@
+// 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/PageNavigation/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/PageNavigation/NextPageLink';
+export * from '@theme/PageNavigation/PageNavigation';
+export * from '@theme/PageNavigation/PreviousPageLink';

package/src/Panel/index.ts

@@ -1,8 +1,8 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-export * from './PanelComponent';
-export * from './PanelHeader';
-export * from './PanelHeaderTitle';
+export * from '@theme/Panel/CodePanel';
+export * from '@theme/Panel/ContentPanel';
+export * from '@theme/Panel/DarkHeader';
+export * from '@theme/Panel/Panel';
+export * from '@theme/Panel/PanelBody';
+export * from '@theme/Panel/PanelComponent';
+export * from '@theme/Panel/PanelHeader';
+export * from '@theme/Panel/PanelHeaderTitle';

package/src/SamplesPanelControls/SamplesControlButton.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
 
 export default {
-  title: 'Samples Control Button',
+  title: 'Components/Samples Control Button',
   component: SamplesControlButton,
 } as ComponentMeta<typeof SamplesControlButton>;
 

package/src/SamplesPanelControls/index.ts

@@ -1 +1 @@
-export * from './SamplesPanelControls';
+export * from '@theme/SamplesPanelControls/SamplesPanelControls';

package/src/Search/Autocomplete.tsx

@@ -124,5 +124,5 @@ const Overlay = styled.div`
 
 const Message = styled.div`
   padding: 24px;
-  color: var(--color-text-main);
+  color: var(--color-content);
 `;

package/src/Search/ClearIcon.tsx

@@ -2,18 +2,17 @@ import React, { SVGProps } from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
-  <span data-component-name="Search/ClearIcon">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      x="0"
-      y="0"
-      viewBox="0 0 298.7 298.7"
-      {...props}
-    >
-      <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
-    </svg>
-  </span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 298.7 298.7"
+    data-component-name="Search/ClearIcon"
+    {...props}
+  >
+    <polygon points="298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " />
+  </svg>
 );
 
 export const ClearIcon = styled(Icon)`