@redocly/theme 0.55.0-next.7 → 0.55.0-next.9

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
+import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
+import { CatalogViewMode } from '@redocly/theme/core';
+
+function useViewMode(initialViewMode: CatalogViewMode) {
+  const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);
+
+  useEffect(() => {
+    setViewMode(initialViewMode);
+  }, [initialViewMode]);
+
+  return viewMode;
+}
+
+export type CatalogViewModeToggleProps = {
+  viewMode: CatalogViewMode;
+  onViewModeChange: (mode: CatalogViewMode) => void;
+};
+
+export function CatalogViewModeToggle({
+  viewMode: initialViewMode,
+  onViewModeChange,
+}: CatalogViewModeToggleProps) {
+  const viewMode = useViewMode(initialViewMode);
+
+  return (
+    <ViewModeToggleWrapper data-component-name="Catalog/CatalogViewModeToggle">
+      <ViewModeButton
+        className={viewMode === 'table' ? 'active' : ''}
+        onClick={() => onViewModeChange('table')}
+      >
+        <TableIcon size="var(--catalog-view-mode-table-icon-size)" />
+      </ViewModeButton>
+      <ViewModeButton
+        className={viewMode === 'cards' ? 'active' : ''}
+        onClick={() => onViewModeChange('cards')}
+      >
+        <CardsIcon size="var(--catalog-view-mode-cards-icon-size)" />
+      </ViewModeButton>
+    </ViewModeToggleWrapper>
+  );
+}
+
+const ViewModeToggleWrapper = styled.div`
+  display: flex;
+  gap: var(--catalog-view-mode-toggle-gap);
+`;
+
+const ViewModeButton = styled.button`
+  width: var(--catalog-view-mode-button-width);
+  height: var(--catalog-view-mode-button-height);
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--catalog-view-mode-button-border-radius);
+
+  &.active {
+    background-color: var(--catalog-view-mode-toggle-active-bg-color);
+  }
+`;

package/src/components/Catalog/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const catalogDarkMode = css`
+  --catalog-avatar-bg-color: #3b3c45;
+`;

package/src/components/Catalog/variables.ts

@@ -0,0 +1,351 @@
+import { css } from 'styled-components';
+
+export const catalog = css`
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-xl);
+  --catalog-page-padding-horizontal: var(--spacing-xxl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+  --catalog-page-content-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+
+  --catalog-filter-padding-vertical-mobile: 0;
+  --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
+
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-sidebar-width: 285px;
+
+  /**
+    * @tokens Catalog page wrapper
+    */
+  --catalog-page-wrapper-font-weight: var(--font-weight-regular);
+  --catalog-page-wrapper-text-color: var(--text-color-secondary);
+  --catalog-page-wrapper-font-size: var(--font-size-base);
+  --catalog-page-wrapper-font-family: var(--font-family-base);
+  --catalog-page-wrapper-line-height: var(--line-height-base);
+
+  /**
+    * @tokens Catalog page content
+    */
+  --catalog-page-content-width-mobile: 90%;
+  --catalog-page-content-width-desktop: 100%;
+  --catalog-page-content-margin-mobile: 0 auto;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-title-text-color: var(--text-color-primary);
+  --catalog-title-font-weight: var(--font-weight-bold);
+  --catalog-title-font-size: var(--h3-font-size);
+  --catalog-title-margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
+  --catalog-title-spacing-right: 8px;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-description-text-color: var(--text-color-secondary);
+  --catalog-description-font-weight: var(--font-weight-regular);
+  --catalog-description-font-size: var(--font-size-lg);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+  --catalog-description-line-height: var(--line-height-lg);
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-separator-color: var(--text-color-secondary);
+  --catalog-separator-font-size: var(--font-size-base);
+  --catalog-separator-font-weight: var(--font-weight-regular);
+  --catalog-separator-border-color: var(--border-color-secondary);
+  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-separator-label-margin: 0 var(--spacing-xs);
+
+  /**
+    * @tokens Catalog separators and dividers
+    */
+  --catalog-hr-border-color: var(--border-color-primary);
+  --catalog-hr-border-width: 1px;
+  --catalog-hr-width: calc(100% + 48px);
+  --catalog-hr-margin: auto -24px 0 -24px;
+
+  /**
+    * @tokens Catalog links
+    */
+  --catalog-link-color: var(--link-color-primary);
+  --catalog-link-font-weight: var(--link-font-weight);
+  --catalog-link-text-decoration: none;
+
+  /**
+    * @tokens Catalog selector
+    */
+  --catalog-select-wrapper-margin-top: var(--spacing-xxs);
+  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
+  --catalog-select-label-margin-bottom: var(--spacing-xxs);
+  --catalog-select-label-font-weight: var(--filter-title-font-weight);
+  --catalog-select-label-font-size: var(--filter-title-font-size);
+  --catalog-select-label-line-height: var(--filter-title-line-height);
+  --catalog-select-border-radius: var(--filter-input-border-radius);
+  --catalog-select-input-padding: var(--select-input-padding-vertical) var(--spacing-sm);
+  --catalog-select-icon-color: var(--input-t-icon-color);
+
+  /**
+    * @tokens Catalog highlight
+    */
+  --catalog-highlight-bg-color: var(--search-highlight-bg-color);
+  --catalog-highlight-text-color: var(--search-highlight-text-color);
+
+  /**
+    * @tokens Catalog entity icon
+    */
+  --catalog-entity-icon-color: var(--color-primary-base);
+
+  /**
+    * @tokens Catalog tags
+    */
+  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-more-button-font-size: var(--font-size-base);
+  --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-placeholder-bg-color: var(--bg-color);
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-padding: var(--catalog-table-empty-state-padding);
+  --catalog-empty-state-font-weight: var(--font-weight-regular);
+
+  /**
+    * @tokens Catalog actions
+    */
+  --catalog-actions-row-margin-bottom: var(--spacing-xl);
+  --catalog-controls-wrapper-gap: var(--spacing-sm);
+  --catalog-filter-input-width: 360px;
+
+  /**
+    * @tokens Catalog search input wrapper
+    */
+  --catalog-search-input-wrapper-width: var(--catalog-filter-input-width);
+
+  /**
+    * @tokens Catalog controls wrapper
+    */
+  --catalog-controls-wrapper-display: flex;
+  --catalog-controls-wrapper-align-items: center;
+  --catalog-controls-wrapper-margin-left: auto;
+
+  /**
+    * @tokens Catalog sort button
+    */
+  --catalog-sort-trigger-gap: var(--spacing-xs);
+  --catalog-sort-trigger-padding: 6px 8px;
+  --catalog-sort-trigger-border-radius: var(--border-radius-md);
+  --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-sort-icon-color: var(--text-color-secondary);
+  --catalog-sort-text-font-size: var(--font-size-sm);
+  --catalog-sort-text-color: var(--text-color-secondary);
+  --catalog-sort-text-font-weight: var(--font-weight-medium);
+
+  /**
+    * @tokens Catalog sidebar
+    */
+  --catalog-sidebar-display-mobile: none;
+  --catalog-sidebar-display-desktop: flex;
+  --catalog-sidebar-menu-container-padding-top: 0;
+
+  /**
+    * @tokens Catalog page description responsive
+    */
+  --catalog-page-description-display-mobile: none;
+  --catalog-page-description-display-desktop: block;
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 490px;
+  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-horizontal: var(--spacing-md);
+  --catalog-card-gap: var(--spacing-sm);
+  --catalog-card-text-color: var(--text-color-secondary);
+  --catalog-card-font-size: var(--font-size-base);
+  --catalog-card-font-weight: var(--font-weight-regular);
+  --catalog-card-bg-color: var(--layer-color);
+  --catalog-card-border-color: var(--border-color-secondary);
+  --catalog-card-divider-color: var(--border-color-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
+  --catalog-card-border-color-hover: var(--border-color-primary);
+  --catalog-card-border-radius: var(--border-radius-lg);
+  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog card icon
+    */
+  --catalog-card-icon-width: 30px;
+  --catalog-card-icon-height: 30px;
+  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-bg-color: var(--bg-color);
+  --catalog-card-icon-border-color: var(--border-color-secondary);
+  --catalog-card-icon-border-width: 1px;
+  --catalog-card-icon-margin-right: var(--spacing-xs);
+
+  /**
+    * @tokens Catalog metadata
+    */
+  --catalog-metadata-section-margin-top: var(--spacing-md);
+  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-label-font-size: var(--font-size-base);
+  --catalog-metadata-label-font-weight: var(--font-weight-medium);
+  --catalog-metadata-label-color: var(--text-color-secondary);
+  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
+  --catalog-metadata-column-half-gap: var(--spacing-sm);
+  --catalog-metadata-heading-size: var(--font-size-md);
+
+  /**
+    * @tokens Catalog arrow circle
+    */
+  --catalog-arrow-circle-size: 32px;
+  --catalog-arrow-circle-radius: 16px;
+  --catalog-arrow-circle-bg-color: var(--button-bg-color-secondary);
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-card-title-color: var(--text-color-primary);
+  --catalog-card-title-min-height: var(--spacing-xxl);
+  --catalog-card-title-font-size: var(--font-size-lg);
+  --catalog-card-title-font-weight: var(--font-weight-bold);
+  --catalog-card-title-line-height: var(--line-height-lg);
+  --catalog-card-title-line-clamp: 2;
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-card-description-line-clamp: 3;
+  --catalog-card-description-color: var(--text-color-description);
+  --catalog-card-description-font-size: var(--font-size-base);
+  --catalog-card-description-line-height: var(--line-height-base);
+  --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
+  --catalog-card-description-margin-top: 2px;
+
+  --catalog-card-content-gap: var(--spacing-xs);
+  --catalog-card-content-gap-vertical: var(--spacing-sm);
+
+  --catalog-card-tag-bg: transparent;
+
+  --catalog-actions-gap: var(--spacing-xs);
+  --catalog-actions-padding-vertical: var(--spacing-xs);
+  --catalog-actions-padding-horizontal: 5%;
+  --catalog-actions-min-height: 40px;
+  --catalog-actions-bg-color: var(--bg-color-tonal);
+
+  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-padding: 0 var(--spacing-xs);
+  --catalog-page-badge-font-size: var(--font-size-base);
+  --catalog-page-badge-line-height: var(--line-height-base);
+
+  --catalog-page-badge-dot-size: 6px;
+  --catalog-page-badge-dot-border-color: #ffffff;
+
+  /**
+    * @tokens Catalog table
+    */
+  --catalog-table-border-color: var(--border-color-primary);
+  --catalog-table-header-bg-color: var(--bg-color-secondary);
+  --catalog-table-header-font-weight: var(--font-weight-semibold);
+  --catalog-table-header-cell-padding: 5px 8px;
+  --catalog-table-cell-padding: 5px 8px;
+  --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
+  --catalog-table-empty-state-padding: 32px;
+  --catalog-table-empty-state-color: var(--text-color-secondary);
+  --catalog-table-title-cell-gap: 12px;
+  --catalog-table-entity-title-content-offset: 42px;
+
+  /**
+    * @tokens Catalog table header
+    */
+  --catalog-table-header-sort-icon-color-active: var(--text-color-primary);
+  --catalog-table-header-sort-icon-color-inactive: var(--text-color-helper);
+  --catalog-table-header-sort-indicator-color: var(--icon-color-primary);
+  --catalog-table-header-sort-arrow-bg-active: var(--bg-color-active);
+
+  /**
+    * @tokens Catalog table icon
+    */
+  --catalog-table-icon-width: 30px;
+  --catalog-table-icon-height: 30px;
+  --catalog-table-icon-border-radius: 4px;
+  --catalog-table-icon-bg-color: var(--bg-color-tonal);
+  --catalog-table-icon-border-color: var(--border-color-secondary);
+  --catalog-table-icon-border-width: 1px;
+
+  /**
+    * @tokens Catalog table entity title
+    */
+  --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
+  --catalog-table-entity-title-line-height: var(--line-height-lg);
+  --catalog-table-entity-title-font-weight: var(--font-weight-semibold);
+
+  /**
+    * @tokens Catalog table description
+    */
+  --catalog-table-description-line-clamp: 3;
+  --catalog-table-description-color: var(--text-color-description);
+  --catalog-table-description-font-size: var(--font-size-base);
+  --catalog-table-description-line-height: var(--line-height-base);
+  --catalog-table-description-font-weight: var(--font-weight-regular);
+  --catalog-table-description-height: 62px;
+  --catalog-table-entity-summary-font-size: var(--font-size-sm);
+  --catalog-table-entity-summary-line-height: var(--line-height-sm);
+
+  --catalog-table-content-gap: var(--spacing-xxs);
+
+  --catalog-table-tag-bg: transparent;
+
+  /**
+    * @tokens Catalog entity type tags
+    */
+  --catalog-entity-service-tag-text-color: var(--color-blue-7);
+  --catalog-entity-service-tag-border-color: var(--color-blue-4);
+
+  --catalog-entity-domain-tag-text-color: var(--color-grass-8);
+  --catalog-entity-domain-tag-border-color: var(--color-grass-4);
+
+  --catalog-entity-team-tag-text-color: var(--color-purple-7);
+  --catalog-entity-team-tag-border-color: var(--color-purple-4);
+
+  --catalog-entity-user-tag-text-color: var(--color-green-7);
+  --catalog-entity-user-tag-border-color: var(--color-green-4);
+
+  --catalog-entity-api-description-tag-text-color: var(--color-sky-8);
+  --catalog-entity-api-description-tag-border-color: var(--color-sky-5);
+
+  /**
+    * @tokens Catalog view mode toggle
+    */
+  --catalog-view-mode-toggle-gap: var(--spacing-xxs);
+  --catalog-view-mode-toggle-active-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-view-mode-button-width: 32px;
+  --catalog-view-mode-button-height: 32px;
+  --catalog-view-mode-button-border-radius: var(--border-radius-md);
+  --catalog-view-mode-table-icon-size: 12px;
+  --catalog-view-mode-cards-icon-size: 13px;
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-text-color: var(--text-color-description);
+  --catalog-empty-state-min-height: 300px;
+  --catalog-empty-state-header-text-color: var(--text-color-primary);
+  --catalog-empty-state-header-font-size: var(--font-size-xl);
+  --catalog-empty-state-header-font-weight: var(--font-weight-medium);
+  --catalog-empty-state-header-line-height: var(--line-height-xl);
+  --catalog-empty-state-font-size: var(--font-size-base);
+  --catalog-empty-state-line-height: var(--line-height-base);
+
+
+  --catalog-avatar-bg-color: #ededf2;
+  // @tokens End
+`;

package/src/components/CatalogClassic/CatalogClassicHighlight.tsx

@@ -48,7 +48,7 @@ export function CatalogClassicHighlight(props: CatalogClassicHighlightProps): JS
       </>
     );
   } else {
-    return <>children</> || null;
+    return <>{children}</>;
   }
 }
 

package/src/components/Filter/Filter.tsx

@@ -14,14 +14,22 @@ const filterComponents = {
   checkboxes: FilterCheckboxes,
 } as const;
 
-export function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null {
+export function Filter({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+}: FilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (
     <FilterGroup data-component-name="Filter/Filter" key={filter.property + filter.title}>
-      <FilterComponent filter={filter} filterValuesCasing={filterValuesCasing} />
+      <FilterComponent
+        filter={filter}
+        filterValuesCasing={filterValuesCasing}
+        showCounter={showCounter}
+      />
     </FilterGroup>
   );
 }

package/src/components/Filter/FilterCheckboxes.tsx

@@ -13,7 +13,11 @@ import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { changeTextCasing } from '@redocly/theme/core/utils';
 
-export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element {
+export function FilterCheckboxes({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+}: FilterProps): JSX.Element {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
@@ -24,7 +28,7 @@ export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): J
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <FilterOptions>
-        {filter.filteredOptions.map(({ value, count }) => {
+        {filter.options.map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
           return (
             <FilterCheckboxOption
@@ -35,11 +39,11 @@ export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): J
                 telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
-              <CheckboxIcon checked={filter.selectedOptions.has(value)} />
+              <CheckboxIcon checked={filter.selectedOptions.has(value?.toLowerCase())} />
               <FilterOptionLabel data-translation-key={value}>
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>
-              <CounterTag borderless>{count}</CounterTag>
+              {showCounter && <CounterTag borderless>{count}</CounterTag>}
             </FilterCheckboxOption>
           );
         })}

package/src/components/Filter/FilterContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
@@ -16,6 +16,8 @@ export type FilterContentProps = {
   filters: ResolvedFilter[];
   filterTerm: string;
   filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  hideSearch?: boolean;
+  showCounter?: boolean;
 };
 
 export function FilterContent({
@@ -23,7 +25,9 @@ export function FilterContent({
   filters,
   filterTerm,
   filterValuesCasing,
-}: FilterContentProps): JSX.Element {
+  hideSearch,
+  showCounter = true,
+}: FilterContentProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -45,6 +49,10 @@ export function FilterContent({
     setFilterTerm('');
   };
 
+  if (!filters.length) {
+    return null;
+  }
+
   return (
     <FilterContentWrapper data-component-name="Filter/FilterContent">
       <FiltersHeader>
@@ -57,13 +65,16 @@ export function FilterContent({
           </Button>
         ) : null}
       </FiltersHeader>
-      <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
-      <FilterItems>
+      {!hideSearch && (
+        <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
+      )}
+      <FilterItems hideSearch={hideSearch}>
         {filters.map((filter, idx) => (
           <Filter
             filter={filter}
             key={filter.property + '-' + idx}
             filterValuesCasing={filterValuesCasing}
+            showCounter={showCounter}
           />
         ))}
       </FilterItems>
@@ -91,11 +102,16 @@ const FiltersTitle = styled.div`
   line-height: var(--filter-content-title-line-height);
 `;
 
-const FilterItems = styled.div`
+const FilterItems = styled.div<{ hideSearch?: boolean }>`
   padding: var(--filter-content-items-padding);
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   border-top: 1px solid var(--border-color-secondary);
+  ${({ hideSearch }) =>
+    hideSearch &&
+    css`
+      border-top: none;
+    `}
 `;

package/src/components/Filter/FilterInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -12,7 +12,19 @@ export type FilterInputProps = {
 };
 
 export function FilterInput(props: FilterInputProps): JSX.Element {
-  const { value, onChange } = props;
+  const { value: initialValue, onChange } = props;
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+    onChange(newValue);
+  };
 
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -22,8 +34,8 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
       <InputIcon />
       <Input
         value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={translate('catalog.filters.placeholder', 'Type to filter...')}
+        onChange={handleChange}
+        placeholder={translate('catalog.filters.placeholder', 'Search')}
       />
     </InputWrapper>
   );

package/src/components/Filter/FilterSelect.tsx

@@ -12,13 +12,17 @@ import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { changeTextCasing } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
-export function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element {
+export function FilterSelect({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+}: FilterProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   let selectOptions: SelectOption<string>[] = [];
 
-  const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
+  const defaultOptionCount = filter.options.reduce((acc, option) => acc + option.count, 0);
 
   selectOptions = [
     {
@@ -32,14 +36,14 @@ export function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.E
         </FilterOption>
       ),
     },
-    ...filter.filteredOptions.map((option) => ({
+    ...filter.options.map((option) => ({
       value: option.value,
       element: (
         <FilterOption key={option.value}>
           <FilterOptionLabel data-translation-key={option.value}>
             {changeTextCasing(translate(option.value), filterValuesCasing)}
           </FilterOptionLabel>
-          <CounterTag borderless>{option.count}</CounterTag>
+          {showCounter && <CounterTag borderless>{option.count}</CounterTag>}
         </FilterOption>
       ),
     })),

package/src/components/LoadMore/LoadMore.tsx

@@ -0,0 +1,38 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+
+export function LoadMore({
+  icon,
+  onClick,
+  disabled,
+  blinking,
+  label,
+}: {
+  icon: JSX.Element;
+  onClick: () => void;
+  disabled: boolean;
+  blinking: boolean;
+  label: string;
+}) {
+  return (
+    <LoadMoreWrapper data-component-name="LoadMore/LoadMore">
+      <Button
+        variant="secondary"
+        icon={icon}
+        iconPosition="left"
+        onClick={onClick}
+        disabled={disabled}
+        blinking={blinking}
+      >
+        {label}
+      </Button>
+    </LoadMoreWrapper>
+  );
+}
+
+const LoadMoreWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;

package/src/components/Markdown/Markdown.tsx

@@ -57,7 +57,7 @@ export const Markdown = styled.main.attrs<{
 
   ${markdownLinksCss}
 
-  div[id], a[id], a[name] {
+  a[name], [id] {
     scroll-margin-top: var(--navbar-height);
   }