@redocly/theme 0.18.2 → 0.18.3-patch.1

package/src/components/Button/Button.tsx

@@ -5,11 +5,12 @@ import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
-export type ButtonVariant = 'outlined' | 'contained';
+export type ButtonSize = 'default' | 'small' | 'large' | string;
+export type ButtonColor = 'default' | 'primary' | string;
+export type ButtonVariant = 'outlined' | 'contained' | 'text';
 
 export interface ButtonProps {
+  children?: React.ReactNode;
   color?: ButtonColor;
   disabled?: boolean;
   blinking?: boolean;
@@ -18,6 +19,8 @@ export interface ButtonProps {
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
+  icon?: JSX.Element;
+  title?: string;
   onClick?: (e?: any) => void;
 }
 
@@ -37,47 +40,57 @@ const getBlink = (): Keyframes => keyframes`
   }
 `;
 
-const getSize = (size: ButtonSize = 'medium'): FlattenSimpleInterpolation => css`
+const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => css`
   font-size: var(--button-${size}-font-size);
   padding: var(--button-${size}-padding);
   min-width: var(--button-${size}-min-width);
 `;
 
 export const baseButtonStyles = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
   outline: none;
-  border: none;
-  border-radius: var(--button-border-radius);
-  font-weight: var(--button-font-weight);
-  font-size: 14px;
-  padding: 2px 20px;
   margin: var(--button-margin);
   cursor: pointer;
-  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
 
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+  border-radius: var(--button-border-radius);
+
+  font-size: var(--button-font-size);
   font-family: var(--button-font-family);
+  font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
+    background-color: var(--button-hover-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 
   &:active {
     box-shadow: var(--button-active-box-shadow);
+    background-color: var(--button-active-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-active-border-color);
   }
 `;
 
+const StyledButtonLink = styled(Link)`
+  text-decoration: none;
+`;
+
 const StyledButton = styled.button.attrs(
   ({ color = 'default', extraClass, variant }: ButtonProps) => ({
-    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${
+    className: `button-${color}${variant ? ` button-${variant}` : ''}${
       extraClass ? ` ${extraClass}` : ''
     }`,
     'data-component-name': 'Button/Button',
   }),
 )<ButtonProps>`
-  text-decoration: none;
-  text-align: center;
-
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${baseButtonStyles}
@@ -85,38 +98,22 @@ const StyledButton = styled.button.attrs(
   ${({ variant }) =>
     variant === 'outlined'
       ? css`
-          color: var(--button-background-color);
-          border: 2px solid var(--button-border-color);
-          background-color: transparent;
-          &:hover {
-            color: var(--button-hover-background-color);
-            border: 2px solid var(--button-hover-border-color);
-          }
-
-          &:active {
-            color: var(--button-active-background-color);
-            border: 2px solid var(--button-active-border-color);
-          }
-
-          &:disabled {
-            color: var(--button-disabled-color);
-            background-color: transparent;
-          }
+          background-color: var(--button-background-color);
         `
-      : css`
+      : variant === 'text'
+      ? css`
           color: var(--button-color);
-          border: 2px solid var(--button-background-color);
+          border-color: var(--button-border-color);
           background-color: var(--button-background-color);
+
           &:hover {
-            border: 2px solid var(--button-hover-background-color);
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
             background-color: var(--button-hover-background-color);
+            box-shadow: none;
           }
-
-          &:active {
-            border: 2px solid var(--button-active-background-color);
-            background-color: var(--button-active-background-color);
-          }
-        `};
+        `
+      : ''};
 
   ${({ size }) => getSize(size)}
 
@@ -139,21 +136,30 @@ const StyledButton = styled.button.attrs(
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-border-color);
         pointer-events: none;
       }
     `}
 `;
 
+const StyledIcon = styled.span`
+  display: block;
+  height: var(--button-icon-height);
+  width: var(--button-icon-width);
+`;
+
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
+  const button = (
+    <StyledButton {...props}>
+      {props.icon ? <StyledIcon>{props.icon}</StyledIcon> : null}
+      {props.children}
+    </StyledButton>
+  );
+
   if (props.to) {
-    return (
-      <Link to={props.to}>
-        <StyledButton {...props} />
-      </Link>
-    );
+    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
   } else {
-    return <StyledButton {...props} />;
+    return button;
   }
 };
 

package/src/components/Button/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/Button/Button';
+export * from '@theme/components/Button/styledVariables';

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,16 @@ 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 { useCatalog } from './useCatalog';
 
@@ -24,55 +26,56 @@ 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();
 
   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)}
-          />
-          {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>
+        <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} filters={filters} />
+        )}
         <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 +89,83 @@ 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);
+`;
+
+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 CatalogPageContent = styled.main`
   flex: 1;
-  padding: 32px;
+  padding: var(--mobile-catalog-page-padding);
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    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)`
+  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);
+  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);
+  --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 +174,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 +182,43 @@ const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
+  ${({ theme }) => theme.mediaQueries.small} {
+    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' })`
+  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.small} {
+    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);
+    }
   }
+`;
+
+const CatalogPageDescriptionWrapper = styled.div`
+  display: none;
 
-  &:-webkit-autofill {
-    background-color: var(--input-background-color);
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: block;
   }
 `;