@redocly/theme 0.18.3-patch.2 → 0.18.3-patch.5

package/src/components/Filter/Filter.tsx

@@ -8,13 +8,14 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 import { useTranslate } from '@portal/hooks';
 import { CheckboxIcon } from '@theme/icons';
 import { Select } from '@theme/components/Select';
+import type { ThemeConfig } from '@theme/config';
 
 export function Filter({
   filter,
   filterValuesCasing,
 }: {
   filter: ResolvedFilter & { selectedOptions: any };
-  filterValuesCasing?: 'sentence';
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }) {
   const { translate } = useTranslate();
   const translationKeys = {
@@ -73,7 +74,6 @@ export function Filter({
       <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
-          withArrow={true}
           selected={selectedOptionComponent}
           options={selectOptions.map((option) => option.component)}
         />
@@ -140,11 +140,24 @@ export function Filter({
   );
 }
 
-function changeCasing(str: string, casing?: 'sentence') {
-  if (casing !== 'sentence') return str;
+function changeCasing(
+  str: string,
+  casing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'],
+) {
+  if (!casing || casing === 'original' || !str) return str;
 
-  const words = str.split(/[\s-_]+/);
-  return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  if (casing === 'lowercase') {
+    return str.toLowerCase();
+  }
+
+  if (casing === 'uppercase') {
+    return str.toUpperCase();
+  }
+
+  if (casing === 'sentence') {
+    const words = str.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  }
 }
 
 const FilterGroup = styled.div`

package/src/components/Filter/FilterContent.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { useTranslate } from '@portal/hooks';
 import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter/index';
+import { Filter } from '@theme/components/Filter';
+import { Sidebar } from '@theme/components/Sidebar';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { StyledInput } from '@theme/components/Filter/FilterPopover';
 
@@ -13,7 +16,7 @@ interface FilterContentProps {
   filters: ResolvedFilter[];
   filterTerm: string;
   isMobile: boolean;
-  filterValuesCasing?: 'sentence';
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
 export function FilterContent({
@@ -68,7 +71,7 @@ export function FilterContent({
   );
 }
 
-const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
   width: var(--sidebar-width);
   display: none;
 
@@ -77,7 +80,7 @@ const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
     margin: var(--filter-content-clear-button-margin);
   }
 
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
     display: block;
     border-right: 1px solid var(--filter-content-border-color);
 

package/src/components/Filter/FilterPopover.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Filter, FilterControls } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
 import { useTranslate } from '@portal/hooks';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
@@ -9,13 +11,20 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 interface FilterPopoverProps {
   setIsAddingFilter: (value: boolean) => void;
   filters: ResolvedFilter[];
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
-export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps) {
+export function FilterPopover({
+  setIsAddingFilter,
+  filters,
+  filterValuesCasing,
+}: FilterPopoverProps) {
   const [filterTerm, setFilterTerm] = React.useState('');
   const filteredFilters = filters
     .map((filter) => {
-      const options = filter.options.filter((option) => option.value.includes(filterTerm));
+      const options = filter.options.filter((option) =>
+        option.value.toLowerCase().includes(filterTerm.toLowerCase()),
+      );
       return options.length
         ? {
             ...filter,
@@ -43,6 +52,7 @@ export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps
         setFilterTerm={setFilterTerm}
         filters={filters}
         filterTerm={filterTerm}
+        filterValuesCasing={filterValuesCasing}
         isMobile
       />
       <FilterControls>
@@ -72,7 +82,7 @@ const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
   background-color: var(--filter-popover-background-color);
   display: block;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 `;

package/src/components/Filter/styledVariables.ts

@@ -30,7 +30,7 @@ export const filter = css`
   --filter-option-count-background-color: var(--bg-raised);
 
   --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
+  --filter-content-items-padding: 0 var(--spacing-lg);
   --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
   --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
   --filter-controls-background-color: var(--bg-base);

package/src/components/Footer/Footer.tsx

@@ -21,7 +21,7 @@ export function Footer(): JSX.Element | null {
     <FooterPresentationalComponent
       items={items as ResolvedNavItem[]}
       copyrightText={copyrightText}
-      logo={logo}
+      logo={footer?.logo?.hide ? undefined : logo}
     />
   );
 }

package/src/components/Footer/FooterColumn.tsx

@@ -83,6 +83,8 @@ const FooterColumnContainer = styled.div`
   flex: 1;
   margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
   min-width: var(--footer-column-min-width);
+  align-content: center;
+  flex-wrap: wrap;
 
   ${({ theme }) => theme.mediaQueries.small} {
     text-align: left;

package/src/components/Footer/styledVariables.ts

@@ -42,7 +42,7 @@ export const footer = css`
   --footer-copyright-text-align: start;
 
   --footer-logo-display: block;
-  --footer-logo-margin-right: 86px; // @presenter Spacing
+  --footer-logo-margin-right: 0; // @presenter Spacing
   --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
 
   --footer-language-picker-display: block;

package/src/components/Markdown/Admonition.tsx

@@ -31,18 +31,20 @@ export function Admonition({
       data-hash={dataHash}
     >
       <AlertIcon type={type} />
-      {name ? <Heading type={type}>{name}</Heading> : null}
-      <Content>{children}</Content>
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        <Content>{children}</Content>
+      </TextContainer>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div<AdmonitionTypeProps>`
-  position: relative;
-  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
-  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -58,10 +60,13 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   `}
 `;
 
-const Heading = styled.h5<AdmonitionTypeProps>`
-  display: block;
-  margin: 0 0 10px;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
 
+const Heading = styled.div<AdmonitionTypeProps>`
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/src/components/Markdown/Mermaid.tsx

@@ -28,6 +28,9 @@ export function Mermaid({
 }
 
 const Wrapper = styled.div`
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
   .mermaid > svg {
     font-size: var(--font-size-base) !important;
     max-width: 100%;

package/src/components/Markdown/styledVariables.ts

@@ -7,11 +7,11 @@ export const admonition = css`
   * @tokens Admonition typography
   */
 
-  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
   --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
   --admonition-heading-transform: uppercase;
 
@@ -21,16 +21,16 @@ export const admonition = css`
   */
 
   --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical:  var(--spacing-xs);
+  --admonition-margin-vertical: var(--spacing-lg);
   --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical:  var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
   --admonition-icon-size: 25px;
 
   /**
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: 0; // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: var(--border-width);
 
@@ -216,4 +216,15 @@ export const markdown = css`
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
 
   // @tokens End
-`;
+`;
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid 
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/components/Panel/PanelHeader.ts

@@ -18,6 +18,7 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   justify-content: space-between;
   min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/src/components/Panel/styledVariables.ts

@@ -421,7 +421,7 @@ export const apiReferencePanels = css`
   * @tokens Panel try-it tabs
   */
 
-  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
   --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
 

package/src/components/Product/ProductPicker.tsx

@@ -31,7 +31,6 @@ export const ProductPicker = () => {
     <ProductSelect
       selected={currentProductComponent}
       options={productComponents}
-      withArrow={true}
       triggerEvent="hover"
     />
   ) : null;

package/src/components/Select/Select.tsx

@@ -23,7 +23,7 @@ export const Select = ({
   selected,
   options,
   dataAttributes,
-  withArrow,
+  withArrow = true,
   triggerEvent = 'click',
   onChange,
   placement,
@@ -121,15 +121,14 @@ export const SelectInputValue = styled.div`
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : 'calc(100% + 2px)')};
+  bottom: ${({ placement }) => (placement === 'top' ? 'calc(100% + 2px)' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
   width: 100%;
   max-width: var(--select-list-max-width);
-  ${({ placement }) => (!placement || placement === 'bottom' ? 'margin-top: 2px' : '')};
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);
   border-radius: var(--select-list-border-radius);

package/src/components/Separator/SeparatorItem.tsx

@@ -23,5 +23,6 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
 
   :hover {
     color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -4,7 +4,7 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/HeaderWrapper',
   className,
 }))`
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-header-padding-bottom);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
   border-bottom: solid 1px var(--border-secondary);
 `;

package/src/components/Tag/styledVariables.ts

@@ -15,6 +15,7 @@ export const tag = css`
     */
 
   --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -39,7 +40,7 @@ export const tag = css`
     */
 
   .tag-size-large {
-    --tag-padding: 4px 16px;
+    --tag-padding: var(--tag-large-padding);
     --tag-font-size: var(--font-size-regular);
   }
 
@@ -57,7 +58,7 @@ export const tag = css`
   .tag-approved,
   .tag-get {
     --tag-color: var(--color-success-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
@@ -75,7 +76,7 @@ export const tag = css`
   .tag-deprecated,
   .tag-put {
     --tag-color: var(--color-warning-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
@@ -83,42 +84,42 @@ export const tag = css`
   .tag-processing,
   .tag-post {
     --tag-color: var(--color-info-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
     --tag-color: var(--color-cyan-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
     --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
     --tag-color: var(--color-yellow-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
     --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
     --tag-color: var(--color-geekblue-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
     --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-magneta-1); // @presenter Color
     --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 

package/src/config.ts

@@ -373,7 +373,10 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
-    filterValuesCasing: { type: 'string', enum: ['sentence'] },
+    filterValuesCasing: {
+      type: 'string',
+      enum: ['sentence', 'original', 'lowercase', 'uppercase'],
+    },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },
@@ -417,6 +420,7 @@ export const themeConfigSchema = {
       properties: {
         items: navItemsSchema,
         copyrightText: { type: 'string' },
+        logo: hideConfigSchema,
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -721,3 +725,9 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
+
+export enum ScorecardStatus {
+  BelowMinimum = 'Below minimum',
+  Highest = 'Highest',
+  Minimum = 'Minimum',
+}

package/src/globalStyle.ts

@@ -20,7 +20,7 @@ import { languagePicker } from '@theme/I18n';
 import { select } from '@theme/components/Select';
 import { userProfile, userProfileDropdown } from '@theme/components/Profile';
 import { dropdown } from '@theme/components/Dropdown';
-import { admonition, markdown } from '@theme/components/Markdown';
+import { admonition, markdown, mermaid } from '@theme/components/Markdown';
 import { tooltip } from '@theme/components/Tooltip';
 import { lastUpdated } from '@theme/components/LastUpdated';
 import { logo } from '@theme/components/NavbarLogo';
@@ -87,16 +87,16 @@ const themeColors = css`
   --color-purple-9: #22075e;
   --color-purple-10: #120338;
 
-  --color-magneta-1: #fff0f6;
-  --color-magneta-2: #ffd6e7;
-  --color-magneta-3: #ffadd2;
-  --color-magneta-4: #ff85c0;
-  --color-magneta-5: #f759ab;
-  --color-magneta-6: #eb2f96;
-  --color-magneta-7: #c41d7f;
-  --color-magneta-8: #9e1068;
-  --color-magneta-9: #780650;
-  --color-magneta-10: #520339;
+  --color-magenta-1: #fff0f6;
+  --color-magenta-2: #ffd6e7;
+  --color-magenta-3: #ffadd2;
+  --color-magenta-4: #ff85c0;
+  --color-magenta-5: #f759ab;
+  --color-magenta-6: #eb2f96;
+  --color-magenta-7: #c41d7f;
+  --color-magenta-8: #9e1068;
+  --color-magenta-9: #780650;
+  --color-magenta-10: #520339;
 
   --color-cyan-1: #e6fffb;
   --color-cyan-2: #b5f5ec;
@@ -153,16 +153,16 @@ const themeColors = css`
   --color-primary-text: #161087;
   --color-primary-text-active: #0d086e;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-5);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-7);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
+  --color-success-bg: var(--color-cyan-1);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-5);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
 
   --color-warning-bg: var(--color-gold-1);
   --color-warning-bg-hover: var(--color-gold-2);
@@ -177,7 +177,7 @@ const themeColors = css`
 
   --color-error-bg: var(--color-red-1);
   --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
+  --color-error-border: var(--color-red-7);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-5);
   --color-error-base: var(--color-red-6);
@@ -216,6 +216,7 @@ const themeColors = css`
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
   --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
+  --bg-raised-light: #fafafa; // Always light
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
   --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
@@ -949,6 +950,7 @@ export const styles = css`
     ${loadProgressBar}
     ${logo}
     ${markdown}
+    ${mermaid}
     ${menu}
     ${mobileMenu}
     ${modal}

package/src/hooks/useMobileMenu.ts

@@ -3,15 +3,14 @@ import { useLocation } from 'react-router-dom';
 
 import type { Dispatch, SetStateAction } from 'react';
 
+import useModalScrollLock from '@theme/hooks/useModalScrollLock';
+
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
-  useEffect(() => {
-    if (isOpen) document.body.classList.add('overflow-hidden');
-    else document.body.classList.remove('overflow-hidden');
-  }, [isOpen]);
+  useModalScrollLock(isOpen);
 
   return [isOpen, setIsOpen];
 }

package/src/hooks/useModalScrollLock.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function useModalScrollLock(isOpen: boolean) {
+  useEffect(() => {
+    if (isOpen) document.body.classList.add('overflow-hidden');
+    else document.body.classList.remove('overflow-hidden');
+  }, [isOpen]);
+
+  return () => {
+    document.body.classList.remove('overflow-hidden');
+  };
+}

package/src/icons/AlertIcon/AlertIcon.tsx

@@ -98,13 +98,8 @@ function Icon({ type, className }: AlertIconProps) {
 export const AlertIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/AlertIcon/AlertIcon',
 }))`
-  position: absolute;
-  left: var(--admonition-padding-horizontal);
-  top: 50%;
-  transform: translateY(-50%);
   width: var(--admonition-icon-size);
   height: var(--admonition-icon-size);
-  margin-right: var(--admonition-padding-horizontal);
   flex-shrink: 0;
 
   fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};

package/src/types/portal/src/shared/types/catalog.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig } from "@theme/config";
+import { CatalogFilterConfig, ScorecardStatus } from '@theme';
 
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
@@ -33,5 +33,11 @@ export type CatalogItem = {
   description?: string;
   image?: string;
   docsLink?: string;
+
+  scorecardStatus?: ScorecardStatus;
+  scorecardLevel?: string;
+  scoreCardSlug?: string;
+  tags?: unknown[];
+
   [k: string]: unknown;
 };

package/src/ui/Highlight.tsx

@@ -3,12 +3,12 @@ import { findAll } from 'highlight-words-core';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element {
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element | null {
   const { children } = props;
   const searchWords = React.useContext(HighlightContext);
 
   if (!searchWords.length) {
-    return <>children</> || null;
+    return children ? <>{children}</> : null;
   }
 
   function highlight(str: string, childIdx: number = 0) {