@redocly/theme 0.1.2 → 0.1.3

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

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

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

@@ -0,0 +1,140 @@
+// 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/CodeBlock/index.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';

package/src/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { CopyButton } from './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/CopyButton.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+import { Button } from '../Button';
+
+export interface CopyButtonProps {
+  text: string;
+  dataTestId?: string;
+}
+
+export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps): JSX.Element => {
+  const [title, setTitle] = useState('Copy');
+
+  async function write() {
+    await navigator.clipboard.writeText(text);
+
+    setTitle('Copied!');
+
+    setTimeout(() => setTitle('Copy'), 1500);
+  }
+
+  return (
+    <Button color="secondary" onClick={write} data-cy={dataTestId}>
+      {title}
+    </Button>
+  );
+};

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+
+import { SamplesControlButton } from '../SamplesPanelControls';
+import { Tooltip } from '../Tooltip';
+import { useControl } from '../hooks';
+import { ClipboardService } from '../utils';
+
+export interface CopyButtonWrapperProps {
+  data: unknown;
+  children: (props: { renderCopyButton: () => JSX.Element }) => JSX.Element;
+  dataTestId?: string;
+}
+
+function CopyButtonWrapperComponent({
+  data,
+  children,
+  dataTestId = 'copy-button',
+}: CopyButtonWrapperProps): JSX.Element {
+  const tooltip = useControl();
+
+  const showTooltip = (): void => {
+    tooltip.handleOpen();
+
+    setTimeout(() => {
+      tooltip.handleClose();
+    }, 1500);
+  };
+
+  const copy = (): void => {
+    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+    ClipboardService.copyCustom(content);
+    showTooltip();
+  };
+
+  const renderCopyButton = (): JSX.Element => {
+    return (
+      <Tooltip
+        className="copy-button"
+        tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
+        open={tooltip.isOpened}
+      >
+        <SamplesControlButton onClick={copy} data-cy={dataTestId}>
+          Copy
+        </SamplesControlButton>
+      </Tooltip>
+    );
+  };
+
+  return children({ renderCopyButton });
+}
+
+export const CopyButtonWrapper = memo<CopyButtonWrapperProps>(CopyButtonWrapperComponent);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { fireEvent, getByText, render } from '@testing-library/react';
+
+import { CopyButton } from '../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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+import { CopyButtonWrapper } from '../CopyButtonWrapper';
+
+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

@@ -0,0 +1,55 @@
+// 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

@@ -0,0 +1,46 @@
+// 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/CopyButton/index.ts

@@ -0,0 +1,2 @@
+export * from './CopyButtonWrapper';
+export * from './CopyButton';

package/src/Headings/Headings.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { H1, H2, H3 } from './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/Headings.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { typography } from '../utils';
+
+export const H1 = styled.h1`
+  color: var(--color-content);
+  margin: 0 0 25px;
+
+  ${typography('h1', 'h')};
+`;
+
+export const H2 = styled.h2`
+  color: var(--color-content);
+  margin: 0 0 20px;
+
+  ${typography('h2', 'h')};
+`;
+
+export const H3 = styled.h3`
+  color: var(--color-content);
+
+  ${typography('h3', 'h')};
+`;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { H1, H2, H3 } from '../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

@@ -0,0 +1,57 @@
+// 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/Headings/index.ts

@@ -0,0 +1 @@
+export * from './Headings';

package/src/Introduction.stories.mdx

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

package/src/JsonViewer/JsonViewer.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { JsonViewer } from './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',
+  },
+};