@redocly/theme 0.2.2 → 0.4.0

package/hooks/useActiveHeading.js

@@ -34,14 +34,14 @@ function useActiveHeading(contentElement, displayedHeaders) {
         }
         return visibleHeadings;
     };
-    var getIndexFromId = function (id) {
+    var getIndexFromId = (0, react_1.useCallback)(function (id) {
         return headingElements.findIndex(function (item) { return item.id === id; });
-    };
+    }, [headingElements]);
     var findHeaders = function (allContent) {
         var allHeaders = allContent.querySelectorAll('.heading-anchor');
         return Array.from(allHeaders);
     };
-    var intersectionCallback = function (headings) {
+    var intersectionCallback = (0, react_1.useCallback)(function (headings) {
         var _a;
         headingElementsRef.current = headings.reduce(function (map, headingElement) {
             map[headingElement.target.id] = headingElement;
@@ -66,7 +66,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
         });
         setHeading(visibleHeadings[0].target.id);
-    };
+    }, [getIndexFromId, headingElements]);
     (0, react_1.useEffect)(function () {
         if (!contentElement) {
             return;
@@ -76,6 +76,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             setHeadingElements(findHeaders(contentElement));
         });
         return function () { return unlisten(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [contentElement]);
     (0, react_1.useEffect)(function () {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
@@ -93,7 +94,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
             }
         });
         return function () { return observer.disconnect(); };
-    }, [headingElements, displayedHeaders]);
+    }, [headingElements, displayedHeaders, intersectionCallback]);
     return heading;
 }
 exports.useActiveHeading = useActiveHeading;

package/icons/ArrowIcon/ArrowIcon.js

@@ -29,5 +29,5 @@ var Icon = function (_a) {
         react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 7 5", className: className },
             react_1.default.createElement("path", { d: "M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" }))));
 };
-exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-chevron-size);\n  height: var(--sidebar-chevron-size);\n  fill: var(--sidebar-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
+exports.ArrowIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"], ["\n  width: var(--sidebar-group-item-chevron-size);\n  height: var(--sidebar-group-item-chevron-size);\n  fill: var(--sidebar-group-item-chevron-color);\n  transform: rotate(", "deg);\n\n  vertical-align: middle;\n"])), directionToTransform);
 var templateObject_1;

package/icons/ColorModeIcon/ColorModeIcon.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ColorModeIconProps {
+    mode?: 'dark' | 'light' | string;
+    className?: string;
+}
+declare function Icon({ mode, className }: ColorModeIconProps): JSX.Element;
+export declare const ColorModeIcon: import("styled-components").StyledComponent<typeof Icon, any, {
+    'data-component-name': string;
+}, "data-component-name">;
+export {};

package/icons/ColorModeIcon/ColorModeIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Icon(_a) {
+    var mode = _a.mode, className = _a.className;
+    switch (mode) {
+        case 'dark':
+            return (react_1.default.createElement("svg", { className: className, "data-testid": "dark", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" })));
+        case 'light':
+            return (react_1.default.createElement("svg", { "data-testid": "light", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" })));
+        default:
+            return (react_1.default.createElement("svg", { "data-testid": "custom", className: className, viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+                react_1.default.createElement("path", { d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" })));
+    }
+}
+exports.ColorModeIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({
+    'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: var(--navbar-item-font-size);\n  box-sizing: border-box;\n  fill: var(--navbar-text-color);\n"], ["\n  width: var(--navbar-item-font-size);\n  box-sizing: border-box;\n  fill: var(--navbar-text-color);\n"])));
+var templateObject_1;

package/icons/ColorModeIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorModeIcon } from '../../icons/ColorModeIcon/ColorModeIcon';
+export type { ColorModeIconProps } from '../../icons/ColorModeIcon/ColorModeIcon';

package/icons/ColorModeIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeIcon = void 0;
+var ColorModeIcon_1 = require("../../icons/ColorModeIcon/ColorModeIcon");
+Object.defineProperty(exports, "ColorModeIcon", { enumerable: true, get: function () { return ColorModeIcon_1.ColorModeIcon; } });

package/icons/index.d.ts

@@ -1,3 +1,4 @@
 export * from '../icons/ShelfIcon';
 export * from '../icons/AlertIcon';
 export * from '../icons/ArrowIcon';
+export * from '../icons/ColorModeIcon';

package/icons/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../icons/ShelfIcon"), exports);
 __exportStar(require("../icons/AlertIcon"), exports);
 __exportStar(require("../icons/ArrowIcon"), exports);
+__exportStar(require("../icons/ColorModeIcon"), exports);

package/index.d.ts

@@ -15,3 +15,4 @@ export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
+export * from './ColorModeSwitcher';

package/index.js

@@ -31,3 +31,4 @@ __exportStar(require("./globalStyle"), exports);
 __exportStar(require("./OperationBadge"), exports);
 __exportStar(require("./TableOfContent"), exports);
 __exportStar(require("./Profile"), exports);
+__exportStar(require("./ColorModeSwitcher"), exports);

package/mocks/hooks/index.js

@@ -8,6 +8,10 @@ function useThemeSettings(_) {
             nextPageLink: { label: 'next page theme settings label' },
             previousPageLink: { label: 'prev page theme settings label' },
         },
+        colorMode: {
+            modes: ['light', 'dark'],
+            default: 'light',
+        },
     };
 }
 exports.useThemeSettings = useThemeSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -57,7 +57,7 @@ export const baseButtonStyles = css`
   box-shadow: var(--button-box-shadow);
 
   &:hover {
-    box-shadow: var(--button-active-box-shadow);
+    box-shadow: var(--button-hover-box-shadow);
   }
 
   &:active {
@@ -80,15 +80,21 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
     variant === 'outlined'
       ? css`
           color: var(--button-background-color);
-          border: 2px solid var(--button-background-color);
+          border: 2px solid var(--button-border-color);
           background-color: transparent;
           &:hover {
-            border: 2px solid var(--button-active-background-color);
-            background-color: transparent;
+            color: var(--button-hover-background-color);
+            border: 2px solid var(--button-hover-border-color);
           }
 
           &:active {
-            border: 2px solid var(--button-outlined-active-border-color);
+            color: var(--button-active-background-color);
+            border: 2px solid var(--button-active-border-color);
+          }
+
+          &:disabled {
+            color: var(--button-disabled-background-color);
+            background-color: transparent;
           }
         `
       : css`
@@ -125,7 +131,9 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
       &,
       &:hover {
         cursor: default;
-        color: #999;
+        color: var(--button-disabled-color);
+        background-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-background-color);
         pointer-events: none;
       }
     `}

package/src/CodeBlock/CodeBlock.ts

@@ -12,8 +12,6 @@ export const CodeBlock = styled.div.attrs(() => ({
   */
   code[class*='language-'],
   pre[class*='language-'] {
-    /* color: white;
-    background: none; */
     text-shadow: 0 -0.1em 0.2em black;
     text-align: left;
     white-space: pre;
@@ -62,13 +60,13 @@ export const CodeBlock = styled.div.attrs(() => ({
   .token.inserted {
     & + a,
     & + a:visited {
-      color: #4ed2ba;
+      color: var(--code-block-tokens-link-color);
       text-decoration: underline;
     }
   }
 
   .token.property.string {
-    color: #9efaa7;
+    color: var(--code-block-tokens-property-string-color);
   }
 
   .token.important,

package/src/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
+import { useMount } from '@theme/hooks';
+
+export function ColorModeSwitcher(): JSX.Element | null {
+  const themeSettings = useThemeSettings(DEFAULT_THEME_NAME);
+  const colorMode = themeSettings.colorMode;
+  const [activeColorMode, setActiveColorMode] = useState('');
+
+  useMount(() => {
+    setActiveColorMode(document.documentElement.className || colorMode?.default);
+  });
+
+  if (!colorMode?.modes || colorMode?.hide) {
+    return null;
+  }
+
+  const handelChangeColorMode = () => {
+    const activeIndex = colorMode.modes.indexOf(activeColorMode);
+    const mode =
+      activeIndex < colorMode.modes.length - 1
+        ? colorMode.modes[activeIndex + 1]
+        : colorMode.modes[0];
+    setActiveColorMode(mode);
+    localStorage.setItem('colorSchema', mode);
+    document.documentElement.className = mode;
+  };
+
+  return (
+    <Wrapper
+      data-component-name="ColorModeSwitcher/ColorModeSwitcher"
+      onClick={handelChangeColorMode}
+    >
+      <ColorModeIcon mode={activeColorMode} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin-left: var(--navbar-item-padding-horizontal);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;

package/src/ColorModeSwitcher/index.ts

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

package/src/CopyButton/CopyButtonWrapper.tsx

@@ -1,13 +1,15 @@
 import React, { memo } from 'react';
 
 import { SamplesControlButton } from '@theme/SamplesPanelControls';
-import { Tooltip } from '@theme/Tooltip';
+import { Tooltip, TooltipProps } from '@theme/Tooltip';
 import { useControl } from '@theme/hooks';
 import { ClipboardService } from '@theme/utils';
 
 export interface CopyButtonWrapperProps {
   data: unknown;
-  children: (props: { renderCopyButton: () => JSX.Element }) => JSX.Element;
+  children: (props: {
+    renderCopyButton: (placement?: TooltipProps['placement']) => JSX.Element;
+  }) => JSX.Element;
   dataTestId?: string;
 }
 
@@ -32,12 +34,13 @@ function CopyButtonWrapperComponent({
     showTooltip();
   };
 
-  const renderCopyButton = (): JSX.Element => {
+  const renderCopyButton = (placement: TooltipProps['placement'] = 'top'): JSX.Element => {
     return (
       <Tooltip
         className="copy-button"
         tip={ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser'}
         isOpen={tooltip.isOpened}
+        placement={placement}
       >
         <SamplesControlButton onClick={copy} data-cy={dataTestId}>
           Copy

package/src/Footer/Footer.tsx

@@ -29,11 +29,12 @@ export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.E
 }
 
 const FooterContainer = styled.footer`
-  font-size: 1rem;
+  font-size: var(--footer-font-size);
   flex-shrink: 0;
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
-  font-family: var(--font-family-base);
+  font-family: var(--footer-font-family);
+  font-weight: var(--footer-font-weight);
   a,
   a:hover {
     color: var(--footer-text-color);

package/src/Footer/FooterColumn.tsx

@@ -34,10 +34,11 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
 
 const FooterColumnTitle = styled.p`
   display: inline-block;
-  font-weight: var(--font-weight-regular);
-  font-size: 24px;
-  margin-bottom: 1.5em;
-  font-family: var(--h-font-family);
+  font-weight: var(--footer-title-font-weight);
+  font-size: var(--footer-title-font-size);
+  margin-bottom: var(--footer-title-margin-vertical);
+  font-family: var(--footer-font-family);
+  color: var(--footer-title-text-color);
 `;
 
 const FooterSeparator = styled.div`
@@ -45,21 +46,24 @@ const FooterSeparator = styled.div`
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
-  font-family: var(--h-font-family);
+  font-family: var(--footer-font-family);
 `;
 
 const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin: 0 20px;
-  width: 20%;
+  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
+  width: var(--footer-column-width);
   word-break: break-word;
 `;
 
 const FooterLink = styled(Link)`
   font-weight: var(--font-weight-bold);
-  padding-bottom: 0.75em;
-  color: var(--footer-text-color);
+  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);
+  color: var(--footer-link-text-color);
   text-decoration: none;
+  &:hover {
+    color: var(--footer-link-hover-color);
+  }
 `;

package/src/Footer/FooterColumns.tsx

@@ -26,11 +26,11 @@ export function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | nu
 }
 
 export const FooterColumnsContainer = styled.div`
-  padding: 3em 20px 1em 20px;
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
   display: flex;
   flex-direction: column;
   justify-content: center;
-  max-width: 1200px;
+  max-width: var(--footer-container-max-width);
   margin: 0 auto;
 
   ${({ theme }) => theme.mediaQueries.small} {

package/src/Footer/FooterCopyright.tsx

@@ -23,6 +23,6 @@ const Wrapper = styled.section`
   color: var(--footer-text-color);
   text-align: center;
   span {
-    max-width: 1200px;
+    max-width: var(--footer-container-max-width);
   }
 `;

package/src/JsonViewer/JsonViewer.tsx

@@ -115,8 +115,8 @@ export const JsonViewer = styled(Json).attrs(() => ({
   'data-component-name': 'JsonViewer/JsonViewer',
 }))<JsonProps>`
   .redoc-json code {
-    background-color: var(--samples-panel-controls-background-color);
-    color: var(--color-content-inverse);
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-color-inverse);
     padding: inherit;
     border: none;
   }
@@ -125,9 +125,9 @@ export const JsonViewer = styled(Json).attrs(() => ({
   overflow-x: auto;
   position: relative;
   padding: 10px;
-  border-radius: var(--global-border-radius);
-  background-color: var(--samples-panel-controls-background-color);
-  color: var(--color-content-inverse);
+  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);

package/src/Markdown/Admonition.tsx

@@ -39,6 +39,7 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   ${({ type }) => `
     background-color: var(--admonition-${type}-background-color);
     color: var(--admonition-${type}-text-color);
+    border: var(--admonition-${type}-border);
   `}
 `;
 
@@ -47,13 +48,13 @@ const Heading = styled.h5<AdmonitionTypeProps>`
   margin: 0 0 10px;
 
   letter-spacing: var(--admonition-heading-letter-spacing);
-  color: ${({ type }) => `var(--admonition-${type}-text-color)`};
+  color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 
   && {
     font-size: var(--admonition-heading-font-size);
     font-weight: var(--admonition-heading-font-weight);
     line-height: var(--admonition-line-height);
-    transform: var(--admonition-heading-transform);
+    text-transform: var(--admonition-heading-transform);
   }
 `;
 

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -40,17 +40,20 @@ const CodeSampleButtonContainer = styled.div`
 `;
 
 const CopyCodeButton = styled.div`
-  padding: 0 5px;
-  border-radius: 4px;
-  display: none;
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   &:hover {
     cursor: pointer;
   }
 `;
 
 const DoneIndicator = styled.div`
-  padding: 0 5px;
-  border-radius: 4px;
+  padding: var(--code-block-controls-padding);
+  border-radius: var(--code-block-controls-border-radius);
+  font-size: var(--code-block-controls-font-size);
+  font-family: var(--code-block-controls-font-family);
   cursor: default;
 `;
 
@@ -111,32 +114,30 @@ const Wrapper = styled.div`
 
   ${CopyCodeButton},
   ${DoneIndicator} {
-    color: rgba(255, 255, 255, 0.15);
+    color: var(--code-block-controls-text-color);
+    background-color: var(--code-block-controls-background-color);
+    opacity: var(--code-block-controls-opacity);
   }
   ${CopyCodeButton}:hover {
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.15);
+    color: var(--code-block-controls-hover-text-color);
+    background-color: var(--code-block-controls-hover-background-color);
+    opacity: var(--code-block-controls-active-opacity);
   }
 
-  &:hover {
-    ${CodeSampleButtonContainer} ${CopyCodeButton} {
-      display: block;
-    }
-  }
   pre {
     white-space: var(--code-wrap);
     color: white;
     padding: 12px 14px 15px 14px;
     overflow-x: auto;
     line-height: normal;
-    border-radius: 4px;
+    border-radius: var(--code-block-border-radius);
     font-family: var(--code-font-family);
-    background-color: var(--code-block-preformatted-background-color);
+    background-color: var(--code-block-background-color);
     code {
       background-color: transparent;
       border: 0;
       padding: 0;
-      color: white;
+      color: var(--code-block-text-color);
       &:before,
       &:after {
         content: none;
@@ -148,7 +149,7 @@ const Wrapper = styled.div`
     margin: 0.5em 0;
     overflow: auto;
     border: 0;
-    border-radius: var(--global-border-radius);
+    border-radius: var(--border-radius);
   }
   code[class='language-text'] {
     line-height: 1.2em;

package/src/Markdown/{ContentWrapper.tsx → ContainerWrapper.tsx}

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-export const ContentWrapper = styled.section.attrs(() => ({
-  'data-component-name': 'Markdown/ContentWrapper',
+export const ContainerWrapper = styled.section.attrs(() => ({
+  'data-component-name': 'Markdown/ContainerWrapper',
 }))<{ withToc: boolean }>`
-  max-width: var(--content-wrapper-max-width);
+  max-width: var(--md-container-max-width);
   width: 90%;
   margin: 0 auto;
 
-  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);
+  padding: var(--md-container-padding-vertical) var(--md-container-padding-horizontal);
 
   & > article:first-child > h1:first-child {
     // disable margin top for h1 on the title heading if there is no "Last updated at" block

package/src/Markdown/Details.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type DetailsProps = {
+  summary: string;
+};
+
+export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
+  return (
+    <StyledDetails>
+      <summary>{summary}</summary>
+      <StyledDetailsContent>{children}</StyledDetailsContent>
+    </StyledDetails>
+  );
+}
+
+const StyledDetails = styled.details``;
+
+const StyledDetailsContent = styled.div``;

package/src/Markdown/MarkdownLayout.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
-import { ContentWrapper } from '@theme/Markdown/ContentWrapper';
+import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
+  showPrevButton?: boolean;
+  showNextButton?: boolean;
 };
 
 export function MarkdownLayout({
   tableOfContent,
   markdownWrapper,
+  showPrevButton,
+  showNextButton,
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
-      <ContentWrapper withToc={true}>
+      <ContainerWrapper withToc={true}>
         {markdownWrapper}
-        <PageNavigation />
-      </ContentWrapper>
+        <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
+      </ContainerWrapper>
       {tableOfContent}
     </PageWrapper>
   );