@redocly/theme 0.18.2 → 0.18.3-patch.0

package/src/components/Filter/Filter.tsx

@@ -2,9 +2,12 @@ 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';
 
 export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
   const { translate } = useTranslate();
@@ -14,32 +17,57 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
   };
 
   if (!filter.parentUsed) return null;
+
+  let selectOptions: { value: string; component: React.ReactNode }[] = [];
+  if (filter.type === 'select') {
+    const defaultOptionCount = filter.filteredOptions.reduce(
+      (acc, option) => acc + option.count,
+      0,
+    );
+    selectOptions = [
+      {
+        value: '',
+        component: (
+          <FilterOption key="all" role="link" onClick={() => filter.selectOption('')}>
+            <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
+            <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
+          </FilterOption>
+        ),
+      },
+    ];
+    selectOptions.push(
+      ...filter.filteredOptions.map((option) => ({
+        value: option.value,
+        component: (
+          <FilterOption
+            key={option.value}
+            role="link"
+            onClick={() => filter.selectOption(option.value)}
+          >
+            <FilterOptionLabel>{translate(option.value)}</FilterOptionLabel>
+            <FilterOptionCount>{option.count}</FilterOptionCount>
+          </FilterOption>
+        ),
+      })),
+    );
+  }
+
+  let selectedOptionComponent: ReactNode;
+  if (filter.type === 'select') {
+    const selectedOption = (filter.selectedOptions as Set<any>).values().next()?.value;
+    selectedOptionComponent =
+      selectOptions.find((option) => option.value === selectedOption)?.component ||
+      selectOptions[0].component;
+  }
+
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <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>
+      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
-          onChange={(e) => filter.selectOption(e.target.value)}
-          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
-        >
-          <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>
+          selected={selectedOptionComponent}
+          options={selectOptions.map((option) => option.component)}
+        />
       ) : filter.type === 'date-range' ? (
         <>
           <DatePickerWrapper>
@@ -89,17 +117,11 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
         filter.filteredOptions.map((value: any) => {
           const id = 'filter--' + filter.property + '--' + slug(value.value);
           return (
-            <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>
+            <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
+              <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
+              <FilterOptionLabel>{translate(value.value)}</FilterOptionLabel>
+              <FilterOptionCount>{value.count}</FilterOptionCount>
+            </FilterOption>
           );
         })
       )}
@@ -108,61 +130,65 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
 }
 
 const FilterGroup = styled.div`
-  padding: 16px 0;
-  border-bottom: 1px solid var(--border-color);
+  padding: var(--filter-group-padding);
+`;
 
-  &:last-of-type {
-    border-bottom: none;
-  }
+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);
 `;
 
-const FilterTitle = styled.h4`
-  font-size: 18px;
-  font-weight: var(--font-weight-bold);
-  margin: 0;
-  margin-bottom: 16px;
+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);
+`;
 
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
+const FilterTitle = styled.h4`
+  font-weight: var(--filter-title-font-weight);
+  font-size: var(--filter-title-font-size);
+  margin: var(--filter-title-margin);
 `;
 
-const FilterValue = styled.label`
-  display: block;
+const FilterOption = styled.label`
+  display: flex;
+  align-items: center;
   cursor: pointer;
-  font-size: 16px;
-  margin: 8px 0;
+  font-weight: var(--filter-option-font-weight);
+  font-size: var(--filter-option-font-size);
+  margin: var(--filter-option-margin);
 
   input {
     cursor: pointer;
   }
 `;
 
-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;
+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);
+  }
 `;
 
 // TODO: import from portal
@@ -171,15 +197,16 @@ function slug(str: string): string {
 }
 
 const DatePickerWrapper = styled.div`
+  color: var(--filter-date-picker-color);
   display: flex;
   flex-direction: row;
-  margin-bottom: 5px;
+  margin: var(--filter-date-picker-margin);
 
   align-items: center;
-  gap: 10px;
+  gap: var(--filter-date-picker-gap);
 
   > span {
-    width: 50px;
+    width: var(--filter-date-picker-width);
   }
 
   .react-date-picker {
@@ -187,35 +214,41 @@ const DatePickerWrapper = styled.div`
   }
 
   .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
+    background: var(--filter-date-picker-tile-background);
+    color: var(--filter-date-picker-tile-color);
 
     &:enabled:hover,
     &:enabled:focus {
-      background: #b1efe7;
-      color: black;
+      background: var(--filter-date-picker-tile-hover-background);
+      color: var(--filter-date-picker-tile-hover-color);
     }
   }
 
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
+  .react-date-picker__inputGroup__input {
+    width: var(--filter-date-picker-input-width);
+
+    &:invalid {
+      background: var(--filter-date-picker-invalid-input-background);
+    }
   }
 
   .react-date-picker__button {
-    padding: 4px 4px;
+    padding: var(--filter-date-picker-button-padding);
+
     svg {
-      width: 12px;
+      stroke: var(--filter-date-picker-icon-stroke);
+      width: var(--filter-date-picker-icon-width);
     }
-  }
 
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
+    &:enabled:hover .react-date-picker__button__icon {
+      stroke: var(--filter-date-picker-hover-icon-stroke);
+    }
   }
 
-  .react-date-picker__inputGroup__input {
-    width: 20px;
+  .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);
   }
 `;
 

package/src/components/Filter/FilterContent.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '@theme';
+
+import { useTranslate } from '@portal/hooks';
+import { FilterControls } from '@theme/components/Catalog';
+import { Filter } from '@theme/components/Filter/index';
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { StyledInput } from '@theme/components/Filter/FilterPopover';
+
+interface FilterContentProps {
+  setFilterTerm: (value: string) => void;
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  isMobile: boolean;
+}
+
+export function FilterContent({
+  setFilterTerm,
+  filters,
+  filterTerm,
+  isMobile,
+}: FilterContentProps) {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    placeholder: 'theme.catalog.filters.placeholder',
+    clearAll: 'theme.catalog.filters.clearAll',
+  };
+
+  const handleClearAll = () => {
+    filters.forEach((filter) => filter.selectOption(''));
+  };
+
+  return (
+    <FilterContentWrapper isMobile={isMobile}>
+      <FilterControls>
+        <StyledInput
+          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          value={filterTerm}
+          onChange={(e) => setFilterTerm(e.target.value)}
+        />
+      </FilterControls>
+      <FilterItems>
+        {filters.map((filter, idx) => (
+          <Filter filter={filter} key={filter.property + '-' + idx} />
+        ))}
+      </FilterItems>
+      <Button size="small" onClick={handleClearAll}>
+        {translate(translationKeys.placeholder, 'Clear all filters')}
+      </Button>
+    </FilterContentWrapper>
+  );
+}
+
+const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+  display: none;
+
+  ${Button} {
+    width: var(--filter-content-clear-button-width);
+    margin: var(--filter-content-clear-button-margin);
+  }
+
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+    display: block;
+    border-right: 1px solid var(--filter-content-border-color);
+
+    ${FilterControls} {
+      background: var(--filter-controls-background-color);
+    }
+  }
+`;
+
+export const FilterItems = styled.div`
+  padding: var(--filter-content-items-padding);
+`;

package/src/components/Filter/FilterPopover.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Filter, FilterControls } from '@theme';
+
+import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
+import { useTranslate } from '@portal/hooks';
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+
+interface FilterPopoverProps {
+  setIsAddingFilter: (value: boolean) => void;
+  setFilterTerm: (value: string) => void;
+  filters: ResolvedFilter[];
+  filterTerm: string;
+}
+
+export function FilterPopover({
+  setIsAddingFilter,
+  setFilterTerm,
+  filters,
+  filterTerm,
+}: FilterPopoverProps) {
+  const translationKeys = {
+    placeholder: 'theme.catalog.filters.placeholder',
+    done: 'theme.catalog.filters.done',
+  };
+  const { translate } = useTranslate();
+
+  return (
+    <FilterPopoverWrapper>
+      <FilterPopoverHeader>
+        <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
+        <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
+          {translate(translationKeys.placeholder, 'Done')}
+        </FilterPopoverHeaderButton>
+      </FilterPopoverHeader>
+      <FilterContent
+        setFilterTerm={setFilterTerm}
+        filters={filters}
+        filterTerm={filterTerm}
+        isMobile
+      />
+      <FilterControls>
+        <StyledInput
+          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          value={filterTerm}
+          onChange={(e) => setFilterTerm(e.target.value)}
+        />
+      </FilterControls>
+      <FilterItems>
+        {filters.map((filter, idx) => (
+          <Filter filter={filter} key={filter.property + '-' + idx} />
+        ))}
+      </FilterItems>
+    </FilterPopoverWrapper>
+  );
+}
+
+const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
+  position: absolute;
+  top: 0;
+  z-index: var(--z-index-popover);
+  height: 100vh;
+  overflow: auto;
+  transition: height 0.2s ease-in-out;
+  width: 100%;
+  background-color: var(--filter-popover-background-color);
+  display: block;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    display: none;
+  }
+`;
+
+const FilterPopoverHeader = styled.div`
+  height: var(--navbar-height);
+  padding: var(--filter-popover-header-padding);
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+  border-bottom: 1px solid var(--filter-popover-header-border-color);
+  background-color: var(--filter-popover-header-background-color);
+`;
+
+const FilterPopoverHeaderLabel = styled.div`
+  color: var(--filter-popover-header-label-color);
+  justify-self: center;
+  grid-column-start: 2;
+  font-size: var(--filter-popover-header-label-font-size);
+  font-weight: var(--filter-popover-header-label-font-weight);
+`;
+
+const FilterPopoverHeaderButton = styled.div`
+  color: var(--filter-popover-header-button-color);
+  justify-self: end;
+  font-size: var(--filter-popover-header-button-font-size);
+  font-weight: var(--filter-popover-header-button-font-weight);
+  height: var(--filter-popover-header-button-height);
+  line-height: var(--filter-popover-header-button-height);
+`;
+
+export const StyledInput = styled.input`
+  border: var(--filter-input-border);
+  min-width: var(--filter-input-min-width);
+  width: 100%;
+  outline: none;
+  padding: var(--filter-input-padding);
+  border-radius: var(--filter-input-border-radius);
+  background-color: var(--filter-input-background-color);
+  color: var(--filter-input-color);
+  font-family: var(--filter-input-font-family);
+  font-size: var(--filter-input-font-size);
+  line-height: var(--filter-input-line-height);
+
+  &::placeholder {
+    opacity: var(--filter-input-placeholder-opacity);
+    color: var(--filter-input-placeholder-color);
+  }
+
+  &:hover {
+    color: var(--filter-input-hover-color);
+    border: var(--filter-input-hover-border);
+  }
+
+  &:focus {
+    color: var(--filter-input-focus-color);
+    border: var(--filter-input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--filter-input-background-color);
+  }
+`;

package/src/components/Filter/FilterTag.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ClearIcon } from '@theme/components/Search/ClearIcon';
+
+interface FilterTagProps {
+  label: string;
+  onClick: () => void;
+}
+
+export function FilterTag({ label, onClick }: FilterTagProps) {
+  return (
+    <TagWrapper onClick={onClick}>
+      <TagLabel>{label}</TagLabel>
+      <ClearIcon />
+    </TagWrapper>
+  );
+}
+
+const TagWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--filter-tag-color);
+  border-radius: var(--filter-tag-border-radius);
+  border: 1px solid var(--filter-tag-border-color);
+  background-color: var(--filter-tag-background-color);
+  padding: var(--filter-tag-padding);
+  font-size: var(--filter-tag-font-size);
+  font-weight: var(--filter-tag-font-weight);
+  margin: var(--filter-tag-margin);
+`;
+
+const TagLabel = styled.div`
+  margin: var(--filter-tag-label-margin);
+`;

package/src/components/Filter/FilterTags.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
+import { FilterTag } from '@theme/components/Filter/FilterTag';
+
+interface FilterTagsProps {
+  filters: ResolvedFilter[];
+}
+
+export function FilterTags({ filters }: FilterTagsProps) {
+  const selectedFilters: { filter: ResolvedFilter; selectedOption: string }[] = [];
+  filters.forEach((filter: ResolvedFilter & { selectedOptions: any }) => {
+    if (filter.selectedOptions?.size) {
+      for (let selectedOption of filter.selectedOptions) {
+        selectedFilters.push({
+          filter,
+          selectedOption,
+        });
+      }
+    }
+  });
+
+  return (
+    <FilterTagsWrapper>
+      {selectedFilters.map(({ filter, selectedOption }) => (
+        <FilterTag
+          key={`${filter.title}: ${selectedOption}`}
+          onClick={() => filter.toggleOption(selectedOption)}
+          label={`${filter.title}: ${selectedOption}`}
+        />
+      ))}
+    </FilterTagsWrapper>
+  );
+}
+
+const FilterTagsWrapper = styled.div`
+  display: flex;
+`;

package/src/components/Filter/index.ts

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