@redocly/theme 0.18.3 → 0.18.4-patch.1

package/src/components/Button/styledVariables.ts

@@ -0,0 +1,104 @@
+import { css } from 'styled-components';
+
+export const button = css`
+  /**
+    * Static classnames that can be used to override styles for components:
+    * download-specification-button, next-section-button, button-base
+    */
+
+  /**
+    * @tokens Button borders
+    */
+
+  --button-border-width: 1px; //@presenter Border
+  --button-border-style: solid; //@presenter Border
+  --button-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --button-margin: 5px; // @presenter Spacing
+  --button-box-shadow: none; // @presenter Shadow
+  --button-hover-box-shadow: none; // @presenter Shadow
+  --button-active-box-shadow: none; // @presenter Shadow
+
+  /**
+    * @tokens Button typography
+    */
+
+  --button-font-size: var(--font-size-base); // @presenter FontSize
+  --button-font-family: inherit; // @presenter FontFamily
+  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  --button-default-font-size: var(--font-size-base); // @presenter FontSize
+  --button-default-padding: 8px 16px;
+
+  --button-small-font-size: var(--font-size-base); // @presenter FontSize
+  --button-small-padding: 4px 8px;
+
+  --button-large-font-size: var(--font-size-lg); // @presenter FontSize
+  --button-large-padding: 8px 16px;
+
+  /**
+    * @tokens Button icon
+    */
+  --button-icon-width: 1em; // @presenter Spacing
+  --button-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Button default
+    */
+  .button-default {
+    --button-color: var(--text-primary); // @presenter Color
+    --button-background-color: var(--bg-overlay); // @presenter Color
+    --button-border-color: var(--bg-overlay);
+
+    --button-hover-background-color: var(--bg-overlay); // @presenter Color
+    --button-hover-border-color: var(--border-primary); // @presenter Color
+
+    --button-active-background-color: var(--bg-overlay); // @presenter Color
+    --button-active-border-color: var(--button-color); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button primary
+    */
+  .button-primary {
+    --button-color: var(--text-light-solid); // @presenter Color
+    --button-background-color: var(--color-primary); // @presenter Color
+    --button-border-color: var(--color-primary); // @presenter Color
+    --button-border: 1px solid var(--button-border-color);
+
+    --button-hover-background-color: var(--color-primary-hover); // @presenter Color
+    --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+
+    --button-active-background-color: var(--color-primary-active); // @presenter Color
+    --button-active-border-color: var(--color-primary-active); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button outline
+    */
+  .button-outlined {
+    --button-background-color: transparent; // @presenter Color
+  }
+
+  /**
+    * @tokens Button text
+    */
+  .button-text {
+    --button-color: var(--text-secondary); // @presenter Color
+    --button-border-color: transparent; // @presenter Color
+    --button-background-color: transparent; // @presenter Color
+
+    --button-hover-color: var(--text-primary); // @presenter Color
+    --button-hover-background-color: transparent; // @presenter Color
+    --button-hover-border-color: transparent; // @presenter Color
+  }
+
+  // @tokens End
+`;

package/src/components/Catalog/Catalog.tsx

@@ -2,14 +2,17 @@ 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 type { CatalogConfig } from '@theme/config';
+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 useModalScrollLock from '@theme/hooks/useModalScrollLock';
 
 import { useCatalog } from './useCatalog';
 
@@ -24,55 +27,63 @@ export default function Catalog(props: {
   const items = usePageSharedData('catalog') as ResolvedNavItem[];
 
   const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
-
-  const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
-  const { translate } = useTranslate();
+  const [isAddingFilter, setIsAddingFilter] = React.useState(false);
   const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    applyFilter: 'theme.catalog.filters.apply',
+    addFilter: 'theme.catalog.filters.select.addFilter',
   };
+  const { translate } = useTranslate();
+
+  useModalScrollLock(isAddingFilter);
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
       <CatalogPageWrapper>
-        <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
-          <StyledInput
-            placeholder={translate(translationKeys.placeholder, 'Filter...')}
-            value={filterTerm}
-            onFocus={() => setIsFilterPanelFocused(true)}
-            onChange={(e) => setFilterTerm(e.target.value)}
+        <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}
+          filterValuesCasing={catalogConfig.filterValuesCasing}
+        />
+        {isAddingFilter && (
+          <FilterPopover
+            setIsAddingFilter={setIsAddingFilter}
+            filters={filters}
+            filterValuesCasing={catalogConfig.filterValuesCasing}
           />
-          {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>
-          {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}
+          </CatalogPageDescriptionWrapper>
           {groups.map((group) => (
             <React.Fragment key={group.title}>
-              <H3>
-                {group.title} ({group.items.length})
-              </H3>
+              <CatalogSeparator>
+                <CatalogSeparatorLabel>{group.title}</CatalogSeparatorLabel>
+                <CatalogSeparatorCount>{group.items.length}</CatalogSeparatorCount>
+              </CatalogSeparator>
               <CatalogCards>
                 {group.items.map((item) => (
                   <CatalogCard item={item} key={item.link} />
@@ -86,78 +97,86 @@ export default function Catalog(props: {
   );
 }
 
-const MobileStickyApplyFilters = styled.div`
-  position: fixed;
-  display: none;
-  background-color: var(--sidebar-background-color);
-  bottom: 0;
-  padding: 16px 30px;
-  left: 0px;
-  right: 0px;
+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);
+`;
 
-  ${Button} {
-    width: 100%;
-    margin: 0;
-  }
+const CatalogSeparatorLabel = styled.div`
+  margin: var(--catalog-separator-label-margin);
 `;
 
-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 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);
 `;
 
-const CatalogPageContent = styled.main`
+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);
+`;
+
+export const CatalogPageContent = styled.main`
   flex: 1;
-  padding: 32px;
+  width: 90%;
+  margin: 0 auto;
+  padding: 0;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+    padding: var(--catalog-page-padding);
+  }
 `;
 
 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)`
+export 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`
-  margin: 16px 0 32px 0;
-  font-size: 16px;
-  color: var(--text-color-secondary);
+export 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;
 `;
 
-const CatalogPageWrapper = styled.div`
-  --sidebar-width: var(--catalog-sidebar-width, 300px);
+export const CatalogPageWrapper = styled.div`
+  --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-color);
+  color: var(--text-secondary);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -166,7 +185,7 @@ const CatalogPageWrapper = styled.div`
     border: 0;
     width: calc(100% + 48px);
     margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-primary);
   }
   a:not([role='button']) {
     text-decoration: none;
@@ -174,44 +193,45 @@ const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    flex-direction: row;
   }
 `;
 
-// 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);
-  }
+const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
+  width: 90%;
+  margin: 0 auto;
+  padding: var(--filter-tags-wrapper-padding);
+  display: flex;
+  overflow-x: scroll;
 
-  &:hover {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
   }
 
-  &:focus {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
+  ${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);
+    }
   }
+`;
+
+export const CatalogPageDescriptionWrapper = styled.div`
+  display: none;
 
-  &:-webkit-autofill {
-    background-color: var(--input-background-color);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
   }
 `;

package/src/components/Catalog/CatalogCard.tsx

@@ -4,100 +4,150 @@ 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 { Tags } from '@theme/components/Tags';
-import { useTranslate } from '@portal/hooks';
+import { Tag } from '@theme/components/Tag';
+import { PointingArrowIcon } from '@theme/icons';
 import { telemetry } from '@portal/telemetry';
+import { slug } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
-  const { translate } = useTranslate();
-  const translationKeys = {
-    footer: 'theme.catalog.card.footer',
-  };
+  const hasTags = item.scorecardStatus || item.tags?.length;
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>
-        {/* <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>
+        <CardContent>
+          <CardDescription>
+            <Highlight>{item.description ?? ''}</Highlight>
+          </CardDescription>
+          <CardFooter>
+            {hasTags && (
+              <CardTags>
+                {((item.tags as string[]) || []).map((tag, index) => (
+                  <CardTag key={tag + index} color={slug(tag)}>
+                    <Highlight>{tag}</Highlight>
+                  </CardTag>
+                ))}
+                {(item.scorecardLevel && item.scorecardStatus && (
+                  <CardTag
+                    color={statusToColor(item.scorecardStatus)}
+                    className="tag-variant-scorecard-level"
+                  >
+                    <Highlight>{item.scorecardLevel}</Highlight>
+                  </CardTag>
+                )) ||
+                  null}
+              </CardTags>
+            )}
+            <SelectButton>
+              <PointingArrowIcon />
+            </SelectButton>
+          </CardFooter>
+        </CardContent>
       </StyledCard>
     </Link>
   );
 }
 
-const StyledCard = styled.div`
-  min-height: 268px;
-  height: 100%;
-  box-shadow: var(--box-shadow);
+function statusToColor(status: string) {
+  switch (status) {
+    case 'Below minimum':
+      return 'error';
+    case 'Minimum':
+      return 'warning';
+    case 'Highest':
+      return 'success';
+    default:
+      return '';
+  }
+}
 
+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;
-  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);
+  align-items: center;
+  justify-content: center;
   transition: all 0.2s ease-in-out;
 
-  &:hover {
-    /* 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);
+  svg {
+    fill: var(--catalog-card-icon-color);
   }
+`;
 
-  border-radius: 8px;
-  width: 100%;
-  padding: 24px 24px 0;
+const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
+  min-height: var(--catalog-card-min-height);
+  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: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--catalog-card-border-radius);
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  cursor: pointer;
+
+  &:hover {
+    border-color: var(--catalog-card-hover-border-color);
+
+    ${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);
+      }
+    }
 `;
 
 const CardTitle = styled.h4`
-  line-height: 26px;
-  letter-spacing: 0.8px;
-  font-size: 20px;
-  font-weight: var(--font-weight-bold);
+  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);
   margin: 0;
-  margin-bottom: 16px;
+  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
 `;
 
 const CardDescription = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height);
-  letter-spacing: 0px;
-  font-size: 16px;
-  color: var(--text-color-secondary);
-  text-align: inherit;
-  font-weight: 400;
+  margin-bottom: var(--catalog-card-description-margin-bottom);
 `;
 
-const CardFooter = styled.div`
-  height: 46px;
+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;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
   flex-direction: column;
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
+  justify-content: space-between;
+`;
 
-  a:hover & {
-    text-decoration: var(--link-hover-text-decoration);
-    color: var(--link-hover-text-color);
-  }
+const CardFooter = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+
+const CardTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  min-height: var(--spacing-xl);
+`;
+
+const CardTag = styled(Tag)`
+  margin: 0;
 `;

package/src/components/Catalog/index.ts

@@ -0,0 +1,4 @@
+export * from '@theme/components/Catalog/Catalog';
+export * from '@theme/components/Catalog/CatalogCard';
+export * from '@theme/components/Catalog/useCatalog';
+export * from '@theme/components/Catalog/styledVariables';