@redocly/theme 0.63.0-next.4 → 0.63.0-next.6

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader.tsx

@@ -0,0 +1,34 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { useThemeHooks } from '@redocly/theme/core';
+
+type CatalogMobileFiltersPanelHeaderProps = {
+  setMobileFiltersPanelOpen: (open: boolean) => void;
+};
+
+export function CatalogMobileFiltersPanelHeader({
+  setMobileFiltersPanelOpen,
+}: CatalogMobileFiltersPanelHeaderProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <CatalogMobileFiltersPanelHeaderWrapper>
+      <span />
+      <Button variant="ghost" size="medium" onClick={() => setMobileFiltersPanelOpen(false)}>
+        {translate('catalog.filters.close', 'Close')}
+      </Button>
+    </CatalogMobileFiltersPanelHeaderWrapper>
+  );
+}
+
+const CatalogMobileFiltersPanelHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--catalog-filter-content-header-padding);
+  border-bottom: 1px solid var(--border-color-secondary);
+  flex-shrink: 0;
+`;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.tsx

@@ -0,0 +1,40 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { breakpoints } from '@redocly/theme/core';
+import { CatalogMobileFiltersPanel } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel';
+
+type CatalogMobileFiltersPanelOverlayProps = {
+  setMobileFiltersPanelOpen: (open: boolean) => void;
+  filterContent: React.ReactNode;
+};
+
+export function CatalogMobileFiltersPanelOverlay({
+  setMobileFiltersPanelOpen,
+  filterContent,
+}: CatalogMobileFiltersPanelOverlayProps): JSX.Element {
+  return (
+    <CatalogMobileFiltersPanelOverlayWrapper>
+      <CatalogMobileFiltersPanel
+        setMobileFiltersPanelOpen={setMobileFiltersPanelOpen}
+        filterContent={filterContent}
+      />
+    </CatalogMobileFiltersPanelOverlayWrapper>
+  );
+}
+
+const CatalogMobileFiltersPanelOverlayWrapper = styled.div`
+  display: none;
+  position: fixed;
+  top: calc(var(--navbar-height) + var(--banner-height));
+  left: 0;
+  width: 100%;
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  z-index: 3;
+  background: var(--bg-color);
+  flex-direction: column;
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+`;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.tsx

@@ -0,0 +1,54 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
+import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
+import { breakpoints, SortOption } from '@redocly/theme/core';
+import { CatalogViewMode } from '@redocly/theme/core';
+
+type CatalogMobileTopBarProps = {
+  setMobileFiltersPanelOpen: (open: boolean) => void;
+  activeFiltersCount: number;
+  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: SortOption | null;
+  viewMode: CatalogViewMode;
+  setViewMode: (viewMode: CatalogViewMode) => void;
+};
+
+export function CatalogMobileTopBar({
+  setMobileFiltersPanelOpen,
+  activeFiltersCount,
+  setSortOption,
+  sortOption,
+  viewMode,
+  setViewMode,
+}: CatalogMobileTopBarProps): JSX.Element {
+  return (
+    <CatalogMobileTopBarWrapper>
+      <CatalogMobileTopBarFiltersButton
+        setMobileFiltersPanelOpen={setMobileFiltersPanelOpen}
+        activeFiltersCount={activeFiltersCount}
+      />
+      <CatalogMobileTopBarControls
+        setSortOption={setSortOption}
+        sortOption={sortOption}
+        viewMode={viewMode}
+        setViewMode={setViewMode}
+      />
+    </CatalogMobileTopBarWrapper>
+  );
+}
+
+const CatalogMobileTopBarWrapper = styled.div`
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--catalog-page-padding-horizontal);
+  border-bottom: 1px solid var(--border-color-secondary);
+  background: var(--bg-color);
+  flex-shrink: 0;
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+`;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.tsx

@@ -0,0 +1,34 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
+import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
+import { SortOption } from '@redocly/theme/core';
+import { CatalogViewMode } from '@redocly/theme/core';
+
+type CatalogMobileTopBarControlsProps = {
+  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: SortOption | null;
+  viewMode: CatalogViewMode;
+  setViewMode: (viewMode: CatalogViewMode) => void;
+};
+
+export function CatalogMobileTopBarControls({
+  setSortOption,
+  sortOption,
+  viewMode,
+  setViewMode,
+}: CatalogMobileTopBarControlsProps): JSX.Element {
+  return (
+    <CatalogMobileTopBarControlsWrapper>
+      <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+      <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+    </CatalogMobileTopBarControlsWrapper>
+  );
+}
+
+const CatalogMobileTopBarControlsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-controls-wrapper-gap);
+`;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.tsx

@@ -0,0 +1,39 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { useThemeHooks } from '@redocly/theme/core';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+type CatalogMobileTopBarFiltersButtonProps = {
+  setMobileFiltersPanelOpen: (open: boolean) => void;
+  activeFiltersCount: number;
+};
+
+export function CatalogMobileTopBarFiltersButton({
+  setMobileFiltersPanelOpen,
+  activeFiltersCount,
+}: CatalogMobileTopBarFiltersButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <CatalogMobileTopBarFiltersButtonWrapper
+      icon={<FilterIcon size="16px" />}
+      variant="ghost"
+      iconPosition="left"
+      size="medium"
+      onClick={() => setMobileFiltersPanelOpen(true)}
+    >
+      {translate('catalog.filters.title', 'Filters')}
+      {activeFiltersCount > 0 ? <CounterTag borderless>{activeFiltersCount}</CounterTag> : null}
+    </CatalogMobileTopBarFiltersButtonWrapper>
+  );
+}
+
+const CatalogMobileTopBarFiltersButtonWrapper = styled(Button)`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { breakpoints } from '@redocly/theme/core/utils';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
@@ -37,11 +36,6 @@ export function CatalogPageDescription({
 
 const CatalogPageDescriptionWrapper = styled.div`
   margin: var(--catalog-heading-margin);
-  display: var(--catalog-page-description-display-mobile);
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: var(--catalog-page-description-display-desktop);
-  }
 `;
 
 const CatalogTitleWrapper = styled.div`

package/src/components/Catalog/CatalogSelector.tsx

@@ -1,7 +1,8 @@
-import React, { JSX } from 'react';
+import React, { useState, JSX } from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
 import { Select } from '@redocly/theme/components/Select/Select';
 import { CatalogSwitcherItem } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
@@ -19,6 +20,7 @@ export function CatalogSelector({
 }: CatalogSelectorProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const [isExpanded, setIsExpanded] = useState(true);
 
   const navigate = useNavigate();
   const pathPrefix = getPathPrefix();
@@ -31,35 +33,35 @@ export function CatalogSelector({
 
   const selectedCatalogItem = catalogSwitcherItems.find((item) => item.selected);
 
+  const headerLabel = translate('catalog.catalogs.label', 'Catalogs');
+
   return (
     <CatalogSelectWrapper data-component-name="Catalog/CatalogSelector">
-      <CatalogSelectLabel>{translate('catalog.catalogs.label', 'Catalogs')}</CatalogSelectLabel>
-      <CatalogSelect
-        value={selectedCatalogItem?.slug}
-        options={options}
-        onChange={(value) => {
-          navigate(`${pathPrefix}/catalogs/${value}`);
-          onChange();
-        }}
-        icon={<ChevronDownIcon color="var(--catalog-select-icon-color)" />}
-      />
+      <Accordion expanded={isExpanded} header={headerLabel} onToggle={setIsExpanded}>
+        <CatalogSelect
+          value={selectedCatalogItem?.slug}
+          options={options}
+          onChange={(value) => {
+            navigate(`${pathPrefix}/catalogs/${value}`);
+            onChange();
+          }}
+          icon={<ChevronDownIcon color="var(--catalog-select-icon-color)" />}
+        />
+      </Accordion>
     </CatalogSelectWrapper>
   );
 }
 
 export const CatalogSelectWrapper = styled.div`
-  margin-top: var(--catalog-select-wrapper-margin-top);
-`;
-
-export const CatalogSelectLabel = styled.label`
-  display: block;
-  margin-bottom: var(--catalog-select-label-margin-bottom);
-  font-weight: var(--catalog-select-label-font-weight);
-  font-size: var(--catalog-select-label-font-size);
-  line-height: var(--catalog-select-label-line-height);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  --accordion-body-padding: var(--catalog-select-accordion-body-padding);
+  --accordion-header-padding: var(--catalog-select-accordion-header-padding);
+  --select-line-height: var(--catalog-select-select-line-height);
+  --select-input-padding: var(--catalog-select-select-input-padding);
 `;
 
 export const CatalogSelect = styled(Select)`
   border-radius: var(--catalog-select-border-radius);
-  --select-input-padding: var(--catalog-select-input-padding);
 `;

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -11,6 +11,7 @@ import { CatalogTableHeaderCell } from '@redocly/theme/components/Catalog/Catalo
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
+import { breakpoints } from '@redocly/theme/core';
 
 export type BaseEntity = {
   id: string;
@@ -31,6 +32,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   style?: React.CSSProperties;
+  contentMinWidth?: number;
 };
 
 export type CatalogColumn<T> = {
@@ -100,9 +102,10 @@ export const CatalogTableView = <T extends BaseEntity>({
   handleSortClick,
   isColumnSorted,
   style,
+  contentMinWidth,
 }: CatalogTableViewProps<T>) => {
-  return (
-    <CatalogTableWrapper data-component-name="Catalog/CatalogTableView" style={style}>
+  const tableContent = (
+    <>
       <CatalogTableHeader
         columnsWidths={columns.map((column) => column.width || '1fr')}
         columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
@@ -118,7 +121,7 @@ export const CatalogTableView = <T extends BaseEntity>({
           />
         ))}
       </CatalogTableHeader>
-      <div>
+      <CatalogTableBody>
         {entities.map((entity) => (
           <CatalogTableViewRow
             key={entity.id}
@@ -129,7 +132,19 @@ export const CatalogTableView = <T extends BaseEntity>({
             onRowClick={onRowClick}
           />
         ))}
-      </div>
+      </CatalogTableBody>
+    </>
+  );
+
+  return (
+    <CatalogTableWrapper data-component-name="Catalog/CatalogTableView" style={style}>
+      {contentMinWidth != null ? (
+        <CatalogTableContentInner $contentMinWidth={contentMinWidth}>
+          {tableContent}
+        </CatalogTableContentInner>
+      ) : (
+        <CatalogTableScrollContent>{tableContent}</CatalogTableScrollContent>
+      )}
     </CatalogTableWrapper>
   );
 };
@@ -137,8 +152,19 @@ export const CatalogTableView = <T extends BaseEntity>({
 const CatalogTableWrapper = styled.div`
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);
-  margin-bottom: var(--spacing-xl);
-  margin-top: var(--spacing-xl);
+  overflow-x: auto;
+
+  @media screen and (max-width: ${breakpoints.medium}) {
+    margin-top: 0;
+  }
+`;
+
+const CatalogTableScrollContent = styled.div`
+  min-width: min-content;
+`;
+
+const CatalogTableContentInner = styled.div<{ $contentMinWidth: number }>`
+  min-width: ${({ $contentMinWidth }) => $contentMinWidth}px;
 `;
 
 const CatalogTableHeader = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
@@ -151,4 +177,9 @@ const CatalogTableHeader = styled.div<{ columnsWidths: string[]; columnsMinWidth
       .join(' ')};
   background: var(--catalog-table-header-bg-color);
   font-weight: var(--catalog-table-header-font-weight);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+`;
+
+const CatalogTableBody = styled.div`
+  min-width: min-content;
 `;

package/src/components/Catalog/CatalogTableView/CatalogUserEntityCell.tsx

@@ -2,28 +2,17 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
 
 export type CatalogUserEntityCellProps = {
   name: string;
   email: string;
 };
 
-const extractInitials = (name: string) => {
-  const trimmedName = name?.trim();
-  if (!trimmedName) return '';
-
-  const initials = trimmedName.split(' ').map((n) => n[0]);
-  if (initials.length === 1) {
-    return initials[0];
-  }
-
-  return initials[0] + initials[initials.length - 1];
-};
-
 export function CatalogUserEntityCell({ name, email }: CatalogUserEntityCellProps) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogUserEntityCell">
-      <Avatar>{extractInitials(name)}</Avatar>
+      <CatalogAvatar value={name} size="medium" />
       <EntityTitleContent>
         <EntityTitle>
           <CatalogHighlight>{name}</CatalogHighlight>
@@ -43,19 +32,6 @@ const EntityTitleCellWrapper = styled.div`
   max-width: 100%;
 `;
 
-const Avatar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--catalog-avatar-bg-color);
-  flex-shrink: 0;
-  font-size: 14px;
-  font-weight: 400;
-`;
-
 const EntityTitleContent = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -6,18 +6,21 @@ import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
 
 export type CatalogTagsWithTooltipProps = {
   items: string[];
   itemsToShow?: number;
   showPlaceholder?: boolean;
   tagProps?: TagProps;
+  showAvatars?: boolean;
 };
 
 export function CatalogTagsWithTooltip({
   items,
   itemsToShow = 1,
-  showPlaceholder = true,
+  showPlaceholder = false,
+  showAvatars,
   tagProps,
 }: CatalogTagsWithTooltipProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
@@ -26,12 +29,9 @@ export function CatalogTagsWithTooltip({
   if (!items || items.length === 0) {
     if (showPlaceholder) {
       return (
-        <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {/* eslint-disable-next-line theme/require-translate */}
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
-            N/A
-          </Tag>
-        </CatalogTagsWrapper>
+        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          {translate('catalog.notConnected', 'Not connected')}
+        </CatalogTagsNotConnectedWrapper>
       );
     }
     return null;
@@ -41,7 +41,14 @@ export function CatalogTagsWithTooltip({
     return (
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {items.map((item, index) => (
-          <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+          <Tag
+            key={`${item}-${index}`}
+            {...tagProps}
+            {...(showAvatars && {
+              icon: <CatalogAvatar value={item} size="small" />,
+            })}
+            maxLength={CATALOG_TAG_MAX_LENGTH}
+          >
             <CatalogHighlight>{item}</CatalogHighlight>
           </Tag>
         ))}
@@ -59,6 +66,9 @@ export function CatalogTagsWithTooltip({
           <Tag
             key={`${item}-${index}`}
             {...tagProps}
+            {...(showAvatars && {
+              icon: <CatalogAvatar value={item} size="small" />,
+            })}
             textTransform="none"
             maxLength={CATALOG_TAG_MAX_LENGTH}
           >
@@ -77,10 +87,15 @@ export function CatalogTagsWithTooltip({
 const CatalogTagsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: var(--catalog-tags-wrapper-gap);
 `;
 
 const MoreTagsButton = styled.span`
   font-size: var(--catalog-tags-more-button-font-size);
   margin-left: var(--catalog-tags-more-button-margin-left);
 `;
+
+const CatalogTagsNotConnectedWrapper = styled.span`
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;