@redocly/theme 0.17.0 → 0.17.1

package/src/components/JsonViewer/JsonViewer.tsx

@@ -1,10 +1,6 @@
 import React, { memo, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { ReactElement } from 'react';
-
-import { CopyButtonWrapper } from '@theme/components/CopyButton';
-import { SampleControls, SamplesControlButton } from '@theme/components/SamplesPanelControls';
 import { jsonToHTML } from '@theme/utils';
 import { useMount, useUnmount } from '@theme/hooks';
 import { CodeBlock } from '@theme/components/CodeBlock';
@@ -26,7 +22,7 @@ function JsonComponent({
   startLineNumber,
   onCopyClick,
 }: JsonProps): JSX.Element {
-  const node = useRef<HTMLDivElement | null>(null);
+  const node = useRef<HTMLPreElement | null>(null);
 
   useMount(() => {
     node?.current?.addEventListener('click', clickListener);
@@ -36,6 +32,13 @@ function JsonComponent({
     node?.current?.removeEventListener('click', clickListener);
   });
 
+  const setRef = (instance?: HTMLPreElement | null) => {
+    if (instance) node.current = instance;
+  };
+
+  const showFoldingButtons =
+    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+
   const expandAll = () => {
     const elements = node?.current?.getElementsByClassName('collapsible');
     for (const collapsed of Array.prototype.slice.call(elements)) {
@@ -76,40 +79,25 @@ function JsonComponent({
     collapseElement(event.target as HTMLElement);
   };
 
-  const renderInner = ({ renderCopyButton }: { renderCopyButton: () => ReactElement }) => {
-    const showFoldingButtons =
-      data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
-
-    return (
-      <JsonViewerWrap data-cy="json-viewer">
-        <SampleControls data-cy="buttons">
-          {renderCopyButton()}
-          {showFoldingButtons && (
-            <>
-              <SamplesControlButton onClick={expandAll} data-cy="expand-all">
-                Expand all
-              </SamplesControlButton>
-              <SamplesControlButton onClick={collapseAll} data-cy="collapse-all">
-                Collapse all
-              </SamplesControlButton>
-            </>
-          )}
-        </SampleControls>
-        <StyledCodeBlock
-          className={withLineNumbers ? `${className} line-numbers` : className}
-          ref={node}
-          dangerouslySetInnerHTML={{
-            __html: jsonToHTML(data, jsonSampleExpandLevel, startLineNumber),
-          }}
-        />
-      </JsonViewerWrap>
-    );
-  };
-
   return (
-    <CopyButtonWrapper data-cy="copy-button" data={data} onCopyClick={onCopyClick}>
-      {renderInner}
-    </CopyButtonWrapper>
+    <JsonViewerWrap
+      data-cy="json-viewer"
+      data-component-name="JsonViewer/JsonViewer"
+      className={className}
+    >
+      <CodeBlock
+        header={{
+          controls: {
+            copy: { data, onClick: onCopyClick, handleOutside: true },
+            expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+            collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+          },
+        }}
+        codeBlockRef={setRef}
+        withLineNumbers={withLineNumbers}
+        highlightedHtml={jsonToHTML(data, jsonSampleExpandLevel, startLineNumber)}
+      />
+    </JsonViewerWrap>
   );
 }
 
@@ -125,113 +113,109 @@ export const JsonViewer = styled(Json).attrs(() => ({
     border: none;
   }
 
-  contain: content;
-  overflow-x: auto;
-  position: relative;
-  padding: 10px;
-  border-radius: var(--border-radius);
-  background-color: var(--panel-samples-code-block-background-color);
-  color: var(--text-color-inverse);
-  font-size: var(--code-font-size);
-  font-family: var(--code-font-family);
-  white-space: var(--code-wrap, pre);
-
-  &.line-numbers {
-    padding: 20px 20px 20px 3em;
-
-    *[data-line]:not(.collapsed *[data-line]) {
-      &:before {
-        content: attr(data-line);
-        position: absolute;
-        left: 0;
-        min-width: 2em;
-        text-align: right;
-        pointer-events: none;
-        user-select: none;
-        padding: 0 0.5em;
-        font-size: 13px;
+  pre {
+    contain: content;
+    overflow-x: auto;
+    position: relative;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+
+    &.line-numbers {
+      padding: 20px 20px 20px 3em;
+
+      *[data-line]:not(.collapsed *[data-line]) {
+        &:before {
+          content: attr(data-line);
+          position: absolute;
+          left: 0;
+          min-width: 2em;
+          text-align: right;
+          pointer-events: none;
+          user-select: none;
+          padding: 0 0.5em;
+          font-size: 13px;
+        }
       }
     }
-  }
 
-  .callback-function {
-    color: gray;
-  }
+    .callback-function {
+      color: gray;
+    }
 
-  .ellipsis:after {
-    content: ' … ';
-  }
+    .ellipsis:after {
+      content: ' … ';
+    }
 
-  .collapsible {
-    padding-left: 2ch;
-    display: inline-block;
-  }
+    .collapsible {
+      padding-left: 2ch;
+      display: inline-block;
+    }
 
-  .hoverable {
-    padding: 1px 2px;
-    display: inline-block;
-  }
+    .hoverable {
+      padding: 1px 2px;
+      display: inline-block;
+    }
 
-  .collapsed {
-    white-space: nowrap;
+    .collapsed {
+      white-space: nowrap;
 
-    & > .collapser:after {
-      content: '+';
+      & > .collapser:after {
+        content: '+';
+      }
     }
-  }
-
-  .hovered {
-    background-color: rgba(235, 238, 249, 1);
-  }
 
-  .collapser {
-    --size: 15px;
-    --margin-right: 3px;
-
-    display: inline-block;
-    background-color: transparent;
-    border: 0;
-    padding: 1px;
-    color: #fff;
-    width: var(--size);
-    height: var(--size);
-    margin-left: calc((var(--size) + var(--margin-right)) * -1);
-    margin-right: var(--margin-right);
-    cursor: pointer;
-    user-select: none;
-    -webkit-user-select: none;
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
-
-    &:after {
-      content: '-';
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
+    .hovered {
+      background-color: rgba(235, 238, 249, 1);
     }
 
-    &:focus {
-      outline: #fff dotted 1px;
+    .collapser {
+      --size: 15px;
+      --margin-right: 3px;
+
+      display: inline-block;
+      background-color: transparent;
+      border: 0;
+      padding: 1px;
+      color: #fff;
+      width: var(--size);
+      height: var(--size);
+      margin-left: calc((var(--size) + var(--margin-right)) * -1);
+      margin-right: var(--margin-right);
+      cursor: pointer;
+      user-select: none;
+      -webkit-user-select: none;
+      font-family: var(--code-font-family);
+      font-size: var(--code-font-size);
+
+      &:after {
+        content: '-';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 100%;
+      }
+
+      &:focus {
+        outline: #fff dotted 1px;
+      }
     }
-  }
 
-  .selected {
-    outline-width: 1px;
-    outline-style: dotted;
-  }
+    .selected {
+      outline-width: 1px;
+      outline-style: dotted;
+    }
 
-  .collapsed > .collapsible {
-    display: none;
-  }
+    .collapsed > .collapsible {
+      display: none;
+    }
 
-  .ellipsis {
-    display: none;
-  }
+    .ellipsis {
+      display: none;
+    }
 
-  .collapsed > .ellipsis {
-    display: inline;
+    .collapsed > .ellipsis {
+      display: inline;
+    }
   }
 `;
 
@@ -239,18 +223,4 @@ export const JsonViewerWrap = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
-
-  &:hover > ${SampleControls} {
-    opacity: 1;
-  }
-`;
-
-export const StyledCodeBlock = styled(CodeBlock)`
-  flex: 1;
-
-  code {
-    font-family: var(--code-font-family);
-    font-size: 14px;
-    line-height: 18px;
-  }
 `;

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -84,6 +84,29 @@ export const baseTable = css`
   }
 `;
 
+export const linksCss = css`
+  a:not([role='button']) {
+    text-decoration: var(--link-decoration);
+    color: var(--link-text-color);
+    font-weight: var(--link-font-weight);
+
+    &:visited {
+      color: var(--link-visited-text-color);
+      text-decoration: var(--link-visited-decoration);
+    }
+
+    &:hover {
+      text-decoration: var(--link-hover-decoration);
+      color: var(--link-hover-text-color);
+    }
+
+    &:focus {
+      color: var(--link-active-text-color);
+      text-decoration: var(--link-active-decoration);
+    }
+  }
+`;
+
 // TODO: Can users specify another className or we should hardcode it?
 export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation {
   return css`
@@ -117,10 +140,12 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
   `;
 }
 
-export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ className }) => ({
+export const MarkdownWrapper = styled.main.attrs<{
+  className?: string;
+}>(({ className }) => ({
   'data-component-name': 'Markdown/MarkdownWrapper',
   className,
-}))`
+}))<{ compact?: boolean; inline?: boolean }>`
   font-weight: var(--font-weight-regular);
   padding: 0;
 
@@ -129,26 +154,26 @@ export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ clas
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
 
-  a:not([role='button']) {
-    text-decoration: var(--link-decoration);
-    color: var(--link-text-color);
-    font-weight: var(--link-font-weight);
-
-    &:visited {
-      color: var(--link-visited-text-color);
-      text-decoration: var(--link-visited-decoration);
-    }
+  ${({ compact }) =>
+    compact &&
+    css`
+      p:first-child {
+        margin-top: 0;
+      }
+      p:last-child {
+        margin-bottom: 0;
+      }
+    `}
 
-    &:hover {
-      text-decoration: var(--link-hover-decoration);
-      color: var(--link-hover-text-color);
-    }
+  ${({ inline }) =>
+    inline &&
+    css`
+      p {
+        display: inline-block;
+      }
+    `}
 
-    &:focus {
-      color: var(--link-active-text-color);
-      text-decoration: var(--link-active-decoration);
-    }
-  }
+  ${linksCss}
 
   img {
     max-width: 100%;
@@ -200,40 +225,6 @@ export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ clas
 
   ${baseTable};
 
-  .code-snippets-tabs {
-    .snippets-tabs-headers {
-      font-size: 0.9em;
-
-      font-family: var(--heading-font-family);
-
-      .tab-header {
-        text-align: center;
-        padding: 0.2em 0.5em;
-        display: inline-block;
-        cursor: pointer;
-        color: var(--text-color-secondary);
-
-        &.active {
-          color: var(--heading-text-color);
-          font-weight: var(--font-weight-bold);
-        }
-      }
-    }
-
-    .tab-content {
-      margin-top: 4px;
-      display: none;
-
-      pre {
-        margin-top: 0;
-      }
-
-      &.active {
-        display: block;
-      }
-    }
-  }
-
   p {
     margin: var(--md-paragraph-margin-vertical) var(--md-paragraph-margin-horizontal);
 
@@ -318,6 +309,26 @@ export const MarkdownWrapper = styled.main.attrs<{ className?: string }>(({ clas
     font-family: var(--code-font-family);
   }
 
+  pre {
+    white-space: var(--code-wrap, pre);
+    background-color: var(--code-block-background-color);
+    font-family: var(--code-block-font-family);
+    color: var(--code-block-text-color);
+    padding: calc(var(--spacing-unit) * 2);
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: var(--code-block-border-radius);
+    border: 1px solid var(--code-block-border-color);
+
+    code {
+      background-color: transparent;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      border: none;
+    }
+  }
+
   blockquote {
     margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
     padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);

package/src/components/Menu/MobileMenu.tsx

@@ -10,7 +10,7 @@ import type { ItemState } from '@portal/Sidebar/types';
 import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
 import { getPathnameForLocale } from '@portal/utils';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
-import { ExpandIcon } from '@theme/icons';
+import { ArrowIcon } from '@theme/icons';
 
 interface MobileMenuProps {
   navItems: ResolvedNavItem[];
@@ -88,7 +88,7 @@ export function MobileMenu({
                 data-component-name="Menu/ControlButton"
                 onClick={() => setMenuLevel(MenuLevel.NAVBAR)}
               >
-                <ExpandIcon direction="left" />
+                <ArrowIcon direction="left" weight="thin" />
                 <ControlButtonLabel paddingDirection="left">
                   {translate(translationKeys.mainMenu, 'Main Menu')}
                 </ControlButtonLabel>
@@ -102,7 +102,7 @@ export function MobileMenu({
                 <ControlButtonLabel paddingDirection="right">
                   {translate(translationKeys.previous, 'Previous')}
                 </ControlButtonLabel>
-                <ExpandIcon direction="right" />
+                <ArrowIcon direction="right" weight="thin" />
               </ControlButton>
             )}
           </ButtonsSection>

package/src/components/Menu/MobileMenuGroup.tsx

@@ -6,7 +6,7 @@ import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { ItemState } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
-import { ExpandIcon } from '@theme/icons';
+import { ArrowIcon } from '@theme/icons';
 
 interface MenuGroupProps {
   item: ItemState;
@@ -29,7 +29,9 @@ export function MobileMenuGroup({
           <LabelContainer>
             <Label>{translate(item.labelTranslationKey, item.label)}</Label>
           </LabelContainer>
-          {!!item.items.length && <ExpandIcon direction={isExpanded ? 'down' : 'right'} />}
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
         </MenuGroupLabel>
       </MenuLinkItem>
       <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>

package/src/components/Panel/PanelHeader.ts

@@ -13,7 +13,6 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   className,
 }))<PanelHeaderProps>`
   position: relative;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;

package/src/components/Tooltip/Tooltip.tsx

@@ -178,6 +178,8 @@ const TooltipBody = styled.span<
 
   font-size: 13px;
 
+  z-index: var(--z-index-overlay);
+
   &::after {
     position: absolute;
 

package/src/components/index.ts

@@ -13,9 +13,7 @@ export * from './CodeBlock';
 export * from './OpenApiDocs/hooks/OpenApiFooter';
 export * from './OpenApiDocs/hooks/OpenApiHeader';
 export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
-export * from './SamplesPanelControls';
 export * from './Tooltip';
-export * from './SourceCode';
 export * from './Panel';
 export * from './Feedback';
 export * from './OperationBadge';
@@ -28,7 +26,6 @@ export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
 export * from './Tags';
-export * from './CodeSample';
 export * from './Tabs';
 export * from './Menu';
 export * from './Separator';

package/src/config.ts

@@ -434,28 +434,39 @@ export const themeConfigSchema = {
     codeSnippet: {
       type: 'object',
       properties: {
+        controlsStyle: { type: 'string', default: 'icon' },
         copy: {
           type: 'object',
           properties: {
-            buttonText: { type: 'string', default: 'Copy' },
-            tooltipText: { type: 'string', default: 'Copy to clipboard' },
-            toasterText: { type: 'string', default: 'Copied!' },
-            toasterDuration: { type: 'number', default: 1500 },
             ...hideConfigSchema.properties,
           },
           additionalProperties: false,
-          default: {},
+          default: { hide: false },
         },
         report: {
           type: 'object',
           properties: {
-            tooltipText: { type: 'string', default: 'Report a problem' },
-            label: { type: 'string' },
             ...hideConfigSchema.properties,
           },
           additionalProperties: false,
           default: { hide: true },
         },
+        expand: {
+          type: 'object',
+          properties: {
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: { hide: false },
+        },
+        collapse: {
+          type: 'object',
+          properties: {
+            ...hideConfigSchema.properties,
+          },
+          additionalProperties: false,
+          default: { hide: false },
+        },
       },
       additionalProperties: false,
       default: {},