@redocly/theme 0.56.0-rc.2 → 0.56.1

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ButtonSize } from '@redocly/theme/components/Button/Button';
+
+type ButtonGroupVariant = 'outlined';
+
+type ButtonGroupProps = {
+  variant?: ButtonGroupVariant;
+  size?: ButtonSize;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
+  const { variant = 'outlined', className = '', children, size = 'medium' } = props;
+
+  return (
+    <ButtonGroupWrapper
+      data-component-name="Button/ButtonGroup"
+      className={`button-group-${variant} button-group-size-${size} ${className}`}
+    >
+      {children}
+    </ButtonGroupWrapper>
+  );
+}
+
+const ButtonGroupWrapper = styled.div`
+  display: flex;
+  line-height: var(--button-line-height);
+
+  .button {
+    border-radius: 0;
+  }
+
+  & > .button:first-child,
+  *:first-child > .button {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+  }
+
+  & > .button:last-child,
+  *:last-child > .button {
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+  }
+
+  & > .button:not(:first-child),
+  *:not(:first-child) > .button {
+    border-left: none;
+  }
+`;

package/src/components/Button/variables.ts

@@ -91,9 +91,12 @@ export const button = css`
     * @tokens Button size
     */
 
-  .button-size-small {
+  .button-size-small,
+  .button-group-size-small .button {
+    --button-font-size: var(--font-size-base);
     --button-border-radius: var(--border-radius);
     --button-padding: 1px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
     
     --button-icon-size: 14px;
     --button-icon-padding: 5px; /* Padding for small buttons with only icon */
@@ -101,11 +104,25 @@ export const button = css`
     --button-icon-right-padding: 1px 10px 1px var(--spacing-sm); /* Padding for small buttons with icon on the right */
   }
 
-  .button-size-large {
+  .button-size-medium,
+  .button-group-size-medium .button {
+    --button-font-size: var(--font-size-base);
+    --button-border-radius: var(--border-radius-md);
+    --button-padding: 5px var(--spacing-sm);
+    --button-line-height: var(--line-height-base);
+
+    --button-icon-size: 16px;
+    --button-icon-padding: var(--spacing-xs); /* Padding for buttons with only icon */
+    --button-icon-left-padding: 5px var(--spacing-base) 5px 14px; /* Padding for buttons with icon on the left */
+    --button-icon-right-padding: 5px 14px 5px var(--spacing-base); /* Padding for buttons with icon on the right */
+  }
+
+  .button-size-large,
+  .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-line-height: var(--line-height-lg); // @presenter LineHeight
-    --border-radius: var(--border-radius-lg);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: var(--spacing-xs) var(--spacing-md);
+    --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
     --button-icon-size: 18px;
     --button-icon-padding: 11px; /* Padding for large buttons with only icon */
@@ -153,7 +170,8 @@ export const button = css`
     --button-border-color-danger-pressed: transparent;
   }
 
-  .button-variant-outlined {
+  .button-variant-outlined,
+  .button-group-outlined .button {
     --button-color: var(--button-content-color-custom); // @presenter Color
     --button-color-hover: var(--button-content-color-custom-hover); // @presenter Color
     --button-color-active: var(--button-content-color-custom-hover); // @presenter Color
@@ -163,6 +181,15 @@ export const button = css`
     --button-bg-color-disabled: transparent; // @presenter Color
     --button-border-width: 1px; 
     --button-border-width-disabled: 1px;
+    --button-bg-color: transparent; // @presenter Color
+    --button-border-color-disabled: var(--color-warm-grey-2); // @presenter Color
+    --button-border-color-danger: var(--color-raspberry-6); // @presenter Color
+    --button-border-color-danger-hover: var(--color-raspberry-7); // @presenter Color
+    --button-border-color-danger-pressed: var(--color-raspberry-8); // @presenter Color
+  }
+
+  .button-group-outlined .button {
+    --button-bg-color-hover: var(--color-hover-base); // @presenter Color
   }
 
   .button-variant-text {

package/src/components/Catalog/Catalog.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogSwitcherItem } from '@redocly/theme/core';
+import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -10,7 +10,8 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
-import { getPathPrefix } from '@redocly/theme/core';
+import { getPathPrefix } from '@redocly/theme/core/utils';
+import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -34,9 +35,11 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
     >
       <CardContent>
         <CardHeader>
-          <HeaderIconWrapper>
-            <CatalogEntityIcon entityType={entity.type} />
-          </HeaderIconWrapper>
+          <TooltipComponent tip={entity.type} placement="bottom" className="catalog">
+            <HeaderIconWrapper>
+              <CatalogEntityIcon entityType={entity.type} defaultColor={true} />
+            </HeaderIconWrapper>
+          </TooltipComponent>
           <CardTitle>
             <CatalogHighlight>{entity.title}</CatalogHighlight>
           </CardTitle>
@@ -57,6 +60,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                 },
                 icon: <GraphIcon color="var(--color-green-8)" />,
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -71,6 +75,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
                 },
+                textTransform: 'none',
               }}
             />
           </MetadataColumn>
@@ -89,6 +94,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
             },
             borderless: true,
             color: 'grey',
+            textTransform: 'none',
           }}
           itemsToShow={3}
         />
@@ -163,6 +169,7 @@ const CardContent = styled.div`
 `;
 
 const CardFooter = styled.div`
+  height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -176,8 +183,7 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
+  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

package/src/components/Catalog/CatalogEntitiesEmptyState.tsx

@@ -1,12 +1,35 @@
 import React, { JSX } from 'react';
 import styled from 'styled-components';
 
-export function CatalogEntitiesEmptyState(): JSX.Element {
+import { HexagonIcon } from '@redocly/theme/icons/HexagonIcon/HexagonIcon';
+
+interface CatalogEntitiesEmptyStateProps {
+  listType?: 'default' | 'team';
+}
+
+export function CatalogEntitiesEmptyState({
+  listType = 'default',
+}: CatalogEntitiesEmptyStateProps): JSX.Element {
+  if (listType === 'team') {
+    return (
+      <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
+        <EmptyStateIconWrapper>
+          <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
+        </EmptyStateIconWrapper>
+        <EmptyStateHeader>No team members yet</EmptyStateHeader>
+        <EmptyStateText>Your team members will appear here</EmptyStateText>
+        <EmptyStateText>once they&apos;ve been added to the team.</EmptyStateText>
+      </EmptyStateWrapper>
+    );
+  }
   return (
     <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
-      <EmptyStateHeader>No entities yet</EmptyStateHeader>
-      <EmptyStateText>Start by adding your first entity to</EmptyStateText>
-      <EmptyStateText>begin building your catalog.</EmptyStateText>
+      <EmptyStateIconWrapper>
+        <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
+      </EmptyStateIconWrapper>
+      <EmptyStateHeader>No entities found</EmptyStateHeader>
+      <EmptyStateText>Try adjusting your search criteria or</EmptyStateText>
+      <EmptyStateText>check back later for new additions.</EmptyStateText>
     </EmptyStateWrapper>
   );
 }
@@ -21,6 +44,17 @@ const EmptyStateWrapper = styled.div`
   min-height: var(--catalog-empty-state-min-height);
 `;
 
+const EmptyStateIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-warm-grey-2);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-bottom: var(--spacing-xxs);
+`;
+
 const EmptyStateHeader = styled.p`
   color: var(--catalog-empty-state-header-text-color);
   font-size: var(--catalog-empty-state-header-font-size);

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

@@ -16,16 +16,15 @@ import { Menu } from '@redocly/theme/components/Menu/Menu';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-
-import { SidebarActions } from '../../SidebarActions/SidebarActions';
+import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
+import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 
 export type CatalogEntityProps = {
   entity: BffCatalogEntity;
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   initialRelations: BffCatalogRelatedEntityList;
-  mainCatalogLabelTranslationKey?: string;
-  mainCatalogSlug?: string;
 };
 
 export function CatalogEntity({
@@ -33,16 +32,31 @@ export function CatalogEntity({
   entitiesCatalogConfig,
   catalogConfig,
   initialRelations,
-  mainCatalogLabelTranslationKey,
-  mainCatalogSlug,
 }: CatalogEntityProps) {
   const { useTranslate, useCatalog } = useThemeHooks();
   const { translate } = useTranslate();
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
 
-  const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick } =
-    useCatalog();
+  const {
+    layout,
+    collapsedSidebar,
+    onChangeViewClick,
+    onChangeCollapseSidebarClick,
+    searchQuery,
+    setSearchQuery,
+  } = useCatalog();
+
+  const renderEntityContent = (): React.ReactElement => {
+    switch (entity.type) {
+      case 'data-schema':
+        return <CatalogEntitySchema entity={entity} />;
+      case 'api-operation':
+        return <CatalogEntityMethodAndPath entity={entity} />;
+      default:
+        return <CatalogEntityMetadata entity={entity} />;
+    }
+  };
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
@@ -92,14 +106,6 @@ export function CatalogEntity({
       <CatalogPageContent>
         <Breadcrumbs
           additionalBreadcrumbs={[
-            ...(mainCatalogLabelTranslationKey
-              ? [
-                  {
-                    label: translate(mainCatalogLabelTranslationKey),
-                    link: `catalogs/${mainCatalogSlug}`,
-                  },
-                ]
-              : []),
             { label: linkToMainCatalogLabel, link: linkToMainCatalog },
             { label: entity.title },
           ]}
@@ -112,7 +118,7 @@ export function CatalogEntity({
           />
           <CatalogEntityProperties entity={entity} />
           <CatalogTwoColumnsSection>
-            <CatalogEntityMetadata entity={entity} />
+            {renderEntityContent()}
             <CatalogEntityLinks entity={entity} />
           </CatalogTwoColumnsSection>
           <CatalogEntityRelations
@@ -120,6 +126,8 @@ export function CatalogEntity({
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             initialRelations={initialRelations}
+            searchQuery={searchQuery}
+            setSearchQuery={setSearchQuery}
           />
         </CatalogEntityPageWrapper>
       </CatalogPageContent>

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

@@ -3,31 +3,38 @@ import styled from 'styled-components';
 
 export type CatalogEntityInfoBarProps = {
   leftContent: ReactNode;
-  rightContent: ReactNode;
+  rightContent?: ReactNode;
   withSeparator?: boolean;
+  hoverEffect?: boolean;
+  isCodeBlock?: boolean;
 };
 
 export function CatalogEntityInfoBar({
   leftContent,
   rightContent,
   withSeparator = true,
+  hoverEffect = true,
+  isCodeBlock = false,
 }: CatalogEntityInfoBarProps): JSX.Element {
   return (
-    <InfoBarWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar">
+    <InfoBarWrapper
+      data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar"
+      hoverEffect={hoverEffect}
+    >
       <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
-      <RightColumn>{rightContent}</RightColumn>
+      {rightContent && <RightColumn isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
     </InfoBarWrapper>
   );
 }
 
-const InfoBarWrapper = styled.div`
+const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: 'left right';
   align-items: center;
 
   color: var(--catalog-card-text-color, inherit);
-  background-color: var(--catalog-card-bg-color, white);
+  background-color: var(--catalog-card-bg-color);
   border: var(--catalog-card-border-width, 1px) var(--catalog-card-border-style)
     var(--catalog-card-border-color);
   border-radius: var(--catalog-card-border-radius);
@@ -35,9 +42,14 @@ const InfoBarWrapper = styled.div`
   height: 100%;
   padding: var(--catalog-card-gap);
 
-  &:hover {
-    border-color: var(--catalog-card-border-color-hover);
-  }
+  ${({ hoverEffect }) =>
+    hoverEffect &&
+    `
+    &:hover {
+      border-color: var(--catalog-card-border-color-hover);
+      background-color: var(--bg-color-active);
+    }
+  `}
 `;
 
 const LeftColumn = styled.div<{ withSeparator?: boolean }>`
@@ -49,12 +61,16 @@ const LeftColumn = styled.div<{ withSeparator?: boolean }>`
   text-align: left;
   border-right: ${({ withSeparator }) =>
     withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  height: 100%;
+  display: flex;
+  align-items: center;
 `;
 
-const RightColumn = styled.div`
+const RightColumn = styled.div<{ isCodeBlock?: boolean }>`
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
   grid-area: right;
   justify-self: end;
   text-align: right;
+  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
 `;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
-import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { Link } from '@redocly/theme/components/Link/Link';
 
@@ -22,20 +22,17 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
       <Heading>Links</Heading>
       {links.map(([key, value]) => (
-        <CatalogEntityInfoBar
-          key={key}
-          leftContent={
-            <Label>
-              <DocumentIcon /> {value.label}
-            </Label>
-          }
-          rightContent={
-            <Link color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
-              <LaunchIcon />
-            </Link>
-          }
-          withSeparator={false}
-        />
+        <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
+          <CatalogEntityInfoBar
+            leftContent={
+              <Label>
+                <LinkIcon /> {value.label}
+              </Label>
+            }
+            rightContent={<LaunchIcon />}
+            withSeparator={false}
+          />
+        </Link>
       ))}
     </LinksWrapper>
   );

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

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { capitalize } from '@redocly/theme/core/utils';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 
@@ -13,6 +14,30 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+function renderMetadataValue(value: any): React.JSX.Element {
+  if (isPlainObject(value)) {
+    return <JsonViewerWrapper data={value} expandLevel={3} hideHeader={true} />;
+  }
+
+  if (Array.isArray(value)) {
+    return (
+      <ArrayWrapper>
+        {value.map((item, index) => (
+          <div key={index}>
+            {isPlainObject(item) ? (
+              <JsonViewerWrapper data={item} expandLevel={3} hideHeader={true} />
+            ) : (
+              <span>{String(item)}</span>
+            )}
+          </div>
+        ))}
+      </ArrayWrapper>
+    );
+  }
+
+  return <span>{String(value)}</span>;
+}
+
 export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -25,6 +50,7 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   if (!metadata.length) {
     return null;
   }
+
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
       <Heading>{translate('catalog.entity.metadata.title')}</Heading>
@@ -32,7 +58,9 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
         <CatalogEntityInfoBar
           key={key}
           leftContent={<Label>{capitalize(key)}:</Label>}
-          rightContent={<Value>{value}</Value>}
+          rightContent={<Value>{renderMetadataValue(value)}</Value>}
+          hoverEffect={false}
+          isCodeBlock={isPlainObject(value) || Array.isArray(value)}
         />
       ))}
       {hasMoreItems && (
@@ -44,6 +72,10 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
   );
 }
 
+const JsonViewerWrapper = styled(JsonViewer)`
+  text-align: left;
+`;
+
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -64,6 +96,11 @@ const Value = styled.span`
   font-weight: var(--font-weight-medium);
 `;
 
+const ArrayWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 const Heading = styled.h2`
   margin-bottom: var(--spacing-base);
   margin-top: 0;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
+
+export type CatalogEntityMethodAndPathProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
+  const method = entity.metadata?.method;
+  const path = entity.metadata?.path;
+
+  if (!method || !path) {
+    return null;
+  }
+
+  return (
+    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
+      <Heading>Method & Path</Heading>
+      <CatalogEntityInfoBar
+        leftContent={
+          <Label>
+            <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
+            {path}
+          </Label>
+        }
+        withSeparator={false}
+      />
+    </LinksWrapper>
+  );
+}
+
+const MethodTag = styled(HttpTag)`
+  width: auto;
+  justify-content: start;
+  margin-right: var(--spacing-xxs);
+`;
+
+const LinksWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: var(--border-radius);
+  background-color: var(--catalog-metadata-bg-color);
+  transition: all 0.2s ease-in-out;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Label = styled.div`
+  display: flex;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ApiDescriptionProperty.tsx

@@ -1,5 +1,6 @@
 import React, { JSX } from 'react';
 import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { DocumentIcon, getPathPrefix, Tag, useThemeHooks } from '@redocly/theme';
@@ -25,7 +26,11 @@ export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps):
             {translate('catalog.entity.properties.apiDescription.title')}
           </>
         }
-        content={<Tag>{descriptionFile}</Tag>}
+        content={
+          <Tag textTransform="none">
+            <DescriptionFile>{descriptionFile}</DescriptionFile>
+          </Tag>
+        }
         onClick={() => {
           navigate(`${pathPrefix}/${descriptionFile}`);
         }}
@@ -33,3 +38,9 @@ export function ApiDescriptionProperty({ entity }: ApiDescriptionPropertyProps):
     </div>
   );
 }
+
+const DescriptionFile = styled.span`
+  word-break: break-all;
+  overflow-wrap: break-word;
+  white-space: normal;
+`;

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

@@ -10,6 +10,7 @@ import { UserEmailProperty } from '@redocly/theme/components/Catalog/CatalogEnti
 import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty';
 import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
 import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
+import { FormatProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty';
 
 type PropertyRenderer = {
   key: string;
@@ -23,6 +24,11 @@ const propertyRenderers: PropertyRenderer[] = [
     condition: (entity) => !!entity.type,
     component: EntityTypeProperty,
   },
+  {
+    key: 'format',
+    condition: (entity) => entity.type === 'data-schema' && !!entity.metadata?.specType,
+    component: FormatProperty,
+  },
   {
     key: 'contact',
     condition: (entity) => !!entity.contact?.slack?.channels,
@@ -35,7 +41,7 @@ const propertyRenderers: PropertyRenderer[] = [
   },
   {
     key: 'tags',
-    condition: (entity) => !!entity.tags,
+    condition: (entity) => !!entity.tags?.length,
     component: TagsProperty,
   },
   {