@redocly/theme 0.1.8 → 0.1.11

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

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

package/src/Markdown/index.ts

@@ -0,0 +1,9 @@
+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

@@ -1,21 +1,25 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import Navbar from './Navbar';
-import NavbarMenu from './NavbarMenu';
+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>;
 
-const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args}>Click</Navbar>;
+const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args} />;
 
 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,10 +5,9 @@ interface NavbarProps {
   menu: React.ReactNode;
   logo: React.ReactNode;
   search: React.ReactNode;
-  theme: any;
 }
 
-export default function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
+export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
       {logo}
@@ -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

@@ -51,7 +51,7 @@ interface NavbarItemProps {
   navItem: ResolvedNavLinkItem;
 }
 
-export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
+export function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
   const { pathname } = useLocation();
   const isActive = pathname === withPathPrefix(navItem.link);
 
@@ -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/NavbarMenu.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import NavbarItem from '@theme/Navbar/NavbarItem';
+import { NavbarItem } from '@theme/Navbar/NavbarItem';
 
-export default function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
-  if (!menuItems || !menuItems.length) {
+export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
+  if (!menuItems?.length) {
     return null;
   }
 

package/src/Navbar/__tests__/Navbar.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../tests/utils';
+
+import { Navbar, NavbarMenu } from '@theme/Navbar';
+import { NavbarLogo } from '@theme/NavbarLogo';
+
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+  return {
+    __esModule: true,
+    ...originalModule,
+    useLocation: jest.fn().mockReturnValue({ pathname: '/' }),
+  };
+});
+
+describe('Navbar', () => {
+  it('renders', () => {
+    const { container } = renderWithTheme(
+      <Navbar
+        logo={
+          <NavbarLogo
+            logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
+          />
+        }
+        menu={
+          <NavbarMenu
+            menuItems={[
+              { type: 'link', link: 'https://google.com', label: 'Google' },
+              { type: 'link', link: '/', label: 'Test' },
+            ]}
+          />
+        }
+        search={<span> Search </span>}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders with empty menu items', () => {
+    const { container } = renderWithTheme(
+      <Navbar
+        logo={
+          <NavbarLogo
+            logo={{ link: '/test/', image: 'https://picsum.photos/id/2/400/100', altText: 'test' }}
+          />
+        }
+        menu={<NavbarMenu menuItems={[]} />}
+        search={<span> Search </span>}
+      />,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar renders 1`] = `
+.c0 {
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: var(--navbar-text-color);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: 10px var(--sidebar-margin-left);
+  background: var(--navbar-background-color);
+  font-family: var(--h-font-family);
+}
+
+.c3 {
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: none;
+}
+
+.c6 {
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
+  margin-left: var(--navbar-item-margin-horizontal);
+  margin-right: var(--navbar-item-margin-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+  font-weight: var(--navbar-item-font-weight);
+  background: var(--navbar-item-active-background-color);
+}
+
+.c4 {
+  color: var(--navbar-text-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7 {
+  color: var(--navbar-item-active-text-color);
+  -webkit-text-decoration: var(--navbar-item-active-text-decoration);
+  text-decoration: var(--navbar-item-active-text-decoration);
+}
+
+.c5 {
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.c2 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.c1 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+@media screen and (min-width:85rem) {
+  .c0 {
+    padding: 10px var(--sidebar-margin-left);
+    font-size: 1rem;
+  }
+}
+
+@media print {
+  .c0 {
+    background: transparent;
+    display: none;
+  }
+
+  .c0 > :not(a,img) {
+    display: none !important;
+  }
+
+  .c0 img {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+@media screen and (min-width:85rem) {
+  .c2 {
+    display: block;
+  }
+}
+
+<nav
+  class="c0"
+  data-component-name="Navbar/Navbar"
+>
+  <a
+    href="/test/"
+    to="/test/"
+  >
+    <img
+      alt="test"
+      class="c1"
+      data-component-name="NavbarLogo/NavbarLogo"
+      src="https://picsum.photos/id/2/400/100"
+    />
+  </a>
+  <ul
+    class="c2"
+    data-component-name="Navbar/NavbarMenu"
+  >
+    <li
+      class="c3"
+      data-component-name="Navbar/NavbarItem"
+    >
+      <a
+        class="c4"
+        href="https://google.com"
+        to="https://google.com"
+      >
+        <span
+          class="c5"
+        >
+          Google
+        </span>
+      </a>
+    </li>
+    <li
+      class="c6"
+      data-component-name="Navbar/NavbarItem"
+    >
+      <a
+        class="c7"
+        href="/"
+        to="/"
+      >
+        <span
+          class="c5"
+        >
+          Test
+        </span>
+      </a>
+    </li>
+  </ul>
+  <span>
+     Search 
+  </span>
+</nav>
+`;
+
+exports[`Navbar renders with empty menu items 1`] = `
+.c0 {
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  color: var(--navbar-text-color);
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  padding: 10px var(--sidebar-margin-left);
+  background: var(--navbar-background-color);
+  font-family: var(--h-font-family);
+}
+
+.c1 {
+  max-width: var(--logo-max-width);
+  max-height: var(--logo-max-height);
+  height: var(--logo-height);
+  margin: var(--logo-margin);
+}
+
+@media screen and (min-width:85rem) {
+  .c0 {
+    padding: 10px var(--sidebar-margin-left);
+    font-size: 1rem;
+  }
+}
+
+@media print {
+  .c0 {
+    background: transparent;
+    display: none;
+  }
+
+  .c0 > :not(a,img) {
+    display: none !important;
+  }
+
+  .c0 img {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+<nav
+  class="c0"
+  data-component-name="Navbar/Navbar"
+>
+  <a
+    href="/test/"
+    to="/test/"
+  >
+    <img
+      alt="test"
+      class="c1"
+      data-component-name="NavbarLogo/NavbarLogo"
+      src="https://picsum.photos/id/2/400/100"
+    />
+  </a>
+  <span>
+     Search 
+  </span>
+</nav>
+`;

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: 'Portal/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();
+  });
+});