@redocly/theme 0.1.2 → 0.1.3

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/SidebarLogo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface LogoProps {
+  imageUrl?: string;
+  href?: string;
+  altText?: string;
+  dataTestId?: string;
+  backgroundColor?: string;
+}
+
+export function SidebarLogo({
+  imageUrl,
+  href,
+  altText,
+  backgroundColor,
+  dataTestId,
+}: LogoProps = {}): JSX.Element | null {
+  if (!imageUrl) {
+    return null;
+  }
+
+  const logo = <LogoImgEl src={imageUrl} alt={altText || 'logo'} />;
+
+  return (
+    <LogoWrap data-cy={dataTestId} style={{ backgroundColor }}>
+      {href ? <Link href={href}>{logo}</Link> : logo}
+    </LogoWrap>
+  );
+}
+
+const LogoImgEl = styled.img`
+  max-height: var(--logo-max-height);
+  max-width: var(--logo-max-width);
+  padding: var(--logo-padding);
+  width: 100%;
+  display: block;
+`;
+
+const LogoWrap = styled.div`
+  text-align: center;
+  line-height: 0;
+`;
+
+const Link = styled.a`
+  display: inline-block;
+`;

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/SourceCode.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { highlight } from '../utils/highlight';
+import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
+import { CopyButtonWrapper } from '../CopyButton';
+
+export interface SourceCodeProps {
+  lang: string;
+  source?: string;
+  externalSource?: ExternalSource;
+  withCopyButton?: boolean;
+  dataTestId?: string;
+}
+
+export interface Sample {
+  lang: string;
+  label?: string;
+}
+
+export type UnstableExternalCodeSample = Sample & {
+  get: (source: ExternalSource) => string;
+};
+
+export interface ExternalSource {
+  sample: UnstableExternalCodeSample;
+  exampleName?: string;
+  pathParams?: any;
+  properties?: any;
+  operation?: any;
+}
+
+export function Code({
+  source,
+  lang,
+  dataTestId,
+}: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
+  return (
+    <PreformattedCodeBlock
+      dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
+      data-cy={dataTestId}
+    />
+  );
+}
+
+export function SourceCode({
+  lang,
+  source,
+  externalSource,
+  withCopyButton,
+  dataTestId = 'source-code',
+}: SourceCodeProps): JSX.Element {
+  const _source = source || externalSource?.sample?.get?.(externalSource) || '';
+  if (withCopyButton) {
+    return (
+      <CopyButtonWrapper data={source}>
+        {({ renderCopyButton }) => (
+          <SampleControlsWrap>
+            <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
+            <Code lang={lang} source={_source} dataTestId={dataTestId} />
+          </SampleControlsWrap>
+        )}
+      </CopyButtonWrapper>
+    );
+  }
+
+  return <Code dataTestId={dataTestId} lang={lang} source={_source} />;
+}

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();
+  });
+});