@redocly/theme 0.1.8 → 0.1.11

package/src/Footer/Footer.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import FooterColumns from '@theme/Footer/FooterColumns';
-import FooterCopyright from '@theme/Footer/FooterCopyright';
+import { FooterColumns } from '@theme/Footer/FooterColumns';
+import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import type { FooterConfig } from '@theme/types/portal';
 
-export default function Footer({
-  columns,
-  copyrightText,
-}: React.PropsWithChildren<FooterConfig>): JSX.Element | null {
+export function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null {
   if (!(columns?.length || copyrightText)) {
     return null;
   }
@@ -24,11 +21,11 @@ export default function Footer({
 const FooterContainer = styled.footer`
   font-size: 1rem;
   flex-shrink: 0;
-  background-color: var(--footer-color-background);
-  color: var(--footer-color-text);
-  font-family: var(--font-family-primary);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--font-family-base);
   a,
   a:hover {
-    color: var(--footer-color-text);
+    color: var(--footer-text-color);
   }
 `;

package/src/Footer/FooterColumn.tsx

@@ -8,21 +8,21 @@ interface FooterColumnProps {
   column: Column;
 }
 
-export default function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
       <FooterColumnTitle>{column.group || column.label}</FooterColumnTitle>
-      {column.items.map((columnItem, columnItemInex) => {
+      {column.items.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
         }
 
         return columnItem.type === 'separator' ? (
-          <FooterSeparator key={columnItem.label + '_' + columnItemInex}>
+          <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
             {columnItem.label}
           </FooterSeparator>
         ) : (
-          <FooterLink key={columnItemInex} to={columnItem.link} data-cy={columnItem.label}>
+          <FooterLink key={columnItemIndex} to={columnItem.link} data-cy={columnItem.label}>
             {columnItem.label}
           </FooterLink>
         );
@@ -36,7 +36,7 @@ const FooterColumnTitle = styled.p`
   font-weight: var(--font-weight-regular);
   font-size: 24px;
   margin-bottom: 1.5em;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
 `;
 
 const FooterSeparator = styled.div`
@@ -44,19 +44,19 @@ const FooterSeparator = styled.div`
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
 `;
 
 const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin: 0px 30px;
+  margin: 0 30px;
 `;
 
 const FooterLink = styled(Link)`
   font-weight: var(--font-weight-bold);
   padding-bottom: 0.75em;
-  color: var(--footer-color-text);
+  color: var(--footer-text-color);
   text-decoration: none;
 `;

package/src/Footer/FooterColumns.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import FooterColumn from '@theme/Footer/FooterColumn';
+import { FooterColumn } from '@theme/Footer/FooterColumn';
 import type { FooterConfig } from '@theme/types/portal';
 
-export default function FooterColumns({
+export function FooterColumns({
   columns = [],
-}: React.PropsWithChildren<{ columns?: FooterConfig['columns'] }>): JSX.Element | null {
+}: {
+  columns?: FooterConfig['columns'];
+}): JSX.Element | null {
   if (!columns?.length) {
     return null;
   }

package/src/Footer/FooterCopyright.tsx

@@ -3,9 +3,11 @@ import styled from 'styled-components';
 
 import type { FooterConfig } from '@theme/types/portal';
 
-export default function FooterCopyright({
+export function FooterCopyright({
   copyrightText = '',
-}: React.PropsWithChildren<{ copyrightText?: FooterConfig['copyrightText'] }>): JSX.Element | null {
+}: {
+  copyrightText?: FooterConfig['copyrightText'];
+}): JSX.Element | null {
   return copyrightText ? (
     <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
   ) : null;
@@ -17,8 +19,8 @@ const Wrapper = styled.section`
   font-size: 0.875em;
   padding: 1.5em 3em;
   font-weight: var(--font-weight-bold);
-  background-color: var(--footer-color-background);
-  color: var(--footer-color-text);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
   text-align: center;
   span {
     max-width: 1200px;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { Footer } from '@theme/Footer';
+
+describe('Footer', () => {
+  it('renders columns with copyright and columns', () => {
+    const { container } = renderWithTheme(
+      <Footer
+        columns={[
+          {
+            group: 'Other',
+            items: [
+              { label: 'External', type: 'link', link: 'https://google.com/' },
+              { type: 'separator', separatorLine: true },
+              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
+              { label: 'Error link', type: 'error' },
+            ],
+          },
+          {
+            group: '',
+            label: 'Another',
+            items: [
+              { type: 'separator', separatorLine: true },
+              { label: 'Twitter', type: 'link', link: 'https://twitter.com/' },
+              { label: 'Error link', type: 'error' },
+            ],
+          },
+        ]}
+        copyrightText="Copyright®"
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders columns with copyright only', () => {
+    const { container } = renderWithTheme(<Footer copyrightText="Copyright®" />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if no columns and copyright provided', () => {
+    const { container } = renderWithTheme(<Footer />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if empty columns and copyright provided', () => {
+    const { container } = renderWithTheme(<Footer columns={[]} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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/index.ts

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

package/src/JsonViewer/JsonViewer.stories.tsx

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

package/src/JsonViewer/index.ts

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

package/src/Layout/PageLayout.tsx

@@ -5,7 +5,7 @@ interface PageLayoutProps {
   sidebar?: React.ReactNode;
 }
 
-export default function PageLayout({
+export function PageLayout({
   sidebar,
   children,
 }: React.PropsWithChildren<PageLayoutProps>): JSX.Element {

package/src/Layout/RootLayout.tsx

@@ -8,7 +8,7 @@ interface LayoutConfig {
 
 const Wrapper = styled.div``;
 
-export default function RootLayout({
+export function RootLayout({
   navbar,
   footer,
   children,

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/Admonition.tsx → Admonition.tsx}

@@ -28,17 +28,17 @@ export function Admonition({
 const Wrapper = styled.div<AdmonitionTypeProps>`
   position: relative;
   align-items: center;
-  margin: var(--alert-margin-vertical) var(--alert-margin-horizontal);
-  padding: var(--alert-padding-vertical) var(--alert-padding-horizontal);
-  padding-left: calc(var(--alert-padding-horizontal) * 2 + var(--alert-icon-size));
-  border-radius: var(--alert-border-radius);
-  font-size: var(--alert-font-size);
-  font-weight: var(--alert-font-weight);
-  line-height: var(--alert-line-height);
+  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(--alert-${type}-background-color);
-    color: var(--alert-${type}-text-color);
+    background-color: var(--admonition-${type}-background-color);
+    color: var(--admonition-${type}-text-color);
   `}
 `;
 
@@ -46,14 +46,14 @@ const Heading = styled.h5<AdmonitionTypeProps>`
   display: block;
   margin: 0 0 10px;
 
-  letter-spacing: var(--alert-heading-letter-spacing);
-  color: ${({ type }) => `var(--alert-${type}-heading-color)`};
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  color: ${({ type }) => `var(--admonition-${type}-text-color)`};
 
   && {
-    font-size: var(--alert-heading-font-size);
-    font-weight: var(--alert-heading-font-weight);
-    line-height: var(--alert-line-height);
-    transform: var(--alert-heading-transform);
+    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);
   }
 `;
 

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';

package/src/Markdown/{Heading/Heading.tsx → Heading.tsx}

@@ -30,6 +30,9 @@ export function Heading({
   return createElement(
     `h${level}`,
     { id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' },
-    [linkEl, children],
+    <>
+      {linkEl}
+      {children}
+    </>,
   );
 }

package/src/Markdown/MarkdownLayout.tsx

@@ -5,8 +5,8 @@ import { ContentWrapper } from '@theme/Markdown/ContentWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 
 type MarkdownLayoutProps = {
-  tableOfContent: React.Component;
-  markdownWrapper: React.Component;
+  tableOfContent: React.ReactNode;
+  markdownWrapper: React.ReactNode;
 };
 
 export function MarkdownLayout({