@redocly/theme 0.1.10 → 0.1.13

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

@@ -1,274 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button renders 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-color);
-  background-color: var(--button-background-color);
-  font-size: var(--button-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-min-width);
-}
-
-.c1:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:hover {
-  background-color: var(--button-hover-background-color);
-}
-
-.c1:active {
-  background-color: var(--button-active-background-color);
-}
-
-.c0 + .c0 {
-  margin-left: 0.85em;
-}
-
-<button
-  class="c0 c1 button-color-default"
->
-  Test
-</button>
-`;
-
-exports[`Button renders blinking 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-color);
-  background-color: var(--button-background-color);
-  font-size: var(--button-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-min-width);
-  pointer-events: none;
-  -webkit-animation: hiqtTO 1.2s infinite;
-  animation: hiqtTO 1.2s infinite;
-}
-
-.c1:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:hover {
-  background-color: var(--button-hover-background-color);
-}
-
-.c1:active {
-  background-color: var(--button-active-background-color);
-}
-
-.c0 + .c0 {
-  margin-left: 0.85em;
-}
-
-<button
-  class="c0 c1 button-color-default"
->
-  Test
-</button>
-`;
-
-exports[`Button renders disabled 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-color);
-  background-color: var(--button-background-color);
-  font-size: var(--button-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-min-width);
-}
-
-.c1:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:hover {
-  background-color: var(--button-hover-background-color);
-}
-
-.c1:active {
-  background-color: var(--button-active-background-color);
-}
-
-.c0 + .c0 {
-  margin-left: 0.85em;
-}
-
-.c1,
-.c1:hover {
-  cursor: default;
-  color: #999999;
-  pointer-events: none;
-}
-
-<button
-  class="c0 c1 button-color-default"
-  disabled=""
->
-  Test
-</button>
-`;
-
-exports[`Button renders full width 1`] = `
-.c1 {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  width: 100%;
-  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-color);
-  background-color: var(--button-background-color);
-  font-size: var(--button-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-min-width);
-}
-
-.c1:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:hover {
-  background-color: var(--button-hover-background-color);
-}
-
-.c1:active {
-  background-color: var(--button-active-background-color);
-}
-
-.c0 + .c0 {
-  margin-left: 0.85em;
-}
-
-<button
-  class="c0 c1 button-color-default"
->
-  Test
-</button>
-`;
-
-exports[`Button renders outlined 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-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-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;
-}
-
-<button
-  class="c0 c1 button-color-default"
->
-  Test
-</button>
-`;

package/src/CodeBlock/__tests__/CodeBlock.test.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { CodeBlock } from '@theme/CodeBlock';
-
-describe('CodeBlock', () => {
-  it('renders', () => {
-    const { container } = render(<CodeBlock>Test</CodeBlock>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

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

@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CodeBlock renders 1`] = `
-.c0 {
-  max-height: var(--code-block-max-height,600px);
-  word-break: var(--code-block-word-break,initial);
-}
-
-.c0 code[class*='language-'],
-.c0 pre[class*='language-'] {
-  text-shadow: 0 -0.1em 0.2em black;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-.c0 pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-.c0 .token.comment,
-.c0 .token.prolog,
-.c0 .token.doctype,
-.c0 .token.cdata {
-  color: hsl(30,20%,50%);
-}
-
-.c0 .token.punctuation {
-  opacity: 1;
-}
-
-.c0 .namespace {
-  opacity: 0.7;
-}
-
-.c0 .token.property,
-.c0 .token.tag,
-.c0 .token.number,
-.c0 .token.constant,
-.c0 .token.symbol {
-  color: var(--color-content-inverse);
-}
-
-.c0 .token.boolean {
-  color: var(--color-error-500);
-}
-
-.c0 .token.selector,
-.c0 .token.attr-name,
-.c0 .token.string,
-.c0 .token.char,
-.c0 .token.builtin,
-.c0 .token.inserted {
-  color: #fee39e;
-}
-
-.c0 .token.selector + a,
-.c0 .token.attr-name + a,
-.c0 .token.string + a,
-.c0 .token.char + a,
-.c0 .token.builtin + a,
-.c0 .token.inserted + a,
-.c0 .token.selector + a:visited,
-.c0 .token.attr-name + a:visited,
-.c0 .token.string + a:visited,
-.c0 .token.char + a:visited,
-.c0 .token.builtin + a:visited,
-.c0 .token.inserted + a:visited {
-  color: #4ed2ba;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0 .token.property.string {
-  color: #9efaa7;
-}
-
-.c0 .token.operator,
-.c0 .token.entity,
-.c0 .token.url,
-.c0 .token.variable {
-  color: #f5b83d;
-}
-
-.c0 .token.atrule,
-.c0 .token.attr-value,
-.c0 .token.keyword {
-  color: #ffdbf4;
-}
-
-.c0 .token.regex,
-.c0 .token.important {
-  color: #e90;
-}
-
-.c0 .token.important,
-.c0 .token.bold {
-  font-weight: bold;
-}
-
-.c0 .token.italic {
-  font-style: italic;
-}
-
-.c0 .token.entity {
-  cursor: help;
-}
-
-.c0 .token.deleted {
-  color: red;
-}
-
-@media print {
-  .c0 code[class*='language-'],
-  .c0 pre[class*='language-'] {
-    text-shadow: none;
-  }
-}
-
-<div
-  class="c0"
->
-  Test
-</div>
-`;

package/src/CopyButton/CopyButton.stories.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { CopyButton } from '@theme/CopyButton';
-
-export default {
-  title: 'Components/CopyButton',
-  component: CopyButton,
-} as ComponentMeta<typeof CopyButton>;
-
-const Template: ComponentStory<typeof CopyButton> = (args) => (
-  <CopyButton {...args}>Copy</CopyButton>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Something useful',
-};

package/src/CopyButton/__tests__/CopyButton.test.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { fireEvent, getByText, render } from '@testing-library/react';
-
-import { CopyButton } from '@theme/CopyButton';
-
-const mockSetState = jest.fn();
-
-jest.mock('react', () => {
-  const original = jest.requireActual('react');
-  return {
-    ...original,
-    useState: (initial: any) => [initial, mockSetState],
-  };
-});
-
-describe('CopyButton', () => {
-  it('renders', () => {
-    const { container } = render(<CopyButton text="test copy" dataTestId="copy" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('changes button text on click', () => {
-    Object.assign(navigator, {
-      clipboard: { writeText: jest.fn() },
-    });
-    const textToCopy = 'test copy';
-    const { container } = render(<CopyButton text={textToCopy} />);
-    const button = getByText(container, /Copy/);
-
-    fireEvent.click(button);
-
-    expect(navigator.clipboard.writeText).toBeCalledWith(textToCopy);
-  });
-});

package/src/CopyButton/__tests__/CopyButtonWrapper.test.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { CopyButtonWrapper } from '@theme/CopyButton';
-
-describe('CopyButtonWrapper', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <CopyButtonWrapper data="Something" dataTestId="copy">
-        {({ renderCopyButton }) => <div>{renderCopyButton()}</div>}
-      </CopyButtonWrapper>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

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

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CopyButton renders 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-color);
-  background-color: var(--button-background-color);
-  font-size: var(--button-medium-font-size);
-  padding: var(--button-medium-padding);
-  min-width: var(--button-medium-min-width);
-}
-
-.c1:hover {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:active {
-  box-shadow: var(--button-active-box-shadow);
-}
-
-.c1:hover {
-  background-color: var(--button-hover-background-color);
-}
-
-.c1:active {
-  background-color: var(--button-active-background-color);
-}
-
-.c0 + .c0 {
-  margin-left: 0.85em;
-}
-
-<button
-  class="c0 c1 button-color-secondary"
-  color="secondary"
-  data-cy="copy"
->
-  Copy
-</button>
-`;

package/src/CopyButton/__tests__/__snapshots__/CopyButtonWrapper.test.tsx.snap

@@ -1,46 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CopyButtonWrapper renders 1`] = `
-.c1 {
-  background-color: var(--samples-panel-controls-background-color);
-  border: 0;
-  outline: 0;
-  border-radius: var(--global-border-radius);
-  height: 20px;
-  color: var(--color-content-inverse);
-  font-size: 12px;
-  line-height: 12px;
-  cursor: pointer;
-  padding: 1px 6px;
-  min-width: 90px;
-}
-
-.c1:hover,
-.c1:focus {
-  background-color: var(--samples-panel-controls-hover-background-color);
-}
-
-.c0 {
-  position: relative;
-  display: inline-block;
-}
-
-@media screen and (min-width:50rem) {
-  .c1 {
-    padding: 2px 20px;
-  }
-}
-
-<div>
-  <div
-    class="c0 tooltip-copy-button"
-  >
-    <button
-      class="c1"
-      data-cy="copy"
-    >
-      Copy
-    </button>
-  </div>
-</div>
-`;

package/src/Footer/Footer.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-
-import { Footer } from '@theme/Footer';
-
-export default {
-  title: 'Portal/Footer',
-  component: Footer,
-} as ComponentMeta<typeof Footer>;
-
-const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />;
-
-export const WithCopyrightOnly = Template.bind({});
-WithCopyrightOnly.args = {
-  copyrightText: 'Redocly ®',
-};
-
-export const WithColumns = Template.bind({});
-WithColumns.args = {
-  copyrightText: 'Redocly ®',
-  columns: [
-    {
-      group: 'Products',
-      items: [
-        { label: 'Portal', active: true, type: 'link', link: 'https://redocly.com/portals/' },
-        { label: 'Workflows', type: 'link', link: 'https://redocly.com/workflows/' },
-        { label: 'Redocly CLI', type: 'link', link: 'https://redocly.com/redocly-cli/' },
-      ],
-    },
-    {
-      group: 'Explore',
-      items: [
-        { label: 'Pricing', type: 'link', link: 'https://redocly.com/pricing/' },
-        { label: 'Enterprise', type: 'link', link: 'https://redocly.com/enterprise/' },
-        { label: 'Customers', type: 'link', link: 'https://redocly.com/customers/' },
-      ],
-    },
-    {
-      group: 'Resources',
-      items: [
-        { label: 'Docs', type: 'link', link: 'https://redocly.com/docs/' },
-        { label: 'Blog', type: 'link', link: 'https://redocly.com/blog/' },
-        { label: 'Webinars', type: 'link', link: 'https://redocly.com/webinars/' },
-        { label: 'Error link', type: 'error' },
-      ],
-    },
-    {
-      group: 'Other',
-      items: [
-        { label: 'External', type: 'link', link: 'https://google.com/', external: true },
-        { type: 'separator', separatorLine: true },
-        { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
-        { label: 'Error link', type: 'error' },
-      ],
-    },
-  ],
-};

package/src/Footer/__tests__/Footer.test.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { Footer } from '@theme/Footer';
-
-describe('Footer', () => {
-  it('renders columns with copyright and columns', () => {
-    const { container } = renderWithTheme(
-      <Footer
-        columns={[
-          {
-            group: 'Other',
-            items: [
-              { label: 'External', type: 'link', link: 'https://google.com/' },
-              { type: 'separator', separatorLine: true },
-              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
-              { label: 'Error link', type: 'error' },
-            ],
-          },
-          {
-            group: '',
-            label: 'Another',
-            items: [
-              { type: 'separator', separatorLine: true },
-              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
-              { label: 'Error link', type: 'error' },
-            ],
-          },
-        ]}
-        copyrightText="Copyright®"
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders columns with copyright only', () => {
-    const { container } = renderWithTheme(<Footer copyrightText="Copyright®" />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders nothing, if no columns and copyright provided', () => {
-    const { container } = renderWithTheme(<Footer />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders nothing, if empty columns and copyright provided', () => {
-    const { container } = renderWithTheme(<Footer columns={[]} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});