@redocly/theme 0.18.3-patch.0 → 0.18.3

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { CodeBlockControlButton } from '@theme/components/CodeBlock';
 import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 import { CopyButton } from '../CopyButton';
 
@@ -68,7 +69,10 @@ export function CodeBlockControls({
             toasterDuration={copy.toasterDuration}
             buttonText={copy.label}
             tooltipText={copy.tooltipText}
-            onCopyClick={copy?.onClick}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
           />
         ) : null}
 
@@ -139,6 +143,7 @@ export function CodeBlockControls({
             asIcon={controlsType === 'icon'}
             title={report.tooltipText}
             {...report.props}
+            onClick={() => telemetry.send('code_snippet_reported', {})}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
           </CodeBlockControlButton>
@@ -157,24 +162,21 @@ export function CodeBlockControls({
 const ContainerWraper = styled.div`
   display: flex;
   justify-content: space-between;
+  padding: 5px 10px;
   min-height: 30px;
-  padding: var(--code-block-controls-padding);
-  background-color: var(--code-block-controls-background-color);
-  border-top: var(--code-block-controls-border);
-  border-left: var(--code-block-controls-border);
-  border-right: var(--code-block-controls-border);
-  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  background-color: var(--panel-samples-controls-background-color);
+  border-bottom: var(--panel-samples-controls-border);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   margin-top: 10px;
 `;
 
 const Title = styled.span`
   display: flex;
   align-items: center;
-  color: var(--code-block-controls-text-color);
+  color: var(--panel-samples-controls-text-color);
 `;
 
 const ControlsWrapper = styled.div`
-  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

package/src/components/CodeBlock/index.ts

@@ -2,4 +2,3 @@ export * from '@theme/components/CodeBlock/CodeBlock';
 export * from '@theme/components/CodeBlock/CodeBlockContainer';
 export * from '@theme/components/CodeBlock/CodeBlockControls';
 export * from '@theme/components/CodeBlock/CodeBlockControlButton';
-export * from '@theme/components/CodeBlock/styledVariables';

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount, useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 interface ColorModeSwitcherProps {
   className?: string;
@@ -34,6 +35,8 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
+
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
   };
 
   return (
@@ -52,6 +55,7 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
 }
 
 const Wrapper = styled.div<{ modes: string[] }>`
+  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Dropdown/Dropdown.tsx

@@ -11,8 +11,6 @@ export interface DropdownProps {
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
   onChange?: (value: React.ReactNode | string) => void;
 }
 
@@ -24,8 +22,6 @@ export const Dropdown = ({
   triggerEvent = 'click',
   onChange,
   dataAttributes,
-  placement,
-  alignment,
 }: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -65,7 +61,7 @@ export const Dropdown = ({
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </DropdownHeader>
       {isOpen && (
-        <DropdownList placement={placement} alignment={alignment}>
+        <DropdownList>
           {items.map((item, index) => (
             <DropdownListItem
               key={index}
@@ -103,12 +99,10 @@ export const DropdownHeader = styled.div`
   cursor: pointer;
 `;
 
-export const DropdownList = styled.ul<{ placement?: string; alignment?: string }>`
+export const DropdownList = styled.ul`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--dropdown-list-min-width);
   max-width: var(--dropdown-list-max-width);

package/src/components/Dropdown/index.ts

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

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>

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/Reasons.tsx

@@ -97,7 +97,7 @@ const OptionWrapper = styled.div`
     cursor: pointer;
   }
   label {
-    font-size: var(--font-size-base);
+    font-size: 14px;
     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>

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);
+  color: var(--color-primary-500);
   &:hover {
-    color: var(--color-primary-active);
+    color: var(--color-primary-600);
     svg {
       > g {
-        fill: var(--color-primary-active);
+        fill: var(--color-primary-600);
       }
     }
   }
@@ -125,7 +125,7 @@ const Icon = styled.div`
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary);
+      fill: var(--color-primary-500);
     }
   }
 `;

package/src/components/Filter/Filter.tsx

@@ -2,12 +2,9 @@ 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();
@@ -17,57 +14,32 @@ 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)} </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
-          selected={selectedOptionComponent}
-          options={selectOptions.map((option) => option.component)}
-        />
+          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>
       ) : filter.type === 'date-range' ? (
         <>
           <DatePickerWrapper>
@@ -117,11 +89,17 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
         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>{translate(value.value)}</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>
           );
         })
       )}
@@ -130,65 +108,61 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
 }
 
 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);
-`;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border-color);
 
-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`
-  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
@@ -197,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 {
@@ -214,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={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);
   }
 `;