@redocly/theme 0.18.3-patch.8 → 0.18.4

package/src/components/Filter/Filter.tsx

@@ -2,21 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatePicker } from 'react-date-picker';
 
-// import type { ReactNode } from 'react';
-
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { Checkbox } from '@theme/ui/Checkbox';
 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?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}) {
+export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
   const { translate } = useTranslate();
   const translationKeys = {
     selectAll: 'theme.catalog.filters.select.all',
@@ -24,48 +14,32 @@ export function Filter({
   };
 
   if (!filter.parentUsed) return null;
-
-  let selectOptions: { value: string; element: React.ReactNode }[] = [];
-  if (filter.type === 'select') {
-    const defaultOptionCount = filter.filteredOptions.reduce(
-      (acc, option) => acc + option.count,
-      0,
-    );
-    selectOptions = [
-      {
-        value: '',
-        element: (
-          <FilterOption key="all" onClick={() => filter.selectOption('')}>
-            <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
-            <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
-          </FilterOption>
-        ),
-      },
-    ];
-    selectOptions.push(
-      ...filter.filteredOptions.map((option) => ({
-        value: option.value,
-        element: (
-          <FilterOption key={option.value}>
-            <FilterOptionLabel>
-              {changeCasing(translate(option.value), filterValuesCasing)}
-            </FilterOptionLabel>
-            <FilterOptionCount>{option.count}</FilterOptionCount>
-          </FilterOption>
-        ),
-      })),
-    );
-  }
-
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
+      <FilterTitle>
+        {translate(filter.titleTranslationKey, filter.title)}{' '}
+        {filter.selectedOptions?.size ? (
+          <a data-translation-key={translationKeys.clear} onClick={() => filter.selectOption('')}>
+            {translate(translationKeys.clear, 'Clear')}
+          </a>
+        ) : null}
+      </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
+          onChange={(e) => filter.selectOption(e.target.value)}
           value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
-          onChange={(value) => filter.selectOption(value)}
-          options={selectOptions}
-        />
+        >
+          <option key="none" value="" data-translation-key={translationKeys.selectAll}>
+            {translate(translationKeys.selectAll, 'All')}
+          </option>
+          {filter.filteredOptions.map((value: any) => {
+            return (
+              <option key={value.value} value={value.value}>
+                {translate(value.value)} ({value.count})
+              </option>
+            );
+          })}
+        </StyledSelect>
       ) : filter.type === 'date-range' ? (
         <>
           <DatePickerWrapper>
@@ -115,13 +89,17 @@ export function Filter({
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
           return (
-            <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
-              <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
-              <FilterOptionLabel>
-                {changeCasing(translate(value.value), filterValuesCasing)}
-              </FilterOptionLabel>
-              <FilterOptionCount>{value.count}</FilterOptionCount>
-            </FilterOption>
+            <FilterValue key={id} role="link">
+              <Checkbox
+                type="checkbox"
+                id={id}
+                checked={filter.selectedOptions.has(value.value)}
+                onChange={() => filter.toggleOption(value.value)}
+              />
+              <label htmlFor={id}>
+                {translate(value.value)} ({value.count})
+              </label>
+            </FilterValue>
           );
         })
       )}
@@ -129,89 +107,62 @@ export function Filter({
   );
 }
 
-function changeCasing(
-  str: string,
-  casing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'],
-) {
-  if (!casing || casing === 'original' || !str) return str;
-
-  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`
-  padding: var(--filter-group-padding);
-`;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
 
-const FilterOptionLabel = styled.label`
-  cursor: pointer;
-  font-size: var(--filter-option-label-font-size);
-  font-weight: var(--filter-option-label-font-weight);
-  margin: var(--filter-option-label-margin);
-  color: var(--filter-option-label-color);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-const FilterOptionCount = styled.label`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: var(--filter-option-count-height);
-  color: var(--filter-option-count-color);
-  text-align: center;
-  font-size: var(--filter-option-count-font-size);
-  font-weight: var(--filter-option-count-font-weight);
-  padding: var(--filter-option-count-padding);
-  border-radius: var(--filter-option-count-border-radius);
-  border: 1px solid var(--filter-option-count-border-color);
-  background-color: var(--filter-option-count-background-color);
+  &:last-of-type {
+    border-bottom: none;
+  }
 `;
 
 const FilterTitle = styled.h4`
-  font-weight: var(--filter-title-font-weight);
-  font-size: var(--filter-title-font-size);
-  margin: var(--filter-title-margin);
+  font-size: 18px;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+  margin-bottom: 16px;
+
+  > a {
+    font-size: 14px;
+    cursor: pointer;
+  }
 `;
 
-const FilterOption = styled.label.attrs({ 'data-cy': 'Filter/FilterOption' })`
-  display: flex;
-  align-items: center;
+const FilterValue = styled.label`
+  display: block;
   cursor: pointer;
-  font-weight: var(--filter-option-font-weight);
-  font-size: var(--filter-option-font-size);
-  margin: var(--filter-option-margin);
+  font-size: 16px;
+  margin: 8px 0;
 
   input {
     cursor: pointer;
   }
 `;
 
-const StyledSelect = styled(Select)`
-  min-height: var(--filter-select-min-height);
-  color: var(--filter-select-color);
-  border: 1px solid var(--filter-select-border-color);
-  border-radius: var(--filter-select-border-radius);
-  padding: var(--filter-select-padding);
-
-  :hover {
-    border-color: var(--filter-select-hover-border-color);
-  }
-
-  ${FilterOption} {
-    margin: var(--filter-select-option-margin);
-  }
+const StyledSelect = styled.select`
+  border: 1px solid rgba(0, 0, 0, 0.23);
+
+  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);
+
+  min-width: 200px;
+  outline-color: var(--color-primary-500);
+  transition: outline 0.25s ease;
+  display: inline-block;
+  text-align: left;
+  appearance: none;
+
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 1em;
+  width: 100%;
+  padding-right: 25px;
 `;
 
 // TODO: import from portal
@@ -220,16 +171,15 @@ function slug(str: string): string {
 }
 
 const DatePickerWrapper = styled.div`
-  color: var(--filter-date-picker-color);
   display: flex;
   flex-direction: row;
-  margin: var(--filter-date-picker-margin);
+  margin-bottom: 5px;
 
   align-items: center;
-  gap: var(--filter-date-picker-gap);
+  gap: 10px;
 
   > span {
-    width: var(--filter-date-picker-width);
+    width: 50px;
   }
 
   .react-date-picker {
@@ -237,41 +187,35 @@ const DatePickerWrapper = styled.div`
   }
 
   .react-calendar__tile--now {
-    background: var(--filter-date-picker-tile-background);
-    color: var(--filter-date-picker-tile-color);
+    background: #cbf7f1;
+    color: black;
 
     &:enabled:hover,
     &:enabled:focus {
-      background: var(--filter-date-picker-tile-hover-background);
-      color: var(--filter-date-picker-tile-hover-color);
+      background: #b1efe7;
+      color: black;
     }
   }
 
-  .react-date-picker__inputGroup__input {
-    width: var(--filter-date-picker-input-width);
-
-    &:invalid {
-      background: var(--filter-date-picker-invalid-input-background);
-    }
+  .react-date-picker__inputGroup__input:invalid {
+    background: rgb(255 125 0 / 10%);
   }
 
   .react-date-picker__button {
-    padding: var(--filter-date-picker-button-padding);
-
+    padding: 4px 4px;
     svg {
-      stroke: var(--filter-date-picker-icon-stroke);
-      width: var(--filter-date-picker-icon-width);
-    }
-
-    &:enabled:hover .react-date-picker__button__icon {
-      stroke: var(--filter-date-picker-hover-icon-stroke);
+      width: 12px;
     }
   }
 
   .react-date-picker__wrapper {
-    border: 1px solid var(--filter-date-picker-wrapper-border-color);
-    border-radius: var(--filter-date-picker-wrapper-radius);
-    padding: var(--filter-date-picker-wrapper-padding);
+    border: 1px solid rgba(0, 0, 0, 0.23);
+    border-radius: var(--border-radius);
+    padding: var(--input-padding);
+  }
+
+  .react-date-picker__inputGroup__input {
+    width: 20px;
   }
 `;
 

package/src/components/Filter/index.ts

@@ -1,3 +1 @@
 export * from '@theme/components/Filter/Filter';
-export * from '@theme/components/Filter/FilterContent';
-export * from '@theme/components/Filter/styledVariables';

package/src/components/Footer/CustomFooterNavItem.tsx

@@ -25,7 +25,7 @@ const FooterItem = styled.li`
   display: inline-block;
   text-align: center;
   line-height: var(--line-height-base);
-  font-size: var(--navbar-font-size);
+  font-size: var(--navbar-item-font-size);
   margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
   font-weight: var(--font-weight-regular);
 `;

package/src/components/Footer/Footer.tsx

@@ -5,15 +5,13 @@ import { FooterColumns } from '@theme/components/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/components/Footer/FooterCopyright';
 import { isEmptyArray } from '@theme/utils';
 import { useThemeConfig } from '@theme/hooks';
-import type { LogoConfig, ResolvedNavItem } from '@theme/types/portal';
-import { Flex } from '@theme/ui';
-import { LogoContainer, NavbarLogo } from '@theme/components/NavbarLogo';
+import type { ResolvedNavItem } from '@theme/types/portal';
 
 export function Footer(): JSX.Element | null {
-  const { footer, logo } = useThemeConfig() || {};
+  const { footer } = useThemeConfig() || {};
   const { items, copyrightText } = footer || {};
 
-  if (isEmptyArray(items) || footer?.hide) {
+  if (isEmptyArray(items) || !copyrightText || footer?.hide) {
     return null;
   }
 
@@ -21,58 +19,38 @@ export function Footer(): JSX.Element | null {
     <FooterPresentationalComponent
       items={items as ResolvedNavItem[]}
       copyrightText={copyrightText}
-      logo={footer?.logo?.hide ? undefined : logo}
     />
   );
 }
 
 interface FooterPresentationalComponentProps {
   items: ResolvedNavItem[];
-  copyrightText?: string;
-  logo?: LogoConfig;
+  copyrightText: string;
   className?: string;
 }
 
 export function FooterPresentationalComponent({
   items,
   copyrightText,
-  logo,
   className,
 }: FooterPresentationalComponentProps): JSX.Element | null {
   return (
     <FooterContainer data-component-name="Footer/Footer" className={className}>
-      <ColumnsSection>
-        {logo && <NavbarLogo logo={logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>} />}
-        <FooterColumns columns={items as ResolvedNavItem[]} />
-      </ColumnsSection>
-      {copyrightText && <FooterCopyright copyrightText={copyrightText} />}
+      <FooterColumns columns={items as ResolvedNavItem[]} />
+      <FooterCopyright copyrightText={copyrightText} />
     </FooterContainer>
   );
 }
 
-const ColumnsSection = styled(Flex)`
-  flex-direction: column;
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    flex-direction: row;
-  }
-`;
-
 const FooterContainer = styled.footer`
-  padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);
-  border-top: 1px solid var(--footer-border-color);
   font-size: var(--footer-font-size);
   flex-shrink: 0;
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
+  font-family: var(--footer-font-family);
   font-weight: var(--footer-font-weight);
-
-  ${LogoContainer} {
-    display: var(--footer-logo-display);
-    margin: 0 var(--footer-logo-margin-right) var(--footer-logo-margin-bottom) 0;
-  }
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
+  a,
+  a:hover {
+    color: var(--footer-text-color);
   }
 `;

package/src/components/Footer/FooterColumn.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
-import { Image } from '@theme/components/Image/Image';
 import { telemetry } from '@portal/telemetry';
 
 interface FooterColumnProps {
@@ -14,58 +13,52 @@ interface FooterColumnProps {
 
 export function FooterColumn({ column, className }: FooterColumnProps): JSX.Element {
   const { translate } = useTranslate();
-  const { items = [] } = column;
-
-  const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
+  const hasIcon = column.items ? column.items.some((item) => !!item.icon) : false;
 
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn" className={className}>
-      <FooterColumnTitle>{translate(column.labelTranslationKey, column.label)}</FooterColumnTitle>
-      <FooterColumnItems iconsOnly={iconsOnly}>
-        {items?.map((columnItem, columnItemIndex) => {
-          if (columnItem.type === 'error') {
-            return null;
-          }
-
-          return columnItem.type === 'separator' ? (
-            <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
-              {translate(columnItem.labelTranslationKey, columnItem.label)}
-            </FooterSeparator>
-          ) : (
-            <FooterLink
-              key={columnItemIndex}
-              to={columnItem.link}
-              external={columnItem.external}
-              target={columnItem.target}
-              data-cy={columnItem.label}
-              iconsOnly={iconsOnly}
-              onClick={() => telemetry.send('footer_item_clicked', {})}
-            >
-              {columnItem.icon || columnItem.srcSet ? (
-                <FooterLinkIcon>
-                  <Image src={columnItem.icon} srcSet={columnItem.srcSet} />
-                </FooterLinkIcon>
-              ) : null}
-              {!iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label)}
-            </FooterLink>
-          );
-        })}
-      </FooterColumnItems>
+      <FooterColumnTitle withIconPadding={hasIcon}>
+        {translate(column.labelTranslationKey, column.label)}
+      </FooterColumnTitle>
+      {column?.items?.map((columnItem, columnItemIndex) => {
+        if (columnItem.type === 'error') {
+          return null;
+        }
+
+        return columnItem.type === 'separator' ? (
+          <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
+            {translate(columnItem.labelTranslationKey, columnItem.label)}
+          </FooterSeparator>
+        ) : (
+          <FooterLink
+            key={columnItemIndex}
+            to={columnItem.link}
+            external={columnItem.external}
+            target={columnItem.target}
+            data-cy={columnItem.label}
+            onClick={() => telemetry.send('footer_item_clicked', {})}
+          >
+            <FooterLinkIcon url={columnItem.icon} withIconPadding={hasIcon} />
+            {translate(columnItem.labelTranslationKey, columnItem.label)}
+          </FooterLink>
+        );
+      })}
     </FooterColumnContainer>
   );
 }
 
-const FooterColumnTitle = styled.p`
+const FooterColumnTitle = styled.p<{ withIconPadding: boolean }>`
   display: inline-block;
   font-weight: var(--footer-title-font-weight);
   font-size: var(--footer-title-font-size);
-  margin-top: 0;
-  margin-bottom: var(--mobile-footer-title-margin-bottom);
+  margin-bottom: var(--footer-title-margin-vertical);
+  ${({ withIconPadding }) =>
+    withIconPadding &&
+    css`
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  font-family: var(--footer-font-family);
   color: var(--footer-title-text-color);
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    margin-bottom: var(--footer-title-margin-bottom);
-  }
 `;
 
 const FooterSeparator = styled.div`
@@ -73,58 +66,46 @@ const FooterSeparator = styled.div`
   margin: 10px 0 5px 0;
   font-size: 0.75em;
   text-transform: uppercase;
+  font-family: var(--footer-font-family);
 `;
 
 const FooterColumnContainer = styled.div`
   display: flex;
   flex-direction: column;
-  text-align: center;
+  text-align: left;
+  margin: var(--footer-column-margin-horizontal) var(--footer-column-margin-vertical);
+  width: var(--footer-column-width);
   word-break: break-word;
-  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;
-    margin: 0 var(--footer-column-margin-horizontal);
-    border-right: 1px solid var(--footer-dividing-border-color);
-    margin-bottom: var(--footer-column-margin-bottom);
-  }
 `;
 
-export const FooterLinkIcon = styled.div`
-  display: inline-flex;
-  width: var(--footer-item-icon-width);
-  height: var(--footer-item-icon-height);
-  margin-right: var(--footer-item-icon-margin-right);
-  vertical-align: middle;
-  border: 1px solid var(--footer-item-icon-border-color);
-  border-radius: var(--footer-item-icon-border-radius);
-  padding: var(--footer-item-icon-padding);
-`;
-
-const FooterLink = styled(Link)<{ iconsOnly: boolean }>`
-  padding: var(--footer-link-padding-vertical) var(--footer-link-padding-horizontal);
+const FooterLink = styled(Link)`
+  font-weight: var(--font-weight-bold);
+  padding: var(--footer-item-padding-vertical) var(--footer-item-padding-horizontal);
   color: var(--footer-link-text-color);
   text-decoration: none;
   &:hover {
     color: var(--footer-link-hover-color);
   }
-
-  &:last-child ${FooterLinkIcon} {
-    margin-right: ${({ iconsOnly }) => (iconsOnly ? '0' : 'var(--footer-item-icon-margin-right)')};
-  }
 `;
 
-export const FooterColumnItems = styled.div<{ iconsOnly: boolean }>`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  flex-direction: ${(props) => (props.iconsOnly ? 'row' : 'column')};
-
-  ${({ theme }) => theme.mediaQueries.small} {
-    justify-content: flex-start;
-  }
+export const FooterLinkIcon = styled.i<{ url?: string; withIconPadding: boolean }>`
+  ${({ withIconPadding, url }) =>
+    withIconPadding &&
+    !url &&
+    css`
+      padding-left: calc(var(--footer-item-icon-width) + var(--footer-item-icon-margin-right));
+    `}
+  ${({ url }) =>
+    url &&
+    css`
+      background-image: url('${url}');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      width: var(--footer-item-icon-width);
+      height: var(--footer-item-icon-height);
+      display: inline-block;
+      margin-right: var(--footer-item-icon-margin-right);
+      vertical-align: middle;
+    `}
 `;

package/src/components/Footer/FooterColumns.tsx

@@ -26,15 +26,15 @@ export function FooterColumns({ columns, className }: FooterColumnsProps): JSX.E
 }
 
 export const FooterColumnsContainer = styled.div`
+  padding: var(--footer-padding-vertical) var(--footer-padding-horizontal);
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: var(--footer-container-max-width);
-  margin: 0;
-  flex: 1;
+  margin: 0 auto;
 
   ${({ theme }) => theme.mediaQueries.small} {
-    margin: 0 auto;
+    padding: 5.625em 20px 3.9375em 20px;
   }
 
   ${({ theme }) => theme.mediaQueries.print} {
@@ -47,10 +47,8 @@ export const FooterRow = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
-  flex-direction: column;
 
   ${({ theme }) => theme.mediaQueries.small} {
-    justify-content: space-between;
-    flex-direction: row;
+    justify-content: space-evenly;
   }
 `;