@redocly/theme 0.4.14 → 0.4.16

package/lib/Footer/CustomFooterNavItem.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFooterNavItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+function CustomFooterNavItem({ navItem }) {
+    const item = navItem;
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem" },
+        react_1.default.createElement(FooterLink, { to: item.link },
+            react_1.default.createElement(FooterLabel, null, item.label))));
+}
+exports.CustomFooterNavItem = CustomFooterNavItem;
+const FooterItem = styled_components_1.default.li `
+  display: inline-block;
+  text-align: center;
+  line-height: var(--line-height-base);
+  font-size: var(--navbar-item-font-size);
+  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  font-weight: var(--font-weight-regular);
+`;
+const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
+  color: var(--footer-text-color);
+  text-decoration: none;
+`;
+const FooterLabel = styled_components_1.default.span `
+  cursor: pointer;
+  vertical-align: middle;
+`;
+//# sourceMappingURL=CustomFooterNavItem.js.map

package/lib/Footer/Footer.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FooterColumns_1 = require("../Footer/FooterColumns");
+const FooterCopyright_1 = require("../Footer/FooterCopyright");
+const utils_1 = require("../utils");
+const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+function Footer({ data: { columns, copyrightText } }) {
+    const { footer } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    if ((0, utils_1.isEmptyArray)(columns) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },
+        react_1.default.createElement(FooterColumns_1.FooterColumns, { columns: columns }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: copyrightText })));
+}
+exports.Footer = Footer;
+const FooterContainer = styled_components_1.default.footer `
+  font-size: var(--footer-font-size);
+  flex-shrink: 0;
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  font-family: var(--footer-font-family);
+  font-weight: var(--footer-font-weight);
+  a,
+  a:hover {
+    color: var(--footer-text-color);
+  }
+`;
+//# sourceMappingURL=Footer.js.map

package/lib/Footer/FooterColumn.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterColumn = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../mocks/Link");
+function FooterColumn({ column }) {
+    var _a;
+    return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
+        react_1.default.createElement(FooterColumnTitle, null, column.label), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
+        _a.map((columnItem, columnItemIndex) => {
+            if (columnItem.type === 'error') {
+                return null;
+            }
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, columnItem.label)) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, "data-cy": columnItem.label }, columnItem.label));
+        })));
+}
+exports.FooterColumn = FooterColumn;
+const FooterColumnTitle = styled_components_1.default.p `
+  display: inline-block;
+  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_components_1.default.div `
+  opacity: 0.75;
+  margin: 10px 0 5px 0;
+  font-size: 0.75em;
+  text-transform: uppercase;
+  font-family: var(--footer-font-family);
+`;
+const FooterColumnContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
+  width: var(--footer-column-width);
+  word-break: break-word;
+`;
+const FooterLink = (0, styled_components_1.default)(Link_1.Link) `
+  font-weight: var(--font-weight-bold);
+  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);
+  }
+`;
+//# sourceMappingURL=FooterColumn.js.map

package/lib/Footer/FooterColumns.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterRow = exports.FooterColumnsContainer = exports.FooterColumns = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FooterColumn_1 = require("../Footer/FooterColumn");
+function FooterColumns({ columns }) {
+    if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },
+        react_1.default.createElement(exports.FooterRow, null, columns.map((column, index) => (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: `${column.label}_${index}`, column: column }))))));
+}
+exports.FooterColumns = FooterColumns;
+exports.FooterColumnsContainer = styled_components_1.default.div `
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  max-width: var(--footer-container-max-width);
+  margin: 0 auto;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    padding: 5.625em 20px 3.9375em 20px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.print} {
+    color: black;
+    display: none;
+  }
+`;
+exports.FooterRow = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    justify-content: space-evenly;
+  }
+`;
+//# sourceMappingURL=FooterColumns.js.map

package/lib/Footer/FooterCopyright.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterCopyright = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function FooterCopyright({ copyrightText = '' }) {
+    return copyrightText ? (react_1.default.createElement(Wrapper, { "data-component-name": "Footer/FooterCopyright" }, copyrightText)) : null;
+}
+exports.FooterCopyright = FooterCopyright;
+const Wrapper = styled_components_1.default.section `
+  display: flex;
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
+  background-color: var(--footer-background-color);
+  color: var(--footer-text-color);
+  text-align: center;
+  span {
+    max-width: var(--footer-container-max-width);
+  }
+`;
+//# sourceMappingURL=FooterCopyright.js.map

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

@@ -18,3 +18,4 @@ __exportStar(require("../Footer/Footer"), exports);
 __exportStar(require("../Footer/FooterColumn"), exports);
 __exportStar(require("../Footer/FooterColumns"), exports);
 __exportStar(require("../Footer/FooterCopyright"), exports);
+//# sourceMappingURL=index.js.map

package/lib/JsonViewer/JsonViewer.js

@@ -0,0 +1,240 @@
+"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.StyledCodeBlock = exports.JsonViewerWrap = exports.JsonViewer = exports.Json = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CopyButton_1 = require("../CopyButton");
+const SamplesPanelControls_1 = require("../SamplesPanelControls");
+const utils_1 = require("../utils");
+const hooks_1 = require("../hooks");
+const CodeBlock_1 = require("../CodeBlock");
+function JsonComponent({ data, jsonSampleExpandLevel, className, withLineNumbers, startLineNumber, onCopyClick, }) {
+    const node = (0, react_1.useRef)(null);
+    (0, hooks_1.useMount)(() => {
+        var _a;
+        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', clickListener);
+    });
+    (0, hooks_1.useUnmount)(() => {
+        var _a;
+        (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
+    });
+    const expandAll = () => {
+        var _a, _b;
+        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
+        for (const collapsed of Array.prototype.slice.call(elements)) {
+            const parentNode = collapsed.parentNode;
+            if (!parentNode)
+                continue;
+            parentNode.classList.remove('collapsed');
+            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'collapse');
+        }
+    };
+    const collapseAll = () => {
+        var _a, _b;
+        const elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
+        // skip first item to avoid collapsing whole object/array
+        const elementsArr = Array.prototype.slice.call(elements, 1);
+        for (const expanded of elementsArr) {
+            const parentNode = expanded.parentNode;
+            if (!parentNode)
+                continue;
+            parentNode.classList.add('collapsed');
+            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'expand');
+        }
+    };
+    const collapseElement = (target) => {
+        var _a, _b;
+        if (target.parentElement && target.className === 'collapser') {
+            const collapsed = target.parentElement.getElementsByClassName('collapsible')[0];
+            if ((_a = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('collapsed')) {
+                collapsed.parentElement.classList.remove('collapsed');
+                target.setAttribute('aria-label', 'collapse');
+            }
+            else {
+                (_b = collapsed === null || collapsed === void 0 ? void 0 : collapsed.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('collapsed');
+                target.setAttribute('aria-label', 'expand');
+            }
+        }
+    };
+    const clickListener = (event) => {
+        collapseElement(event.target);
+    };
+    const renderInner = ({ renderCopyButton }) => {
+        const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+        return (react_1.default.createElement(exports.JsonViewerWrap, { "data-cy": "json-viewer" },
+            react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "buttons" },
+                renderCopyButton(),
+                showFoldingButtons && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: expandAll, "data-cy": "expand-all" }, "Expand all"),
+                    react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: collapseAll, "data-cy": "collapse-all" }, "Collapse all")))),
+            react_1.default.createElement(exports.StyledCodeBlock, { className: withLineNumbers ? `${className} line-numbers` : className, ref: node, dangerouslySetInnerHTML: {
+                    __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber),
+                } })));
+    };
+    return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data, onCopyClick: onCopyClick }, renderInner));
+}
+exports.Json = (0, react_1.memo)(JsonComponent);
+exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(() => ({
+    'data-component-name': 'JsonViewer/JsonViewer',
+})) `
+  .redoc-json code {
+    background-color: var(--panel-samples-code-block-background-color);
+    color: var(--text-color-inverse);
+    padding: inherit;
+    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;
+      }
+    }
+  }
+
+  .callback-function {
+    color: gray;
+  }
+
+  .ellipsis:after {
+    content: ' … ';
+  }
+
+  .collapsible {
+    padding-left: 2ch;
+    display: inline-block;
+  }
+
+  .hoverable {
+    padding: 1px 2px;
+    display: inline-block;
+  }
+
+  .collapsed {
+    white-space: nowrap;
+
+    & > .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%;
+    }
+
+    &:focus {
+      outline: #fff dotted 1px;
+    }
+  }
+
+  .selected {
+    outline-width: 1px;
+    outline-style: dotted;
+  }
+
+  .collapsed > .collapsible {
+    display: none;
+  }
+
+  .ellipsis {
+    display: none;
+  }
+
+  .collapsed > .ellipsis {
+    display: inline;
+  }
+`;
+exports.JsonViewerWrap = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  &:hover > ${SamplesPanelControls_1.SampleControls} {
+    opacity: 1;
+  }
+`;
+exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock) `
+  flex: 1;
+
+  code {
+    font-family: var(--code-font-family);
+    font-size: 14px;
+    line-height: 18px;
+  }
+`;
+//# sourceMappingURL=JsonViewer.js.map

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

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

package/lib/LastUpdated/LastUpdated.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare const FORMATS: {
+    timeago: (date: Date, locale: string) => string;
+    iso: (date: Date) => string;
+    short: (date: Date, locale: string) => string;
+    long: (date: Date, locale: string) => string;
+};
+export interface LastUpdatedProps {
+    lastModified: Date;
+    format?: keyof typeof FORMATS;
+    locale?: string;
+}
+export declare function LastUpdated(props: LastUpdatedProps): JSX.Element | null;
+export {};

package/lib/LastUpdated/LastUpdated.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LastUpdated = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const timeago_js_1 = require("timeago.js");
+const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const FORMATS = {
+    timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
+    iso: (date) => date.toISOString().split('T')[0],
+    short: (date, locale) => date.toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric' }),
+    long: (date, locale) => date.toLocaleDateString(locale, { month: 'long', day: 'numeric', year: 'numeric' }),
+};
+function LastUpdated(props) {
+    const { lastUpdatedBlock } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
+        return null;
+    }
+    const lastModified = props.lastModified;
+    const format = props.format || (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.format) || 'timeago';
+    const locale = props.locale || (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.locale) || 'en-US';
+    const isoDate = lastModified.toISOString().split('T')[0];
+    const lastUpdatedString = FORMATS[format](lastModified, locale);
+    const separator = format === 'timeago' ? ' ' : ' on ';
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated", rawOnPrint: format === 'timeago', "data-print-datetime": isoDate },
+        "Last updated",
+        separator,
+        react_1.default.createElement("time", { dateTime: isoDate }, lastUpdatedString)));
+}
+exports.LastUpdated = LastUpdated;
+const Wrapper = styled_components_1.default.div `
+  color: var(--last-updated-text-color);
+  font-size: var(--last-updated-font-size);
+  font-family: var(--last-updated-font-family);
+  line-height: var(--last-updated-line-height);
+  padding-bottom: 30px;
+
+  ${({ rawOnPrint }) => rawOnPrint &&
+    `@media print {
+      time {
+        display: none;
+      }
+      &::after {
+        content: attr(data-print-datetime);
+      }
+    }
+  `}
+`;
+//# sourceMappingURL=LastUpdated.js.map

package/lib/Layout/PageLayout.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function PageLayout({ sidebar, children, }) {
+    return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
+        sidebar,
+        react_1.default.createElement(ContentContainer, null, children)));
+}
+exports.PageLayout = PageLayout;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  min-height: calc(100vh - var(--navbar-height));
+`;
+const ContentContainer = styled_components_1.default.div `
+  flex: 1 0 0;
+  /*
+    flex-basis is ignored for nested flex in Chrome, need to set width
+    See more here: https://stackoverflow.com/a/34355447
+  */
+  width: 0;
+  max-width: 100%;
+`;
+//# sourceMappingURL=PageLayout.js.map

package/lib/Layout/RootLayout.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.RootLayout = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Wrapper = styled_components_1.default.div ``;
+function RootLayout({ navbar, footer, children, }) {
+    return (
+    // TODO: rewrite it to avoid passing components as props
+    react_1.default.createElement(Wrapper, { "data-component-name": "Layout/RootLayout" },
+        navbar,
+        children,
+        footer));
+}
+exports.RootLayout = RootLayout;
+//# sourceMappingURL=RootLayout.js.map

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

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

package/lib/Markdown/Admonition.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Admonition = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
+function Admonition({ type = 'info', name, children, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition" },
+        react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
+        name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+        react_1.default.createElement(Content, null, children)));
+}
+exports.Admonition = Admonition;
+const Wrapper = styled_components_1.default.div `
+  position: relative;
+  align-items: center;
+  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
+  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
+  border-radius: var(--admonition-border-radius);
+  font-size: var(--admonition-font-size);
+  font-weight: var(--admonition-font-weight);
+  line-height: var(--admonition-line-height);
+
+  ${({ type }) => `
+    background-color: var(--admonition-${type}-background-color);
+    color: var(--admonition-${type}-text-color);
+    border: var(--admonition-${type}-border);
+  `}
+`;
+const Heading = styled_components_1.default.h5 `
+  display: block;
+  margin: 0 0 10px;
+
+  letter-spacing: var(--admonition-heading-letter-spacing);
+  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);
+    text-transform: var(--admonition-heading-transform);
+  }
+`;
+const Content = styled_components_1.default.div `
+  & > p:first-child {
+    margin-top: 0;
+  }
+`;
+//# sourceMappingURL=Admonition.js.map