@redocly/theme 0.0.1 → 0.1.2

package/lib/src/JsonViewer/styled.ts

@@ -1,103 +0,0 @@
-import { css } from 'styled-components';
-
-export const jsonStyles = css`
-  .redoc-json code > .collapser {
-    display: none;
-    pointer-events: none;
-  }
-
-  contain: content;
-  overflow-x: auto;
-  padding: 10px;
-  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);
-  font-family: var(--code-font-family);
-  white-space: var(--code-wrap, pre);
-
-  .callback-function {
-    color: gray;
-  }
-
-  .collapser:after {
-    content: '-';
-    cursor: pointer;
-  }
-
-  .collapsed > .collapser:after {
-    content: '+';
-    cursor: pointer;
-  }
-
-  .ellipsis:after {
-    content: ' … ';
-  }
-
-  .collapsible {
-    margin-left: 2ch;
-  }
-
-  .hoverable {
-    padding: 1px 2px;
-  }
-
-  .hovered {
-    background-color: rgba(235, 238, 249, 1);
-  }
-
-  .collapser {
-    background-color: transparent;
-    border: 0;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 15px;
-    height: 15px;
-    position: absolute;
-    top: 4px;
-    left: -1.5em;
-    cursor: default;
-    user-select: none;
-    -webkit-user-select: none;
-    padding: 2px;
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
-    &:focus {
-      outline: #fff dotted 1px;
-    }
-  }
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0 0 0 26px;
-  }
-
-  li {
-    position: relative;
-    display: block;
-  }
-
-  .hoverable {
-    display: inline-block;
-  }
-
-  .selected {
-    outline-width: 1px;
-    outline-style: dotted;
-  }
-
-  .collapsed > .collapsible {
-    display: none;
-  }
-
-  .ellipsis {
-    display: none;
-  }
-
-  .collapsed > .ellipsis {
-    display: inherit;
-  }
-`;

package/lib/src/Logo/Logo.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/src/SidebarLogo/SidebarLogo.tsx

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

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