@redocly/theme 0.1.0 → 0.1.3

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/__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',
+  },
+};

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

@@ -0,0 +1,82 @@
+import { fireEvent, screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+import { JsonViewer } from '../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();
+  });
+});