@redocly/theme 0.1.7 → 0.1.8

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(--color-border-light);
+  }
+
+  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(--color-border-light);
+  }
+
+  table tr td:last-child,
+  table tr th:last-child {
+    border-right: 1px solid var(--color-border-light);
+  }
+
+  table thead td,
+  table thead th {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  /* top-left border */
+
+  table thead tr:first-child th:first-child {
+    border-top-left-radius: var(--panel-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);
+  }
+
+  /* bottom-left border */
+
+  table tbody tr:last-child td:first-child {
+    border-bottom-left-radius: var(--panel-border-radius);
+  }
+
+  /* bottom-right border */
+
+  table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: var(--panel-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-text-main);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-primary);
+  line-height: var(--line-height-m);
+
+  a:not([role='button']) {
+    text-decoration: var(--links-text-decoration);
+    color: var(--links-color);
+
+    &:visited {
+      color: var(--links-color);
+    }
+
+    &:hover {
+      color: var(--links-color-hover);
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: var(--font-weight-h);
+    font-family: var(--font-family-h);
+    position: relative;
+
+    scroll-margin-top: 60px;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  hr {
+    border-top: 1px solid var(--color-border-light);
+  }
+
+  details {
+    margin: 1.125em 0;
+
+    summary {
+      color: var(--color-primary-main);
+      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(--font-family-h);
+
+      .tab-header {
+        text-align: center;
+        padding: 0.2em 0.5em;
+        display: inline-block;
+        cursor: pointer;
+        color: var(--color-text-dimmed);
+
+        &.active {
+          color: var(--color-primary-main);
+          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(--code-color);
+    background-color: var(--code-background-color);
+
+    border-radius: 2px;
+    border: 1px solid var(--color-border-light);
+    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(--color-border-light);
+    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/Navbar/Navbar.stories.tsx

@@ -9,16 +9,6 @@ import { Logo } from '@theme/Logo/Logo';
 export default {
   title: '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>;

package/src/Navbar/Navbar.tsx

@@ -1,12 +1,11 @@
 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;
+  theme: any;
 }
 
 export default function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
@@ -32,29 +31,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);
+  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

@@ -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);

package/src/Navbar/NavbarMenu.tsx

@@ -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/OperationBadge/OperationBadge.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { OperationBadge } from '@theme/OperationBadge';
+
+export default {
+  title: 'OperationBadge',
+  component: OperationBadge,
+  argTypes: {},
+} as ComponentMeta<typeof OperationBadge>;
+
+const Template: ComponentStory<typeof OperationBadge> = (args) => (
+  <OperationBadge {...args}>Default</OperationBadge>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+const TemplateAll: ComponentStory<typeof OperationBadge> = () => (
+  <>
+    <OperationBadge type="get">get</OperationBadge>
+    <OperationBadge type="post">post</OperationBadge>
+    <OperationBadge type="put">put</OperationBadge>
+    <OperationBadge type="delete">delete</OperationBadge>
+    <OperationBadge type="options">options</OperationBadge>
+    <OperationBadge type="patch">patch</OperationBadge>
+    <OperationBadge type="basic">basic</OperationBadge>
+    <OperationBadge type="link">link</OperationBadge>
+    <OperationBadge type="head">head</OperationBadge>
+    <OperationBadge type="hook">hook</OperationBadge>
+  </>
+);
+
+export const All = TemplateAll.bind({});
+All.args = {};

package/src/OperationBadge/OperationBadge.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
+  className: `operation-type ${props.type}`,
+}))<{ type: string }>`
+  display: inline-block;
+  font-size: var(--http-badge-menu-font-size);
+  font-family: var(--http-badge-font-family);
+  font-weight: var(--http-badge-font-weight);
+  line-height: var(--http-badge-menu-line-height);
+  color: var(--http-badge-color);
+  background-color: #333;
+  border-radius: var(--http-badge-border-radius);
+  width: 36px;
+  height: 14px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-right: 6px;
+
+  &.get {
+    background-color: var(--color-http-get);
+  }
+
+  &.post {
+    background-color: var(--color-http-post);
+  }
+
+  &.put {
+    background-color: var(--color-http-put);
+  }
+
+  &.options {
+    background-color: var(--color-http-options);
+  }
+
+  &.patch {
+    background-color: var(--color-http-patch);
+  }
+
+  &.delete {
+    background-color: var(--color-http-delete);
+  }
+
+  &.basic {
+    background-color: var(--color-http-basic);
+  }
+
+  &.link {
+    background-color: var(--color-http-link);
+  }
+
+  &.head {
+    background-color: var(--color-http-head);
+  }
+
+  &.hook {
+    background-color: var(--color-http-hook);
+  }
+`;

package/src/OperationBadge/__tests__/OperationBadge.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { OperationBadge } from '@theme/OperationBadge';
+
+describe('OperationBadge', () => {
+  it('renders basic', () => {
+    const { container } = render(<OperationBadge type={'basic'}>basic</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders get', () => {
+    const { container } = render(<OperationBadge type={'get'}>get</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders post', () => {
+    const { container } = render(<OperationBadge type={'post'}>post</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders put', () => {
+    const { container } = render(<OperationBadge type={'put'}>put</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders delete', () => {
+    const { container } = render(<OperationBadge type={'delete'}>delete</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders options', () => {
+    const { container } = render(<OperationBadge type={'options'}>options</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders patch', () => {
+    const { container } = render(<OperationBadge type={'patch'}>patch</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders link', () => {
+    const { container } = render(<OperationBadge type={'link'}>link</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders head', () => {
+    const { container } = render(<OperationBadge type={'head'}>head</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders hook', () => {
+    const { container } = render(<OperationBadge type={'hook'}>hook</OperationBadge>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});