@redocly/theme 0.1.9 → 0.1.10

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

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

package/src/Markdown/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

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

package/src/Markdown/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({

package/src/Markdown/StyledMarkdown.tsx

@@ -18,7 +18,7 @@ export const baseTable = css`
   table th,
   table td {
     padding: 12px;
-    border-bottom: 1px solid var(--color-border-light);
+    border-bottom: 1px solid var(--global-border-color);
   }
 
   table th {
@@ -29,42 +29,42 @@ export const baseTable = css`
 
   table tr th:first-child,
   table tr td:first-child {
-    border-left: 1px solid var(--color-border-light);
+    border-left: 1px solid var(--global-border-color);
   }
 
   table tr td:last-child,
   table tr th:last-child {
-    border-right: 1px solid var(--color-border-light);
+    border-right: 1px solid var(--global-border-color);
   }
 
   table thead td,
   table thead th {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--global-border-color);
   }
 
   /* top-left border */
 
   table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--panel-border-radius);
+    border-top-left-radius: var(--panels-border-radius);
   }
 
   /* top-right border */
 
   table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--panel-border-radius);
-    border-top: 1px solid var(--color-border-light);
+    border-top-right-radius: var(--panels-border-radius);
+    border-top: 1px solid var(--global-border-color);
   }
 
   /* bottom-left border */
 
   table tbody tr:last-child td:first-child {
-    border-bottom-left-radius: var(--panel-border-radius);
+    border-bottom-left-radius: var(--panels-border-radius);
   }
 
   /* bottom-right border */
 
   table tbody tr:last-child td:last-child {
-    border-bottom-right-radius: var(--panel-border-radius);
+    border-bottom-right-radius: var(--panels-border-radius);
   }
 `;
 
@@ -114,21 +114,21 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--color-text-main);
+  color: var(--color-content);
   font-size: var(--font-size-base);
-  font-family: var(--font-family-primary);
-  line-height: var(--line-height-m);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
 
   a:not([role='button']) {
-    text-decoration: var(--links-text-decoration);
-    color: var(--links-color);
+    text-decoration: var(--link-decoration);
+    color: var(--link-color);
 
     &:visited {
-      color: var(--links-color);
+      color: var(--link-color);
     }
 
     &:hover {
-      color: var(--links-color-hover);
+      color: var(--link-color-hover);
     }
   }
 
@@ -142,8 +142,8 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   h4,
   h5,
   h6 {
-    font-weight: var(--font-weight-h);
-    font-family: var(--font-family-h);
+    font-weight: var(--h-font-weight);
+    font-family: var(--h-font-family);
     position: relative;
 
     scroll-margin-top: 60px;
@@ -154,14 +154,14 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   hr {
-    border-top: 1px solid var(--color-border-light);
+    border-top: 1px solid var(--global-border-color);
   }
 
   details {
     margin: 1.125em 0;
 
     summary {
-      color: var(--color-primary-main);
+      color: var(--color-content);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -183,17 +183,17 @@ export const StyledMarkdown = styled.main.attrs(() => ({
     .snippets-tabs-headers {
       font-size: 0.9em;
 
-      font-family: var(--font-family-h);
+      font-family: var(--h-font-family);
 
       .tab-header {
         text-align: center;
         padding: 0.2em 0.5em;
         display: inline-block;
         cursor: pointer;
-        color: var(--color-text-dimmed);
+        color: var(--color-content-secondary);
 
         &.active {
-          color: var(--color-primary-main);
+          color: var(--h-color);
           font-weight: var(--font-weight-bold);
         }
       }
@@ -260,11 +260,11 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   }
 
   code {
-    color: var(--code-color);
-    background-color: var(--code-background-color);
+    color: var(--inline-code-color);
+    background-color: var(--inline-code-background-color);
 
     border-radius: 2px;
-    border: 1px solid var(--color-border-light);
+    border: 1px solid var(--global-border-color);
     padding: 0.1em 0.25em 0.2em;
     font-weight: var(--code-font-weight);
     word-break: break-word;
@@ -275,7 +275,7 @@ export const StyledMarkdown = styled.main.attrs(() => ({
   blockquote {
     margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);
     padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
-    border-left: 4px solid var(--color-border-light);
+    border-left: 4px solid var(--global-border-color);
     background-color: var(--bloquote-background-color);
 
     ${typography(typographyTokens.blockquote)};

package/src/Markdown/Tabs/index.ts

@@ -1,2 +1,2 @@
-export * from './Tab';
-export * from './Tabs';
+export * from '@theme/Markdown/Tabs/Tab';
+export * from '@theme/Markdown/Tabs/Tabs';

package/src/Markdown/index.ts

@@ -1,9 +1,9 @@
-export * from './CodeSample';
-export * from './Tabs';
-export * from './Admonition';
-export * from './ContentWrapper';
-export * from './Heading';
-export * from './MarkdownLayout';
-export * from './Mermaid';
-export * from './PageWrapper';
-export * from './StyledMarkdown';
+export * from '@theme/Markdown/CodeSample';
+export * from '@theme/Markdown/Tabs';
+export * from '@theme/Markdown/Admonition';
+export * from '@theme/Markdown/ContentWrapper';
+export * from '@theme/Markdown/Heading';
+export * from '@theme/Markdown/MarkdownLayout';
+export * from '@theme/Markdown/Mermaid';
+export * from '@theme/Markdown/PageWrapper';
+export * from '@theme/Markdown/StyledMarkdown';

package/src/Navbar/Navbar.stories.tsx

@@ -4,10 +4,10 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Navbar } from './Navbar';
 import { NavbarMenu } from './NavbarMenu';
 
-import { Logo } from '@theme/Logo/Logo';
+import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
 
 export default {
-  title: 'Navbar',
+  title: 'Components/Navbar',
   component: Navbar,
 } as ComponentMeta<typeof Navbar>;
 
@@ -15,7 +15,11 @@ const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args}>Clic
 
 export const Main = Template.bind({});
 Main.args = {
-  logo: <Logo logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100' }} />,
+  logo: (
+    <NavbarLogo
+      logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
+    />
+  ),
   menu: (
     <NavbarMenu
       menuItems={[

package/src/Navbar/Navbar.tsx

@@ -5,7 +5,6 @@ interface NavbarProps {
   menu: React.ReactNode;
   logo: React.ReactNode;
   search: React.ReactNode;
-  theme: any;
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
@@ -22,7 +21,7 @@ export const NavbarContainer = styled.nav`
   height: var(--navbar-height);
   box-sizing: border-box;
   display: flex;
-  color: var(--navbar-color-text);
+  color: var(--navbar-text-color);
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
@@ -32,7 +31,7 @@ export const NavbarContainer = styled.nav`
   top: 0;
   z-index: 200;
   padding: 10px var(--sidebar-margin-left);
-  background: var(--navbar-color-background);
+  background: var(--navbar-background-color);
   font-family: var(--h-font-family);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/Navbar/NavbarItem.tsx

@@ -79,7 +79,7 @@ const NavMenuItem = styled.li<{ active?: boolean }>`
 
 const NavLink = styled(Link)`
   color: ${({ active }) =>
-    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)'};
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
 `;

package/src/Navbar/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/Navbar/Navbar';
+export * from '@theme/Navbar/NavbarItem';
+export * from '@theme/Navbar/NavbarMenu';

package/src/NavbarLogo/NavbarLogo.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { NavbarLogo } from '@theme/NavbarLogo/NavbarLogo';
+
+export default {
+  title: 'Components/NavbarLogo',
+  component: NavbarLogo,
+} as ComponentMeta<typeof NavbarLogo>;
+
+const Template: ComponentStory<typeof NavbarLogo> = (args) => <NavbarLogo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  logo: {
+    image: 'https://redocly.github.io/redoc/petstore-logo.png',
+    link: 'http://redocly.com/',
+    altText: 'Pet Store',
+  },
+};

package/src/NavbarLogo/NavbarLogo.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { LogoConfig } from '@theme/types/portal';
+
+export type NavbarLogoProps = { logo: Pick<LogoConfig, 'image' | 'link' | 'altText'> };
+
+export function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null {
+  if (!logo.image) {
+    return null;
+  }
+  const img = (
+    <NavLogo src={logo.image} alt={logo.altText} data-component-name="NavbarLogo/NavbarLogo" />
+  );
+  return logo.link ? <Link to={logo.link}>{img}</Link> : img;
+}
+
+const NavLogo = styled.img`
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+`;

package/src/NavbarLogo/__tests__/NavbarLogo.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { NavbarLogo } from '@theme/NavbarLogo';
+
+describe('NavbarLogo', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <NavbarLogo
+        logo={{
+          image: 'https://test.com/logo.png',
+          altText: 'Navbar Logo',
+          link: 'https://test.com/',
+        }}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders without link', () => {
+    const { container } = renderWithTheme(
+      <NavbarLogo
+        logo={{
+          image: 'https://test.com/logo.png',
+          altText: 'Navbar Logo',
+        }}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders nothing, if no image provided', () => {
+    const { container } = renderWithTheme(
+      <NavbarLogo
+        logo={{
+          altText: 'Navbar Logo',
+          link: 'https://test.com/',
+        }}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

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

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavbarLogo renders 1`] = `
+.c0 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+<a
+  href="https://test.com/"
+  to="https://test.com/"
+>
+  <img
+    alt="Navbar Logo"
+    class="c0"
+    data-component-name="NavbarLogo/NavbarLogo"
+    src="https://test.com/logo.png"
+  />
+</a>
+`;
+
+exports[`NavbarLogo renders without link 1`] = `
+.c0 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+<img
+  alt="Navbar Logo"
+  class="c0"
+  data-component-name="NavbarLogo/NavbarLogo"
+  src="https://test.com/logo.png"
+/>
+`;

package/src/NavbarLogo/index.ts

@@ -0,0 +1 @@
+export * from '@theme/NavbarLogo/NavbarLogo';

package/src/OperationBadge/OperationBadge.stories.tsx

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

package/src/OperationBadge/index.ts

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

package/src/PageNavigation/index.ts

@@ -0,0 +1,3 @@
+export * from '@theme/PageNavigation/NextPageLink';
+export * from '@theme/PageNavigation/PageNavigation';
+export * from '@theme/PageNavigation/PreviousPageLink';

package/src/Panel/index.ts

@@ -1,8 +1,8 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-export * from './PanelComponent';
-export * from './PanelHeader';
-export * from './PanelHeaderTitle';
+export * from '@theme/Panel/CodePanel';
+export * from '@theme/Panel/ContentPanel';
+export * from '@theme/Panel/DarkHeader';
+export * from '@theme/Panel/Panel';
+export * from '@theme/Panel/PanelBody';
+export * from '@theme/Panel/PanelComponent';
+export * from '@theme/Panel/PanelHeader';
+export * from '@theme/Panel/PanelHeaderTitle';

package/src/SamplesPanelControls/SamplesControlButton.stories.tsx

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

package/src/SamplesPanelControls/index.ts

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

package/src/Search/Autocomplete.tsx

@@ -124,5 +124,5 @@ const Overlay = styled.div`
 
 const Message = styled.div`
   padding: 24px;
-  color: var(--color-text-main);
+  color: var(--color-content);
 `;

package/src/Search/Parameters.tsx

@@ -38,7 +38,7 @@ export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  border-left: 1px solid var(--color-border-light);
+  border-left: 1px solid var(--global-border-color);
   padding: 0 12px;
   margin-top: 8px;
   margin-bottom: 4px;
@@ -57,6 +57,6 @@ const Place = styled.div`
 
 const MoreText = styled.div`
   font-size: var(--font-size-small);
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   padding-top: 4px;
 `;

package/src/Search/SearchItem.tsx

@@ -56,7 +56,7 @@ const SearchLink = styled(Link)`
 `;
 
 const Operation = styled.div`
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   font-size: var(--font-size-small);
   color: var(--search-item-title-text-color);
   overflow: hidden;
@@ -68,7 +68,7 @@ const Title = styled.div`
   color: var(--search-item-title-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height-m);
+  line-height: var(--line-height-base);
 `;
 
 const Description = styled.div`

package/src/Search/index.ts

@@ -1,9 +1,9 @@
-export * from './Autocomplete';
-export * from './ClearIcon';
-export * from './Input';
-export * from './Parameters';
-export * from './Popover';
-export * from './Search';
-export * from './SearchIcon';
-export * from './SearchItem';
-export * from './utils';
+export * from '@theme/Search/Autocomplete';
+export * from '@theme/Search/ClearIcon';
+export * from '@theme/Search/Input';
+export * from '@theme/Search/Parameters';
+export * from '@theme/Search/Popover';
+export * from '@theme/Search/Search';
+export * from '@theme/Search/SearchIcon';
+export * from '@theme/Search/SearchItem';
+export * from '@theme/Search/utils';

package/src/Search/utils.tsx

@@ -15,5 +15,5 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Strong = styled.strong`
-  color: var(--color-primary-main);
+  color: var(--color-content);
 `;