@redocly/theme 0.69.0-next.0 → 0.69.0-next.10

package/src/markdoc/components/Cards/Card.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CardImage } from '@redocly/theme/markdoc/components/Cards/CardImage';
 import { CardIcon, CardIconWrapper } from '@redocly/theme/markdoc/components/Cards/CardIcon';
+import { CardBadge } from '@redocly/theme/markdoc/components/Cards/CardBadge';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
@@ -17,8 +19,15 @@ export type CardProps = React.PropsWithChildren<{
   layout?: 'horizontal' | 'vertical' | 'combined';
   variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
   iconVariant?: 'filled' | 'ghost';
+  iconColor?: string;
   align?: 'start' | 'center' | 'end';
   to?: string;
+  linkIcon?: 'chevron' | 'arrow';
+  cta?: React.ReactNode;
+  badge?: string;
+  badgeColor?: string;
+  badgeIcon?: string;
+  badgeIconRawContent?: string;
 }>;
 
 export function Card({
@@ -32,8 +41,15 @@ export function Card({
   variant = 'filled',
   lineClamp,
   iconVariant = 'filled',
+  iconColor,
   align = 'start',
   to,
+  cta,
+  linkIcon,
+  badge,
+  badgeColor,
+  badgeIcon,
+  badgeIconRawContent,
   children,
 }: CardProps) {
   const titleNoSpaces = title?.replace(/\s+/g, '-').toLowerCase();
@@ -66,14 +82,30 @@ export function Card({
               src={icon}
               rawContent={iconRawContent}
               position={iconPosition}
+              color={iconColor}
             />
           )}
           <ContentWrapper>
-            <Title id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
-              {title}
-              {variant == 'ghost' && !!to && <CardLinkIcon />}
-            </Title>
+            <TitleWrapper id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
+              <Title>
+                {title}
+                {!!to && !!linkIcon && (
+                  <CardLinkIcon as={linkIcon === 'arrow' ? ArrowUpRightIcon : undefined} />
+                )}
+              </Title>
+              {!!badge && (
+                <CardBadge color={badgeColor} icon={badgeIcon} iconRawContent={badgeIconRawContent}>
+                  {badge}
+                </CardBadge>
+              )}
+            </TitleWrapper>
             <Body $lineClamp={lineClamp}>{children}</Body>
+            {!!to && !!cta && (
+              <Cta $justifyContent={justifyContent}>
+                <CtaText> {cta} </CtaText>
+                <CtaIcon />
+              </Cta>
+            )}
           </ContentWrapper>
         </CardContentWrapper>
       </>
@@ -105,25 +137,28 @@ const ContentWrapper = styled.div`
   width: 100%;
 `;
 
-const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
-  margin: var(--card-title-margin);
-  font-weight: var(--card-title-font-weight);
+const TitleWrapper = styled.div<{ $isCardLink: boolean; $justifyContent: string }>`
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--card-title-row-gap);
   justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
 
+const Title = styled.h3`
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+`;
+
+// The `as` prop selects the icon; the chevron is the default target.
 const CardLinkIcon = styled(ChevronRightIcon)`
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
-  color: var(--card-link-icon-color);
+  color: var(--icon-color-secondary);
   margin-left: var(--spacing-xxs);
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  margin-top: calc(var(--spacing-xxs) / 2);
 `;
 
 const Body = styled.div<{ $lineClamp?: number }>`
@@ -149,6 +184,29 @@ const Body = styled.div<{ $lineClamp?: number }>`
   }
 `;
 
+const Cta = styled.div<{ $justifyContent: string }>`
+  display: flex;
+  gap: var(--card-cta-gap);
+  align-items: center;
+  margin-top: var(--card-cta-margin-top);
+  color: var(--card-cta-text-color);
+  font-size: var(--card-cta-font-size);
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+    
+  && > * {
+    cursor: pointer;
+  }  
+`;
+
+const CtaText = styled.span`
+  font-weight: var(--card-cta-font-weight);
+`;
+
+const CtaIcon = styled(ChevronRightIcon)`
+  width: var(--card-cta-icon-width);
+  height: var(--card-cta-icon-height);
+`;
+
 const CardWrapper = styled.div.attrs<{
   $variant: string;
   $isCardLink: boolean;
@@ -185,6 +243,13 @@ const CardWrapper = styled.div.attrs<{
       height: 100%;
       object-fit: cover;
     `}
+  } 
+    
+  &:hover,
+  &:focus-within {
+    ${Cta} {
+      color: var(--card-link-icon-color);
+    }
   }
 
   &.card-link {
@@ -203,8 +268,8 @@ const CardWrapper = styled.div.attrs<{
         background-color: var(--card-icon-bg-color-hover);
       }
 
-      svg {
-        opacity: 1;
+      ${CardLinkIcon} {
+        color: var(--card-link-icon-color);
       }
     }
   }

package/src/markdoc/components/Cards/CardBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Badge } from '@redocly/theme/components/Badge/Badge';
+
+export type CardBadgeProps = React.PropsWithChildren<{
+  color?: string;
+  icon?: string;
+  /** Inline SVG content for the icon */
+  iconRawContent?: string;
+  className?: string;
+}>;
+
+export function CardBadge({ color, icon, iconRawContent, className, children }: CardBadgeProps) {
+  // `tag-default` keeps a badge grey when the name is absent or unknown.
+  const classNames = ['tag-default', color && `tag-${color}`, className].filter(Boolean).join(' ');
+
+  return (
+    <CardBadgeWrapper className={classNames} icon={icon} iconRawContent={iconRawContent}>
+      {children}
+    </CardBadgeWrapper>
+  );
+}
+
+const CardBadgeWrapper = styled(Badge)`
+  display: flex;
+  align-items: center;
+  margin: var(--card-badge-margin);
+  padding: var(--card-badge-padding);
+  border-radius: var(--card-badge-border-radius);
+  font-size: var(--card-badge-font-size);
+  font-weight: var(--card-badge-font-weight);
+  line-height: var(--card-badge-line-height);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  --badge-text-color: var(--tag-color);
+  --badge-bg-color: var(--tag-bg-color);
+`;

package/src/markdoc/components/Cards/CardIcon.tsx

@@ -4,24 +4,35 @@ import styled from 'styled-components';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type CardIconProps = {
-  variant?: string;
+  variant?: 'filled' | 'ghost';
   src: string;
   rawContent?: string;
   position?: 'auto' | 'start' | 'center' | 'end';
+  color?: string;
 };
 
-export function CardIcon({ variant, src, rawContent, position }: CardIconProps) {
+export function CardIcon({ variant, src, rawContent, position, color }: CardIconProps) {
   return (
-    <CardIconWrapper $variant={variant} $position={position}>
+    <CardIconWrapper
+      className={color && `card-icon-color-${color}`}
+      $variant={variant}
+      $position={position}
+    >
       <GenericIcon icon={src} rawContent={rawContent} />
     </CardIconWrapper>
   );
 }
 
-export const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
+export const CardIconWrapper = styled.div<{
+  $variant?: 'filled' | 'ghost';
+  $position?: string;
+}>`
+  --card-icon-bg-color-hover: ${({ $variant }) => $variant === 'ghost' && 'transparent'};
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
   color: var(--card-icon-color);
+  /* An inline SVG fills from this. */
+  --icon-color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -30,7 +41,7 @@ export const CardIconWrapper = styled.div<{ $variant?: string; $position?: strin
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: var(--card-icon-padding);
+  padding: ${({ $variant }) => ($variant === 'ghost' ? 0 : `var(--card-icon-padding)`)};
   border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;

package/src/markdoc/components/Cards/variables.dark.ts

@@ -21,5 +21,37 @@ export const cardsDarkMode = css`
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--color-warm-grey-8);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-6);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-4);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-6);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-7);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-7);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-6);
+  }
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */

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

@@ -21,24 +21,38 @@ export const cards = css`
   --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
-  --card-link-icon-width: var(--h3-font-size);
-  --card-link-icon-height: var(--h3-font-size);
+  --card-link-icon-width: 14px;
+  --card-link-icon-height: 14px;
   --card-border-width: 1px;
-  --card-image-border-radius: var(--border-radius-md);
+  --card-image-border-radius: var(--border-radius-xl);
   --card-image-aspect-ratio: 16 / 9;
-  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-border-radius: var(--border-radius-lg);
   --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
   --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
   --card-icon-gap: var(--spacing-base);
-  --card-title-margin: 0;
+  --card-title-margin: 0 var(--spacing-xs) 0 0;
   --card-title-font-weight: var(--font-weight-semibold);
+  --card-title-row-gap: var(--spacing-xxs);
   --card-content-gap: 4px;
   --card-padding: 16px 20px;
   --card-body-font-size: var(--font-size-base);
   --card-body-line-height: var(--line-height-base);
+  --card-cta-margin-top: var(--spacing-base);
+  --card-cta-gap: var(--spacing-xxs);
+  --card-cta-font-size: var(--font-size-base);
+  --card-cta-font-weight: var(--font-weight-regular);  
+  --card-cta-text-color: var(--text-color-secondary);
+  --card-cta-icon-width: 14px;
+  --card-cta-icon-height: 14px;
+  --card-badge-margin: 0 var(--spacing-xxs) 0 0 ;
+  --card-badge-padding: 0 var(--spacing-xxs);
+  --card-badge-border-radius: var(--badge-border-radius);
+  --card-badge-font-size: var(--font-size-sm);
+  --card-badge-font-weight: var(--font-weight-regular);
+  --card-badge-line-height: var(--line-height-sm);
 
   /**
    * @tokens Card variants
@@ -74,7 +88,7 @@ export const cards = css`
     --card-bg-color: transparent;
     --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
-    --card-border-radius: var(--border-radius-md);
+    --card-border-radius: var(--border-radius-xl);
     --card-padding: var(--spacing-xs) 0;
     --card-icon-border-color-hover: var(--card-icon-border-color);
     --card-icon-bg-color-hover: var(--card-icon-bg-color);
@@ -82,5 +96,65 @@ export const cards = css`
     --card-hover-transition: initial;
   }
 
+  /**
+   * @tokens Card icon colors
+   */
+  .card-icon-color-red {
+    --card-icon-color: var(--color-red-7);
+  }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-8);
+  }
+
+  .card-icon-color-blue {
+    --card-icon-color: var(--color-blue-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--text-color-secondary);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-8);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-7);
+  }
+
+  .card-icon-color-purple {
+    --card-icon-color: var(--color-purple-7);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-8);
+  }
+
+  .card-icon-color-raspberry {
+    --card-icon-color: var(--color-raspberry-7);
+  }
+
+  .card-icon-color-orange {
+    --card-icon-color: var(--color-orange-7);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-8);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-8);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-8);
+  }
+
+  .card-icon-color-blueberry {
+    --card-icon-color: var(--color-blueberry-7);
+  }
+
+  // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -63,6 +63,7 @@ const CodePanelWrapper = styled.div`
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
+  overflow: clip;
   --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   position: sticky;

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -153,7 +153,7 @@ const StepContent = styled.div.withConfig({
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
   padding: var(--spacing-md) var(--spacing-lg);
   background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
-  border-radius: var(--border-radius);
+  border-radius: var(--code-step-border-radius);
 
   &:hover {
     background-color: ${({ isActive }) =>

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

@@ -7,10 +7,11 @@ export const codeWalkthrough = css`
 --code-step-bg-active: var(--layer-color);
 --code-step-bg-hover: var(--color-hover-base);
 --code-step-bg-active-hover: var(--layer-color-hover);
+--code-step-border-radius: var(--border-radius-lg);
 
 --code-panel-bg-color: var(--layer-color);
 --code-panel-line-numbering-color: var(--text-color-disabled);
 --code-panel-header-height: var(--spacing-lg);
 --code-panel-border-color: var(--border-color-secondary);
---code-panel-border-radius: var(--border-radius);
+--code-panel-border-radius: var(--border-radius-xl);
 `;

package/src/markdoc/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, isValidElement } from 'react';
+import React, { createElement, isValidElement, useContext } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
@@ -9,6 +9,7 @@ import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { PageActionsContext } from '@redocly/theme/core/contexts';
 import {
   ANCHOR_CLASS,
   HEADING_ANCHOR_CLASS,
@@ -65,8 +66,10 @@ export function Heading({
   const { usePageProps } = useThemeHooks();
   const pageProps = usePageProps();
 
-  const isMarkdownPage =
-    pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
+  // The page-type fallback is only for backward compatibility; templates set the scope.
+  const withPageActions =
+    useContext(PageActionsContext) ??
+    (pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc');
   const headingTextId = `${id}-heading-text`;
 
   const linkEl = (
@@ -101,7 +104,7 @@ export function Heading({
       <HeadingContentWrapper>
         {linkEl}
         {headingText}
-        {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+        {withPageActions && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
       </HeadingContentWrapper>
     </div>
   );

package/src/markdoc/components/Tabs/TabList.tsx

@@ -173,6 +173,7 @@ export function TabList({
   });
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     onReadyChange?.(isReady);
   }, [isReady, onReadyChange]);
 
@@ -281,6 +282,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
   });
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
     const container = tabsContainerRef.current;
 
@@ -302,6 +304,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
       const moreButtonRect = moreButton.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
 
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
       setHighlightStyle({
         left: moreButtonRect.left - containerRect.left,
         width: moreButtonRect.width,
@@ -319,6 +322,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
 
     if (visibleTabs.includes(activeIndex)) {
       activeTabElement.classList.add('active');
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
       setHighlightStyle({ left: offsetLeft, width: offsetWidth });
       return;
     }
@@ -400,8 +404,8 @@ export const TabItem = styled.li.withConfig({
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -144,7 +144,9 @@ function useValidateActiveTab(
   initialTab: string,
 ) {
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     const availableLabels = childrenArray.map((child) => child.props.label);
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
       setActiveTab(initialTab);
     }
@@ -221,8 +223,8 @@ export const TabContent = styled.div`
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }

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

@@ -50,7 +50,7 @@ export const markdownTabs = css`
   --md-tabs-small-tab-font-size: var(--font-size-base); // @presenter FontSize
   --md-tabs-small-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
-  --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-active-tab-text-color: var(--color-primary-text, var(--md-tabs-active-tab-text-color-legacy)); // @presenter Color
   --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -63,14 +63,14 @@ export const markdownTabs = css`
   --md-tabs-medium-active-tab-line-height: var(--md-tabs-medium-tab-line-height); // @presenter LineHeight
   --md-tabs-medium-active-tab-padding: var(--md-tabs-medium-tab-padding); // @presenter Spacing
   --md-tabs-medium-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-medium-active-tab-border-radius: 6px; // @presenter BorderRadius
+  --md-tabs-medium-active-tab-border-radius: var(--border-radius-lg); // @presenter BorderRadius
 
   --md-tabs-small-active-tab-font-size: var(--md-tabs-small-tab-font-size); // @presenter FontSize
   --md-tabs-small-active-tab-font-weight: var(--md-tabs-small-tab-font-weight); // @presenter FontWeight
   --md-tabs-small-active-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-active-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-active-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-active-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
   --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -90,7 +90,7 @@ export const markdownTabs = css`
   --md-tabs-small-hover-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-hover-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-hover-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-hover-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-hover-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-tab-text-disabled-color: var(--text-color-disabled); // @presenter Color
 

package/src/markdoc/components/default.ts

@@ -1,3 +1,5 @@
+export * from '@redocly/theme/markdoc/components/Accordion/Accordion';
+export * from '@redocly/theme/markdoc/components/Accordion/AccordionGroup';
 export * from '@redocly/theme/markdoc/components/Admonition/Admonition';
 export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';

package/src/markdoc/default.ts

@@ -8,6 +8,8 @@ export * from '@redocly/theme/markdoc/attributes/svg-content';
 /* Components */
 export * as components from '@redocly/theme/markdoc/components/default';
 /* Tags */
+import { accordion } from '@redocly/theme/markdoc/tags/accordion';
+import { accordionGroup } from '@redocly/theme/markdoc/tags/accordion-group';
 import { admonition } from '@redocly/theme/markdoc/tags/admonition';
 import { html } from '@redocly/theme/markdoc/tags/html';
 import { markdocExample } from '@redocly/theme/markdoc/tags/markdoc-example';
@@ -33,6 +35,8 @@ import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 import { diagram } from '@redocly/theme/markdoc/tags/diagram';
 
 export const tags = {
+  [accordion.tagName]: accordion.schema,
+  [accordionGroup.tagName]: accordionGroup.schema,
   [admonition.tagName]: admonition.schema,
   [debug.tagName]: debug.schema,
   [html.tagName]: html.schema,

package/src/markdoc/tags/accordion-group.ts

@@ -0,0 +1,8 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordionGroup: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'AccordionGroup',
+  },
+  tagName: 'accordion-group',
+};

package/src/markdoc/tags/accordion.ts

@@ -0,0 +1,12 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordion: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Accordion',
+    attributes: {
+      title: { type: String, required: true },
+      expanded: { type: Boolean, default: false },
+    },
+  },
+  tagName: 'accordion',
+};

package/src/markdoc/tags/admonition.ts

@@ -7,7 +7,7 @@ export const admonition: MarkdocSchemaWrapper = {
         type: String,
         required: true,
         default: 'info',
-        matches: ['warning', 'info', 'danger', 'success', 'default'],
+        matches: ['warning', 'info', 'danger', 'success', 'idea'],
       },
       name: { type: String },
     },

package/src/markdoc/tags/card.ts

@@ -52,7 +52,21 @@ export const card: MarkdocSchemaWrapper = {
         type: String,
         matches: ['filled', 'ghost'],
       },
+      iconColor: { type: String },
       to: { type: String, resolver: 'link' },
+      linkIcon: {
+        type: String,
+        matches: ['arrow', 'chevron'],
+      },
+      cta: { type: String },
+      badge: { type: String },
+      badgeColor: { type: String },
+      badgeIcon: { type: String, resolver: 'relativeOrCdnIcon' },
+      badgeIconRawContent: {
+        // internal use only
+        type: String,
+        render: true,
+      },
     },
   },
   tagName: 'card',