@redocly/theme 0.0.1

package/lib/src/Logo/Logo.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export interface LogoConfig {
+  image?: string;
+  altText?: string;
+  link?: string;
+  favicon?: string;
+}
+
+export function Logo({ logo }: { logo: LogoConfig }): JSX.Element | null {
+  const img = <NavLogo src={logo.image} alt={logo.altText} data-component-name="Logo/Logo" />;
+  return logo?.image ? logo.link ? <Link to={logo.link}>{img}</Link> : img : null;
+}
+
+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/lib/src/Navbar/Navbar.tsx

@@ -0,0 +1,60 @@
+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 {
+  return (
+    <NavbarContainer data-component-name="Navbar/Navbar">
+      {logo}
+      {menu}
+      {search}
+    </NavbarContainer>
+  );
+}
+
+export const NavbarContainer = styled.nav`
+  height: var(--navbar-height);
+  box-sizing: border-box;
+  display: flex;
+  color: var(--navbar-color-text);
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  font-size: 0.875rem;
+  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);
+`;
+
+// ${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/lib/src/Navbar/NavbarItem.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+
+import { Link } from '@portal/Link';
+import { withPathPrefix } from '@portal/utils';
+
+export enum MenuStyle {
+  Drilldown = 'drilldown',
+}
+
+export type ResolvedNavLinkItem = {
+  type: 'link';
+  link: string;
+  label: string;
+  items?: ResolvedNavItem[];
+  external?: boolean;
+  version?: string;
+  default?: string;
+  httpVerb?: string; // TODO: make a separate type of item
+  separatorLine?: boolean;
+  active?: boolean;
+};
+
+export type ResolvedNavGroupItem = {
+  type: 'group';
+  link?: string;
+  label: string;
+  items: ResolvedNavItem[];
+  version?: string;
+  default?: string;
+  menuStyle?: MenuStyle;
+  separatorLine?: boolean;
+  active?: boolean;
+};
+
+export type ResolvedNavItem =
+  | ResolvedNavLinkItem
+  | ResolvedNavGroupItem
+  | {
+      type: 'separator';
+      label?: string;
+      separatorLine?: boolean;
+    }
+  | {
+      type: 'error';
+      label: string;
+    };
+
+interface NavbarItemProps {
+  navItem: ResolvedNavLinkItem;
+}
+
+export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element {
+  const { pathname } = useLocation();
+  const isActive = pathname === withPathPrefix(navItem.link);
+
+  return (
+    <NavMenuItem active={isActive} data-component-name="Navbar/NavbarItem">
+      <NavLink to={navItem.link} active={isActive}>
+        <NavLabel>{navItem.label}</NavLabel>
+      </NavLink>
+    </NavMenuItem>
+  );
+}
+
+const NavMenuItem = styled.li<{ active?: boolean }>`
+  display: inline-block;
+  padding: 20px calc(var(--sidebar-padding-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: ${({ active }) => (active ? 'var(--navbar-item-active-background-color)' : 'none')};
+`;
+
+const NavLink = styled(Link)`
+  color: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)'};
+  text-decoration: ${({ active }) =>
+    active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
+`;
+
+const NavLabel = styled.span`
+  cursor: pointer;
+  vertical-align: middle;
+`;

package/lib/src/Navbar/NavbarMenu.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import NavbarItem from '@theme/Navbar/NavbarItem';
+
+export default function NavbarMenu({ menuItems }: { menuItems: any[] }): JSX.Element | null {
+  if (!menuItems || !menuItems.length) {
+    return null;
+  }
+
+  return (
+    <NavItemsContainer data-component-name="Navbar/NavbarMenu">
+      {menuItems.map((navItem, index) => {
+        return <NavbarItem key={index} data-cy={navItem.label} navItem={navItem} />;
+      })}
+    </NavItemsContainer>
+  );
+}
+
+const NavItemsContainer = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+`;
+
+// ${mediaQueries.small} {
+//   display: block;
+// }

package/lib/src/Panel/CodePanel.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons/ShelfIcon';
+
+import { Panel } from './Panel';
+import { PanelHeader } from './PanelHeader';
+import { DarkHeader } from './DarkHeader';
+import { PanelBody } from './PanelBody';
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+
+export const CodePanel = styled(Panel)`
+  > ${PanelHeader} {
+    ${DarkHeader};
+    min-height: 50px;
+    ${ShelfIcon} {
+      fill: var(--color-content-inverse);
+      position: relative;
+    }
+    ${PanelHeaderTitle} {
+      color: var(--color-content-inverse);
+    }
+  }
+
+  && {
+    ${PanelBody} {
+      padding: 10px 20px 20px;
+      background-color: var(--samples-panel-background-color);
+      color: var(--color-content-inverse);
+    }
+  }
+`;

package/lib/src/Panel/ContentPanel.ts

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons/ShelfIcon';
+
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+import { Panel } from './Panel';
+import { PanelBody } from './PanelBody';
+import { PanelHeader } from './PanelHeader';
+
+export const ContentPanel = styled(Panel)`
+  border: 1px solid var(--global-border-color);
+
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-base);
+
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+  > ${PanelHeader} {
+    padding: calc(var(--spacing-unit) * 4);
+    font-size: 18px;
+    font-weight: var(--font-weight-bold);
+    background-color: var(--panels-background-color);
+
+    ${PanelHeaderTitle} {
+      color: var(--color-content);
+    }
+
+    ${ShelfIcon} {
+      fill: var(--color-content);
+    }
+  }
+
+  > ${PanelBody} {
+    padding: calc(var(--spacing-unit) * 4);
+  }
+
+  > ${PanelHeader} + ${PanelBody} {
+    padding-top: 1px; /* to prevent border overflow */
+  }
+`;

package/lib/src/Panel/DarkHeader.ts

@@ -0,0 +1,8 @@
+import { css } from 'styled-components';
+
+export const DarkHeader = css`
+  padding: 10px 20px;
+  line-height: 30px;
+  z-index: 0;
+  background-color: var(--samples-panel-controls-background-color);
+`;

package/lib/src/Panel/Panel.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { PanelBody } from './PanelBody';
+import { PanelComponent } from './PanelComponent';
+import { PanelHeader } from './PanelHeader';
+
+export const Panel = styled(PanelComponent)`
+  border-radius: var(--panels-border-radius);
+
+  ${PanelHeader} + ${PanelBody} {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+`;

package/lib/src/Panel/PanelBody.ts

@@ -0,0 +1,30 @@
+import styled, { keyframes, css } from 'styled-components';
+
+const showPanel = keyframes`
+  0% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+
+const showPanelAnimation = css`
+  animation: ${showPanel} 0.2s;
+`;
+
+interface PanelBodyProps {
+  animate?: boolean;
+  hidden?: boolean;
+}
+
+export const PanelBody = styled.div<PanelBodyProps>`
+  ${({ animate }) => animate && showPanelAnimation};
+  ${({ hidden }) => hidden && 'visibility: hidden'};
+
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: var(--panels-border-radius);
+  border-bottom-left-radius: var(--panels-border-radius);
+  background-color: var(--panels-background-color);
+`;

package/lib/src/Panel/PanelComponent.tsx

@@ -0,0 +1,73 @@
+import React, {
+  BaseSyntheticEvent,
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+import styled from 'styled-components';
+
+import { ShelfIcon } from '../icons';
+
+import { PanelBody } from './PanelBody';
+import { PanelHeader, PanelHeaderProps } from './PanelHeader';
+import { PanelHeaderTitle } from './PanelHeaderTitle';
+
+export interface PanelComponentProps {
+  expanded?: boolean;
+  className?: string;
+  header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
+  onToggle?: (expanded: boolean) => void;
+}
+
+export function PanelComponent({
+  expanded = true,
+  header,
+  className,
+  children,
+  onToggle,
+}: PropsWithChildren<PanelComponentProps>): JSX.Element {
+  const [isExpanded, setExpanded] = useState(expanded);
+  const [animate, setAnimate] = useState(false);
+
+  const toggle = ({ target }: BaseSyntheticEvent): void => {
+    if (target instanceof HTMLAnchorElement) return;
+    setAnimate(true);
+    setExpanded(!isExpanded);
+    onToggle?.(!isExpanded);
+  };
+
+  useEffect(() => setExpanded(expanded), [expanded]);
+
+  return (
+    <div
+      className={className}
+      data-cy={
+        typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
+      }
+    >
+      {header &&
+        (typeof header === 'function' ? (
+          header({ expanded: isExpanded, toggle })
+        ) : (
+          <PanelHeader data-cy="panel-header" onClick={toggle} expanded={isExpanded}>
+            <InlineBox>
+              <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
+              <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
+            </InlineBox>
+          </PanelHeader>
+        ))}
+
+      {isExpanded && (
+        <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
+          {children}
+        </PanelBody>
+      )}
+    </div>
+  );
+}
+
+export const InlineBox = styled.div`
+  display: inline-flex;
+  align-items: center;
+`;

package/lib/src/Panel/PanelHeader.ts

@@ -0,0 +1,25 @@
+import { BaseSyntheticEvent } from 'react';
+import styled from 'styled-components';
+
+export interface PanelHeaderProps {
+  expanded: boolean;
+  disabled?: boolean;
+  toggle?: (e: BaseSyntheticEvent) => void;
+}
+
+export const PanelHeader = styled.div<PanelHeaderProps>`
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+  cursor: pointer;
+
+  border-top-left-radius: var(--panels-border-radius);
+  border-top-right-radius: var(--panels-border-radius);
+  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
+  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
+
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+`;

package/lib/src/Panel/PanelHeaderTitle.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const PanelHeaderTitle = styled.span`
+  line-height: 1;
+  margin-right: 5px;
+  font-weight: 700;
+  /* changed from var(--color-content-inverse) to var(--color-content)
+     should change several components in openapi/graphql reference-docs to use inverse color
+   */
+  color: var(--color-content);
+`;

package/lib/src/Panel/index.ts

@@ -0,0 +1,7 @@
+export * from './CodePanel';
+export * from './ContentPanel';
+export * from './DarkHeader';
+export * from './Panel';
+export * from './PanelBody';
+export * from './PanelHeader';
+export * from './PanelHeaderTitle';

package/lib/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+
+import { CodeBlock } from '../CodeBlock';
+
+export const SamplesControlButton = styled.button`
+  background-color: var(--samples-panel-controls-background-color);
+  border: 0;
+  outline: 0;
+  border-radius: var(--global-border-radius);
+  height: 20px;
+  color: var(--color-content-inverse);
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  min-width: 90px;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 2px 20px;
+  }
+
+  :hover,
+  :focus {
+    background-color: var(--samples-panel-controls-hover-background-color);
+  }
+`;
+
+export const SampleControls = styled.div`
+  padding: 10px 0;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+
+  > div,
+  > ${SamplesControlButton} {
+    /* can have tooltip wrapper div also */
+    margin-top: 5px;
+    margin-left: 10px;
+
+    ${({ theme }) => theme.mediaQueries.small} {
+      margin-top: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`;
+
+export const SampleControlsWrap = styled.div`
+  &:hover ${SampleControls} {
+    opacity: 1;
+  }
+`;
+
+export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--global-border-radius);
+  background-color: var(--samples-panel-controls-background-color);
+  color: var(--color-content-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap, pre);
+`;

package/lib/src/SamplesPanelControls/index.ts

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

package/lib/src/SidebarLogo/SidebarLogo.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface LogoProps {
+  imageUrl?: string;
+  href?: string;
+  altText?: string;
+  dataTestId?: string;
+  backgroundColor?: string;
+}
+
+export function SidebarLogo({
+  imageUrl,
+  href,
+  altText,
+  backgroundColor,
+  dataTestId,
+}: LogoProps = {}): JSX.Element | null {
+  if (!imageUrl) {
+    return null;
+  }
+
+  const logo = <LogoImgEl src={imageUrl} alt={altText || 'logo'} />;
+
+  return (
+    <LogoWrap data-cy={dataTestId} style={{ backgroundColor }}>
+      {href ? <Link href={href}>{logo}</Link> : logo}
+    </LogoWrap>
+  );
+}
+
+const LogoImgEl = styled.img`
+  max-height: var(--logo-max-height);
+  max-width: var(--logo-max-width);
+  padding: var(--logo-padding);
+  width: 100%;
+  display: block;
+`;
+
+const LogoWrap = styled.div`
+  text-align: center;
+  line-height: 0;
+`;
+
+const Link = styled.a`
+  display: inline-block;
+`;

package/lib/src/SidebarLogo/index.ts

@@ -0,0 +1 @@
+export * from './SidebarLogo';

package/lib/src/SourceCode/SourceCode.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { highlight } from '../utils/highlight';
+import { SampleControls, SampleControlsWrap, PreformattedCodeBlock } from '../SamplesPanelControls';
+import { CopyButtonWrapper } from '../CopyButton';
+
+export interface SourceCodeProps {
+  lang: string;
+  source?: string;
+  externalSource?: ExternalSource;
+  withCopyButton?: boolean;
+  dataTestId?: string;
+}
+
+export interface Sample {
+  lang: string;
+  label?: string;
+}
+
+export type UnstableExternalCodeSample = Sample & {
+  get: (source: ExternalSource) => string;
+};
+
+export interface ExternalSource {
+  sample: UnstableExternalCodeSample;
+  exampleName?: string;
+  pathParams?: any;
+  properties?: any;
+  operation?: any;
+}
+
+export function Code({
+  source,
+  lang,
+  dataTestId,
+}: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element {
+  return (
+    <PreformattedCodeBlock
+      dangerouslySetInnerHTML={{ __html: highlight(source, lang) }}
+      data-cy={dataTestId}
+    />
+  );
+}
+
+export function SourceCode({
+  lang,
+  source,
+  externalSource,
+  withCopyButton,
+  dataTestId = 'source-code',
+}: SourceCodeProps): JSX.Element {
+  const _source = source || externalSource?.sample?.get?.(externalSource) || '';
+  if (withCopyButton) {
+    return (
+      <CopyButtonWrapper data={source}>
+        {({ renderCopyButton }) => (
+          <SampleControlsWrap>
+            <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
+            <Code lang={lang} source={_source} dataTestId={dataTestId} />
+          </SampleControlsWrap>
+        )}
+      </CopyButtonWrapper>
+    );
+  }
+
+  return <Code dataTestId={dataTestId} lang={lang} source={_source} />;
+}

package/lib/src/SourceCode/index.ts

@@ -0,0 +1 @@
+export * from './SourceCode';