@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.1

package/src/components/Feedback/Stars.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { StarIcon } from '@redocly/theme/icons/StarIcon/StarIcon';
+import { StarFilledIcon } from '@redocly/theme/icons/StarFilledIcon/StarFilledIcon';
+
 export type StarsProps = {
   max?: number;
   name?: string;
@@ -8,39 +11,34 @@ export type StarsProps = {
   onChange: (value: number) => void;
 };
 
-export const Stars = ({ max = 5, onChange, value }: StarsProps): JSX.Element => {
+export function Stars({ max = 5, onChange, value }: StarsProps): JSX.Element {
   const [hovered, setHovered] = React.useState(value || 0);
   const stars: JSX.Element[] = [];
 
   for (let index = 1; index <= max; index++) {
     stars.push(
       <Star
+        data-testid={`star-${index}`}
         key={index}
         onClick={() => onChange(index)}
         onMouseOver={() => setHovered(index)}
         onMouseLeave={() => !value && setHovered(0)}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-          {hovered < index ? (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
-            </g>
-          ) : (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
-            </g>
-          )}
-        </svg>
+        {hovered < index ? (
+          <StarIcon color="var(--feedback-star-color)" />
+        ) : (
+          <StarFilledIcon color="var(--feedback-star-color)" />
+        )}
       </Star>,
     );
   }
 
-  return <StarsWrapper>{stars}</StarsWrapper>;
-};
+  return <StarsWrapper data-component-name="Feedback/Stars">{stars}</StarsWrapper>;
+}
 
 const StarsWrapper = styled.div`
   display: flex;
-  gap: 8px;
+  gap: var(--spacing-xs);
   flex-direction: row;
   align-items: center;
 `;
@@ -52,5 +50,6 @@ const Star = styled.button.attrs(() => ({
   padding: 0;
   border: none;
   background-color: transparent;
-  gap: 8px;
+  height: 16px;
+  gap: var(--spacing-xs);
 `;

package/src/components/Feedback/variables.ts

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+
+export const feedback = css`
+  /**
+  * @tokens Feedback
+  */
+  --feedback-padding: var(--spacing-base) 0;
+  --feedback-font-size: var(--font-size-base);
+  --feedback-line-height: var(--line-height-base);
+  --feedback-font-family: var(--font-family-base);
+  --feedback-text-color: var(--text-color-primary);
+  --feedback-bg-color: transparent;
+  --feedback-star-color: var(--color-carrot-6);
+  --feedback-width: fit-content; // @presenter Width
+  --feedback-border-radius: var(--border-radius-lg);
+  --feedback-report-dialog-max-width: 90%; // @presenter Width
+  --feedback-report-dialog-max-height: 300px; // @presenter Height
+  --feedback-report-dialog-width: 480px; // @presenter Width
+
+  --feedback-header-text-color: var(--text-color-primary);
+  --feedback-header-font-size: var(--font-size-lg);
+  --feedback-header-line-height: var(--line-height-lg);
+
+  --feedback-comment-min-width: 256px; // @presenter Width
+  --feedback-comment-max-width: 480px; // @presenter Width
+
+  @media screen and (max-width: 500px) {
+    --feedback-comment-max-width: 100%;
+  }
+  // @tokens End
+`

package/src/components/Filter/Filter.tsx

@@ -1,276 +1,33 @@
 import React from 'react';
 import styled from 'styled-components';
-import { DatePicker } from 'react-date-picker';
 
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { useTranslate } from '@portal/hooks';
-import { CheckboxIcon } from '@theme/icons';
-import { Select } from '@theme/components/Select';
-import type { ThemeConfig } from '@theme/config';
+import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
 
-export function Filter({
-  filter,
-  filterValuesCasing,
-}: {
-  filter: ResolvedFilter & { selectedOptions: any };
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}) {
-  const { translate } = useTranslate();
+import { FilterSelect } from '@redocly/theme/components/Filter/FilterSelect';
+import { FilterCheckboxes } from '@redocly/theme/components/Filter/FilterCheckboxes';
+import { FilterDateRange } from '@redocly/theme/components/Filter/FilterDateRange';
 
+const filterComponents = {
+  select: FilterSelect,
+  'date-range': FilterDateRange,
+  checkboxes: FilterCheckboxes,
+} as const;
+
+export function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null {
   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('theme.catalog.filters.select.all', '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>
-        ),
-      })),
-    );
-  }
+  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (
-    <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)} </FilterTitle>
-      {filter.type === 'select' ? (
-        <StyledSelect
-          value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
-          onChange={(value) => filter.selectOption(value)}
-          options={selectOptions}
-        />
-      ) : filter.type === 'date-range' ? (
-        <>
-          <DatePickerWrapper>
-            <span>From:</span>
-            <DatePicker
-              closeCalendar={true}
-              format="y-MM-dd"
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              value={filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null}
-              minDetail="decade"
-              maxDate={new Date()}
-              onChange={(from) => {
-                if (Array.isArray(from)) return;
-                filter.selectOption({
-                  ...(filter.selectedOptions as any),
-                  from: formatDateWithNoTimeZone(from),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-          <DatePickerWrapper>
-            <span>To:</span>
-            <DatePicker
-              closeCalendar={true}
-              dayPlaceholder="DD"
-              monthPlaceholder="MM"
-              yearPlaceholder="YYYY"
-              format="y-MM-dd"
-              minDate={
-                filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined
-              }
-              value={filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : null}
-              minDetail="decade"
-              onChange={(to) => {
-                if (Array.isArray(to)) return;
-                filter.selectOption({
-                  ...filter.selectedOptions,
-                  to: formatDateWithNoTimeZone(to),
-                });
-              }}
-            />
-          </DatePickerWrapper>
-        </>
-      ) : (
-        filter.filteredOptions.map((value: any) => {
-          const id = 'filter--' + filter.property + '--' + 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>
-          );
-        })
-      )}
+    <FilterGroup data-component-name="Filter/Filter" key={filter.property + filter.title}>
+      <FilterComponent filter={filter} filterValuesCasing={filterValuesCasing} />
     </FilterGroup>
   );
 }
 
-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);
-`;
-
-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: var(--filter-option-count-border);
-  background-color: var(--filter-option-count-background-color);
-`;
-
-const FilterTitle = styled.h4`
-  font-weight: var(--filter-title-font-weight);
-  font-size: var(--filter-title-font-size);
-  margin: var(--filter-title-margin);
-`;
-
-const FilterOption = styled.label.attrs({ 'data-cy': 'Filter/FilterOption' })`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  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)`
-  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 DatePickerWrapper = styled.div`
-  color: var(--filter-date-picker-color);
   display: flex;
-  flex-direction: row;
-  margin: var(--filter-date-picker-margin);
-
-  align-items: center;
-  gap: var(--filter-date-picker-gap);
-
-  > span {
-    width: var(--filter-date-picker-width);
-  }
-
-  .react-date-picker {
-    flex: 1;
-  }
-
-  .react-calendar__tile--now {
-    background: var(--filter-date-picker-tile-background);
-    color: var(--filter-date-picker-tile-color);
-
-    &:enabled:hover,
-    &:enabled:focus {
-      background: var(--filter-date-picker-tile-hover-background);
-      color: var(--filter-date-picker-tile-hover-color);
-    }
-  }
-
-  .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: var(--filter-date-picker-button-padding);
-
-    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);
-    }
-  }
-
-  .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);
-  }
+  flex-direction: column;
+  gap: var(--filter-group-gap);
 `;
-
-function padZero(num: number) {
-  return num < 10 ? '0' + num : num;
-}
-
-function formatDateWithNoTimeZone(date?: Date | null) {
-  if (!date) return date;
-  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterTitle } from '@redocly/theme/components/Filter/FilterTitle';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing } from '@redocly/theme/core/utils';
+
+export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  return (
+    <FilterCheckboxesWrapper data-component-name="Filter/FilterCheckboxes">
+      <FilterTitle data-translation-key={filter.titleTranslationKey}>
+        {translate(filter.titleTranslationKey, filter.title)}
+      </FilterTitle>
+      <FilterOptions>
+        {filter.filteredOptions.map(({ value, count }) => {
+          const id = 'filter--' + filter.property + '--' + value;
+          return (
+            <FilterCheckboxOption
+              key={id}
+              role="link"
+              onClick={() => {
+                filter.toggleOption(value);
+                telemetry.send('filter_checkbox_toggled', { id });
+              }}
+            >
+              <CheckboxIcon checked={filter.selectedOptions.has(value)} />
+              <FilterOptionLabel data-translation-key={value}>
+                {changeTextCasing(translate(value), filterValuesCasing)}
+              </FilterOptionLabel>
+              <CounterTag borderless>{count}</CounterTag>
+            </FilterCheckboxOption>
+          );
+        })}
+      </FilterOptions>
+    </FilterCheckboxesWrapper>
+  );
+}
+
+const FilterCheckboxOption = styled(FilterOption)`
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+
+const FilterCheckboxesWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+`;

package/src/components/Filter/FilterContent.tsx

@@ -1,30 +1,28 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ThemeConfig } from '@theme/config';
-import { Button } from '@theme/components/Button';
-import { useTranslate } from '@portal/hooks';
-import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter';
-import { Sidebar } from '@theme/components/Sidebar';
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { StyledInput } from '@theme/components/Filter/FilterPopover';
+import type { ResolvedFilter } from '@redocly/theme/core/types';
+import type { ThemeConfig } from '@redocly/theme/config';
 
-interface FilterContentProps {
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Filter } from '@redocly/theme/components/Filter/Filter';
+
+type FilterContentProps = {
   setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
   filterTerm: string;
-  isMobile: boolean;
   filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}
+};
 
 export function FilterContent({
   setFilterTerm,
   filters,
   filterTerm,
-  isMobile,
   filterValuesCasing,
-}: FilterContentProps) {
+}: FilterContentProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const hasActiveFilters = filters.some((filter) => {
@@ -42,14 +40,18 @@ export function FilterContent({
   };
 
   return (
-    <FilterContentWrapper isMobile={isMobile}>
-      <FilterControls>
-        <StyledInput
-          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
-          value={filterTerm}
-          onChange={(e) => setFilterTerm(e.target.value)}
-        />
-      </FilterControls>
+    <FilterContentWrapper data-component-name="Filter/FilterContent">
+      <FiltersHeader>
+        <FiltersTitle data-translation-key="theme.catalog.filters.title">
+          {translate('theme.catalog.filters.title', 'Filters')}
+        </FiltersTitle>
+        {hasActiveFilters ? (
+          <Button size="medium" variant="ghost" onClick={handleClearAll}>
+            {translate('theme.catalog.filters.clearAll', 'Clear filters')}
+          </Button>
+        ) : null}
+      </FiltersHeader>
+      <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
       <FilterItems>
         {filters.map((filter, idx) => (
           <Filter
@@ -59,47 +61,35 @@ export function FilterContent({
           />
         ))}
       </FilterItems>
-      {hasActiveFilters && (
-        <ActionsContainer>
-          <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
-            {translate('theme.catalog.filters.clearAll', 'Clear all filters')}
-          </ClearAllButton>
-        </ActionsContainer>
-      )}
     </FilterContentWrapper>
   );
 }
 
-const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
-  width: var(--sidebar-width);
-  display: none;
-
-  ${Button} {
-    width: var(--filter-content-clear-button-width);
-  }
+const FilterContentWrapper = styled.div`
+  padding: var(--filter-content-padding-vertical) var(--filter-content-padding-horizontal);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-content-gap);
+`;
 
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
-    display: flex;
-    border-right: 1px solid var(--filter-content-border-color);
+const FiltersHeader = styled.div`
+  display: flex;
+  padding: var(--filter-content-header-padding-vertical)
+    var(--filter-content-header-padding-horizontal);
+`;
 
-    ${FilterControls} {
-      background: var(--filter-controls-background-color);
-    }
-  }
+const FiltersTitle = styled.div`
+  margin-right: auto;
+  font-size: var(--filter-content-title-font-size);
+  font-weight: var(--filter-content-title-font-weight);
+  line-height: var(--filter-content-title-line-height);
 `;
 
 export const FilterItems = styled.div`
-  overflow: scroll;
   padding: var(--filter-content-items-padding);
-`;
-
-const ActionsContainer = styled.div`
+  height: 100%;
   display: flex;
-  align-items: center;
-  padding: var(--spacing-base) var(--spacing-lg);
-  margin-top: auto;
-`;
-
-const ClearAllButton = styled(Button)`
-  width: var(--filter-content-clear-button-width);
+  flex-direction: column;
+  gap: var(--spacing-base);
+  border-top: 1px solid var(--border-color-secondary);
 `;

package/src/components/Filter/FilterDateRange.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { FilterTitle } from '@redocly/theme/components/Filter/FilterTitle';
+import { DatePicker } from '@redocly/theme/components/DatePicker/DatePicker';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
+
+export function FilterDateRange({ filter }: FilterProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const from = filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined;
+  const to = filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined;
+
+  return (
+    <FilterDateRangeWrapper data-component-name="Filter/FilterDateRange">
+      <FilterTitle data-translation-key={filter.titleTranslationKey}>
+        {translate(filter.titleTranslationKey, filter.title)}
+      </FilterTitle>
+      <FilterOptions>
+        <DateRangeWrapper>
+          <DateRangeRow>
+            <span>From:</span>
+            <DatePicker
+              closeCalendar={true}
+              format="y-MM-dd"
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              value={from}
+              minDetail="decade"
+              maxDate={new Date()}
+              onChange={(from) => {
+                if (Array.isArray(from)) return;
+                filter.selectOption({
+                  ...filter.selectedOptions,
+                  from: formatDateWithoutTimeZone(from),
+                  to: formatDateWithoutTimeZone(to),
+                });
+              }}
+            />
+          </DateRangeRow>
+          <DateRangeRow>
+            <span>To:</span>
+            <DatePicker
+              closeCalendar={true}
+              dayPlaceholder="DD"
+              monthPlaceholder="MM"
+              yearPlaceholder="YYYY"
+              format="y-MM-dd"
+              minDate={from}
+              value={to}
+              minDetail="decade"
+              onChange={(to) => {
+                if (Array.isArray(to)) return;
+                filter.selectOption({
+                  ...filter.selectedOptions,
+                  from: formatDateWithoutTimeZone(from),
+                  to: formatDateWithoutTimeZone(to),
+                });
+              }}
+            />
+          </DateRangeRow>
+        </DateRangeWrapper>
+      </FilterOptions>
+    </FilterDateRangeWrapper>
+  );
+}
+
+const DateRangeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-options-gap);
+`;
+
+const DateRangeRow = styled.div`
+  color: var(--filter-date-picker-color);
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  gap: var(--filter-date-picker-gap);
+
+  > span {
+    width: var(--filter-date-picker-width);
+    color: var(--filter-option-label-color);
+  }
+`;
+const FilterDateRangeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+`;