@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/components/Catalog/Catalog.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItem } from '@theme/types/portal';
-import type { CatalogConfig } from '@theme/config';
 import { HighlightContext } from '@theme/ui/Highlight';
+import { Button } from '@theme/components/Button';
+import { Filter } from '@theme/components/Filter';
 import { H2 } from '@theme/components/Typography/H2';
+import { H3 } from '@theme/components/Typography/H3';
 import { CatalogCard } from '@theme/components/Catalog/CatalogCard';
 import { usePageSharedData, useTranslate } from '@portal/hooks/index';
-import { FilterTags } from '@theme/components/Filter/FilterTags';
-import { FilterContent } from '@theme/components/Filter/FilterContent';
-import { FilterPopover } from '@theme/components/Filter/FilterPopover';
-import { Button } from '@theme/components/Button';
-import { PlusIcon } from '@theme/icons/PlusIcon';
+import type { CatalogConfig } from '@theme/config';
 
 import { useCatalog } from './useCatalog';
 
@@ -26,61 +24,55 @@ export default function Catalog(props: {
   const items = usePageSharedData('catalog') as ResolvedNavItem[];
 
   const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
-  const [isAddingFilter, setIsAddingFilter] = React.useState(false);
+
+  const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
+  const { translate } = useTranslate();
   const translationKeys = {
-    addFilter: 'theme.catalog.filters.select.addFilter',
+    placeholder: 'theme.catalog.filters.placeholder',
+    applyFilter: 'theme.catalog.filters.apply',
   };
-  const { translate } = useTranslate();
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
       <CatalogPageWrapper>
-        <FilterTagsWrapper>
-          <Button
-            variant="text"
-            size="small"
-            icon={<PlusIcon />}
-            onClick={() => setIsAddingFilter(true)}
-          >
-            {translate(translationKeys.addFilter, 'Add filter')}
-          </Button>
-          <FilterTags filters={filters} />
-        </FilterTagsWrapper>
-        <FilterContent
-          setFilterTerm={setFilterTerm}
-          filters={filters}
-          filterTerm={filterTerm}
-          isMobile={false}
-        />
-        {isAddingFilter && (
-          <FilterPopover
-            setIsAddingFilter={setIsAddingFilter}
-            setFilterTerm={setFilterTerm}
-            filters={filters}
-            filterTerm={filterTerm}
+        <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
+          <StyledInput
+            placeholder={translate(translationKeys.placeholder, 'Filter...')}
+            value={filterTerm}
+            onFocus={() => setIsFilterPanelFocused(true)}
+            onChange={(e) => setFilterTerm(e.target.value)}
           />
-        )}
+          {filters.map((filter, idx) => (
+            <Filter filter={filter} key={filter.property + '-' + idx} />
+          ))}
+          <MobileStickyApplyFilters>
+            <Button
+              data-translation-key={translationKeys.applyFilter}
+              color="secondary"
+              onClick={() => setIsFilterPanelFocused(false)}
+            >
+              {translate(translationKeys.applyFilter, 'Apply filters')}
+            </Button>
+          </MobileStickyApplyFilters>
+        </CatalogPageSidebar>
         <CatalogPageContent>
-          <CatalogPageDescriptionWrapper>
-            {catalogConfig.title ? (
-              <CatalogTitle>
-                {' '}
-                {translate(catalogConfig.titleTranslationKey, catalogConfig.title)}{' '}
-              </CatalogTitle>
-            ) : null}
-            {catalogConfig.description ? (
-              <CatalogDescription>
-                {' '}
-                {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
-              </CatalogDescription>
-            ) : null}
-          </CatalogPageDescriptionWrapper>
+          {catalogConfig.title ? (
+            <CatalogTitle>
+              {' '}
+              {translate(catalogConfig.titleTranslationKey, catalogConfig.title)}{' '}
+            </CatalogTitle>
+          ) : null}
+          {catalogConfig.description ? (
+            <CatalogDescription>
+              {' '}
+              {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
+            </CatalogDescription>
+          ) : null}
           {groups.map((group) => (
             <React.Fragment key={group.title}>
-              <CatalogSeparator>
-                <CatalogSeparatorLabel>{group.title}</CatalogSeparatorLabel>
-                <CatalogSeparatorCount>{group.items.length}</CatalogSeparatorCount>
-              </CatalogSeparator>
+              <H3>
+                {group.title} ({group.items.length})
+              </H3>
               <CatalogCards>
                 {group.items.map((item) => (
                   <CatalogCard item={item} key={item.link} />
@@ -94,83 +86,78 @@ export default function Catalog(props: {
   );
 }
 
-const CatalogSeparator = styled.div`
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-
-const CatalogSeparatorLabel = styled.div`
-  margin: var(--catalog-separator-label-margin);
-`;
+const MobileStickyApplyFilters = styled.div`
+  position: fixed;
+  display: none;
+  background-color: var(--sidebar-background-color);
+  bottom: 0;
+  padding: 16px 30px;
+  left: 0px;
+  right: 0px;
 
-const CatalogSeparatorCount = styled.div`
-  display: flex;
-  height: var(--catalog-separator-count-height);
-  padding: var(--catalog-separator-count-padding);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--catalog-separator-count-border-radius);
-  border: 1px solid var(--catalog-separator-count-border-color);
-  background: var(--catalog-separator-count-background);
+  ${Button} {
+    width: 100%;
+    margin: 0;
+  }
 `;
 
-export const FilterControls = styled.div`
-  padding: var(--mobile-catalog-filter-padding-vertical)
-    var(--mobile-catalog-filter-padding-horizontal);
-  border-bottom: 1px solid var(--border-secondary);
-  background: var(--bg-raised);
+const CatalogPageSidebar = styled.aside<{ isActiveInMobileMode?: boolean }>`
+  width: var(--sidebar-width);
+  border-right: 1px solid var(--sidebar-border-color);
+  padding: 20px 30px;
+  position: sticky;
+  top: var(--navbar-height);
+  height: calc(100vh - var(--navbar-height));
+  overflow: auto;
+
+  @media screen and (max-width: 767px) {
+    transition: height 0.2s ease-in-out;
+    width: 100%;
+    ${({ isActiveInMobileMode }) =>
+      isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
+    background-color: var(--sidebar-background-color);
+    border-bottom: 1px solid var(--sidebar-border-color);
+    z-index: var(--z-index-surface);
+
+    ${MobileStickyApplyFilters} {
+      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
+    }
+  }
 `;
 
 const CatalogPageContent = styled.main`
   flex: 1;
-  padding: var(--mobile-catalog-page-padding);
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    padding: var(--catalog-page-padding);
-  }
+  padding: 32px;
 `;
 
 const CatalogCards = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
   gap: 32px;
-  margin: var(--catalog-cards-group-margin);
 `;
 
 const CatalogTitle = styled(H2)`
-  color: var(--catalog-title-text-color);
-  font-weight: var(--catalog-title-font-weight);
-  font-size: var(--catalog-title-font-size);
-
   && {
     margin: 0;
   }
 `;
 
 const CatalogDescription = styled.p`
-  color: var(--catalog-description-text-color);
-  font-weight: var(--catalog-description-font-weight);
-  font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
 `;
 
 const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width, 300px);
 
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-secondary);
+  color: var(--text-color);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -179,7 +166,7 @@ const CatalogPageWrapper = styled.div`
     border: 0;
     width: calc(100% + 48px);
     margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-primary);
+    border-top: 1px solid var(--border-color);
   }
   a:not([role='button']) {
     text-decoration: none;
@@ -187,43 +174,44 @@ const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.small} {
-    flex-direction: row;
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
   }
 `;
 
-const FilterTagsWrapper = styled.div`
-  padding: var(--filter-tags-wrapper-padding);
-  display: flex;
-  overflow-x: scroll;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: none;
+// TODO: merge this input with the input from reference docs
+// the on in ref docs is dark, needs separate variables most likely
+const StyledInput = styled.input`
+  border: 1px solid rgba(0, 0, 0, 0.23);
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  width: 100%;
+
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--input-background-color);
+  color: var(--text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--text-color);
   }
 
-  ${Button} {
-    margin: var(--filter-add-button-margin);
-    padding: var(--filter-add-button-padding);
-    font-size: var(--filter-add-button-font-size);
-    font-weight: var(--filter-add-button-font-weight);
-    color: var(--text-secondary);
-    display: flex;
-    white-space: nowrap;
-
-    svg {
-      fill: var(--text-primary);
-    }
-
-    &:hover {
-      color: var(--text-primary);
-    }
+  &:hover {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
   }
-`;
 
-const CatalogPageDescriptionWrapper = styled.div`
-  display: none;
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
 
-  ${({ theme }) => theme.mediaQueries.small} {
-    display: block;
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
   }
 `;

package/src/components/Catalog/CatalogCard.tsx

@@ -4,114 +4,100 @@ import styled from 'styled-components';
 import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
-import { Tag } from '@theme/components/Tag';
-import { PointingArrowIcon } from '@theme/icons';
+import { Tags } from '@theme/components/Tags';
+import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    footer: 'theme.catalog.card.footer',
+  };
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
-      <StyledCard>
+      <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>
-        <CardContent>
-          <CardDescription>
-            <Highlight>{item.description ?? ''}</Highlight>
-          </CardDescription>
-          <CardFooter>
-            {item.tags && (
-              <CardTags>
-                {(item.tags as string[]).map((tag, index) => (
-                  <Tag key={tag + index} color="grey">
-                    <Highlight>{tag}</Highlight>
-                  </Tag>
-                ))}
-              </CardTags>
-            )}
-            <SelectButton>
-              <PointingArrowIcon />
-            </SelectButton>
-          </CardFooter>
-        </CardContent>
+        {/* <div>{item.image}</div> */}
+        <CardDescription>
+          <Highlight>{item.description ?? ''}</Highlight>
+        </CardDescription>
+        {item.tags ? <Tags tags={item.tags as string[]} /> : null}
+        <hr />
+        <CardFooter data-translation-key={translationKeys.footer}>
+          {translate(translationKeys.footer, 'View documentation')}
+        </CardFooter>
       </StyledCard>
     </Link>
   );
 }
 
-const SelectButton = styled.div`
-  border: 1px solid var(--catalog-card-button-border-color);
-  border-radius: 100%;
-  width: var(--catalog-card-button-width);
-  height: var(--catalog-card-button-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: var(--catalog-card-icon-color);
-  }
-`;
-
 const StyledCard = styled.div`
-  min-height: var(--catalog-card-min-height);
+  min-height: 268px;
   height: 100%;
-  color: var(--catalog-card-text-color);
-  font-size: var(--catalog-card-font-size);
-  font-weight: var(--catalog-card-font-weight);
-  background-color: var(--catalog-card-background-color);
-  border: 1px solid var(--catalog-card-border-color);
-  transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
-  cursor: pointer;
+  box-shadow: var(--box-shadow);
+
   display: flex;
   flex-direction: column;
 
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
+
   &:hover {
-    border-color: var(--catalog-card-hover-border-color);
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
 
-    ${SelectButton} {
-      transform: rotate(-45deg);
-      border-color: var(--catalog-card-hover-border-color);
-      background: var(--catalog-card-button-hover-background);
-      
-      svg {
-        fill: var(--catalog-card-icon-hover-color);
-      }
-    }
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 `;
 
 const CardTitle = styled.h4`
-  color: var(--catalog-card-title-color);
-  min-height: var(--catalog-card-title-min-height);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
   margin: 0;
-  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
+  margin-bottom: 16px;
 `;
 
 const CardDescription = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--catalog-card-description-margin-bottom);
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
 `;
 
-const CardContent = styled.div`
-  background-color: var(--catalog-card-content-background-color);
-  border-radius: var(--catalog-card-content-border-radius);
-  padding: var(--catalog-card-content-padding);
-  flex: 1;
+const CardFooter = styled.div`
+  height: 46px;
   display: flex;
+  align-items: flex-start;
+  justify-content: center;
   flex-direction: column;
-  justify-content: space-between;
-`;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
 
-const CardFooter = styled.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
 `;
-
-const CardTags = styled.div``;

package/src/components/Catalog/index.tsx

@@ -0,0 +1,3 @@
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/src/components/Catalog/useCatalog.ts

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { Location } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -45,6 +46,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       }
       return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
     });
+    telemetry.send('catalog_filter_changed', { type: 'toggle' });
     window.scrollTo(0, 0);
   }, []);
 
@@ -68,6 +70,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
             : f,
         );
       });
+      telemetry.send('catalog_filter_changed', { type: 'select' });
       window.scrollTo(0, 0);
     },
     [filtersWithOptions],
@@ -153,7 +156,16 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
         ? groupByFirstFilter(resolvedFilters, filteredItems)
         : [{ title: 'APIs', items: filteredItems }];
 
-    return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+    return {
+      groups,
+      filters: resolvedFilters,
+      setFilterTerm: (newTerm) => {
+        setFilterTerm(newTerm);
+
+        telemetry.send('catalog_filter_changed', { type: 'term' });
+      },
+      filterTerm,
+    };
   }, [
     filtersWithOptions,
     normalizedItems,

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
@@ -13,25 +13,18 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     line-height: var(--code-line-height);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
+    border-radius: ${(withControls) =>
+      withControls
+        ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+        : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-
-    ${(withControls) =>
-      withControls
-        ? css`
-            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
-            border-left: 1px solid var(--code-block-border-color);
-            border-right: 1px solid var(--code-block-border-color);
-            border-bottom: 1px solid var(--code-block-border-color);
-          `
-        : css`
-            border-radius: var(--code-block-border-radius);
-            border: 1px solid var(--code-block-border-color);
-          `}
+    border: none;
+  }
 
   /**
   * Based on prism-dark.css

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -1,18 +1,26 @@
 import styled, { css } from 'styled-components';
 
-import { Button } from '@theme/components/Button';
-
-export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
-  color: var(--code-block-controls-text-color);
+export const CodeBlockControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+}))<{ asIcon?: boolean }>`
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
 
   ${({ asIcon }) =>
     asIcon
       ? css`
-          background-color: var(--code-block-icon-controls-background-color);
+          background-color: var(--panel-samples-icon-controls-background-color);
         `
       : css`
           min-width: 90px;
-          background-color: var(--code-block-text-controls-background-color);
+          background-color: var(--panel-samples-text-controls-background-color);
         `}
 
   ${({ theme }) => theme.mediaQueries?.small} {
@@ -22,4 +30,9 @@ export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
   :not(:first-child) {
     margin-left: 5px;
   }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
 `;