@redocly/theme 0.18.4-patch.1 → 0.18.5

package/src/components/Button/Button.tsx

@@ -5,12 +5,11 @@ import type { FlattenSimpleInterpolation, Keyframes } from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export type ButtonSize = 'default' | 'small' | 'large' | string;
-export type ButtonColor = 'default' | 'primary' | string;
-export type ButtonVariant = 'outlined' | 'contained' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
 
 export interface ButtonProps {
-  children?: React.ReactNode;
   color?: ButtonColor;
   disabled?: boolean;
   blinking?: boolean;
@@ -19,8 +18,6 @@ export interface ButtonProps {
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
-  icon?: JSX.Element;
-  title?: string;
   onClick?: (e?: any) => void;
 }
 
@@ -40,57 +37,47 @@ const getBlink = (): Keyframes => keyframes`
   }
 `;
 
-const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => css`
+const getSize = (size: ButtonSize = 'medium'): 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: var(--spacing-xs);
   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}${variant ? ` button-${variant}` : ''}${
+    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${
       extraClass ? ` ${extraClass}` : ''
     }`,
     'data-component-name': 'Button/Button',
   }),
 )<ButtonProps>`
+  text-decoration: none;
+  text-align: center;
+
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${baseButtonStyles}
@@ -98,22 +85,38 @@ const StyledButton = styled.button.attrs(
   ${({ variant }) =>
     variant === 'outlined'
       ? css`
-          background-color: var(--button-background-color);
+          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;
+          }
         `
-      : variant === 'text'
-      ? css`
+      : css`
           color: var(--button-color);
-          border-color: var(--button-border-color);
+          border: 2px solid var(--button-background-color);
           background-color: var(--button-background-color);
-
           &:hover {
-            color: var(--button-hover-color);
-            border-color: var(--button-hover-border-color);
+            border: 2px solid var(--button-hover-background-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)}
 
@@ -136,30 +139,21 @@ const StyledButton = styled.button.attrs(
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-border-color);
+        border-color: var(--button-disabled-background-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 <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <Link to={props.to}>
+        <StyledButton {...props} />
+      </Link>
+    );
   } else {
-    return button;
+    return <StyledButton {...props} />;
   }
 };
 

package/src/components/Button/index.ts

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

package/src/components/Catalog/Catalog.tsx

@@ -2,17 +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 useModalScrollLock from '@theme/hooks/useModalScrollLock';
+import type { CatalogConfig } from '@theme/config';
 
 import { useCatalog } from './useCatalog';
 
@@ -27,63 +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();
-
-  useModalScrollLock(isAddingFilter);
 
   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}
-          filterValuesCasing={catalogConfig.filterValuesCasing}
-        />
-        {isAddingFilter && (
-          <FilterPopover
-            setIsAddingFilter={setIsAddingFilter}
-            filters={filters}
-            filterValuesCasing={catalogConfig.filterValuesCasing}
+        <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} />
@@ -97,86 +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')};
+    }
+  }
 `;
 
-export const CatalogPageContent = styled.main`
+const CatalogPageContent = styled.main`
   flex: 1;
-  width: 90%;
-  margin: 0 auto;
-  padding: 0;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    width: 100%;
-    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);
 `;
 
-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);
-
+const CatalogTitle = styled(H2)`
   && {
     margin: 0;
   }
 `;
 
-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 CatalogDescription = styled.p`
+  margin: 16px 0 32px 0;
+  font-size: 16px;
+  color: var(--text-color-secondary);
 `;
 
-export const CatalogPageWrapper = styled.div`
-  --sidebar-width: var(--catalog-sidebar-width, 285px);
+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);
@@ -185,7 +166,7 @@ export 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;
@@ -193,45 +174,44 @@ export const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.medium} {
-    flex-direction: row;
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
   }
 `;
 
-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;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    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);
   }
-`;
 
-export const CatalogPageDescriptionWrapper = styled.div`
-  display: none;
+  &:focus {
+    color: var(--text-color);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+  }
 
-  ${({ theme }) => theme.mediaQueries.medium} {
-    display: block;
+  &:-webkit-autofill {
+    background-color: var(--input-background-color);
   }
 `;