@redocly/theme 0.1.11 → 0.1.14

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();
-  });
-});

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

@@ -1,253 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Footer renders columns with copyright and columns 1`] = `
-.c4 {
-  display: inline-block;
-  font-weight: var(--font-weight-regular);
-  font-size: 24px;
-  margin-bottom: 1.5em;
-  font-family: var(--h-font-family);
-}
-
-.c6 {
-  opacity: 0.75;
-  margin: 10px 0 5px 0;
-  font-size: 0.75em;
-  text-transform: uppercase;
-  font-family: var(--h-font-family);
-}
-
-.c3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  text-align: left;
-  margin: 0 30px;
-}
-
-.c5 {
-  font-weight: var(--font-weight-bold);
-  padding-bottom: 0.75em;
-  color: var(--footer-text-color);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c1 {
-  padding: 3em 20px 1em 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 0.875em;
-  padding: 1.5em 3em;
-  font-weight: var(--font-weight-bold);
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-  text-align: center;
-}
-
-.c7 span {
-  max-width: 1200px;
-}
-
-.c0 {
-  font-size: 1rem;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-  font-family: var(--font-family-base);
-}
-
-.c0 a,
-.c0 a:hover {
-  color: var(--footer-text-color);
-}
-
-@media screen and (min-width:50rem) {
-  .c1 {
-    padding: 5.625em 20px 3.9375em 20px;
-  }
-}
-
-@media print {
-  .c1 {
-    color: black;
-    display: none;
-  }
-}
-
-@media screen and (min-width:50rem) {
-  .c2 {
-    -webkit-box-pack: space-evenly;
-    -webkit-justify-content: space-evenly;
-    -ms-flex-pack: space-evenly;
-    justify-content: space-evenly;
-  }
-}
-
-<footer
-  class="c0"
-  data-component-name="Footer/Footer"
->
-  <div
-    class="c1"
-    data-component-name="Footer/FooterColumns"
-  >
-    <div
-      class="c2"
-    >
-      <div
-        class="c3"
-        data-component-name="Footer/FooterColumn"
-      >
-        <p
-          class="c4"
-        >
-          Other
-        </p>
-        <a
-          class="c5"
-          data-cy="External"
-          href="https://google.com/"
-          to="https://google.com/"
-        >
-          External
-        </a>
-        <div
-          class="c6"
-        />
-        <a
-          class="c5"
-          data-cy="Twitter"
-          href="https://twitter.com/"
-          to="https://twitter.com/"
-        >
-          Twitter
-        </a>
-      </div>
-      <div
-        class="c3"
-        data-component-name="Footer/FooterColumn"
-      >
-        <p
-          class="c4"
-        >
-          Another
-        </p>
-        <div
-          class="c6"
-        />
-        <a
-          class="c5"
-          data-cy="Twitter"
-          href="https://twitter.com/"
-          to="https://twitter.com/"
-        >
-          Twitter
-        </a>
-      </div>
-    </div>
-  </div>
-  <section
-    class="c7"
-    data-component-name="Footer/FooterCopyright"
-  >
-    Copyright®
-  </section>
-</footer>
-`;
-
-exports[`Footer renders columns with copyright only 1`] = `
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  font-size: 0.875em;
-  padding: 1.5em 3em;
-  font-weight: var(--font-weight-bold);
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-  text-align: center;
-}
-
-.c1 span {
-  max-width: 1200px;
-}
-
-.c0 {
-  font-size: 1rem;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-  font-family: var(--font-family-base);
-}
-
-.c0 a,
-.c0 a:hover {
-  color: var(--footer-text-color);
-}
-
-<footer
-  class="c0"
-  data-component-name="Footer/Footer"
->
-  <section
-    class="c1"
-    data-component-name="Footer/FooterCopyright"
-  >
-    Copyright®
-  </section>
-</footer>
-`;
-
-exports[`Footer renders nothing, if empty columns and copyright provided 1`] = `null`;
-
-exports[`Footer renders nothing, if no columns and copyright provided 1`] = `null`;

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/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: 'Components/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();
-  });
-});