@redocly/theme 0.4.15 → 0.5.0

package/lib/Markdown/MarkdownWrapper.js

@@ -0,0 +1,391 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../utils");
+exports.baseTable = (0, styled_components_1.css) `
+  table.md {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: keep-all;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin-top: var(--md-table-margin-vertical);
+    margin-bottom: var(--md-table-margin-vertical);
+    font-size: var(--md-table-font-size);
+
+    th,
+    td {
+      padding: var(--md-table-cell-padding);
+      border-bottom: 1px solid var(--md-table-border-color);
+      color: var(--md-table-cell-text-color);
+    }
+
+    tr {
+      background-color: var(--md-table-stripe-background-color);
+    }
+
+    th {
+      text-align: left;
+      font-weight: var(--md-table-head-font-weight);
+      color: var(--md-table-head-text-color);
+      background-color: var(--md-table-head-background-color);
+    }
+
+    tr th:first-child,
+    tr td:first-child {
+      border-left: 1px solid var(--md-table-border-color);
+    }
+
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--md-table-border-color);
+    }
+
+    thead td,
+    thead th {
+      border-top: 1px solid var(--md-table-border-color);
+    }
+
+    /* top-left border */
+
+    thead tr:first-child th:first-child {
+      border-top-left-radius: var(--md-table-border-radius);
+    }
+
+    /* top-right border */
+
+    thead tr:first-child th:last-child {
+      border-top-right-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-left border */
+
+    tbody tr:last-child td:first-child {
+      border-bottom-left-radius: var(--md-table-border-radius);
+    }
+
+    /* bottom-right border */
+
+    tbody tr:last-child td:last-child {
+      border-bottom-right-radius: var(--md-table-border-radius);
+    }
+  }
+`;
+// TODO: Can users specify another className or we should hardcode it?
+function headingAnchor(className = 'anchor') {
+    return (0, styled_components_1.css) `
+    .${className}.before {
+      position: absolute;
+      left: 0;
+      transform: translateX(-100%);
+      padding-right: var(--heading-anchor-offset-right);
+    }
+
+    .${className}.after {
+      display: inline-block;
+      padding-left: 4px;
+    }
+
+    svg,
+    .${className} svg {
+      fill: var(--heading-anchor-color);
+      visibility: hidden;
+
+      background-image: var(--heading-anchor-icon);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    :hover .${className} svg,
+    .${className}:focus svg {
+      visibility: visible;
+    }
+  `;
+}
+exports.headingAnchor = headingAnchor;
+exports.MarkdownWrapper = styled_components_1.default.main.attrs(() => ({
+    'data-component-name': 'Markdown/MarkdownWrapper',
+})) `
+  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);
+
+  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);
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  h1.md,
+  h2.md,
+  h3.md,
+  h4.md,
+  h5.md,
+  h6.md {
+    font-weight: var(--heading-font-weight);
+    font-family: var(--heading-font-family);
+    position: relative;
+
+    scroll-margin-top: 60px;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  hr {
+    border-top: 1px solid var(--md-hr-border-color);
+    background-color: var(--md-hr-background-color);
+    height: var(--md-hr-height);
+    margin: var(--md-hr-margin-vertical) 0;
+  }
+
+  details {
+    margin: 1.125em 0;
+
+    summary {
+      color: var(--text-color);
+      font-weight: var(--font-weight-regular);
+      outline: 0;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    > :not(summary):first-of-type {
+      margin-top: 1.25em;
+    }
+
+    > *:last-child {
+      margin-bottom: 1.25em;
+    }
+  }
+
+  ${exports.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);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1.md {
+    ${(0, utils_1.typography)('h1', 'h')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+    ${headingAnchor()};
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  h2.md {
+    ${(0, utils_1.typography)('h2', 'h')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h3.md {
+    ${(0, utils_1.typography)('h3', 'h')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h4.md {
+    ${(0, utils_1.typography)('h4', 'h')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h5.md {
+    ${(0, utils_1.typography)('h5', 'h')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h6.md {
+    ${(0, utils_1.typography)('h6', 'h')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+    ${headingAnchor()};
+  }
+
+  h1.md code {
+    font-size: var(--h1-font-size);
+  }
+
+  h2.md code {
+    font-size: var(--h2-font-size);
+  }
+
+  h3.md code {
+    font-size: var(--h3-font-size);
+  }
+
+  h4.md code {
+    font-size: var(--h4-font-size);
+  }
+
+  h5.md code {
+    font-size: var(--h5-font-size);
+  }
+
+  h6.md code {
+    font-size: var(--h6-font-size);
+  }
+
+  code {
+    color: var(--inline-code-text-color);
+    background-color: var(--inline-code-background-color);
+
+    border-radius: var(--inline-code-border-radius);
+    border: 1px solid var(--inline-code-border-color);
+    padding: 0.1em 0.25em 0.2em;
+    font-weight: var(--code-font-weight);
+    word-break: break-word;
+    font-size: var(--inline-code-font-size);
+    font-family: var(--code-font-family);
+  }
+
+  blockquote {
+    margin: var(--md-blockquote-margin-vertical) var(--md-blockquote-margin-horizontal);
+    padding: var(--md-blockquote-padding-vertical) var(--md-blockquote-padding-horizontal);
+    border-left: var(--md-blockquote-border-left);
+    background-color: var(--md-blockquote-background-color);
+    color: var(--md-blockquote-text-color);
+    box-shadow: var(--md-blockquote-box-shadow);
+
+    & > p:first-child {
+      margin-top: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+    margin: 0 auto;
+
+    &:only-child {
+      display: block;
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: var(--md-list-left-padding);
+    margin: 0 0 var(--md-list-margin);
+
+    ul,
+    ol {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+
+  li {
+    margin: var(--md-list-item-margin);
+    list-style: var(--md-list-item-style);
+  }
+
+  ol > li {
+    list-style: var(--md-numbered-list-item-style);
+  }
+
+  ol > li:before {
+    content: counter(list-item);
+    display: var(--md-numbered-list-number-display);
+    color: var(--md-numbered-list-number-text-color);
+    font-size: var(--md-numbered-list-number-font-size);
+    font-family: var(--md-numbered-list-number-font-family);
+    font-weight: var(--md-numbered-list-number-font-weight);
+    background-color: var(--md-numbered-list-number-background-color);
+    border-radius: var(--md-numbered-list-number-border-radius);
+    border: var(--md-numbered-list-number-border);
+    margin-right: var(--md-numbered-list-number-margin-right);
+    padding: var(--md-numbered-list-number-padding);
+  }
+`;
+//# sourceMappingURL=MarkdownWrapper.js.map

package/lib/Markdown/Mermaid.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mermaid = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Mermaid({ diagramHtml }) {
+    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
+}
+exports.Mermaid = Mermaid;
+const Wrapper = styled_components_1.default.div `
+  .mermaid > svg {
+    font-size: 14px !important;
+    max-width: 100%;
+  }
+`;
+//# sourceMappingURL=Mermaid.js.map

package/lib/Markdown/PageWrapper.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PageWrapper = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Markdown/PageWrapper',
+})) `
+  display: flex;
+  flex: 1;
+  width: 100%;
+`;
+//# sourceMappingURL=PageWrapper.js.map

package/lib/Markdown/Sup.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sup = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Sup({ children }) {
+    return react_1.default.createElement(Wrapper, { "data-component-name": "Markdown/Sup" }, children);
+}
+exports.Sup = Sup;
+const Wrapper = styled_components_1.default.sup ``;
+//# sourceMappingURL=Sup.js.map

package/lib/Markdown/Tabs/Tab.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Tab({ activeTab, label, onClick }) {
+    const isActive = activeTab === label;
+    return (react_1.default.createElement(TabItem, { active: isActive, onClick: () => onClick(label), "data-component-name": "Markdown/Tabs/Tab" }, label));
+}
+exports.Tab = Tab;
+const TabItem = styled_components_1.default.li `
+  display: inline-block;
+  list-style: none;
+  margin-bottom: -1px;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+
+  ${({ active }) => active &&
+    `
+    background-color: white;
+    border: solid #ccc;
+    border-width: 1px 1px 0 1px;
+  `}
+`;
+//# sourceMappingURL=Tab.js.map

package/lib/Markdown/Tabs/Tabs.js

@@ -0,0 +1,62 @@
+"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.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tab_1 = require("../../Markdown/Tabs/Tab");
+function Tabs({ children }) {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(children[0].props.label);
+    const onTabSelect = (label) => setActiveTab(label);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
+        react_1.default.createElement(TabList, null, children.map((child) => {
+            const { label } = child.props;
+            return react_1.default.createElement(Tab_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });
+        })),
+        react_1.default.createElement(TabContent, null, children.map((child) => {
+            if (child.props.label !== activeTab)
+                return undefined;
+            return child.props.children;
+        }))));
+}
+exports.Tabs = Tabs;
+const TabsContainer = styled_components_1.default.div `
+  margin: 10px 0;
+`;
+const TabList = styled_components_1.default.ol `
+  border-bottom: 1px solid #ccc;
+  padding: 0;
+  margin-block-end: 0;
+`;
+const TabContent = styled_components_1.default.div `
+  padding: 10px 5px;
+  border: 1px solid #ccc;
+  border-top: none;
+  padding: 1rem;
+`;
+//# sourceMappingURL=Tabs.js.map

package/{Markdown → lib/Markdown}/Tabs/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../Markdown/Tabs/Tab"), exports);
 __exportStar(require("../../Markdown/Tabs/Tabs"), exports);
+//# sourceMappingURL=index.js.map

package/{Markdown → lib/Markdown}/index.js

@@ -24,3 +24,4 @@ __exportStar(require("../Markdown/Mermaid"), exports);
 __exportStar(require("../Markdown/PageWrapper"), exports);
 __exportStar(require("../Markdown/Sup"), exports);
 __exportStar(require("../Markdown/Tabs"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Navbar/MobileNavbarDropdown.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileDropdownWrapper = exports.MobileNavbarDropdown = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+function MobileNavbarDropdown({ items }) {
+    return (react_1.default.createElement(exports.MobileDropdownWrapper, { "data-component-name": "Navbar/MobileNavbarDropdown" }, items.map((item, index) => (react_1.default.createElement("div", { key: `${item.label}_${index}` },
+        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))));
+}
+exports.MobileNavbarDropdown = MobileNavbarDropdown;
+exports.MobileDropdownWrapper = styled_components_1.default.div `
+  padding: 0 15px;
+  width: max-content;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  box-shadow: var(--navbar-dropdown-shadow);
+  & > div {
+    padding: 10px 0;
+    cursor: pointer;
+    a {
+      color: var(--navbar-text-color);
+      text-decoration: none;
+    }
+  }
+`;
+//# sourceMappingURL=MobileNavbarDropdown.js.map

package/{Navbar → lib/Navbar}/MobileNavbarItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { ResolvedNavItem } from '@theme/types/portal';
 import { Link } from '../mocks/Link';
+import type { ResolvedNavItem } from '@theme/types/portal';
 export interface NavbarItemProps {
     navItem: ResolvedNavItem;
     className?: string;