@redocly/theme 0.68.0-next.0 → 0.68.0-next.1

package/src/markdoc/components/NumberedList/variables.ts

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+
+export const markdownNumberedList = 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
+`;

package/src/markdoc/components/default.ts

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

package/src/markdoc/default.ts

@@ -14,6 +14,8 @@ import { markdocExample } from '@redocly/theme/markdoc/tags/markdoc-example';
 import { partial } from '@redocly/theme/markdoc/tags/partial';
 import { tab } from '@redocly/theme/markdoc/tags/tab';
 import { tabs } from '@redocly/theme/markdoc/tags/tabs';
+import { numberedItem } from '@redocly/theme/markdoc/tags/numbered-item';
+import { numberedList } from '@redocly/theme/markdoc/tags/numbered-list';
 import { debug } from '@redocly/theme/markdoc/tags/debug';
 import { codeSnippet } from '@redocly/theme/markdoc/tags/code-snippet';
 import { inlineSvg } from '@redocly/theme/markdoc/tags/inline-svg';
@@ -38,6 +40,8 @@ export const tags = {
   [partial.tagName]: partial.schema,
   [tab.tagName]: tab.schema,
   [tabs.tagName]: tabs.schema,
+  [numberedItem.tagName]: numberedItem.schema,
+  [numberedList.tagName]: numberedList.schema,
   [codeSnippet.tagName]: codeSnippet.schema,
   [inlineSvg.tagName]: inlineSvg.schema,
   [cards.tagName]: cards.schema,

package/src/markdoc/tags/numbered-item.ts

@@ -0,0 +1,46 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { isTag } from '@redocly/theme/core/utils';
+
+const HEADING_TAG_NAME = /^(Heading|h[1-6])$/;
+
+export const numberedItem: MarkdocSchemaWrapper = {
+  schema: {
+    transform(node, config) {
+      const attributes = node.transformAttributes(config);
+      const children = node.transformChildren(config);
+      const [first, ...body] = children;
+
+      if (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.Tag(
+          'NumberedItem',
+          {
+            ...attributes,
+            headline: first.children,
+            anchorId: first.attributes.id,
+            headlineLevel,
+          },
+          body,
+        );
+      }
+
+      return new markdoc.Tag('NumberedItem', attributes, children);
+    },
+    attributes: {
+      icon: { type: String, resolver: 'relativeOrCdnIcon' },
+      iconRawContent: {
+        // internal use only
+        type: String,
+        render: true,
+      },
+    },
+  },
+  tagName: 'numbered-item',
+};

package/src/markdoc/tags/numbered-list.ts

@@ -0,0 +1,34 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { Tag } from '@markdoc/markdoc';
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { isTag } from '@redocly/theme/core/utils';
+
+export const numberedList: MarkdocSchemaWrapper = {
+  schema: {
+    transform(node, config) {
+      const attributes = node.transformAttributes(config);
+      const items = node
+        .transformChildren(config)
+        .filter((child): child is Tag => isTag(child) && child.name === 'NumberedItem');
+
+      items.forEach((item, index) => {
+        item.attributes = {
+          ...item.attributes,
+          type: attributes.type,
+          size: attributes.size,
+          index: index + 1,
+          isLast: index === items.length - 1,
+        };
+      });
+
+      return new markdoc.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',
+};