@redocly/theme 0.1.10 → 0.1.13

package/src/Panel/Panel.stories.tsx

@@ -1,56 +0,0 @@
-import React, { JSXElementConstructor } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-
-import { Panel, PanelHeaderProps, PanelComponentProps } from '@theme/Panel';
-
-export default {
-  title: 'Components/Panels/Panel (base)',
-  component: Panel,
-} as ComponentMeta<typeof Panel>;
-
-const Template: ComponentStory<JSXElementConstructor<PanelComponentProps>> = (args) => (
-  <Panel {...args}>Panel body</Panel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  header: 'Panel header',
-};
-
-export const Collapsed = Template.bind({});
-Collapsed.args = {
-  header: 'Panel header (click me)',
-  expanded: false,
-};
-
-export const Expanded = Template.bind({});
-Expanded.args = {
-  header: 'Panel header (click me)',
-  expanded: true,
-};
-
-export const HeaderAsFunction = Template.bind({});
-HeaderAsFunction.args = {
-  header: (props: PanelHeaderProps) => <div>Custom Header component: {JSON.stringify(props)}</div>,
-};
-
-export const HeaderAsComponent = Template.bind({});
-HeaderAsComponent.args = {
-  header: <i>Header component</i>,
-};
-
-export const WithoutHeader = Template.bind({});
-WithoutHeader.args = {};
-
-// TODO: change to normal name after fixing problem with stories order!
-export const WithDemoAnimation = Template.bind({});
-WithDemoAnimation.args = {
-  expanded: false,
-  header: 'Panel header',
-};
-WithDemoAnimation.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-
-  await userEvent.click(canvas.getByTestId('panel-header'));
-};

package/src/Panel/__tests__/CodePanel.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { CodePanel } from '@theme/Panel';
-
-describe('CodePanel', () => {
-  it('renders collapsed', () => {
-    const { container } = render(
-      <CodePanel header={'CodePanel header'} expanded={false}>
-        CodePanel body
-      </CodePanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders expanded', () => {
-    const { container } = render(
-      <CodePanel header={'CodePanel header'} expanded={true}>
-        CodePanel body
-      </CodePanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Panel/__tests__/ContentPanel.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ContentPanel } from '@theme/Panel';
-
-describe('ContentPanel', () => {
-  it('renders collapsed', () => {
-    const { container } = render(
-      <ContentPanel header={'ContentPanel header'} expanded={false}>
-        ContentPanel body
-      </ContentPanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders expanded', () => {
-    const { container } = render(
-      <ContentPanel header={'ContentPanel header'} expanded={true}>
-        ContentPanel body
-      </ContentPanel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Panel/__tests__/Panel.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { Panel, PanelHeaderProps } from '@theme/Panel';
-
-describe('Panel', () => {
-  it('renders without header', () => {
-    const { container } = render(<Panel>Panel body</Panel>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with header', () => {
-    const { container } = render(<Panel header={'Panel header'}>Panel body</Panel>);
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders collapsed', () => {
-    const { container } = render(
-      <Panel header={'Panel header'} expanded={false}>
-        Panel body
-      </Panel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders expanded', () => {
-    const { container } = render(
-      <Panel header={'Panel header'} expanded={true}>
-        Panel body
-      </Panel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  it('renders with header as function', () => {
-    const { container } = render(
-      <Panel
-        header={(props: PanelHeaderProps) => (
-          <div>Custom Header component: {JSON.stringify(props)}</div>
-        )}
-        expanded={true}
-      >
-        Panel body
-      </Panel>,
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});

package/src/Panel/__tests__/__snapshots__/CodePanel.test.tsx.snap

@@ -1,258 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CodePanel renders collapsed 1`] = `
-.c8 {
-  height: 9px;
-  width: 9px;
-  -webkit-transform: rotateZ(0deg);
-  -ms-transform: rotateZ(0deg);
-  transform: rotateZ(0deg);
-  fill: inherit;
-  vertical-align: middle;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-}
-
-.c3 {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  white-space: nowrap;
-  cursor: pointer;
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  pointer-events: auto;
-}
-
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  border-radius: var(--panels-border-radius);
-}
-
-.c0:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.c1 > .c2 {
-  padding: 10px 20px;
-  line-height: 30px;
-  z-index: 0;
-  background-color: var(--samples-panel-controls-background-color);
-  min-height: 50px;
-}
-
-.c1 > .c2 .c7 {
-  fill: var(--color-content-inverse);
-  position: relative;
-}
-
-.c1 > .c2 .c5 {
-  color: var(--color-content-inverse);
-}
-
-<div
-  class="c0 c1"
-  data-cy="panel-codepanel-header"
->
-  <div
-    class="c2 c3"
-    data-cy="panel-header"
-  >
-    <div
-      class="c4"
-    >
-      <span
-        class="c5 c6"
-        data-cy="title"
-      >
-        CodePanel header
-      </span>
-      <svg
-        aria-hidden="true"
-        class="c7 c8"
-        viewBox="0 0 4.25 7"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
-        />
-        <path
-          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`CodePanel renders expanded 1`] = `
-.c8 {
-  height: 9px;
-  width: 9px;
-  -webkit-transform: rotateZ(90deg);
-  -ms-transform: rotateZ(90deg);
-  transform: rotateZ(90deg);
-  fill: inherit;
-  vertical-align: middle;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-}
-
-.c3 {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  white-space: nowrap;
-  cursor: pointer;
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  pointer-events: auto;
-}
-
-.c10 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  border-radius: var(--panels-border-radius);
-}
-
-.c0 .c2 + .c9 {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.c0:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.c1 > .c2 {
-  padding: 10px 20px;
-  line-height: 30px;
-  z-index: 0;
-  background-color: var(--samples-panel-controls-background-color);
-  min-height: 50px;
-}
-
-.c1 > .c2 .c7 {
-  fill: var(--color-content-inverse);
-  position: relative;
-}
-
-.c1 > .c2 .c5 {
-  color: var(--color-content-inverse);
-}
-
-.c1.c1 .c9 {
-  padding: 10px 20px 20px;
-  background-color: var(--samples-panel-background-color);
-  color: var(--color-content-inverse);
-}
-
-<div
-  class="c0 c1"
-  data-cy="panel-codepanel-header"
->
-  <div
-    class="c2 c3"
-    data-cy="panel-header"
-  >
-    <div
-      class="c4"
-    >
-      <span
-        class="c5 c6"
-        data-cy="title"
-      >
-        CodePanel header
-      </span>
-      <svg
-        aria-hidden="true"
-        class="c7 c8"
-        viewBox="0 0 4.25 7"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
-        />
-        <path
-          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    class="c9 c10"
-    data-cy="panel-body"
-  >
-    CodePanel body
-  </div>
-</div>
-`;

package/src/Panel/__tests__/__snapshots__/ContentPanel.test.tsx.snap

@@ -1,278 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ContentPanel renders collapsed 1`] = `
-.c8 {
-  height: 9px;
-  width: 9px;
-  -webkit-transform: rotateZ(0deg);
-  -ms-transform: rotateZ(0deg);
-  transform: rotateZ(0deg);
-  fill: inherit;
-  vertical-align: middle;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-}
-
-.c3 {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  white-space: nowrap;
-  cursor: pointer;
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  pointer-events: auto;
-}
-
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  border-radius: var(--panels-border-radius);
-}
-
-.c0:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.c1 {
-  border: 1px solid var(--global-border-color);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-base);
-}
-
-.c1:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.c1 > .c2 {
-  padding: calc(var(--spacing-unit) * 4);
-  font-size: 18px;
-  font-weight: var(--font-weight-bold);
-  background-color: var(--panels-background-color);
-}
-
-.c1 > .c2 .c5 {
-  color: var(--color-content);
-}
-
-.c1 > .c2 .c7 {
-  fill: var(--color-content);
-}
-
-<div
-  class="c0 c1"
-  data-cy="panel-contentpanel-header"
->
-  <div
-    class="c2 c3"
-    data-cy="panel-header"
-  >
-    <div
-      class="c4"
-    >
-      <span
-        class="c5 c6"
-        data-cy="title"
-      >
-        ContentPanel header
-      </span>
-      <svg
-        aria-hidden="true"
-        class="c7 c8"
-        viewBox="0 0 4.25 7"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
-        />
-        <path
-          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ContentPanel renders expanded 1`] = `
-.c8 {
-  height: 9px;
-  width: 9px;
-  -webkit-transform: rotateZ(90deg);
-  -ms-transform: rotateZ(90deg);
-  transform: rotateZ(90deg);
-  fill: inherit;
-  vertical-align: middle;
-  -webkit-transition: -webkit-transform 0.2s ease-out;
-  -webkit-transition: transform 0.2s ease-out;
-  transition: transform 0.2s ease-out;
-}
-
-.c3 {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  white-space: nowrap;
-  cursor: pointer;
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  pointer-events: auto;
-}
-
-.c10 {
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
-}
-
-.c6 {
-  line-height: 1;
-  margin-right: 5px;
-  font-weight: 700;
-  color: var(--color-content);
-}
-
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c0 {
-  border-radius: var(--panels-border-radius);
-}
-
-.c0 .c2 + .c9 {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.c0:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.c1 {
-  border: 1px solid var(--global-border-color);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-base);
-}
-
-.c1:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.c1 > .c2 {
-  padding: calc(var(--spacing-unit) * 4);
-  font-size: 18px;
-  font-weight: var(--font-weight-bold);
-  background-color: var(--panels-background-color);
-}
-
-.c1 > .c2 .c5 {
-  color: var(--color-content);
-}
-
-.c1 > .c2 .c7 {
-  fill: var(--color-content);
-}
-
-.c1 > .c9 {
-  padding: calc(var(--spacing-unit) * 4);
-}
-
-.c1 > .c2 + .c9 {
-  padding-top: 1px;
-}
-
-<div
-  class="c0 c1"
-  data-cy="panel-contentpanel-header"
->
-  <div
-    class="c2 c3"
-    data-cy="panel-header"
-  >
-    <div
-      class="c4"
-    >
-      <span
-        class="c5 c6"
-        data-cy="title"
-      >
-        ContentPanel header
-      </span>
-      <svg
-        aria-hidden="true"
-        class="c7 c8"
-        viewBox="0 0 4.25 7"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z"
-        />
-        <path
-          d="M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    class="c9 c10"
-    data-cy="panel-body"
-  >
-    ContentPanel body
-  </div>
-</div>
-`;