@redocly/theme 0.1.9 → 0.1.12

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: '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/Headings/Headings.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { H1, H2, H3 } from '@theme/Headings';
-
-export default {
-  title: 'Typography/Headings',
-};
-
-export const Heading1 = (): JSX.Element => <H1>H1</H1>;
-Heading1.storyName = 'H1';
-Heading1.parameters = {
-  controls: { hideNoControlsWarning: true },
-};
-
-export const Heading2 = (): JSX.Element => <H2>H2</H2>;
-Heading2.storyName = 'H2';
-Heading2.parameters = {
-  controls: { hideNoControlsWarning: true },
-};
-
-export const Heading3 = (): JSX.Element => <H3>H3</H3>;
-Heading3.storyName = 'H3';
-Heading3.parameters = {
-  controls: { hideNoControlsWarning: true },
-};
-
-export const AllHeadings = (): JSX.Element => (
-  <>
-    <H1>H1</H1>
-    <H2>H2</H2>
-    <H3>H3</H3>
-  </>
-);
-AllHeadings.parameters = {
-  controls: { hideNoControlsWarning: true },
-};

package/src/Headings/__tests__/Headings.test.tsx

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

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

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Headings renders H1 1`] = `
-.c0 {
-  color: var(--color-content);
-  margin: 0 0 25px;
-  font-size: var(--h1-font-size,var(--h-font-size));
-  font-weight: var(--h1-font-weight,var(--h-font-weight));
-  font-family: var(--h1-font-family,var(--h-font-family));
-  line-height: var(--h1-line-height,var(--h-line-height));
-  color: var(--h1-color,var(--h-color));
-  text-transform: var(--h1-text-transform,var(--h-text-transform));
-}
-
-<h1
-  class="c0"
->
-  H1
-</h1>
-`;
-
-exports[`Headings renders H2 1`] = `
-.c0 {
-  color: var(--color-content);
-  margin: 0 0 20px;
-  font-size: var(--h2-font-size,var(--h-font-size));
-  font-weight: var(--h2-font-weight,var(--h-font-weight));
-  font-family: var(--h2-font-family,var(--h-font-family));
-  line-height: var(--h2-line-height,var(--h-line-height));
-  color: var(--h2-color,var(--h-color));
-  text-transform: var(--h2-text-transform,var(--h-text-transform));
-}
-
-<h2
-  class="c0"
->
-  H2
-</h2>
-`;
-
-exports[`Headings renders H3 1`] = `
-.c0 {
-  color: var(--color-content);
-  font-size: var(--h3-font-size,var(--h-font-size));
-  font-weight: var(--h3-font-weight,var(--h-font-weight));
-  font-family: var(--h3-font-family,var(--h-font-family));
-  line-height: var(--h3-line-height,var(--h-line-height));
-  color: var(--h3-color,var(--h-color));
-  text-transform: var(--h3-text-transform,var(--h-text-transform));
-}
-
-<h3
-  class="c0"
->
-  H3
-</h3>
-`;

package/src/Introduction.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Example/Introduction" />
-
-# Redocly UI components
-
-TBD...

package/src/JsonViewer/JsonViewer.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { JsonViewer } from '@theme/JsonViewer';
-
-export default {
-  title: 'JsonViewer',
-  component: JsonViewer,
-} as ComponentMeta<typeof JsonViewer>;
-
-const data = {
-  id: '600dc3b5d617e547a0e74cb9',
-  name: 'Mitchell Fitzgerald',
-  about: 'lorem ipsum',
-  address: '48 Avenue, City, North',
-  company: 'Test',
-  bio: null,
-  nicknames: [
-    'Mitch',
-    'Fitz',
-    { title: 'MitFitz', createdAt: new Date('2022-04-19T11:46:00.019Z') },
-  ],
-  age: 27,
-  isBanned: true,
-  link: 'https://google.com',
-  emptyArray: [],
-  empty: {},
-  contacts: {
-    email: 'test@mail.com',
-    phone: {
-      code: '+1',
-      rest: '999',
-    },
-  },
-};
-
-const Template: ComponentStory<typeof JsonViewer> = (args) => <JsonViewer {...args} />;
-
-export const ExpandLevel1 = Template.bind({});
-ExpandLevel1.args = {
-  jsonSampleExpandLevel: 1,
-  data,
-};
-
-export const ExpandLevel3 = Template.bind({});
-ExpandLevel3.args = {
-  jsonSampleExpandLevel: 3,
-  data,
-};
-
-export const WithoutFoldingButtons = Template.bind({});
-WithoutFoldingButtons.args = {
-  jsonSampleExpandLevel: 3,
-  data: {
-    message: 'success',
-  },
-};

package/src/JsonViewer/__tests__/JsonViewer.test.tsx

@@ -1,83 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import React from 'react';
-
-import { renderWithTheme } from '../../../tests/utils';
-
-import { JsonViewer } from '@theme/JsonViewer';
-
-const data = {
-  id: '600dc3b5d617e547a0e74cb9',
-  name: 'Mitchell Fitzgerald',
-  about: 'lorem ipsum',
-  address: '48 Avenue, City, North',
-  company: 'Test',
-  bio: null,
-  nicknames: [
-    'Mitch',
-    'Fitz',
-    { title: 'MitFitz', createdAt: new Date('2022-04-19T11:46:00.019Z') },
-  ],
-  age: 27,
-  isBanned: true,
-  link: 'https://google.com',
-  emptyArray: [],
-  empty: {},
-  contacts: {
-    email: 'test@mail.com',
-    phone: {
-      code: '+1',
-      rest: '999',
-    },
-  },
-};
-
-describe('JsonViewer', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders without folding buttons', () => {
-    renderWithTheme(<JsonViewer data={{ a: 1, b: 2 }} jsonSampleExpandLevel={2} />);
-
-    expect(screen.queryByText('Collapse all')).toBeNull();
-    expect(screen.queryByText('Expand all')).toBeNull();
-  });
-
-  it('"collapse all" works', () => {
-    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
-
-    fireEvent.click(screen.getByText(/Collapse all/i));
-
-    expect(container.firstChild).toMatchSnapshot();
-    expect(screen.getByText(/test@mail\.com/i)).not.toBeVisible();
-  });
-
-  it('"expand all" works', () => {
-    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={1} />);
-
-    fireEvent.click(screen.getByText(/Expand all/i));
-
-    expect(container.firstChild).toMatchSnapshot();
-    expect(screen.getByText(/test@mail\.com/i)).toBeVisible();
-  });
-
-  it('expands node on click', () => {
-    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={1} />);
-    const element = container.getElementsByClassName('collapser')[1];
-
-    fireEvent.click(element);
-
-    expect(screen.getByText(/"Mitch"/i)).toBeVisible();
-  });
-
-  it('collapses node on click', () => {
-    const { container } = renderWithTheme(<JsonViewer data={data} jsonSampleExpandLevel={2} />);
-    const element = container.getElementsByClassName('collapser')[1];
-
-    fireEvent.click(element);
-
-    expect(screen.getByText(/"Mitch"/i)).not.toBeVisible();
-  });
-});