@redocly/theme 0.59.0-next.5 → 0.59.0-next.7

package/lib/components/Catalog/CatalogEntity/CatalogEntityInfoBar.js

@@ -25,6 +25,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) => hoverEffect &&
     `

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -14,6 +14,7 @@ const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
 const Image_1 = require("../../components/Image/Image");
 const core_1 = require("../../core");
 const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
+const CubeIcon_1 = require("../../icons/CubeIcon/CubeIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
 const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
     var _a, _b;
@@ -34,7 +35,7 @@ const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogCo
     if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
         return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
     }
-    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
+    return react_1.default.createElement(CubeIcon_1.CubeIcon, { color: "var(--catalog-entity-icon-color)" });
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
     const themeConfig = (0, core_1.useThemeConfig)();

package/lib/components/Catalog/variables.js

@@ -99,7 +99,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 

package/lib/core/hooks/menu/use-nested-menu.js

@@ -71,7 +71,7 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
         }
         const [firstChild] = item.items;
         if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-            yield (0, load_and_navigate_1.loadAndNavigate)({ navigate, to: firstChild.link });
+            yield (0, load_and_navigate_1.loadAndNavigate)({ navigate, to: (0, urls_1.withPathPrefix)(firstChild.link) });
         }
         setIsExpanded(!isExpanded);
     }), [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/lib/core/hooks/use-product-picker.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const utils_1 = require("../utils");
 function useProductPicker() {
     const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, use_theme_hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
@@ -14,7 +15,7 @@ function useProductPicker() {
         if (!product)
             return;
         telemetry.sendProductPickedMessage({ product: product.slug });
-        loadAndNavigate({ navigate, to: product.link });
+        loadAndNavigate({ navigate, to: (0, utils_1.withPathPrefix)(product.link) });
     }
     return {
         currentProduct,

package/lib/icons/CubeIcon/CubeIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CubeIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/CubeIcon/CubeIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CubeIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, props),
+    react_1.default.createElement("path", { d: "M14.252 4.06812L8.25195 0.568119C8.17548 0.523507 8.08853 0.5 8 0.5C7.91147 0.5 7.82452 0.523507 7.74805 0.568119L1.74805 4.06812C1.67257 4.11215 1.60994 4.1752 1.56642 4.25099C1.5229 4.32677 1.5 4.41263 1.5 4.50002V11.5C1.5 11.5874 1.5229 11.6733 1.56642 11.7491C1.60994 11.8248 1.67257 11.8879 1.74805 11.9319L7.74805 15.4319C7.82452 15.4765 7.91147 15.5 8 15.5C8.08853 15.5 8.17548 15.4765 8.25195 15.4319L14.252 11.9319C14.3274 11.8879 14.3901 11.8248 14.4336 11.7491C14.4771 11.6733 14.5 11.5874 14.5 11.5V4.50002C14.5 4.41263 14.4771 4.32677 14.4336 4.25099C14.3901 4.1752 14.3274 4.11215 14.252 4.06812ZM8 1.57887L13.0078 4.50002L8 7.42117L2.9922 4.50002L8 1.57887ZM2.5 5.37062L7.5 8.28712V14.1294L2.5 11.2129V5.37062ZM8.5 14.1294V8.28712L13.5 5.37062V11.2129L8.5 14.1294Z", fill: "currentColor" })));
+exports.CubeIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CubeIcon/CubeIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CubeIcon.js.map

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

@@ -43,6 +43,7 @@ const ContentWrapper = styled_components_1.default.div `
   flex-direction: column;
   flex-shrink: 1;
   gap: var(--card-content-gap);
+  width: 100%;
 `;
 const Title = styled_components_1.default.h3 `
   margin: var(--card-title-margin);
@@ -82,28 +83,6 @@ const Body = styled_components_1.default.div `
   > *:last-child {
     margin-bottom: 0;
   }
-
-  /* Icon link styles */
-  & a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-
-    & svg {
-      width: 1.2em;
-      height: 1.2em;
-      margin-right: 0.25em;
-      vertical-align: middle;
-
-      & g {
-        fill: var(--link-color-primary);
-      }
-    }
-  }
-
-  & a:visited > span > svg > g {
-    fill: var(--link-color-visited);
-  }
 `;
 const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
     className: getCardWrapperClass($isCardLink, $variant),
@@ -149,12 +128,6 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
       }
     }
   }
-
-  && ul {
-    list-style: none;
-    padding-left: 0;
-    margin: var(--spacing-xs) 0;
-  }
 `;
 const getCardWrapperClass = ($isCardLink, $variant) => {
     let classes = [];

package/lib/markdoc/tags/card.js

@@ -54,7 +54,6 @@ exports.card = {
             },
             to: { type: String, resolver: 'link' },
         },
-        children: ['paragraph', 'tag', 'list'],
     },
     tagName: 'card',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.5",
+  "version": "0.59.0-next.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -41,6 +41,7 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) =>
     hoverEffect &&

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

package/src/components/Catalog/variables.ts

@@ -97,7 +97,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 

package/src/core/hooks/menu/use-nested-menu.ts

@@ -6,7 +6,7 @@ import type { MenuItemProps } from '../../types/sidebar';
 import { useMenuItemExpanded } from './use-menu-item-expanded';
 import { useCollapse } from './use-collapse';
 import { loadAndNavigate } from '../../utils/load-and-navigate';
-import { withoutPathPrefix } from '../../utils/urls';
+import { withoutPathPrefix, withPathPrefix } from '../../utils/urls';
 
 type NestedMenuProps = MenuItemProps & {
   labelRef?: React.RefObject<HTMLElement | null>;
@@ -78,7 +78,7 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
 
     const [firstChild] = item.items;
     if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-      await loadAndNavigate({ navigate, to: firstChild.link });
+      await loadAndNavigate({ navigate, to: withPathPrefix(firstChild.link) });
     }
     setIsExpanded(!isExpanded);
   }, [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/src/core/hooks/use-product-picker.ts

@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { useThemeHooks } from './use-theme-hooks';
+import { withPathPrefix } from '../utils';
 
 export function useProductPicker() {
   const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
@@ -12,7 +13,7 @@ export function useProductPicker() {
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
     telemetry.sendProductPickedMessage({ product: product.slug });
-    loadAndNavigate({ navigate, to: product.link });
+    loadAndNavigate({ navigate, to: withPathPrefix(product.link) });
   }
   return {
     currentProduct,

package/src/icons/CubeIcon/CubeIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M14.252 4.06812L8.25195 0.568119C8.17548 0.523507 8.08853 0.5 8 0.5C7.91147 0.5 7.82452 0.523507 7.74805 0.568119L1.74805 4.06812C1.67257 4.11215 1.60994 4.1752 1.56642 4.25099C1.5229 4.32677 1.5 4.41263 1.5 4.50002V11.5C1.5 11.5874 1.5229 11.6733 1.56642 11.7491C1.60994 11.8248 1.67257 11.8879 1.74805 11.9319L7.74805 15.4319C7.82452 15.4765 7.91147 15.5 8 15.5C8.08853 15.5 8.17548 15.4765 8.25195 15.4319L14.252 11.9319C14.3274 11.8879 14.3901 11.8248 14.4336 11.7491C14.4771 11.6733 14.5 11.5874 14.5 11.5V4.50002C14.5 4.41263 14.4771 4.32677 14.4336 4.25099C14.3901 4.1752 14.3274 4.11215 14.252 4.06812ZM8 1.57887L13.0078 4.50002L8 7.42117L2.9922 4.50002L8 1.57887ZM2.5 5.37062L7.5 8.28712V14.1294L2.5 11.2129V5.37062ZM8.5 14.1294V8.28712L13.5 5.37062V11.2129L8.5 14.1294Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const CubeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CubeIcon/CubeIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

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

@@ -103,6 +103,7 @@ const ContentWrapper = styled.div`
   flex-direction: column;
   flex-shrink: 1;
   gap: var(--card-content-gap);
+  width: 100%;
 `;
 
 const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
@@ -146,28 +147,6 @@ const Body = styled.div<{ $lineClamp?: number }>`
   > *:last-child {
     margin-bottom: 0;
   }
-
-  /* Icon link styles */
-  & a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-
-    & svg {
-      width: 1.2em;
-      height: 1.2em;
-      margin-right: 0.25em;
-      vertical-align: middle;
-
-      & g {
-        fill: var(--link-color-primary);
-      }
-    }
-  }
-
-  & a:visited > span > svg > g {
-    fill: var(--link-color-visited);
-  }
 `;
 
 const CardWrapper = styled.div.attrs<{
@@ -222,12 +201,6 @@ const CardWrapper = styled.div.attrs<{
       }
     }
   }
-
-  && ul {
-    list-style: none;
-    padding-left: 0;
-    margin: var(--spacing-xs) 0;
-  }
 `;
 
 const getCardWrapperClass = ($isCardLink: boolean, $variant?: string) => {

package/src/markdoc/tags/card.ts

@@ -54,7 +54,6 @@ export const card: MarkdocSchemaWrapper = {
       },
       to: { type: String, resolver: 'link' },
     },
-    children: ['paragraph', 'tag', 'list'],
   },
   tagName: 'card',
 };