@redocly/theme 0.42.0 → 0.42.2

package/lib/markdoc/components/Cards/Card.d.ts

@@ -9,7 +9,7 @@ export type CardProps = React.PropsWithChildren<{
     layout?: 'horizontal' | 'vertical' | 'combined';
     variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
     iconVariant?: 'filled' | 'ghost';
-    align: 'start' | 'center' | 'end';
+    align?: 'start' | 'center' | 'end';
     to?: string;
 }>;
 export declare function Card({ title, image, icon, iconRawContent, imagePosition, layout, variant, lineClamp, iconVariant, align, to, children, }: CardProps): React.JSX.Element;

package/lib/markdoc/components/Cards/Card.js

@@ -9,24 +9,24 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
+const Link_1 = require("../../../components/Link/Link");
 function Card({ title, image, icon, iconRawContent, imagePosition = 'start', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
     const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
-    // Get align values
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
-    iconVariant = (iconVariant !== null && iconVariant !== void 0 ? iconVariant : variant === 'ghost') ? 'filled' : 'ghost';
-    return (react_1.default.createElement(CardWrapper, { as: to ? 'a' : 'div', href: to, "aria-labelledby": cardTitleId, variant: variant, layout: layout, isCardLink: !!to },
+    iconVariant = iconVariant !== null && iconVariant !== void 0 ? iconVariant : (variant === 'ghost' ? 'filled' : 'ghost');
+    return (react_1.default.createElement(CardWrapper, { as: to ? Link_1.Link : 'div', to: to, "aria-labelledby": cardTitleId, variant: variant, layout: layout, isCardLink: !!to },
         react_1.default.createElement(react_1.default.Fragment, null,
             image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
             react_1.default.createElement(CardContentWrapper, { layout: layout, alignItems: alignItems, textAlign: textAlign, hasImage: image !== undefined },
                 icon && react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent }),
                 react_1.default.createElement(ContentWrapper, null,
-                    react_1.default.createElement(Title, { id: cardTitleId, isCardLink: !!to, justifyContent: justifyContent },
+                    react_1.default.createElement(Title, { id: cardTitleId, "$isCardLink": !!to, "$justifyContent": justifyContent },
                         title,
                         !!to && react_1.default.createElement(CardLinkIcon, null)),
-                    react_1.default.createElement(Body, { lineClamp: lineClamp }, children))))));
+                    react_1.default.createElement(Body, { "$lineClamp": lineClamp }, children))))));
 }
 exports.Card = Card;
 const CardContentWrapper = styled_components_1.default.div `
@@ -51,7 +51,7 @@ const Title = styled_components_1.default.h3 `
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
-  justify-content: ${({ justifyContent }) => justifyContent};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
 const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
@@ -66,10 +66,10 @@ const Body = styled_components_1.default.div `
   font-size: var(--card-body-font-size);
   line-height: var(--card-body-line-height);
 
-  ${({ lineClamp }) => lineClamp &&
+  ${({ $lineClamp }) => $lineClamp &&
     `
   display: -webkit-box;
-  -webkit-line-clamp: ${lineClamp};
+  -webkit-line-clamp: ${$lineClamp};
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;`}
@@ -104,11 +104,11 @@ const Body = styled_components_1.default.div `
     fill: var(--link-color-visited);
   }
 `;
-const CardWrapper = styled_components_1.default.div.attrs(({ isCardLink, variant }) => ({
-    className: getCardWrapperClass(isCardLink, variant),
+const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
+    className: getCardWrapperClass($isCardLink, $variant),
 })) `
   display: flex;
-  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
   width: 100%;
   height: 100%;
   border-radius: var(--card-border-radius);
@@ -125,7 +125,7 @@ const CardWrapper = styled_components_1.default.div.attrs(({ isCardLink, variant
   box-shadow: var(--card-box-shadow);
 
   && > img {
-    ${({ layout }) => layout === 'horizontal' &&
+    ${({ $layout }) => $layout === 'horizontal' &&
     `
       max-width: 33%;
       width: auto;
@@ -155,10 +155,10 @@ const CardWrapper = styled_components_1.default.div.attrs(({ isCardLink, variant
     margin: var(--spacing-xs) 0;
   }
 `;
-const getCardWrapperClass = (isCardLink, variant) => {
+const getCardWrapperClass = ($isCardLink, $variant) => {
     let classes = [];
-    classes.push(`card-variant-${variant}`);
-    if (isCardLink) {
+    classes.push(`card-variant-${$variant}`);
+    if ($isCardLink) {
         classes.push('card-link');
     }
     return classes.join(' ');

package/lib/markdoc/components/Cards/CardIcon.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
 function CardIcon({ variant, src, rawContent }) {
-    return (react_1.default.createElement(CardIconWrapper, { variant: variant }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
+    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
 }
 exports.CardIcon = CardIcon;
 const CardImg = styled_components_1.default.img `
@@ -36,11 +36,11 @@ const CardIconWrapper = styled_components_1.default.div `
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: ${({ variant }) => (variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;
 
-  background-color: ${({ variant }) => variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
-  border: ${({ variant }) => variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
+  background-color: ${({ $variant }) => $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
+  border: ${({ $variant }) => $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
 `;
 //# sourceMappingURL=CardIcon.js.map

package/lib/markdoc/components/Cards/CardImage.js

@@ -7,7 +7,7 @@ exports.CardImage = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function CardImage({ src, alt, position }) {
-    return react_1.default.createElement(Image, { src: src, alt: alt, position: position });
+    return react_1.default.createElement(Image, { src: src, alt: alt, "$position": position });
 }
 exports.CardImage = CardImage;
 const Image = styled_components_1.default.img `
@@ -16,6 +16,6 @@ const Image = styled_components_1.default.img `
   flex-shrink: 0;
   object-fit: cover;
 
-  order: ${({ position }) => (position === 'end' ? 1 : 0)};
+  order: ${({ $position }) => ($position === 'end' ? 1 : 0)};
 `;
 //# sourceMappingURL=CardImage.js.map

package/lib/markdoc/components/Cards/Cards.js

@@ -30,15 +30,21 @@ exports.Cards = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 function Cards({ cardMinWidth = 240, columns, className, children, ariaLabel }) {
-    return (React.createElement(GridLayout, { cardMinWidth: cardMinWidth, columns: columns, className: className, "aria-label": ariaLabel }, children));
+    return (React.createElement(GridLayout, { "$cardMinWidth": cardMinWidth, "$columns": columns, className: className, "aria-label": ariaLabel }, children));
 }
 exports.Cards = Cards;
 const GridLayout = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: ${({ cardMinWidth, columns }) => `repeat(${columns || 'auto-fit'}, minmax(${cardMinWidth}px, 1fr))`};
+  grid-template-columns: ${({ $cardMinWidth, $columns }) => `repeat(auto-fit, minmax(${getCardMinWidth($cardMinWidth, $columns)}, 1fr))`};
   gap: var(--cards-gap);
   width: 100%;
   margin-top: var(--spacing-base);
   margin-bottom: var(--spacing-base);
 `;
+function getColumnWidth(columns) {
+    return `calc((100% - ${columns - 1} * var(--cards-gap)) / ${columns})`;
+}
+function getCardMinWidth(cardMinWidth, columns) {
+    return columns ? `max(${getColumnWidth(columns)}, ${cardMinWidth}px)` : `${cardMinWidth}px`;
+}
 //# sourceMappingURL=Cards.js.map

package/lib/markdoc/tags/card.js

@@ -47,7 +47,7 @@ exports.card = {
                 type: String,
                 matches: ['filled', 'ghost'],
             },
-            to: { type: String },
+            to: { type: String, resolver: 'link' },
         },
         children: ['paragraph', 'tag', 'list'],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.42.0",
+  "version": "0.42.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { CardImage } from '@redocly/theme/markdoc/components/Cards/CardImage';
 import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
   title: string;
@@ -15,7 +16,7 @@ export type CardProps = React.PropsWithChildren<{
   layout?: 'horizontal' | 'vertical' | 'combined';
   variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
   iconVariant?: 'filled' | 'ghost';
-  align: 'start' | 'center' | 'end';
+  align?: 'start' | 'center' | 'end';
   to?: string;
 }>;
 
@@ -35,17 +36,16 @@ export function Card({
 }: CardProps) {
   const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
   const cardTitleId = `card-title-${titleNoSpaces}`;
-  // Get align values
   const justifyContent =
     align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
   const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
   const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
-  iconVariant = iconVariant ?? variant === 'ghost' ? 'filled' : 'ghost';
+  iconVariant = iconVariant ?? (variant === 'ghost' ? 'filled' : 'ghost');
 
   return (
     <CardWrapper
-      as={to ? 'a' : 'div'}
-      href={to}
+      as={to ? Link : 'div'}
+      to={to}
       aria-labelledby={cardTitleId}
       variant={variant}
       layout={layout}
@@ -61,11 +61,11 @@ export function Card({
         >
           {icon && <CardIcon variant={iconVariant} src={icon} rawContent={iconRawContent} />}
           <ContentWrapper>
-            <Title id={cardTitleId} isCardLink={!!to} justifyContent={justifyContent}>
+            <Title id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
               {title}
               {!!to && <CardLinkIcon />}
             </Title>
-            <Body lineClamp={lineClamp}>{children}</Body>
+            <Body $lineClamp={lineClamp}>{children}</Body>
           </ContentWrapper>
         </CardContentWrapper>
       </>
@@ -96,13 +96,13 @@ const ContentWrapper = styled.div`
   gap: var(--card-content-gap);
 `;
 
-const Title = styled.h3<{ isCardLink: boolean; justifyContent: string }>`
+const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
   margin: var(--card-title-margin);
   font-weight: var(--card-title-font-weight);
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
-  justify-content: ${({ justifyContent }) => justifyContent};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
 
@@ -114,16 +114,16 @@ const CardLinkIcon = styled(ChevronRightIcon)`
   transition: opacity 0.3s, transform 0.3s;
 `;
 
-const Body = styled.div<{ lineClamp?: number }>`
+const Body = styled.div<{ $lineClamp?: number }>`
   color: var(--card-text-color);
   font-size: var(--card-body-font-size);
   line-height: var(--card-body-line-height);
 
-  ${({ lineClamp }) =>
-    lineClamp &&
+  ${({ $lineClamp }) =>
+    $lineClamp &&
     `
   display: -webkit-box;
-  -webkit-line-clamp: ${lineClamp};
+  -webkit-line-clamp: ${$lineClamp};
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;`}
@@ -160,17 +160,17 @@ const Body = styled.div<{ lineClamp?: number }>`
 `;
 
 const CardWrapper = styled.div.attrs<{
-  variant: string;
-  isCardLink: boolean;
-}>(({ isCardLink, variant }) => ({
-  className: getCardWrapperClass(isCardLink, variant),
+  $variant: string;
+  $isCardLink: boolean;
+}>(({ $isCardLink, $variant }) => ({
+  className: getCardWrapperClass($isCardLink, $variant),
 }))<{
-  variant: string;
-  isCardLink: boolean;
-  layout: string;
+  $variant: string;
+  $isCardLink: boolean;
+  $layout: string;
 }>`
   display: flex;
-  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
   width: 100%;
   height: 100%;
   border-radius: var(--card-border-radius);
@@ -187,8 +187,8 @@ const CardWrapper = styled.div.attrs<{
   box-shadow: var(--card-box-shadow);
 
   && > img {
-    ${({ layout }) =>
-      layout === 'horizontal' &&
+    ${({ $layout }) =>
+      $layout === 'horizontal' &&
       `
       max-width: 33%;
       width: auto;
@@ -219,12 +219,12 @@ const CardWrapper = styled.div.attrs<{
   }
 `;
 
-const getCardWrapperClass = (isCardLink: boolean, variant?: string) => {
+const getCardWrapperClass = ($isCardLink: boolean, $variant?: string) => {
   let classes = [];
 
-  classes.push(`card-variant-${variant}`);
+  classes.push(`card-variant-${$variant}`);
 
-  if (isCardLink) {
+  if ($isCardLink) {
     classes.push('card-link');
   }
 

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

@@ -11,7 +11,7 @@ export type CardIconProps = {
 
 export function CardIcon({ variant, src, rawContent }: CardIconProps) {
   return (
-    <CardIconWrapper variant={variant}>
+    <CardIconWrapper $variant={variant}>
       {rawContent ? <CardSvg fileRawContent={rawContent} /> : <CardImg src={src} />}
     </CardIconWrapper>
   );
@@ -36,7 +36,7 @@ const CardSvg = styled(InlineSvg)`
   }
 `;
 
-const CardIconWrapper = styled.div<Omit<CardIconProps, 'src'>>`
+const CardIconWrapper = styled.div<{ $variant?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -44,12 +44,12 @@ const CardIconWrapper = styled.div<Omit<CardIconProps, 'src'>>`
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: ${({ variant }) => (variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;
 
-  background-color: ${({ variant }) =>
-    variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
-  border: ${({ variant }) =>
-    variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
+  background-color: ${({ $variant }) =>
+    $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
+  border: ${({ $variant }) =>
+    $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
 `;

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

@@ -8,14 +8,14 @@ export type CardImageProps = {
 };
 
 export function CardImage({ src, alt, position }: CardImageProps) {
-  return <Image src={src} alt={alt} position={position} />;
+  return <Image src={src} alt={alt} $position={position} />;
 }
 
-const Image = styled.img<{ position?: string }>`
+const Image = styled.img<{ $position?: string }>`
   width: 100%;
   height: 100px;
   flex-shrink: 0;
   object-fit: cover;
 
-  order: ${({ position }) => (position === 'end' ? 1 : 0)};
+  order: ${({ $position }) => ($position === 'end' ? 1 : 0)};
 `;

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

@@ -11,8 +11,8 @@ export type CardsProps = React.PropsWithChildren<{
 export function Cards({ cardMinWidth = 240, columns, className, children, ariaLabel }: CardsProps) {
   return (
     <GridLayout
-      cardMinWidth={cardMinWidth}
-      columns={columns}
+      $cardMinWidth={cardMinWidth}
+      $columns={columns}
       className={className}
       aria-label={ariaLabel}
     >
@@ -22,14 +22,22 @@ export function Cards({ cardMinWidth = 240, columns, className, children, ariaLa
 }
 
 const GridLayout = styled.div<{
-  cardMinWidth: number;
-  columns?: number;
+  $cardMinWidth: number;
+  $columns?: number;
 }>`
   display: grid;
-  grid-template-columns: ${({ cardMinWidth, columns }) =>
-    `repeat(${columns || 'auto-fit'}, minmax(${cardMinWidth}px, 1fr))`};
+  grid-template-columns: ${({ $cardMinWidth, $columns }) =>
+    `repeat(auto-fit, minmax(${getCardMinWidth($cardMinWidth, $columns)}, 1fr))`};
   gap: var(--cards-gap);
   width: 100%;
   margin-top: var(--spacing-base);
   margin-bottom: var(--spacing-base);
 `;
+
+function getColumnWidth(columns: number) {
+  return `calc((100% - ${columns - 1} * var(--cards-gap)) / ${columns})`;
+}
+
+function getCardMinWidth(cardMinWidth: number, columns?: number) {
+  return columns ? `max(${getColumnWidth(columns)}, ${cardMinWidth}px)` : `${cardMinWidth}px`;
+}

package/src/markdoc/tags/card.ts

@@ -47,7 +47,7 @@ export const card: MarkdocSchemaWrapper = {
         type: String,
         matches: ['filled', 'ghost'],
       },
-      to: { type: String },
+      to: { type: String, resolver: 'link' },
     },
     children: ['paragraph', 'tag', 'list'],
   },