@redocly/theme 0.1.0 → 0.1.3

package/src/SamplesPanelControls/__tests__/SamplesPanelControls.test.tsx

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+import {
+  SampleControls,
+  SamplesControlButton,
+  PreformattedCodeBlock,
+} from '../SamplesPanelControls';
+
+describe('SampleControls & SamplesControlButton', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <SampleControls>
+        <SamplesControlButton>Copy</SamplesControlButton>
+      </SampleControls>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+describe('StyledPre', () => {
+  it('renders', () => {
+    const { container } = render(
+      <PreformattedCodeBlock>
+        Test: <br />
+        <a className="token string" href="#" target="_blank" rel="noopener noreferrer">
+          Click
+        </a>
+      </PreformattedCodeBlock>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SampleControls & SamplesControlButton renders 1`] = `
+.c2 {
+  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;
+}
+
+.c2:hover,
+.c2:focus {
+  background-color: var(--samples-panel-controls-hover-background-color);
+}
+
+.c0 {
+  padding: 10px 0;
+  opacity: 0.7;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  text-align: right;
+}
+
+.c0:focus-within {
+  opacity: 1;
+}
+
+.c0 > div,
+.c0 > .c1 {
+  margin-top: 5px;
+  margin-left: 10px;
+}
+
+.c0 > div:first-child,
+.c0 > .c1:first-child {
+  margin-left: 0;
+}
+
+@media screen and (min-width:50rem) {
+  .c2 {
+    padding: 2px 20px;
+  }
+}
+
+@media screen and (min-width:50rem) {
+  .c0 > div,
+  .c0 > .c1 {
+    margin-top: 0;
+  }
+}
+
+<div
+  class="c0"
+>
+  <button
+    class="c1 c2"
+  >
+    Copy
+  </button>
+</div>
+`;
+
+exports[`StyledPre 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;
+}
+
+.c1 {
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap,pre);
+}
+
+@media print {
+  .c0 code[class*='language-'],
+  .c0 pre[class*='language-'] {
+    text-shadow: none;
+  }
+}
+
+<pre
+  class="c0 c1"
+>
+  Test: 
+  <br />
+  <a
+    class="token string"
+    href="#"
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    Click
+  </a>
+</pre>
+`;

package/src/SamplesPanelControls/index.ts

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

package/src/SidebarLogo/SidebarLogo.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { SidebarLogo } from './SidebarLogo';
+
+export default {
+  title: 'SidebarLogo',
+  component: SidebarLogo,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof SidebarLogo>;
+
+const Template: ComponentStory<typeof SidebarLogo> = (args) => <SidebarLogo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  imageUrl: 'https://redocly.github.io/redoc/petstore-logo.png',
+  altText: 'Pet Store',
+  href: 'http://redocly.com/',
+};

package/src/SidebarLogo/__tests__/SidebarLogo.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { SidebarLogo } from '../SidebarLogo';
+
+describe('SidebarLogo', () => {
+  it('renders', () => {
+    const { container } = render(
+      <SidebarLogo
+        imageUrl="https://test.com/logo.png"
+        href="https://test.com"
+        dataTestId="test"
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders without href', () => {
+    const { container } = render(
+      <SidebarLogo imageUrl="https://test.com/logo.png" dataTestId="test" />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if imageUrl not provided', () => {
+    const { container } = render(<SidebarLogo href="https://test.com" />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidebarLogo renders 1`] = `
+.c2 {
+  max-height: var(--logo-max-height);
+  max-width: var(--logo-max-width);
+  padding: var(--logo-padding);
+  width: 100%;
+  display: block;
+}
+
+.c0 {
+  text-align: center;
+  line-height: 0;
+}
+
+.c1 {
+  display: inline-block;
+}
+
+<div
+  class="c0"
+  data-cy="test"
+>
+  <a
+    class="c1"
+    href="https://test.com"
+  >
+    <img
+      alt="logo"
+      class="c2"
+      src="https://test.com/logo.png"
+    />
+  </a>
+</div>
+`;
+
+exports[`SidebarLogo renders without href 1`] = `
+.c1 {
+  max-height: var(--logo-max-height);
+  max-width: var(--logo-max-width);
+  padding: var(--logo-padding);
+  width: 100%;
+  display: block;
+}
+
+.c0 {
+  text-align: center;
+  line-height: 0;
+}
+
+<div
+  class="c0"
+  data-cy="test"
+>
+  <img
+    alt="logo"
+    class="c1"
+    src="https://test.com/logo.png"
+  />
+</div>
+`;

package/src/SidebarLogo/index.ts

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

package/src/SourceCode/SourceCode.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { SourceCode } from './SourceCode';
+
+export default {
+  title: 'SourceCode',
+  component: SourceCode,
+} as ComponentMeta<typeof SourceCode>;
+
+const Template: ComponentStory<typeof SourceCode> = (args) => <SourceCode {...args} />;
+
+export const WithoutCopyButton = Template.bind({});
+WithoutCopyButton.args = {
+  lang: 'php',
+  source: `$client = new Rebilly\\Client([
+    'apiKey' => 'YourApiKeyHere',
+    'baseUrl' => 'https://api.rebilly.com',
+]);`,
+};
+export const WithCopyButton = Template.bind({});
+WithCopyButton.args = {
+  lang: 'php',
+  withCopyButton: true,
+  source: `$client = new Rebilly\\Client([
+    'apiKey' => 'YourApiKeyHere',
+    'baseUrl' => 'https://api.rebilly.com',
+]);`,
+};

package/src/SourceCode/__tests__/SourceCode.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { SourceCode } from '../SourceCode';
+import { renderWithTheme } from '../../../tests/utils';
+
+describe('SourceCode', () => {
+  it('renders without copy button', () => {
+    const { container } = renderWithTheme(
+      <SourceCode source={`let count = 1; count++;`} lang="js" dataTestId="without-copy-button" />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with copy button', () => {
+    const { container } = renderWithTheme(
+      <SourceCode
+        source={`let count = 1; count++;`}
+        lang="js"
+        withCopyButton
+        dataTestId="with-copy-button"
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with external source', () => {
+    const { container } = renderWithTheme(
+      <SourceCode
+        externalSource={{ sample: { get: () => `let count = 1; count++;`, lang: 'js' } }}
+        lang="js"
+        dataTestId="with-external-source"
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with external source when it returns null', () => {
+    const { container } = renderWithTheme(
+      <SourceCode externalSource={{ sample: { get: () => '', lang: 'js' } }} lang="js" />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});