@redocly/theme 0.63.0-next.5 → 0.63.0

package/src/components/Catalog/Catalog.tsx

@@ -1,14 +1,19 @@
-import React, { JSX } from 'react';
+import React, { useState, useMemo, JSX } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig } from '@redocly/config';
+import type { ResolvedFilter } from '@redocly/theme/core/types';
 
 import {
   BffCatalogEntityList,
   CatalogSwitcherItem,
   CatalogViewMode,
 } from '@redocly/theme/core/types';
-import { breakpoints } from '@redocly/theme/core/utils';
+import {
+  breakpoints,
+  customCatalogOptionsCasing,
+  isFromToSelectedOptions,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { CatalogFilterContent } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterContent';
@@ -20,9 +25,27 @@ import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
+import { CatalogMobileTopBar } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar';
+import { CatalogMobileFiltersPanelOverlay } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay';
 
 type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
 
+function getActiveFiltersCount(filters: ResolvedFilter[], filterTerm: string): number {
+  const filterOptionsCount = filters.reduce((sum, filter) => {
+    if (filter.selectedOptions instanceof Set) return sum + filter.selectedOptions.size;
+    if (
+      isFromToSelectedOptions(filter.selectedOptions) &&
+      filter.selectedOptions.from &&
+      filter.selectedOptions.to
+    ) {
+      return sum + 1;
+    }
+    return sum;
+  }, 0);
+  const searchTermCount = filterTerm.trim() ? 1 : 0;
+  return searchTermCount + filterOptionsCount;
+}
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
   filters?: CatalogFiltersWithCounts;
@@ -32,22 +55,6 @@ export type CatalogProps = {
   initialViewMode?: CatalogViewMode;
 };
 
-const customCatalogOptionsCasing = (str: string): string => {
-  const trimmedStr = str.trim();
-  if (!trimmedStr) return trimmedStr;
-
-  const words = trimmedStr.split(/[\s-_]+/);
-
-  return words
-    .map((word, index) => {
-      if (index === 0 && word.toLowerCase() === 'api') {
-        return 'API';
-      }
-      return word[0].toUpperCase() + word.slice(1);
-    })
-    .join(' ');
-};
-
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
@@ -86,32 +93,45 @@ export function Catalog(props: CatalogProps): JSX.Element {
     initialViewMode,
   });
 
+  const [mobileFiltersPanelOpen, setMobileFiltersPanelOpen] = useState(false);
+  const activeFiltersCount = useMemo(
+    () => getActiveFiltersCount(filters, searchQuery),
+    [filters, searchQuery],
+  );
+
+  const filterContent = (
+    <CatalogFilterContent
+      catalogSelector={
+        <CatalogSelector
+          catalogSwitcherItems={catalogSwitcherItems}
+          onChange={() => {
+            setSearchQuery('');
+            setSortOption(null);
+          }}
+        />
+      }
+      filters={filters}
+      filterTerm={searchQuery}
+      filterValuesCasing={customCatalogOptionsCasing}
+      onClear={() => {
+        setSearchQuery('');
+      }}
+      searchInput={
+        <FilterInput
+          value={searchQuery}
+          onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+          dataTestId="catalog-filter-search-input"
+        />
+      }
+    />
+  );
+
   return (
     <>
       <CatalogPageWrapper data-component-name="Catalog/Catalog">
         <FiltersSidebar
           collapsed={collapsedSidebar}
-          header={
-            collapsedSidebar ? null : (
-              <CatalogSelector
-                catalogSwitcherItems={catalogSwitcherItems}
-                onChange={() => {
-                  setSearchQuery('');
-                  setSortOption(null);
-                }}
-              />
-            )
-          }
-          menu={
-            <CatalogFilterContent
-              filters={filters}
-              filterTerm={searchQuery}
-              filterValuesCasing={customCatalogOptionsCasing}
-              onClear={() => {
-                setSearchQuery('');
-              }}
-            />
-          }
+          menu={filterContent}
           footer={
             <SidebarActions
               layout={layout}
@@ -122,51 +142,69 @@ export function Catalog(props: CatalogProps): JSX.Element {
             />
           }
         />
-        <CatalogPageContent>
-          <CatalogPageDescription>
-            <CatalogTitleWrapper>
-              <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
-                {catalogConfig?.titleTranslationKey
-                  ? translate(catalogConfig?.titleTranslationKey)
-                  : catalogConfig?.slug}{' '}
-              </CatalogTitle>
-              <CounterTag borderless>{entitiesCounter}</CounterTag>
-            </CatalogTitleWrapper>
-            <CatalogDescription data-translation-key={catalogConfig?.descriptionTranslationKey}>
-              {translate(catalogConfig?.descriptionTranslationKey)}
-            </CatalogDescription>
-          </CatalogPageDescription>
-
-          <CatalogActionsRow>
-            <CatalogSearchInputWrapper>
-              <FilterInput
-                value={searchQuery}
-                onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
-                dataTestId="catalog-search-input"
-              />
-            </CatalogSearchInputWrapper>
-
-            <CatalogControlsWrapper>
-              <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
-              <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
-            </CatalogControlsWrapper>
-          </CatalogActionsRow>
-
-          <CatalogEntities
-            catalogConfig={catalogConfig}
-            excludedEntities={catalogConfig?.excludes}
-            filterQuery={filterQuery}
-            entitiesTypes={entitiesTypes}
+        <CatalogContentWrapper>
+          <CatalogMobileTopBar
+            setMobileFiltersPanelOpen={setMobileFiltersPanelOpen}
+            activeFiltersCount={activeFiltersCount}
+            setSortOption={setSortOption}
             sortOption={sortOption}
-            searchQuery={searchQuery}
             viewMode={viewMode}
-            setEntitiesCounter={setEntitiesCounter}
-            initialEntitiesList={initialEntitiesList}
-            setSortOption={setSortOption}
-            handleSortClick={handleSortClick}
-            isColumnSorted={isColumnSorted}
+            setViewMode={setViewMode}
           />
-        </CatalogPageContent>
+
+          {mobileFiltersPanelOpen ? (
+            <CatalogMobileFiltersPanelOverlay
+              setMobileFiltersPanelOpen={setMobileFiltersPanelOpen}
+              filterContent={filterContent}
+            />
+          ) : null}
+
+          <CatalogContentScrollWrapper>
+            <CatalogPageContentWrapper>
+              <CatalogTitleWrapper>
+                <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
+                  {catalogConfig?.titleTranslationKey
+                    ? translate(catalogConfig?.titleTranslationKey)
+                    : catalogConfig?.slug}{' '}
+                </CatalogTitle>
+                <CounterTag borderless>{entitiesCounter}</CounterTag>
+              </CatalogTitleWrapper>
+              <CatalogDescription data-translation-key={catalogConfig?.descriptionTranslationKey}>
+                {translate(catalogConfig?.descriptionTranslationKey)}
+              </CatalogDescription>
+
+              <CatalogActionsRow>
+                <CatalogSearchInputWrapper>
+                  <FilterInput
+                    value={searchQuery}
+                    onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+                    dataTestId="catalog-search-input"
+                  />
+                </CatalogSearchInputWrapper>
+
+                <CatalogControlsWrapper>
+                  <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+                  <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+                </CatalogControlsWrapper>
+              </CatalogActionsRow>
+
+              <CatalogEntities
+                catalogConfig={catalogConfig}
+                excludedEntities={catalogConfig?.excludes}
+                filterQuery={filterQuery}
+                entitiesTypes={entitiesTypes}
+                sortOption={sortOption}
+                searchQuery={searchQuery}
+                viewMode={viewMode}
+                setEntitiesCounter={setEntitiesCounter}
+                initialEntitiesList={initialEntitiesList}
+                setSortOption={setSortOption}
+                handleSortClick={handleSortClick}
+                isColumnSorted={isColumnSorted}
+              />
+            </CatalogPageContentWrapper>
+          </CatalogContentScrollWrapper>
+        </CatalogContentWrapper>
       </CatalogPageWrapper>
     </>
   );
@@ -175,6 +213,11 @@ export function Catalog(props: CatalogProps): JSX.Element {
 const CatalogActionsRow = styled.div`
   display: flex;
   align-items: center;
+  margin-bottom: var(--spacing-xl);
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    display: none;
+  }
 `;
 
 const CatalogControlsWrapper = styled.div`
@@ -184,14 +227,30 @@ const CatalogControlsWrapper = styled.div`
   gap: var(--catalog-controls-wrapper-gap);
 `;
 
-const CatalogPageContent = styled.main`
+const CatalogContentWrapper = styled.div`
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+const CatalogContentScrollWrapper = styled.div`
   flex: 1;
-  width: var(--catalog-page-content-width-mobile);
-  margin: var(--catalog-page-content-margin-mobile);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+`;
 
-  @media screen and (min-width: ${breakpoints.medium}) {
-    width: var(--catalog-page-content-width-desktop);
-    padding: var(--catalog-page-padding);
+const CatalogPageContentWrapper = styled.main`
+  width: var(--catalog-page-content-width);
+  margin: var(--catalog-page-content-margin);
+  padding: var(--catalog-page-padding);
+  max-width: 1072px;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    padding: var(--catalog-page-padding-mobile);
   }
 `;
 
@@ -222,8 +281,10 @@ const CatalogDescription = styled.p`
 const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width);
 
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   font-weight: var(--catalog-page-wrapper-font-weight);
   color: var(--catalog-page-wrapper-text-color);
@@ -249,17 +310,13 @@ const CatalogPageWrapper = styled.div`
   }
 `;
 
-const CatalogPageDescription = styled.div`
-  display: var(--catalog-page-description-display-mobile);
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: var(--catalog-page-description-display-desktop);
-  }
-`;
-
 const FiltersSidebar = styled(Sidebar)`
   display: var(--catalog-sidebar-display-mobile);
 
+  @media screen and (max-width: ${breakpoints.medium}) {
+    display: none;
+  }
+
   @media screen and (min-width: ${breakpoints.medium}) {
     display: var(--catalog-sidebar-display-desktop);
   }
@@ -271,5 +328,10 @@ const FiltersSidebar = styled(Sidebar)`
 `;
 
 const CatalogSearchInputWrapper = styled.div`
+  display: none;
   width: var(--catalog-search-input-wrapper-width);
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: block;
+  }
 `;

package/src/components/Catalog/CatalogAvatar.tsx

@@ -0,0 +1,68 @@
+import styled, { css } from 'styled-components';
+import React from 'react';
+
+const extractInitials = (value: string): string => {
+  const trimmed = value.trim();
+  if (!trimmed) return '';
+
+  if (trimmed.split('-').length > 1) {
+    return trimmed
+      .split('-')
+      .filter((part) => part.length > 0)
+      .map((part) => part[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+
+  const initials = trimmed.split(' ').map((n) => n[0]);
+  if (initials.length === 1) {
+    return initials[0];
+  }
+
+  return initials[0] + initials[initials.length - 1];
+};
+
+export function CatalogAvatar({
+  value,
+  size,
+}: {
+  value: string;
+  size: 'small' | 'medium' | 'large';
+}) {
+  return (
+    <CatalogAvatarWrapper data-component-name="Catalog/CatalogAvatar" size={size}>
+      {extractInitials(value)}
+    </CatalogAvatarWrapper>
+  );
+}
+
+const CatalogAvatarWrapper = styled.div<{ size: 'small' | 'medium' | 'large' }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--catalog-avatar-bg-color);
+  flex-shrink: 0;
+  font-weight: var(--catalog-avatar-font-weight);
+  line-height: var(--catalog-avatar-line-height);
+  ${({ size }) => SIZES[size]};
+`;
+
+const SIZES = {
+  small: css`
+    width: var(--catalog-avatar-small-size);
+    height: var(--catalog-avatar-small-size);
+    font-size: var(--catalog-avatar-font-size-small);
+  `,
+  medium: css`
+    width: var(--catalog-avatar-medium-size);
+    height: var(--catalog-avatar-medium-size);
+    font-size: var(--catalog-avatar-font-size-medium);
+  `,
+  large: css`
+    width: var(--catalog-avatar-large-size);
+    height: var(--catalog-avatar-large-size);
+    font-size: var(--catalog-avatar-font-size-large);
+  `,
+};

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

@@ -46,7 +46,9 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
           <CardTitle>
             <CatalogHighlight>{entity.title}</CatalogHighlight>
           </CardTitle>
-          <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
+          <CardSummary>
+            <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
+          </CardSummary>
         </CardDescription>
 
         <CardMetadataSection>
@@ -54,6 +56,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
             <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
+              showPlaceholder={true}
               tagProps={{
                 style: {
                   fontSize: 'var(--catalog-card-font-size)',
@@ -61,6 +64,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                 },
                 icon: <GraphIcon color="var(--color-green-8)" />,
                 textTransform: 'none',
+                variant: 'outline',
               }}
             />
           </MetadataRow>
@@ -69,13 +73,17 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
             <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
+              showPlaceholder={true}
+              showAvatars={true}
               tagProps={{
                 style: {
                   fontSize: 'var(--catalog-card-font-size)',
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
+                  paddingLeft: 'var(--catalog-card-metadata-owner-tag-left-padding)',
                 },
                 textTransform: 'none',
+                variant: 'outline',
               }}
             />
           </MetadataRow>
@@ -84,7 +92,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
       <Divider />
 
-      <CardFooter>
+      <CardFooter hasTags={!!entity.tags?.length}>
         <CatalogTagsWithTooltip
           items={entity.tags || []}
           tagProps={{
@@ -169,15 +177,16 @@ const ArrowCircle = styled.div`
 `;
 
 const CardContent = styled.div`
+  min-width: 0;
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   height: 100%;
 `;
 
-const CardFooter = styled.div`
+const CardFooter = styled.div<{ hasTags: boolean }>`
   height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ hasTags }) => (hasTags ? 'space-between' : 'flex-end')};
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 
@@ -188,6 +197,8 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
+  min-width: 0;
+  max-width: 100%;
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
@@ -221,7 +232,20 @@ const CardTitle = styled.div`
   font-size: var(--catalog-card-title-font-size);
   font-weight: var(--catalog-card-title-font-weight);
   line-height: var(--catalog-card-title-line-height);
-  margin: 0;
+  height: var(--catalog-card-title-height);
+  display: var(--catalog-card-title-display);
+  align-items: var(--catalog-card-title-align-items);
+  margin-bottom: var(--catalog-card-title-margin-bottom);
+`;
+
+const CardSummary = styled.div`
+  min-width: 0;
+  font-size: var(--catalog-card-summary-font-size);
+  font-weight: var(--catalog-card-summary-font-weight);
+  line-height: var(--catalog-card-summary-line-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const CardDescription = styled.div`

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { CatalogEntityConfig } from '@redocly/config';
 import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
+import { breakpoints } from '@redocly/theme/core/utils';
 import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCard';
 
 export type CatalogCardViewProps = {
@@ -23,8 +24,15 @@ export function CatalogCardView({ entities, catalogConfig }: CatalogCardViewProp
 
 const CatalogCardsWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
   gap: var(--catalog-cards-group-gap);
   margin-bottom: var(--spacing-xl);
-  margin-top: var(--spacing-xl);
+  overflow-x: auto;
+
+  @media screen and (min-width: ${breakpoints.small}) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    margin-top: 0;
+  }
 `;

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

@@ -162,6 +162,22 @@ export function CatalogEntity({
 }
 
 const CatalogPageWrapper = styled.div`
+  max-width: var(--catalog-entity-max-width);
+  margin: var(--catalog-entity-margin);
+  padding: var(--catalog-entity-padding);
+
+  @media screen and (max-width: ${breakpoints.large}) {
+    padding: var(--catalog-entity-padding-large);
+  }
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    padding: var(--catalog-entity-padding-medium);
+  }
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    padding: var(--catalog-entity-padding-small);
+  }
+
   --sidebar-width: var(--catalog-sidebar-width);
   --link-color-primary: var(--breadcrumbs-text-color);
 
@@ -175,33 +191,17 @@ const CatalogPageWrapper = styled.div`
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
 
-  hr {
-    border: 0;
-    width: calc(100% + 48px);
-    margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-color-primary);
-  }
   a:not([role='button']) {
     text-decoration: none;
     color: var(--link-color-primary);
     font-weight: var(--link-font-weight);
   }
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    flex-direction: row;
-    padding: 0;
-  }
 `;
 
 const CatalogPageContent = styled.main`
   flex: 1;
-  width: 90%;
+  width: 100%;
   margin: 0 auto;
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    width: 100%;
-    padding: var(--catalog-page-padding);
-  }
 `;
 
 const CatalogEntityPageWrapper = styled.div`

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { Handle, Position } from '@xyflow/react';
-import styled from 'styled-components';
 
-import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+import { CatalogEntityRelationsNodeContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent';
 
 export type CatalogEntityRelationsLinkedNodeProps = {
   label: string;
@@ -20,29 +19,13 @@ export function CatalogEntityRelationsLinkedNode({
   to,
 }: CatalogEntityRelationsLinkedNodeProps): React.ReactElement {
   return (
-    <RelationsLinkedNodeWrapper
+    <Link
       className={className}
       to={to}
       data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode"
     >
+      <CatalogEntityRelationsNodeContent entityType={entityType} label={label} isRoot={false} />
       <Handle type={GraphHandleType.Target} position={Position.Top} id={GraphHandleType.Target} />
-      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
-      <div>{label}</div>
-    </RelationsLinkedNodeWrapper>
+    </Link>
   );
 }
-
-const RelationsLinkedNodeWrapper = styled(Link)`
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-entity-relations-node-gap);
-  padding: var(--catalog-entity-relations-node-padding);
-  border-radius: var(--catalog-entity-relations-node-border-radius);
-  font-style: normal;
-  font-weight: var(--catalog-entity-relations-node-font-weight);
-  background: var(--catalog-entity-relations-node-bg-color);
-  color: var(--catalog-entity-relations-node-text-color);
-  border: var(--catalog-entity-relations-node-border-width)
-    var(--catalog-entity-relations-node-border-style)
-    var(--catalog-entity-relations-node-border-color);
-`;