@redocly/theme 0.18.2 → 0.18.3-patch.1

package/src/components/Dropdown/styledVariables.ts

@@ -0,0 +1,27 @@
+import { css } from "styled-components";
+
+export const dropdown = css`
+  /**
+    * @tokens Dropdown
+    * */
+  --dropdown-font-size: var(--font-size-base); // @presenter FontSize
+  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-text-color: var(--text-secondary); // @presenter Color
+  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --dropdown-list-min-width: 100px;
+  --dropdown-list-max-width: 300px;
+  --dropdown-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-list-background-color: var(--background-color); // @presenter Color
+  --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
+
+  // @tokens End
+`;

package/src/components/EditPageButton/EditPageButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
+import { telemetry } from '@portal/telemetry';
 
 export interface EditPageButtonProps {
   text: string;
@@ -11,7 +12,7 @@ export interface EditPageButtonProps {
 
 export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
   return (
-    <EditButton to={to}>
+    <EditButton to={to} onClick={() => telemetry.send('edit_page_link_clicked', {})}>
       {icon ? <ButtonIcon src={icon} /> : null}
       <ButtonText>{text}</ButtonText>
     </EditButton>
@@ -21,12 +22,16 @@ export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Ele
 const EditButton = styled(Link)`
   margin-left: auto;
   display: inline-flex;
-  color: var(--color-content);
+  color: var(--text-secondary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
 
+  &:hover {
+    color: var(--text-primary);
+  }
+
   @media print {
     display: none;
   }

package/src/components/Feedback/Comment.tsx

@@ -67,6 +67,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Feedback.tsx

@@ -6,6 +6,7 @@ import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedbac
 import { Rating, Sentiment, Comment } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+import { telemetry } from '@portal/telemetry';
 
 export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const { submitFeedback } = useSubmitFeedback();
@@ -20,7 +21,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Rating
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'rating', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'rating', values, path });
+                telemetry.send('feedback_sent', { type: 'rating' });
+              }}
             />
           </Wrapper>
         );
@@ -29,7 +33,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Sentiment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'sentiment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'sentiment', values, path });
+                telemetry.send('feedback_sent', { type: 'sentiment' });
+              }}
             />
           </Wrapper>
         );
@@ -38,7 +45,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Comment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'comment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'comment', values, path });
+                telemetry.send('feedback_sent', { type: 'comment' });
+              }}
             />
           </Wrapper>
         );

package/src/components/Feedback/Rating.tsx

@@ -116,5 +116,9 @@ const Star = styled.span`
 
 const Label = styled.h3`
   margin-right: 15px;
-  font-family: var(--font-family-base);
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
 `;

package/src/components/Feedback/Reasons.tsx

@@ -77,6 +77,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 
@@ -97,7 +102,7 @@ const OptionWrapper = styled.div`
     cursor: pointer;
   }
   label {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     cursor: pointer;
   }
 `;

package/src/components/Feedback/Sentiment.tsx

@@ -69,10 +69,18 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Was this page helpful?')}
       </Label>
-      <Vote onClick={() => setScore(1)}>
+      <Vote
+        onClick={() => {
+          setScore(1);
+        }}
+      >
         <ThumbUp text="Yes" />
       </Vote>
-      <Vote onClick={() => setScore(-1)}>
+      <Vote
+        onClick={() => {
+          setScore(-1);
+        }}
+      >
         <ThumbDown />
       </Vote>
     </Wrapper>
@@ -86,6 +94,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Thumbs.tsx

@@ -108,12 +108,12 @@ export const ThumbDown = ({ text }: { text?: string }) => {
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-primary-500);
+  color: var(--color-info-text);
   &:hover {
-    color: var(--color-primary-600);
+    color: var(--color-info-text-active);
     svg {
       > g {
-        fill: var(--color-primary-600);
+        fill: var(--color-info-text-active);
       }
     }
   }
@@ -125,7 +125,7 @@ const Icon = styled.div`
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary-500);
+      fill: var(--color-info-text);
     }
   }
 `;

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,68 @@ 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);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
-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.attrs({ 'data-cy': 'Filter/FilterOption' })`
+  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 +200,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 +217,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,86 @@
+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 hasActiveFilters = filters.some((filter) => {
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+      return true;
+    }
+  });
+
+  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>
+      {hasActiveFilters && (
+        <Button size="small" onClick={handleClearAll}>
+          {translate(translationKeys.placeholder, 'Clear all filters')}
+        </Button>
+      )}
+    </FilterContentWrapper>
+  );
+}
+
+const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+  width: var(--sidebar-width);
+  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);
+`;