@redocly/theme 0.1.7 → 0.1.10

package/src/Markdown/StyledMarkdown.tsx

@@ -0,0 +1,312 @@
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+
+import { typography, typographyTokens, ITypography } from '@theme/ui/Typography';
+
+export const baseTable = css`
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: keep-all;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 14px;
+  }
+
+  table th,
+  table td {
+    padding: 12px;
+    border-bottom: 1px solid var(--global-border-color);
+  }
+
+  table th {
+    text-align: left;
+    font-weight: bold;
+    background-color: var(--color-secondary-300);
+  }
+
+  table tr th:first-child,
+  table tr td:first-child {
+    border-left: 1px solid var(--global-border-color);
+  }
+
+  table tr td:last-child,
+  table tr th:last-child {
+    border-right: 1px solid var(--global-border-color);
+  }
+
+  table thead td,
+  table thead th {
+    border-top: 1px solid var(--global-border-color);
+  }
+
+  /* top-left border */
+
+  table thead tr:first-child th:first-child {
+    border-top-left-radius: var(--panels-border-radius);
+  }
+
+  /* top-right border */
+
+  table thead tr:first-child th:last-child {
+    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(--panels-border-radius);
+  }
+
+  /* bottom-right border */
+
+  table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--panels-border-radius);
+  }
+`;
+
+export function margins(theme: ITypography): FlattenSimpleInterpolation | string {
+  if (!theme) return '';
+
+  return css`
+    ${{
+      marginTop: theme.marginTop || theme.marginVertical || '',
+      marginBottom: theme.marginBottom || theme.marginVertical || '',
+      marginLeft: theme.marginLeft || theme.marginHorizontal || '',
+      marginRight: theme.marginRight || theme.marginHorizontal || '',
+    }}
+  `;
+}
+
+// TODO: Can users specify another className or we should hardcode it?
+export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation {
+  return css`
+    .${className}.before {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      padding-right: 4px;
+    }
+
+    .${className}.after {
+      display: inline-block;
+      padding-left: 4px;
+    }
+
+    svg,
+    .${className} svg {
+      visibility: hidden;
+    }
+
+    :hover .${className} svg,
+    .${className}:focus svg {
+      visibility: visible;
+    }
+  `;
+}
+
+export const StyledMarkdown = styled.main.attrs(() => ({
+  'data-component-name': 'Markdown/StyledMarkdown',
+}))`
+  font-weight: var(--font-weight-regular);
+  padding: 0;
+
+  color: var(--color-content);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  line-height: var(--line-height-base);
+
+  a:not([role='button']) {
+    text-decoration: var(--link-decoration);
+    color: var(--link-color);
+
+    &:visited {
+      color: var(--link-color);
+    }
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: var(--h-font-weight);
+    font-family: var(--h-font-family);
+    position: relative;
+
+    scroll-margin-top: 60px;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  hr {
+    border-top: 1px solid var(--global-border-color);
+  }
+
+  details {
+    margin: 1.125em 0;
+
+    summary {
+      color: var(--color-content);
+      font-weight: var(--font-weight-regular);
+      outline: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    > :not(summary):first-of-type {
+      margin-top: 1.25em;
+    }
+
+    > *:last-child {
+      margin-bottom: 1.25em;
+    }
+  }
+
+  ${baseTable};
+
+  .code-snippets-tabs {
+    .snippets-tabs-headers {
+      font-size: 0.9em;
+
+      font-family: var(--h-font-family);
+
+      .tab-header {
+        text-align: center;
+        padding: 0.2em 0.5em;
+        display: inline-block;
+        cursor: pointer;
+        color: var(--color-content-secondary);
+
+        &.active {
+          color: var(--h-color);
+          font-weight: var(--font-weight-bold);
+        }
+      }
+    }
+
+    .tab-content {
+      margin-top: 4px;
+      display: none;
+
+      pre {
+        margin-top: 0;
+      }
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1 {
+    ${typography(typographyTokens.heading1)};
+    ${margins(typographyTokens.heading1)};
+    ${headingAnchor()};
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h2 {
+    ${typography(typographyTokens.heading2)};
+    ${margins(typographyTokens.heading2)};
+    ${headingAnchor()};
+  }
+
+  h3 {
+    ${typography(typographyTokens.heading3)};
+    ${margins(typographyTokens.heading3)};
+    ${headingAnchor()};
+  }
+
+  h4 {
+    ${typography(typographyTokens.heading4)};
+    ${margins(typographyTokens.heading4)};
+    ${headingAnchor()};
+  }
+
+  h5 {
+    ${typography(typographyTokens.heading5)};
+    ${margins(typographyTokens.heading5)};
+    ${headingAnchor()};
+  }
+
+  h6 {
+    ${typography(typographyTokens.heading6)};
+    ${margins(typographyTokens.heading6)};
+    ${headingAnchor()};
+  }
+
+  code {
+    color: var(--inline-code-color);
+    background-color: var(--inline-code-background-color);
+
+    border-radius: 2px;
+    border: 1px solid var(--global-border-color);
+    padding: 0.1em 0.25em 0.2em;
+    font-weight: var(--code-font-weight);
+    word-break: break-word;
+    font-size: var(--code-font-size);
+    font-family: var(--code-font-family);
+  }
+
+  blockquote {
+    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);
+    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);
+    border-left: 4px solid var(--global-border-color);
+    background-color: var(--bloquote-background-color);
+
+    ${typography(typographyTokens.blockquote)};
+
+    & > p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    margin: 0 auto;
+
+    &:only-child {
+      display: block;
+    }
+  }
+
+  > ul,
+  > p ul {
+    > ol,
+    > p ol {
+      padding-left: 2em;
+      margin: 0 0 1em;
+
+      ul,
+      ol {
+        margin-bottom: 0;
+        margin-top: 0;
+      }
+    }
+  }
+`;

package/src/Markdown/Tabs/Tab.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type TabProps = {
+  activeTab: string;
+  label: string;
+  onClick: (e: string) => void;
+};
+
+export function Tab({ activeTab, label, onClick }: TabProps): JSX.Element {
+  const isActive = activeTab === label;
+  return (
+    <TabItem
+      active={isActive}
+      onClick={() => onClick(label)}
+      data-component-name="Markdown/Tabs/Tab"
+    >
+      {label}
+    </TabItem>
+  );
+}
+
+const TabItem = styled.li<{ active: boolean }>`
+  display: inline-block;
+  list-style: none;
+  margin-bottom: -1px;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+
+  ${({ active }) =>
+    active &&
+    `
+    background-color: white;
+    border: solid #ccc;
+    border-width: 1px 1px 0 1px;
+  `}
+`;

package/src/Markdown/Tabs/Tabs.tsx

@@ -0,0 +1,45 @@
+import React, { useState, PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+import { Tab } from '@theme/Markdown/Tabs/Tab';
+
+type TabsProps = PropsWithChildren<{ children: { props: { label: string } & TabsProps }[] }>;
+
+export function Tabs({ children }: TabsProps): JSX.Element {
+  const [activeTab, setActiveTab] = useState(children[0].props.label);
+  const onTabSelect = (label: string) => setActiveTab(label);
+
+  return (
+    <TabsContainer data-component-name="Markdown/Tabs/Tabs">
+      <TabList>
+        {children.map((child) => {
+          const { label } = child.props;
+          return <Tab activeTab={activeTab} key={label} label={label} onClick={onTabSelect} />;
+        })}
+      </TabList>
+      <TabContent>
+        {children.map((child) => {
+          if (child.props.label !== activeTab) return undefined;
+          return child.props.children;
+        })}
+      </TabContent>
+    </TabsContainer>
+  );
+}
+
+const TabsContainer = styled.div`
+  margin: 10px 0;
+`;
+
+const TabList = styled.ol`
+  border-bottom: 1px solid #ccc;
+  padding: 0;
+  margin-block-end: 0;
+`;
+
+const TabContent = styled.div`
+  padding: 10px 5px;
+  border: 1px solid #ccc;
+  border-top: none;
+  padding: 1rem;
+`;

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,31 +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,
-  // argTypes: {
-  //   size: {
-  //     control: 'radio',
-  //     options: ['small', 'medium', 'large', 'xlarge'],
-  //   },
-  //   color: {
-  //     control: 'radio',
-  //     options: ['primary', 'secondary', 'default'],
-  //   },
-  // },
 } as ComponentMeta<typeof Navbar>;
 
 const Template: ComponentStory<typeof Navbar> = (args) => <Navbar {...args}>Click</Navbar>;
 
 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

@@ -1,15 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-// import { mediaQueries } from '@portal/media-css';
-
 interface NavbarProps {
   menu: React.ReactNode;
   logo: React.ReactNode;
   search: React.ReactNode;
 }
 
-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}
@@ -23,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,29 +30,24 @@ export const NavbarContainer = styled.nav`
   position: sticky;
   top: 0;
   z-index: 200;
-  padding: 1.25rem;
   padding: 10px var(--sidebar-margin-left);
-  background: var(--navbar-color-background);
-  font-family: var(--font-family-h);
+  background: var(--navbar-background-color);
+  font-family: var(--h-font-family);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: 10px var(--sidebar-margin-left);
+    font-size: 1rem;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    background: transparent;
+    display: none;
+    > :not(a, img) {
+      display: none !important;
+    }
+    img {
+      padding: 0;
+      margin: 0;
+    }
+  }
 `;
-
-// ${mediaQueries.medium} {
-//   padding: 10px var(--sidebar-margin-left);
-// }
-
-// ${mediaQueries.medium} {
-//   font-size: 1rem;
-// }
-
-// ${mediaQueries.print} {
-//   background: transparent;
-//   display: none;
-
-//   > :not(a, img) {
-//     display: none !important;
-//   }
-//   img {
-//     padding: 0;
-//     margin: 0;
-//   }
-// }

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);
 
@@ -66,7 +66,7 @@ export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
 
 const NavMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
-  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);
+  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);
   text-align: center;
   line-height: 1;
   font-size: var(--navbar-item-font-size);
@@ -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,9 +1,9 @@
 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 {
+export function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
   if (!menuItems || !menuItems.length) {
     return null;
   }
@@ -22,8 +22,8 @@ const NavItemsContainer = styled.ul`
   margin: 0;
   padding: 0;
   display: block;
-`;
 
-// ${mediaQueries.small} {
-//   display: block;
-// }
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
+  }
+`;

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