@redocly/theme 0.10.0 → 0.11.0

package/lib/ui/Tiles/WideTile.js

@@ -1,114 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WideTile = void 0;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Link_1 = require("../../mocks/Link");
-const TileText_1 = require("../../ui/Tiles/TileText");
-const TileHeader_1 = require("../../ui/Tiles/TileHeader");
-// prettier-ignore
-const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
-  display: inline-flex;
-  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
-  background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
-  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
-  background-repeat: no-repeat;
-  padding: 24px;
-  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
-  box-sizing: border-box;
-  position: relative;
-  text-decoration: none;
-  width: 100%;
-  transition: box-shadow 0.25s ease;
-  :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
-  }
-  :before {
-    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
-    display: inline-block;
-    width: 9px;
-    min-height: 18px;
-    background-size: 9px 18px;
-    background-repeat: no-repeat;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 30px;
-  }
-  &.external-url::after {
-    content: none;
-  }
-  
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
-    flex-direction: row;
-    max-width: ${({ maxWidth }) => maxWidth};
-  }
-`;
-const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
-  font-size: 24px;
-  text-align: ${({ align }) => align || 'left'};
-`;
-const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
-  font-size: 18px;
-  text-align: ${({ align }) => align || 'left'};
-`;
-const WideTileIcon = styled_components_1.default.div `
-  margin-bottom: 24px;
-  flex-shrink: 0;
-  width: 70px;
-  img {
-    display: block;
-    height: auto;
-    max-width: 100%;
-  }
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    margin-right: 24px;
-    margin-bottom: 0;
-  }
-`;
-class WideTile extends react_1.Component {
-    render() {
-        const { to, header, children, target, disableArrow, textAlign, headerAlign, icon, bgColor, bgImage, color, className, style, maxWidth, } = this.props;
-        return (react_1.default.createElement(WideTileWrapper, { to: to, target: target, disableArrow: disableArrow, withIcon: !!icon, bgColor: bgColor, bgImage: bgImage, color: color, className: className, style: style, maxWidth: maxWidth, "data-component-name": "ui/Tiles/WideTile" },
-            icon && (react_1.default.createElement(WideTileIcon, null,
-                react_1.default.createElement("img", { src: icon, alt: "" }))),
-            react_1.default.createElement("div", null,
-                header && (react_1.default.createElement(WideTileHeader, { align: textAlign, color: color, "data-cy": `Wide-${header}` }, header)),
-                children && (react_1.default.createElement(WideTileText, { align: headerAlign, color: color }, children)))));
-    }
-}
-exports.WideTile = WideTile;
-//# sourceMappingURL=WideTile.js.map

package/lib/ui/Tiles/index.d.ts

@@ -1,4 +0,0 @@
-export * from '../../ui/Tiles/ThinTile';
-export * from '../../ui/Tiles/TileHeader';
-export * from '../../ui/Tiles/TileText';
-export * from '../../ui/Tiles/WideTile';

package/lib/ui/Tiles/index.js

@@ -1,21 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../ui/Tiles/ThinTile"), exports);
-__exportStar(require("../../ui/Tiles/TileHeader"), exports);
-__exportStar(require("../../ui/Tiles/TileText"), exports);
-__exportStar(require("../../ui/Tiles/WideTile"), exports);
-//# sourceMappingURL=index.js.map

package/src/ApiOnboarding/AppCustomAttributes.tsx

@@ -1,6 +0,0 @@
-interface AppCustomAttributesProps {
-  onChange: (value: Record<string, string>) => void;
-}
-export function AppCustomAttributes(_props: AppCustomAttributesProps) {
-  return null;
-}

package/src/Button/index.ts

@@ -1 +0,0 @@
-export * from '@theme/Button/Button';

package/src/Cards/Card.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import { H3 } from '@theme/Typography';
-import type { ResolvedNavItem } from '@theme/types/portal';
-
-export interface CardProps {
-  title?: string;
-  icon?: string;
-  links: ResolvedNavItem;
-}
-
-export function Card(props: CardProps): JSX.Element {
-  return (
-    <CardWrapper data-component-name="Cards/Card">
-      {props.icon && <img src={props?.icon} alt={props?.title} />}
-      {props.title && <H3>{props.title}</H3>}
-      {props.links.items && (
-        <CardLinksList>
-          {props.links.items.map((item) => (
-            <li key={item.label}>
-              <Link to={item.link as string}>{item.label}</Link>
-            </li>
-          ))}
-        </CardLinksList>
-      )}
-    </CardWrapper>
-  );
-}
-
-const CardWrapper = styled.div`
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
-  padding: 20px;
-  margin: 0 20px 20px 0;
-  min-width: 25%;
-  font-family: var(--font-family-base);
-`;
-
-const CardLinksList = styled.ul`
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    margin-bottom: 10px;
-  }
-`;

package/src/Catalog/Catalog.tsx

@@ -1,198 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { ResolvedNavItem } from '../types/portal';
-
-import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
-import { usePageSharedData } from '@portal/hooks/index.js';
-import { H2 } from '@theme/Typography/H2';
-import { H3 } from '@theme/Typography/H3';
-import { Button } from '@theme/Button/Button';
-import { HighlightContext } from '@theme/ui/Highlight';
-import { CatalogCard } from '@theme/Catalog/CatalogCard';
-import { Filter } from '@theme/Catalog/Filter';
-import { useCatalog } from '@portal/hooks/index';
-
-export default function Catalog(props: {
-  pageProps: {
-    catalogId: string;
-    catalogConfig: CatalogConfig;
-  };
-}) {
-  const { catalogConfig } = props.pageProps;
-  const items = usePageSharedData('catalog') as ResolvedNavItem[];
-
-  const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
-  const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
-
-  return (
-    <HighlightContext.Provider value={[filterTerm]}>
-      <CatalogPageWrapper>
-        <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
-          <StyledInput
-            placeholder="Filter..."
-            value={filterTerm}
-            onFocus={() => setIsFilterPanelFocused(true)}
-            onChange={(e) => setFilterTerm(e.target.value)}
-          />
-          {filters.map((filter, idx) => (
-            <Filter filter={filter} key={filter.property + '-' + idx} />
-          ))}
-          <MobileStickyApplyFilters>
-            <Button color="secondary" onClick={() => setIsFilterPanelFocused(false)}>
-              Apply filters
-            </Button>
-          </MobileStickyApplyFilters>
-        </CatalogPageSidebar>
-        <CatalogPageContent>
-          {catalogConfig.title ? <CatalogTitle> {catalogConfig.title} </CatalogTitle> : null}
-          {catalogConfig.description ? (
-            <CatalogDescription> {catalogConfig.description} </CatalogDescription>
-          ) : null}
-          {groups.map((group) => (
-            <React.Fragment key={group.title}>
-              <H3>
-                {group.title} ({group.items.length})
-              </H3>
-              <CatalogCards>
-                {group.items.map((item) => (
-                  <CatalogCard item={item} key={item.link} />
-                ))}
-              </CatalogCards>
-            </React.Fragment>
-          ))}
-        </CatalogPageContent>
-      </CatalogPageWrapper>
-    </HighlightContext.Provider>
-  );
-}
-
-const MobileStickyApplyFilters = styled.div`
-  position: fixed;
-  display: none;
-  background-color: var(--sidebar-background-color);
-  bottom: 0;
-  padding: 16px 30px;
-  left: 0px;
-  right: 0px;
-
-  ${Button} {
-    width: 100%;
-    margin: 0;
-  }
-`;
-
-const CatalogPageSidebar = styled.aside<{ isActiveInMobileMode?: boolean }>`
-  width: var(--sidebar-width);
-  border-right: 1px solid var(--sidebar-border-color);
-  padding: 20px 30px;
-  position: sticky;
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
-  overflow: auto;
-
-  @media screen and (max-width: 767px) {
-    transition: height 0.2s ease-in-out;
-    width: 100%;
-    ${({ isActiveInMobileMode }) =>
-      isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
-    background-color: var(--sidebar-background-color);
-    border-bottom: 1px solid var(--sidebar-border-color);
-    z-index: 100;
-
-    ${MobileStickyApplyFilters} {
-      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
-    }
-  }
-`;
-
-const CatalogPageContent = styled.main`
-  flex: 1;
-  padding: 32px;
-`;
-
-const CatalogCards = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-`;
-
-const CatalogTitle = styled(H2)`
-  && {
-    margin: 0;
-  }
-`;
-
-const CatalogDescription = styled.p`
-  margin: 16px 0 32px 0;
-  font-size: 16px;
-  color: var(--text-color-secondary);
-`;
-
-const CatalogPageWrapper = styled.div`
-  --sidebar-width: var(--catalog-sidebar-width, 300px);
-
-  display: flex;
-  flex-direction: row;
-
-  font-weight: var(--font-weight-regular);
-  padding: 0;
-
-  color: var(--text-color);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-
-  hr {
-    border: 0;
-    width: calc(100% + 48px);
-    margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-color);
-  }
-  a:not([role='button']) {
-    text-decoration: none;
-    color: var(--link-text-color);
-    font-weight: var(--link-font-weight);
-  }
-
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
-  }
-`;
-
-// TODO: merge this input with the input from reference docs
-// the on in ref docs is dark, needs separate variables most likely
-const StyledInput = styled.input`
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  min-width: 200px;
-  outline-color: var(--color-primary-500);
-  width: 100%;
-
-  outline: none;
-  padding: var(--input-padding);
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  color: var(--text-color);
-  font-family: var(--input-font-family);
-  font-size: var(--input-font-size);
-  line-height: var(--input-line-height);
-
-  &::placeholder {
-    opacity: 0.6;
-    color: var(--text-color);
-  }
-
-  &:hover {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
-  }
-
-  &:focus {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
-  }
-
-  &:-webkit-autofill {
-    background-color: var(--input-background-color);
-  }
-`;

package/src/Catalog/CatalogCard.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
-import { Link } from '@portal/Link';
-import { Highlight } from '@theme/ui/Highlight';
-import { Tags } from '@theme/Catalog/Tags';
-
-export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
-  return (
-    <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
-      <StyledCard>
-        <CardTitle>
-          <Highlight>{item.title}</Highlight>
-        </CardTitle>
-        {/* <div>{item.image}</div> */}
-        <CardDescription>
-          <Highlight>{item.description ?? ''}</Highlight>
-        </CardDescription>
-        {item.tags ? <Tags tags={item.tags as string[]} /> : null}
-        <hr />
-        <CardFooter>View documentation</CardFooter>
-      </StyledCard>
-    </Link>
-  );
-}
-
-const StyledCard = styled.div`
-  min-height: 268px;
-  height: 100%;
-  box-shadow: var(--box-shadow);
-
-  display: flex;
-  flex-direction: column;
-
-  color: var(--text-color);
-  background-color: var(--thin-tile-background-color);
-  border-radius: 4px;
-
-  border: 1px solid var(--border-color);
-  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
-  transition: all 0.2s ease-in-out;
-
-  &:hover {
-    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
-    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
-    border: 1px solid var(--border-color);
-    transform: translateY(-2px);
-  }
-
-  border-radius: 8px;
-  width: 100%;
-  padding: 24px 24px 0;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-`;
-
-const CardTitle = styled.h4`
-  line-height: 26px;
-  letter-spacing: 0.8px;
-  font-size: 20px;
-  font-weight: var(--font-weight-bold);
-  margin: 0;
-  margin-bottom: 16px;
-`;
-
-const CardDescription = styled.div`
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--line-height);
-  letter-spacing: 0px;
-  font-size: 16px;
-  color: var(--text-color-secondary);
-  text-align: inherit;
-  font-weight: 400;
-`;
-
-const CardFooter = styled.div`
-  height: 46px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  flex-direction: column;
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
-
-  a:hover & {
-    text-decoration: var(--link-hover-text-decoration);
-    color: var(--link-hover-text-color);
-  }
-`;

package/src/CodeBlock/index.ts

@@ -1 +0,0 @@
-export * from '@theme/CodeBlock/CodeBlock';

package/src/ColorModeSwitcher/index.ts

@@ -1 +0,0 @@
-export * from '@theme/ColorModeSwitcher/ColorModeSwitcher';

package/src/CopyButton/CopyButton.tsx

@@ -1,32 +0,0 @@
-import React, { useState } from 'react';
-import copy from 'copy-to-clipboard';
-
-import { Button } from '@theme/Button';
-
-export interface CopyButtonProps {
-  text: string;
-  dataTestId?: string;
-}
-
-export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps): JSX.Element => {
-  const [title, setTitle] = useState('Copy');
-
-  async function write() {
-    await copy(text);
-
-    setTitle('Copied!');
-
-    setTimeout(() => setTitle('Copy'), 1500);
-  }
-
-  return (
-    <Button
-      color="secondary"
-      onClick={write}
-      data-cy={dataTestId}
-      data-component-name="CopyButton/CopyButton"
-    >
-      {title}
-    </Button>
-  );
-};

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,55 +0,0 @@
-import React, { memo } from 'react';
-
-import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip } from '@theme/Tooltip';
-import { useControl } from '@theme/hooks';
-import { ClipboardService } from '@theme/utils';
-import type { TooltipProps } from '@theme/Tooltip';
-
-export interface CopyButtonWrapperProps {
-  data: unknown;
-  children: (props: {
-    renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
-  }) => JSX.Element;
-  onCopyClick?: () => void;
-  dataTestId?: string;
-}
-
-function CopyButtonWrapperComponent({
-  data,
-  children,
-  onCopyClick,
-  dataTestId = 'copy-button',
-}: CopyButtonWrapperProps): JSX.Element {
-  const tooltip = useControl();
-
-  const showTooltip = (): void => {
-    tooltip.handleOpen();
-
-    setTimeout(() => {
-      tooltip.handleClose();
-    }, 1500);
-  };
-
-  const copy = (): void => {
-    const content = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
-    ClipboardService.copyCustom(content);
-    showTooltip();
-
-    onCopyClick?.();
-  };
-
-  const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {
-    return (
-      <Tooltip className="copy-button" tip="Copied" isOpen={tooltip.isOpened} placement={placement}>
-        <SamplesControlButton onClick={copy} data-cy={dataTestId}>
-          Copy
-        </SamplesControlButton>
-      </Tooltip>
-    );
-  };
-
-  return children({ renderCopyButton });
-}
-
-export const CopyButtonWrapper = memo<CopyButtonWrapperProps>(CopyButtonWrapperComponent);

package/src/CopyButton/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/CopyButton/CopyButtonWrapper';
-export * from '@theme/CopyButton/CopyButton';

package/src/EditPageButton/index.ts

@@ -1 +0,0 @@
-export * from '@theme/EditPageButton/EditPageButton';

package/src/Feedback/Comment.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-import { Button } from '@theme/Button/Button';
-import type { CommentProps } from '@theme/Feedback';
-
-export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Element => {
-  const { label, submitText } = settings || {};
-  const [text, setText] = React.useState('');
-  const [submitValue, setSubmitValue] = React.useState('');
-
-  const send = () => {
-    if (!text) return;
-    setSubmitValue(text);
-    onSubmit({ comment: text });
-  };
-  const handleTextAreaChange = (e: any) => {
-    setText(e.target.value);
-  };
-
-  if (submitValue) {
-    return (
-      <Wrapper>
-        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
-      </Wrapper>
-    );
-  }
-
-  return (
-    <Wrapper data-component-name="Feedback/Comment">
-      <Label>{label || 'Please share your feedback with us.'}</Label>
-      <TextArea rows={3} onChange={handleTextAreaChange} />
-      <ButtonsContainer>
-        <SendButton onClick={send}>Send</SendButton>
-        {onCancel && <CancelButton onClick={onCancel}>Cancel</CancelButton>}
-      </ButtonsContainer>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div`
-  font-family: var(--font-family-base);
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-const Label = styled.h3`
-  margin-right: 15px;
-`;
-
-const TextArea = styled.textarea`
-  font-family: var(--font-family-base);
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  color: black;
-  margin: 0 0 10px 0;
-  padding: 10px;
-`;
-
-const ButtonsContainer = styled.div`
-  display: flex;
-  justify-content: start;
-`;
-
-const SendButton = styled(Button).attrs(() => ({
-  color: 'primary',
-}))`
-  width: 100px;
-  margin-left: 0;
-  margin-right: 0;
-`;
-
-const CancelButton = styled(Button).attrs(() => ({
-  color: 'secondary',
-}))`
-  width: 100px;
-  margin-left: 0;
-  margin-right: 0;
-`;