@redocly/theme 0.1.11 → 0.1.12

package/src/TableOfContent/TableOfContent.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { ThemeProvider } from 'styled-components';
-
-import { TableOfContent } from '@theme/TableOfContent';
-import { generateMediaQueries } from '@theme/utils/media-css';
-
-const breakpoints = { small: '1rem', medium: '1rem', large: '1rem' };
-
-const theme = {
-  mediaQueries: generateMediaQueries(breakpoints),
-};
-
-export default {
-  title: 'Portal/TableOfContent',
-  component: TableOfContent,
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={theme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-} as ComponentMeta<typeof TableOfContent>;
-
-const Template: ComponentStory<typeof TableOfContent> = (args) => <TableOfContent {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  headings: [
-    { id: '1', value: 'test 1', depth: 1 },
-    { id: '2', value: 'test 2', depth: 2 },
-    { id: '3', value: 'test 3', depth: 3 },
-    { id: '4', value: 'test 4', depth: 3 },
-    { id: '5', value: 'test 5', depth: 2 },
-  ],
-};

package/src/TableOfContent/__tests__/TableOfContent.test.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { TableOfContent } from '@theme';
-import { renderWithTheme } from '../../../tests/utils';
-
-describe('TableOfContent', () => {
-  it('renders', () => {
-    const { container } = renderWithTheme(
-      <TableOfContent
-        headings={[
-          { id: '1', value: 'test 1', depth: 1 },
-          { id: '2', value: 'test 2', depth: 1 },
-          null,
-          { id: '3', value: '', depth: 2 },
-          { id: '4', value: 'test 4', depth: 0 },
-          { id: '4', value: 'test 4', depth: 5 },
-          { id: '5', value: 'test 5', depth: 1 },
-        ]}
-        tocMaxDepth={3}
-        contentWrapper={null}
-      />,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders nothing with no headings', () => {
-    const { container } = renderWithTheme(
-      <TableOfContent headings={null} tocMaxDepth={3} contentWrapper={null} />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders nothing with empty headings array', () => {
-    const { container } = renderWithTheme(
-      <TableOfContent headings={[]} tocMaxDepth={3} contentWrapper={null} />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders nothing for single heading with depth 1', () => {
-    const { container } = renderWithTheme(
-      <TableOfContent
-        headings={[{ id: '3', value: 'test 3', depth: 1 }]}
-        tocMaxDepth={3}
-        contentWrapper={null}
-      />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-  it('renders nothing for single empty heading', () => {
-    const { container } = renderWithTheme(
-      <TableOfContent headings={[null]} tocMaxDepth={3} contentWrapper={null} />,
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-});

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

@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TableOfContent renders 1`] = `
-.c2 {
-  font-size: 0.8em;
-  padding: 10px 15px;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.c3 {
-  display: block;
-  color: var(--color-content);
-  cursor: pointer;
-  font-size: 0.8em;
-  padding: 10px 15px;
-  padding-left: 0px;
-  -webkit-transition: background-color 0.3s,color 0.3s;
-  transition: background-color 0.3s,color 0.3s;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  word-break: break-word;
-  font-family: var(--h-font-family);
-}
-
-.c3:hover,
-.c3.active {
-  color: var(--sidebar-item-active-color);
-  background-color: var(--sidebar-item-active-background-color);
-}
-
-.c3:empty {
-  padding: 0;
-}
-
-.c4 {
-  display: block;
-  color: var(--color-content);
-  cursor: pointer;
-  font-size: 0.8em;
-  padding: 10px 15px;
-  padding-left: 15px;
-  -webkit-transition: background-color 0.3s,color 0.3s;
-  transition: background-color 0.3s,color 0.3s;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  word-break: break-word;
-  font-family: var(--h-font-family);
-}
-
-.c4:hover,
-.c4.active {
-  color: var(--sidebar-item-active-color);
-  background-color: var(--sidebar-item-active-background-color);
-}
-
-.c4:empty {
-  padding: 0;
-}
-
-.c5 {
-  display: block;
-  color: var(--color-content);
-  cursor: pointer;
-  font-size: 0.8em;
-  padding: 10px 15px;
-  padding-left: -15px;
-  -webkit-transition: background-color 0.3s,color 0.3s;
-  transition: background-color 0.3s,color 0.3s;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  word-break: break-word;
-  font-family: var(--h-font-family);
-}
-
-.c5:hover,
-.c5.active {
-  color: var(--sidebar-item-active-color);
-  background-color: var(--sidebar-item-active-background-color);
-}
-
-.c5:empty {
-  padding: 0;
-}
-
-.c0 {
-  font-size: 1rem;
-  background-color: transparent;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  display: none !important;
-  font-family: var(--font-family-base);
-}
-
-.c1 {
-  position: -webkit-sticky;
-  position: sticky;
-  top: calc(var(--navbar-height) + 20px);
-  max-height: calc(100vh - var(--navbar-height) - 20px);
-  border-left: 1px solid var(--global-border-color);
-  overflow-y: auto;
-  width: var(--toc-width);
-}
-
-@media screen and (min-width:85rem) {
-  .c0 {
-    width: var(--toc-width);
-    display: block !important;
-  }
-}
-
-<aside
-  class="c0"
-  data-component-name="TableOfContent/TableOfContent"
->
-  <div
-    class="c1"
-  >
-    <div
-      class="c2"
-    >
-      On this page
-    </div>
-    <a
-      class="c3"
-      data-cy="toc-test 2"
-      href="#2"
-    >
-      test 2
-    </a>
-    <a
-      class="c4"
-      data-cy="toc-"
-      href="#3"
-    />
-    <a
-      class="c5"
-      data-cy="toc-test 4"
-      href="#4"
-    >
-      test 4
-    </a>
-    <a
-      class="c3"
-      data-cy="toc-test 5"
-      href="#5"
-    >
-      test 5
-    </a>
-  </div>
-</aside>
-`;

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Tooltip } from '@theme/Tooltip';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-} as ComponentMeta<typeof Tooltip>;
-
-const Template: ComponentStory<typeof Tooltip> = (args) => {
-  return (
-    <>
-      <div style={{ padding: '50px' }}>
-        <Tooltip {...args}>
-          <button>Sample</button>
-        </Tooltip>
-      </div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  open: true,
-  tip: 'Try me!',
-};

package/src/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-
-import { Tooltip } from '@theme/Tooltip';
-
-describe('Tooltip', () => {
-  it('renders closed', () => {
-    const { container } = render(
-      <Tooltip tip="Try me!">
-        <button>test</button>
-      </Tooltip>,
-    );
-    container;
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders opened', () => {
-    const { container } = render(
-      <Tooltip tip="Try me!" open={true} placement="bottom" dataTestId="tooltip-opened">
-        <button>test</button>
-      </Tooltip>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('should open and close on mouse enter/leave event', () => {
-    const { getByText } = render(
-      <Tooltip tip="Try me!" dataTestId="tooltip">
-        <button>test</button>
-      </Tooltip>,
-    );
-
-    fireEvent.mouseEnter(getByText('test'));
-    expect(getByText('Try me!')).toBeTruthy();
-
-    fireEvent.mouseLeave(getByText('test'));
-    // expect(getByText('Try me!')).toBeFalsy();
-    expect(() => getByText('Try me!')).toThrow();
-  });
-});

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

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltip renders closed 1`] = `
-.c0 {
-  position: relative;
-  display: inline-block;
-}
-
-<div
-  class="c0 tooltip-default"
->
-  <button>
-    test
-  </button>
-</div>
-`;
-
-exports[`Tooltip renders opened 1`] = `
-.c0 {
-  position: relative;
-  display: inline-block;
-}
-
-.c1 {
-  display: inline-block;
-  position: absolute;
-  text-align: center;
-  padding: 10px 20px;
-  max-width: 250px;
-  white-space: normal;
-  overflow-wrap: break-word;
-  border-radius: var(--global-border-radius);
-  pointer-events: none;
-  -webkit-transition: opacity 0.3s ease-out;
-  transition: opacity 0.3s ease-out;
-  font-size: 13px;
-  background: var(--tooltip-background-color);
-  color: var(--tooltip-color);
-  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;
-  width: 120px;
-  bottom: 0;
-  left: 50%;
-  -webkit-transform: translate(-50%,99%);
-  -ms-transform: translate(-50%,99%);
-  transform: translate(-50%,99%);
-  margin-bottom: -10px;
-}
-
-.c1::after {
-  position: absolute;
-  content: ' ';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-color: var(--tooltip-background-color);
-}
-
-.c1::after {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom-width: 6px;
-  border-bottom-style: solid;
-  top: 0;
-  left: 50%;
-  -webkit-transform: translate(-50%,-99%);
-  -ms-transform: translate(-50%,-99%);
-  transform: translate(-50%,-99%);
-}
-
-<div
-  class="c0 tooltip-default"
->
-  <button>
-    test
-  </button>
-  <span
-    class="c1"
-    data-cy="tooltip-opened"
-  >
-    Try me!
-  </span>
-</div>
-`;

package/src/Welcome.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Welcome" />
-
-# @redocly/theme
-
-Welcome to storybook for [@redocly/theme](https://www.npmjs.com/package/@redocly/theme) package.

package/src/icons/ShelfIcon/ShelfIcon.stories.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { Story, ComponentMeta } from '@storybook/react';
-
-import { ShelfIcon, ShelfIconProps } from '@theme/icons/ShelfIcon';
-
-export default {
-  title: 'Icons/ShelfIcon',
-  component: ShelfIcon,
-  argTypes: {},
-} as ComponentMeta<typeof ShelfIcon>;
-
-const Template: Story<ShelfIconProps> = (args) => <ShelfIcon {...args} />;
-
-export const Right = Template.bind({});
-Right.args = {
-  direction: 'right',
-  size: '20px',
-};
-
-export const Down = Template.bind({});
-Down.args = {
-  direction: 'down',
-  size: '20px',
-};
-
-export const Left = Template.bind({});
-Left.args = {
-  direction: 'left',
-  size: '20px',
-};
-
-export const Up = Template.bind({});
-Up.args = {
-  direction: 'up',
-  size: '20px',
-};

package/src/icons/ShelfIcon/__tests__/ShelfIcon.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ShelfIcon } from '@theme/icons/ShelfIcon';
-
-describe('ShelfIcon', () => {
-  it('renders right', () => {
-    const { container } = render(<ShelfIcon direction={'right'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders left', () => {
-    const { container } = render(<ShelfIcon direction={'left'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders up', () => {
-    const { container } = render(<ShelfIcon direction={'up'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders down', () => {
-    const { container } = render(<ShelfIcon direction={'down'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with float left', () => {
-    const { container } = render(<ShelfIcon direction={'right'} float={'left'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with float right', () => {
-    const { container } = render(<ShelfIcon direction={'right'} float={'right'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with big size', () => {
-    const { container } = render(<ShelfIcon direction={'right'} size={'30px'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with color', () => {
-    const { container } = render(<ShelfIcon direction={'right'} color={'orange'} />);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});