@redocly/theme 0.67.0 → 0.68.0-next.1

package/lib/markdoc/components/NumberedList/NumberedItem.d.ts

@@ -0,0 +1,25 @@
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
+export declare const NumberedListType: {
+    readonly ICON: 'icon';
+    readonly NUMBER: 'number';
+    readonly DOT: 'dot';
+};
+export type NumberedListType = (typeof NumberedListType)[keyof typeof NumberedListType];
+export declare const NumberedListSize: {
+    readonly SMALL: 'small';
+    readonly MEDIUM: 'medium';
+};
+export type NumberedListSize = (typeof NumberedListSize)[keyof typeof NumberedListSize];
+export type NumberedItemProps = PropsWithChildren<{
+    headline?: ReactNode;
+    anchorId?: string;
+    headlineLevel?: number;
+    icon?: string | ReactNode;
+    iconRawContent?: string;
+    className?: string;
+    type?: NumberedListType;
+    size?: NumberedListSize;
+    index?: number;
+    isLast?: boolean;
+}>;
+export declare function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent, className, type, size, index, isLast, children }: NumberedItemProps): JSX.Element;

package/lib/markdoc/components/NumberedList/NumberedItem.js

@@ -0,0 +1,217 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberedListSize = exports.NumberedListType = void 0;
+exports.NumberedItem = NumberedItem;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
+const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
+exports.NumberedListType = {
+    ICON: 'icon',
+    NUMBER: 'number',
+    DOT: 'dot',
+};
+exports.NumberedListSize = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+};
+function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent, className, type = exports.NumberedListType.NUMBER, size = exports.NumberedListSize.MEDIUM, index = 1, isLast = true, children, }) {
+    const isDot = type === exports.NumberedListType.DOT;
+    const headlineTextId = anchorId ? `${anchorId}-heading-text` : undefined;
+    const marker = (react_1.default.createElement(Marker, { $type: type, $size: size, "data-dot": isDot || undefined },
+        type === exports.NumberedListType.ICON && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" },
+            react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }))),
+        type === exports.NumberedListType.NUMBER && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" }, index)),
+        anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", $isDot: isDot },
+            react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", color: "--md-numbered-list-marker-text-color" })))));
+    return (react_1.default.createElement(NumberedItemWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedItem", className: className, id: anchorId, $size: size, $isDot: isDot },
+        react_1.default.createElement(MarkerRail, null,
+            anchorId ? (react_1.default.createElement("a", Object.assign({ href: `#${anchorId}` }, (headline
+                ? { 'aria-labelledby': headlineTextId }
+                : { 'aria-label': 'Link to this item' })), marker)) : (marker),
+            react_1.default.createElement(Tail, { "data-testid": "numbered-item-tail", $isLast: isLast })),
+        react_1.default.createElement(NumberedItemContent, null,
+            headline &&
+                (0, react_1.createElement)(NumberedItemHeadline, { as: `h${headlineLevel !== null && headlineLevel !== void 0 ? headlineLevel : 3}`, id: headlineTextId }, headline),
+            react_1.default.createElement(NumberedItemBody, null, children))));
+}
+const markerSize = (0, styled_components_1.css) `
+  ${({ $size }) => $size === exports.NumberedListSize.SMALL
+    ? (0, styled_components_1.css) `
+          width: var(--md-numbered-list-marker-small-size);
+          height: var(--md-numbered-list-marker-small-size);
+          --icon-width: var(--md-numbered-list-icon-small-size);
+          --icon-height: var(--md-numbered-list-icon-small-size);
+        `
+    : (0, styled_components_1.css) `
+          width: var(--md-numbered-list-marker-medium-size);
+          height: var(--md-numbered-list-marker-medium-size);
+          --icon-width: var(--md-numbered-list-icon-medium-size);
+          --icon-height: var(--md-numbered-list-icon-medium-size);
+        `}
+`;
+const Marker = styled_components_1.default.span `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: var(--md-numbered-list-marker-text-color);
+  font-size: var(--md-numbered-list-marker-font-size);
+
+  ${({ $type }) => $type === exports.NumberedListType.DOT
+    ? (0, styled_components_1.css) `
+          width: var(--md-numbered-list-dot-size);
+          height: var(--md-numbered-list-dot-size);
+          background-color: var(--text-color-primary);
+        `
+    : (0, styled_components_1.css) `
+          ${markerSize}
+          background-color: var(--md-numbered-list-marker-bg-color);
+        `}
+`;
+const MarkerContent = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const MarkerLink = styled_components_1.default.span `
+  display: none;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: var(--icon-width, 16px);
+    height: var(--icon-height, 16px);
+  }
+
+  ${({ $isDot }) => $isDot &&
+    (0, styled_components_1.css) `
+      position: absolute;
+      inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
+    `}
+`;
+const MarkerLinkIcon = (0, styled_components_1.default)(LinkIcon_1.LinkIcon) `
+  path:first-of-type {
+    fill: var(--md-numbered-list-marker-icon-bg-color);
+  }
+`;
+const MarkerRail = styled_components_1.default.span `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+
+  a {
+    display: flex;
+    border-radius: 50%;
+    /* Overrides the global markdown link rule a:not([role='button']), which is more specific. */
+    text-decoration: none !important;
+
+    &:hover,
+    &:focus {
+      text-decoration: none !important;
+    }
+  }
+`;
+const Tail = styled_components_1.default.span `
+  flex: 1 0 0;
+  min-height: var(--spacing-xs);
+  width: var(--md-numbered-list-tail-width);
+  background: ${({ $isLast }) => $isLast
+    ? 'var(--md-numbered-list-tail-fade-gradient)'
+    : 'var(--md-numbered-list-tail-bg-color)'};
+`;
+const NumberedItemHeadline = styled_components_1.default.h3 `
+  margin: 0;
+  color: var(--md-numbered-list-headline-text-color);
+  font-size: var(--md-numbered-list-headline-font-size);
+  font-weight: var(--md-numbered-list-headline-font-weight);
+  line-height: var(--md-numbered-list-headline-line-height);
+`;
+const NumberedItemBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-numbered-list-body-gap);
+  color: var(--md-numbered-list-body-text-color);
+  font-size: var(--md-numbered-list-body-font-size);
+
+  > p {
+    margin: 0;
+  }
+`;
+const NumberedItemContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+  flex: 1;
+  min-width: 0;
+  padding-bottom: var(--spacing-sm);
+`;
+const NumberedItemWrapper = styled_components_1.default.li `
+  display: flex;
+  gap: var(--md-numbered-list-gap);
+  align-items: stretch;
+
+  ${({ $isDot }) => $isDot &&
+    (0, styled_components_1.css) `
+      ${MarkerRail} {
+        padding-top: var(--md-numbered-list-dot-rail-padding-top);
+      }
+    `}
+
+  &:last-child ${NumberedItemContent} {
+    padding-bottom: 0;
+  }
+
+  &:hover,
+  &:focus-within {
+    ${Marker} {
+      background-color: ${({ $isDot }) => $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
+    }
+
+    a ${Marker}:not([data-dot]) .numbered-item-marker-content {
+      display: none;
+    }
+
+    a ${Marker} .numbered-item-marker-link {
+      display: flex;
+    }
+  }
+`;
+//# sourceMappingURL=NumberedItem.js.map

package/lib/markdoc/components/NumberedList/NumberedList.d.ts

@@ -0,0 +1,5 @@
+import type { JSX, PropsWithChildren } from 'react';
+export type NumberedListProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function NumberedList({ className, children }: NumberedListProps): JSX.Element | null;

package/lib/markdoc/components/NumberedList/NumberedList.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.NumberedList = NumberedList;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function NumberedList({ className, children }) {
+    if (react_1.default.Children.count(children) === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(NumberedListWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedList", className: className }, children));
+}
+const NumberedListWrapper = styled_components_1.default.ol `
+  display: flex;
+  flex-direction: column;
+  margin: var(--md-numbered-list-margin);
+  padding: 0;
+  list-style: none;
+
+  && {
+    & > li:not(:last-child) {
+      margin-bottom: 0;
+    }
+  }
+`;
+//# sourceMappingURL=NumberedList.js.map

package/lib/markdoc/components/NumberedList/variables.d.ts

@@ -0,0 +1 @@
+export declare const markdownNumberedList: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/NumberedList/variables.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownNumberedList = void 0;
+const styled_components_1 = require("styled-components");
+exports.markdownNumberedList = (0, styled_components_1.css) `
+  /**
+  *  @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-margin: var(--spacing-sm) 0; // @presenter Spacing
+  --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
+
+  --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
+  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
+  --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
+  --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
+  --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
+
+  --md-numbered-list-marker-medium-size: 28px; // @presenter Spacing
+  --md-numbered-list-icon-medium-size: 16px; // @presenter Spacing
+  --md-numbered-list-tail-width: 1px; // @presenter Spacing
+  --md-numbered-list-marker-small-size: 24px; // @presenter Spacing
+  --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
+  --md-numbered-list-dot-size: 10px; // @presenter Spacing
+  --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
+  --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
+
+  --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
+  --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color
+
+  --md-numbered-list-headline-text-color: var(--text-color-primary); // @presenter Color
+  --md-numbered-list-headline-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-headline-font-weight: var(--font-weight-medium); // @presenter FontWeight
+  --md-numbered-list-headline-line-height: var(--line-height-base); // @presenter LineHeight
+
+  --md-numbered-list-body-text-color: var(--text-color-secondary); // @presenter Color
+  --md-numbered-list-body-gap: var(--spacing-xs); // @presenter Spacing
+  --md-numbered-list-body-font-size: var(--font-size-base); // @presenter FontSize
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/markdoc/components/default.d.ts

@@ -8,6 +8,8 @@ export * from '../../markdoc/components/Tabs/TabItemFragment';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';
 export * from '../../markdoc/components/Tabs/Tabs';
+export * from '../../markdoc/components/NumberedList/NumberedItem';
+export * from '../../markdoc/components/NumberedList/NumberedList';
 export * from '../../markdoc/components/CodeBlock/CodeBlock';
 export * from '../../markdoc/components/Cards/Cards';
 export * from '../../markdoc/components/Cards/Card';

package/lib/markdoc/components/default.js

@@ -24,6 +24,8 @@ __exportStar(require("../../markdoc/components/Tabs/TabItemFragment"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tabs"), exports);
+__exportStar(require("../../markdoc/components/NumberedList/NumberedItem"), exports);
+__exportStar(require("../../markdoc/components/NumberedList/NumberedList"), exports);
 __exportStar(require("../../markdoc/components/CodeBlock/CodeBlock"), exports);
 __exportStar(require("../../markdoc/components/Cards/Cards"), exports);
 __exportStar(require("../../markdoc/components/Cards/Card"), exports);

package/lib/markdoc/default.js

@@ -53,6 +53,8 @@ const markdoc_example_1 = require("../markdoc/tags/markdoc-example");
 const partial_1 = require("../markdoc/tags/partial");
 const tab_1 = require("../markdoc/tags/tab");
 const tabs_1 = require("../markdoc/tags/tabs");
+const numbered_item_1 = require("../markdoc/tags/numbered-item");
+const numbered_list_1 = require("../markdoc/tags/numbered-list");
 const debug_1 = require("../markdoc/tags/debug");
 const code_snippet_1 = require("../markdoc/tags/code-snippet");
 const inline_svg_1 = require("../markdoc/tags/inline-svg");
@@ -76,6 +78,8 @@ exports.tags = {
     [partial_1.partial.tagName]: partial_1.partial.schema,
     [tab_1.tab.tagName]: tab_1.tab.schema,
     [tabs_1.tabs.tagName]: tabs_1.tabs.schema,
+    [numbered_item_1.numberedItem.tagName]: numbered_item_1.numberedItem.schema,
+    [numbered_list_1.numberedList.tagName]: numbered_list_1.numberedList.schema,
     [code_snippet_1.codeSnippet.tagName]: code_snippet_1.codeSnippet.schema,
     [inline_svg_1.inlineSvg.tagName]: inline_svg_1.inlineSvg.schema,
     [cards_1.cards.tagName]: cards_1.cards.schema,

package/lib/markdoc/tags/numbered-item.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const numberedItem: MarkdocSchemaWrapper;

package/lib/markdoc/tags/numbered-item.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.numberedItem = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+const HEADING_TAG_NAME = /^(Heading|h[1-6])$/;
+exports.numberedItem = {
+    schema: {
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const children = node.transformChildren(config);
+            const [first, ...body] = children;
+            if ((0, utils_1.isTag)(first) && HEADING_TAG_NAME.test(String(first.name))) {
+                const headlineLevel = typeof first.attributes.level === 'number'
+                    ? first.attributes.level
+                    : Number(String(first.name).slice(1)) || undefined;
+                return new markdoc_1.default.Tag('NumberedItem', Object.assign(Object.assign({}, attributes), { headline: first.children, anchorId: first.attributes.id, headlineLevel }), body);
+            }
+            return new markdoc_1.default.Tag('NumberedItem', attributes, children);
+        },
+        attributes: {
+            icon: { type: String, resolver: 'relativeOrCdnIcon' },
+            iconRawContent: {
+                // internal use only
+                type: String,
+                render: true,
+            },
+        },
+    },
+    tagName: 'numbered-item',
+};
+//# sourceMappingURL=numbered-item.js.map

package/lib/markdoc/tags/numbered-list.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const numberedList: MarkdocSchemaWrapper;

package/lib/markdoc/tags/numbered-list.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.numberedList = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const utils_1 = require("../../core/utils");
+exports.numberedList = {
+    schema: {
+        transform(node, config) {
+            const attributes = node.transformAttributes(config);
+            const items = node
+                .transformChildren(config)
+                .filter((child) => (0, utils_1.isTag)(child) && child.name === 'NumberedItem');
+            items.forEach((item, index) => {
+                item.attributes = Object.assign(Object.assign({}, item.attributes), { type: attributes.type, size: attributes.size, index: index + 1, isLast: index === items.length - 1 });
+            });
+            return new markdoc_1.default.Tag('NumberedList', attributes, items);
+        },
+        attributes: {
+            type: { type: String, matches: ['icon', 'number', 'dot'], default: 'number' },
+            size: { type: String, matches: ['small', 'medium'], default: 'medium' },
+        },
+    },
+    tagName: 'numbered-list',
+};
+//# sourceMappingURL=numbered-list.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0",
+  "version": "0.68.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0"
+    "@redocly/realm-asyncapi-sdk": "0.14.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.50.1"
+    "@redocly/config": "0.52.0"
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",