@redocly/theme 0.1.7 → 0.1.10

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

@@ -0,0 +1,253 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Footer renders columns with copyright and columns 1`] = `
+.c4 {
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  font-size: 24px;
+  margin-bottom: 1.5em;
+  font-family: var(--h-font-family);
+}
+
+.c6 {
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  font-family: var(--h-font-family);
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  text-align: left;
+  margin: 0 30px;
+}
+
+.c5 {
+  font-weight: var(--font-weight-bold);
+  padding-bottom: 0.75em;
+  color: var(--footer-text-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1 {
+  padding: 3em 20px 1em 20px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c7 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  text-align: center;
+}
+
+.c7 span {
+  max-width: 1200px;
+}
+
+.c0 {
+  font-size: 1rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
+}
+
+.c0 a,
+.c0 a:hover {
+  color: var(--footer-text-color);
+}
+
+@media screen and (min-width:50rem) {
+  .c1 {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+}
+
+@media print {
+  .c1 {
+    color: black;
+    display: none;
+  }
+}
+
+@media screen and (min-width:50rem) {
+  .c2 {
+    -webkit-box-pack: space-evenly;
+    -webkit-justify-content: space-evenly;
+    -ms-flex-pack: space-evenly;
+    justify-content: space-evenly;
+  }
+}
+
+<footer
+  class="c0"
+  data-component-name="Footer/Footer"
+>
+  <div
+    class="c1"
+    data-component-name="Footer/FooterColumns"
+  >
+    <div
+      class="c2"
+    >
+      <div
+        class="c3"
+        data-component-name="Footer/FooterColumn"
+      >
+        <p
+          class="c4"
+        >
+          Other
+        </p>
+        <a
+          class="c5"
+          data-cy="External"
+          href="https://google.com/"
+          to="https://google.com/"
+        >
+          External
+        </a>
+        <div
+          class="c6"
+        />
+        <a
+          class="c5"
+          data-cy="Twitter"
+          href="https://twitter.com/"
+          to="https://twitter.com/"
+        >
+          Twitter
+        </a>
+      </div>
+      <div
+        class="c3"
+        data-component-name="Footer/FooterColumn"
+      >
+        <p
+          class="c4"
+        >
+          Another
+        </p>
+        <div
+          class="c6"
+        />
+        <a
+          class="c5"
+          data-cy="Twitter"
+          href="https://twitter.com/"
+          to="https://twitter.com/"
+        >
+          Twitter
+        </a>
+      </div>
+    </div>
+  </div>
+  <section
+    class="c7"
+    data-component-name="Footer/FooterCopyright"
+  >
+    Copyright®
+  </section>
+</footer>
+`;
+
+exports[`Footer renders columns with copyright only 1`] = `
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  text-align: center;
+}
+
+.c1 span {
+  max-width: 1200px;
+}
+
+.c0 {
+  font-size: 1rem;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
+}
+
+.c0 a,
+.c0 a:hover {
+  color: var(--footer-text-color);
+}
+
+<footer
+  class="c0"
+  data-component-name="Footer/Footer"
+>
+  <section
+    class="c1"
+    data-component-name="Footer/FooterCopyright"
+  >
+    Copyright®
+  </section>
+</footer>
+`;
+
+exports[`Footer renders nothing, if empty columns and copyright provided 1`] = `null`;
+
+exports[`Footer renders nothing, if no columns and copyright provided 1`] = `null`;

package/src/Footer/index.ts

@@ -0,0 +1,4 @@
+export * from '@theme/Footer/Footer';
+export * from '@theme/Footer/FooterColumn';
+export * from '@theme/Footer/FooterColumns';
+export * from '@theme/Footer/FooterCopyright';

package/src/Headings/Headings.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { H1, H2, H3 } from './Headings';
+import { H1, H2, H3 } from '@theme/Headings';
 
 export default {
   title: 'Typography/Headings',

package/src/Headings/Headings.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { typography } from '../utils';
+import { typography } from '@theme/utils';
 
 export const H1 = styled.h1`
   color: var(--color-content);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { H1, H2, H3 } from '../Headings';
+import { H1, H2, H3 } from '@theme/Headings';
 
 describe('Headings', () => {
   it('renders H1', () => {

package/src/Headings/index.ts

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

package/src/JsonViewer/JsonViewer.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { JsonViewer } from './JsonViewer';
+import { JsonViewer } from '@theme/JsonViewer';
 
 export default {
-  title: 'JsonViewer',
+  title: 'Components/JsonViewer',
   component: JsonViewer,
 } as ComponentMeta<typeof JsonViewer>;
 

package/src/JsonViewer/JsonViewer.tsx

@@ -1,13 +1,12 @@
 import React, { memo, useRef, ReactElement } from 'react';
 import styled from 'styled-components';
 
-import { CopyButtonWrapper } from '../CopyButton';
-import { SampleControls, SamplesControlButton } from '../SamplesPanelControls';
-import { jsonToHTML } from '../utils';
-import { useMount, useUnmount } from '../hooks';
-import { CodeBlock } from '../CodeBlock';
-
-import { jsonStyles } from './styled';
+import { CopyButtonWrapper } from '@theme/CopyButton';
+import { SampleControls, SamplesControlButton } from '@theme/SamplesPanelControls';
+import { jsonToHTML } from '@theme/utils';
+import { useMount, useUnmount } from '@theme/hooks';
+import { CodeBlock } from '@theme/CodeBlock';
+import { jsonStyles } from '@theme/JsonViewer/styled';
 
 export interface JsonProps {
   data: any;

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

@@ -2,7 +2,8 @@ import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
 import { renderWithTheme } from '../../../tests/utils';
-import { JsonViewer } from '../JsonViewer';
+
+import { JsonViewer } from '@theme/JsonViewer';
 
 const data = {
   id: '600dc3b5d617e547a0e74cb9',

package/src/JsonViewer/index.ts

@@ -1 +1,2 @@
-export * from './JsonViewer';
+export * from '@theme/JsonViewer/JsonViewer';
+export * from '@theme/JsonViewer/styled';

package/src/Layout/PageLayout.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface PageLayoutProps {
+  sidebar?: React.ReactNode;
+}
+
+export function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
+  return (
+    <Container data-component-name="Layout/PageLayout">
+      {sidebar}
+      <ContentContainer>{children}</ContentContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+`;
+
+const ContentContainer = styled.div`
+  flex: 1 0 0;
+  /*
+    flex-basis is ignored for nested flex in Chrome, need to set width
+    See more here: https://stackoverflow.com/a/34355447
+  */
+  width: 0;
+  max-width: 100%;
+`;

package/src/Layout/RootLayout.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface LayoutConfig {
+  navbar: React.ReactNode;
+  footer: React.ReactNode;
+}
+
+const Wrapper = styled.div``;
+
+export function RootLayout({
+  navbar,
+  footer,
+  children,
+}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
+  return (
+    // TODO: rewrite it to avoid passing components as props
+    <Wrapper data-component-name="Layout/RootLayout">
+      {navbar}
+      {children}
+      {footer}
+    </Wrapper>
+  );
+}

package/src/Layout/__tests__/PageLayout.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { PageLayout } from '@theme/Layout/PageLayout';
+
+describe('PageLayout', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <PageLayout sidebar={<div>sidebar</div>}>
+        <div>test content</div>
+      </PageLayout>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Layout/__tests__/RootLayout.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { RootLayout } from '@theme/Layout/RootLayout';
+
+describe('RootLayout', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <RootLayout footer={<div>footer</div>} navbar={<div>navbar</div>}>
+        <div>content</div>
+      </RootLayout>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/Layout/__tests__/__snapshots__/PageLayout.test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageLayout renders 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+}
+
+.c1 {
+  -webkit-flex: 1 0 0;
+  -ms-flex: 1 0 0;
+  flex: 1 0 0;
+  width: 0;
+  max-width: 100%;
+}
+
+<div
+  class="c0"
+  data-component-name="Layout/PageLayout"
+>
+  <div>
+    sidebar
+  </div>
+  <div
+    class="c1"
+  >
+    <div>
+      test content
+    </div>
+  </div>
+</div>
+`;

package/src/Layout/__tests__/__snapshots__/RootLayout.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RootLayout renders 1`] = `
+<div
+  class=""
+  data-component-name="Layout/RootLayout"
+>
+  <div>
+    navbar
+  </div>
+  <div>
+    content
+  </div>
+  <div>
+    footer
+  </div>
+</div>
+`;

package/src/Layout/index.ts

@@ -0,0 +1,2 @@
+export * from '@theme/Layout/RootLayout';
+export * from '@theme/Layout/PageLayout';

package/src/Markdown/Admonition.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { AlertIcon } from '@theme/ui/AlertIcon';
+
+interface AdmonitionTypeProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+}
+
+interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+  name?: string;
+}
+
+export function Admonition({
+  type = 'info',
+  name,
+  children,
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
+  return (
+    <Wrapper type={type} data-component-name="Markdown/Admonition/Admonition">
+      <AlertIcon type={type} />
+      {name ? <Heading type={type}>{name}</Heading> : null}
+      <Content>{children}</Content>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<AdmonitionTypeProps>`
+  position: relative;
+  align-items: center;
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  ${({ type }) => `
+    background-color: var(--admonition-${type}-background-color);
+    color: var(--admonition-${type}-text-color);
+  `}
+`;
+
+const Heading = styled.h5<AdmonitionTypeProps>`
+  display: block;
+  margin: 0 0 10px;
+
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-text-color)`};
+
+  && {
+    font-size: var(--admonition-heading-font-size);
+    font-weight: var(--admonition-heading-font-weight);
+    line-height: var(--admonition-line-height);
+    transform: var(--admonition-heading-transform);
+  }
+`;
+
+const Content = styled.div`
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { ClipboardService } from '@theme/utils/ClipboardService';
+import {
+  Wrapper,
+  DoneIndicator,
+  CopyCodeButton,
+  CodeSampleButtonContainer,
+} from '@theme/Markdown/CodeSample/styled';
+
+type CodeSampleProps = {
+  language: string;
+  highlighted: string;
+  rawContent: string;
+};
+
+export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
+  const langClassName = language ? `language-${language}` : '';
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyCode = (code: string) => {
+    ClipboardService.copyCustom(code);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
+      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
+        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
+      </CodeSampleButtonContainer>
+      <pre className={langClassName}>
+        <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+    </Wrapper>
+  );
+}

package/src/Markdown/CodeSample/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/Markdown/CodeSample/CodeSample';
+export * from '@theme/Markdown/CodeSample/styled';
+export * from '@theme/Markdown/CodeSample/types';