@redocly/theme 0.42.0 → 0.42.1

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

@@ -9,15 +9,15 @@ 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 },
+    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 },

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.1",
   "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;
@@ -35,7 +36,6 @@ 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';
@@ -44,8 +44,8 @@ export function Card({
 
   return (
     <CardWrapper
-      as={to ? 'a' : 'div'}
-      href={to}
+      as={to ? Link : 'div'}
+      to={to}
       aria-labelledby={cardTitleId}
       variant={variant}
       layout={layout}

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'],
   },