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

package/lib/components/Feedback/Sentiment.js

@@ -30,22 +30,24 @@ exports.Sentiment = void 0;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const Feedback_1 = require("../../components/Feedback");
-const Thumbs_1 = require("../../components/Feedback/Thumbs");
-const hooks_1 = require("../../mocks/hooks");
-const components_1 = require("../../components");
-const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
-const media_css_1 = require("../../mocks/media-css");
-const Sentiment = ({ settings, onSubmit, className }) => {
+const hooks_1 = require("../../core/hooks");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon/RadioCheckButtonIcon");
+const Comment_1 = require("../../components/Feedback/Comment");
+const Reasons_1 = require("../../components/Feedback/Reasons");
+const Button_1 = require("../../components/Button/Button");
+const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
+const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
+function Sentiment({ settings, onSubmit, className }) {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
-    const { translate } = (0, hooks_1.useTranslate)();
-    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
-    const displayComment = !!score && commentSettings && !commentSettings.hide;
-    const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
+    const displayComment = !!(score && commentSettings && !commentSettings.hide);
+    const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('theme.feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -59,6 +61,9 @@ const Sentiment = ({ settings, onSubmit, className }) => {
         });
         setIsSubmitted(true);
     };
+    const onCancelSentimentForm = () => {
+        setScore(0);
+    };
     (0, react_1.useEffect)(() => {
         if (score && !displayComment && !displayReasons) {
             onSubmitSentimentForm();
@@ -66,85 +71,54 @@ const Sentiment = ({ settings, onSubmit, className }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [score, displayComment, displayReasons]);
     if (isSubmitted) {
-        return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
-                translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
-            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
+        return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
+            React.createElement(StyledFormMandatoryFields, null,
+                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
+                    translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+                React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
+    return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment", className: className },
         React.createElement(StyledForm, null,
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(React.Fragment, null,
-                        React.createElement(Vote, { className: `${score === 1 ? 'active' : ''}`, onClick: () => {
-                                setScore(1);
-                            } },
-                            React.createElement(Thumbs_1.ThumbUp, null)),
-                        React.createElement(Vote, { className: `${score === -1 ? 'active' : ''}`, onClick: () => {
-                                setScore(-1);
-                            } },
-                            React.createElement(Thumbs_1.ThumbDown, null))))),
-            React.createElement(StyledFormOptionalFields, null,
-                displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
+                    React.createElement(Button_1.Button, { type: "button", size: "medium", disabled: score === 1, onClick: () => {
+                            setScore(1);
+                        }, "aria-label": "Like", icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
+                    React.createElement(Button_1.Button, { size: "medium", type: "button", disabled: score === -1, onClick: () => {
+                            setScore(-1);
+                        }, "aria-label": "Dislike", icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
+            (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
+                displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
                         items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
                         component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
                     }, onChange: setReasons })),
-                displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }))),
+                displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(SubmitButton, { onClick: onSubmitSentimentForm }, "Submit"))))));
-};
+                React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
+                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "primary", size: "small" }, "Submit"))))));
+}
 exports.Sentiment = Sentiment;
-const Wrapper = styled_components_1.default.div `
+const SentimentWrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 24px;
-  width: 424px;
-  border-radius: 8px;
-  background: var(--bg-raised);
-
-  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
-    width: 100%;
-  }
 `;
 const Label = styled_components_1.default.h4 `
-  font-family: var(--h4-font-family);
+  font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
-  font-size: var(--h4-font-size);
-  line-height: var(--h4-line-height);
-  color: var(--h4-text-color);
-  margin-right: 15px;
-`;
-const Vote = styled_components_1.default.button.attrs(() => ({
-    type: 'button',
-})) `
-  height: 32px;
-  width: 32px;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  flex-flow: row-reverse;
-  color: var(--text-description);
-  &.active {
-    color: var(--text-primary);
-  }
-  &:hover {
-    color: var(--text-primary);
-    svg {
-      > g {
-        fill: var(--text-primary);
-      }
-    }
-  }
+  font-size: var(--feedback-header-font-size);
+  line-height: var(--feedback-header-line-height);
+  color: var(--feedback-header-text-color);
+  margin: 0;
 `;
 const StyledForm = styled_components_1.default.form `
   width: 100%;
+  gap: var(--spacing-sm);
+  display: flex;
+  flex-direction: column;
 `;
 const StyledFormOptionalFields = styled_components_1.default.div `
   display: flex;
@@ -153,20 +127,25 @@ const StyledFormOptionalFields = styled_components_1.default.div `
 const StyledFormMandatoryFields = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  > svg {
+    margin: var(--button-icon-padding) 0; /* prevent hight of the parent jumping */
+  }
 `;
 const StyledMandatoryFieldContainer = styled_components_1.default.div `
   display: flex;
   align-items: center;
-`;
-const SubmitButton = (0, styled_components_1.default)(components_1.Button).attrs(() => ({
-    color: 'primary',
-})) `
-  width: 100px;
-  margin-left: 0;
-  margin-right: 0;
+  gap: var(--spacing-xxs);
+
+  ${Button_1.Button} {
+    margin: 0;
+  }
 `;
 const ButtonsContainer = styled_components_1.default.div `
   display: flex;
   justify-content: end;
+  margin-bottom: var(--spacing-xxs);
 `;
 //# sourceMappingURL=Sentiment.js.map

package/lib/components/Feedback/Stars.d.ts

@@ -5,4 +5,4 @@ export type StarsProps = {
     value?: number;
     onChange: (value: number) => void;
 };
-export declare const Stars: ({ max, onChange, value }: StarsProps) => JSX.Element;
+export declare function Stars({ max, onChange, value }: StarsProps): JSX.Element;

package/lib/components/Feedback/Stars.js

@@ -29,21 +29,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stars = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Stars = ({ max = 5, onChange, value }) => {
+const StarIcon_1 = require("../../icons/StarIcon/StarIcon");
+const StarFilledIcon_1 = require("../../icons/StarFilledIcon/StarFilledIcon");
+function Stars({ max = 5, onChange, value }) {
     const [hovered, setHovered] = React.useState(value || 0);
     const stars = [];
     for (let index = 1; index <= max; index++) {
-        stars.push(React.createElement(Star, { key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) },
-            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
-                React.createElement("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" }))) : (React.createElement("g", { fill: "#e8c002" },
-                React.createElement("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" }))))));
+        stars.push(React.createElement(Star, { "data-testid": `star-${index}`, key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && setHovered(0) }, hovered < index ? (React.createElement(StarIcon_1.StarIcon, { color: "var(--feedback-star-color)" })) : (React.createElement(StarFilledIcon_1.StarFilledIcon, { color: "var(--feedback-star-color)" }))));
     }
-    return React.createElement(StarsWrapper, null, stars);
-};
+    return React.createElement(StarsWrapper, { "data-component-name": "Feedback/Stars" }, stars);
+}
 exports.Stars = Stars;
 const StarsWrapper = styled_components_1.default.div `
   display: flex;
-  gap: 8px;
+  gap: var(--spacing-xs);
   flex-direction: row;
   align-items: center;
 `;
@@ -54,6 +53,7 @@ const Star = styled_components_1.default.button.attrs(() => ({
   padding: 0;
   border: none;
   background-color: transparent;
-  gap: 8px;
+  height: 16px;
+  gap: var(--spacing-xs);
 `;
 //# sourceMappingURL=Stars.js.map

package/lib/components/Feedback/variables.d.ts

@@ -0,0 +1 @@
+export declare const feedback: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Feedback/variables.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.feedback = void 0;
+const styled_components_1 = require("styled-components");
+exports.feedback = (0, styled_components_1.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
+`;
+//# sourceMappingURL=variables.js.map

package/lib/components/Filter/Filter.d.ts

@@ -1,9 +1,3 @@
-import React from 'react';
-import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-import type { ThemeConfig } from '../../config';
-export declare function Filter({ filter, filterValuesCasing, }: {
-    filter: ResolvedFilter & {
-        selectedOptions: any;
-    };
-    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}): React.JSX.Element | null;
+/// <reference types="react" />
+import type { FilterProps } from '../../core/types';
+export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;

package/lib/components/Filter/Filter.js

@@ -6,194 +6,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_date_picker_1 = require("react-date-picker");
-const hooks_1 = require("../../mocks/hooks");
-const icons_1 = require("../../icons");
-const Select_1 = require("../../components/Select");
-function Filter({ filter, filterValuesCasing, }) {
-    var _a;
-    const { translate } = (0, hooks_1.useTranslate)();
+const FilterSelect_1 = require("../../components/Filter/FilterSelect");
+const FilterCheckboxes_1 = require("../../components/Filter/FilterCheckboxes");
+const FilterDateRange_1 = require("../../components/Filter/FilterDateRange");
+const filterComponents = {
+    select: FilterSelect_1.FilterSelect,
+    'date-range': FilterDateRange_1.FilterDateRange,
+    checkboxes: FilterCheckboxes_1.FilterCheckboxes,
+};
+function Filter({ filter, filterValuesCasing }) {
     if (!filter.parentUsed)
         return null;
-    let selectOptions = [];
-    if (filter.type === 'select') {
-        const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
-        selectOptions = [
-            {
-                value: '',
-                element: (react_1.default.createElement(FilterOption, { key: "all", onClick: () => filter.selectOption('') },
-                    react_1.default.createElement(FilterOptionLabel, null, translate('theme.catalog.filters.select.all', 'All')),
-                    react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
-            },
-        ];
-        selectOptions.push(...filter.filteredOptions.map((option) => ({
-            value: option.value,
-            element: (react_1.default.createElement(FilterOption, { key: option.value },
-                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(option.value), filterValuesCasing)),
-                react_1.default.createElement(FilterOptionCount, null, option.count))),
-        })));
-    }
-    return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            translate(filter.titleTranslationKey, filter.title),
-            " "),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: (value) => filter.selectOption(value), options: selectOptions })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, "From:"),
-                react_1.default.createElement(react_date_picker_1.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(Object.assign(Object.assign({}, filter.selectedOptions), { from: formatDateWithNoTimeZone(from) }));
-                    } })),
-            react_1.default.createElement(DatePickerWrapper, null,
-                react_1.default.createElement("span", null, "To:"),
-                react_1.default.createElement(react_date_picker_1.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(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
-                    } })))) : (filter.filteredOptions.map((value) => {
-            const id = 'filter--' + filter.property + '--' + value.value;
-            return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
-                react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
-                react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
-                react_1.default.createElement(FilterOptionCount, null, value.count)));
-        }))));
+    const FilterComponent = filterComponents[(filter.type || 'checkboxes')];
+    return (react_1.default.createElement(FilterGroup, { "data-component-name": "Filter/Filter", key: filter.property + filter.title },
+        react_1.default.createElement(FilterComponent, { filter: filter, filterValuesCasing: filterValuesCasing })));
 }
 exports.Filter = Filter;
-function changeCasing(str, casing) {
-    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 === null || str === void 0 ? void 0 : str.split(/[\s-_]+/);
-        return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
-    }
-}
 const FilterGroup = styled_components_1.default.div `
   padding: var(--filter-group-padding);
-`;
-const FilterOptionLabel = styled_components_1.default.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_components_1.default.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_components_1.default.h4 `
-  font-weight: var(--filter-title-font-weight);
-  font-size: var(--filter-title-font-size);
-  margin: var(--filter-title-margin);
-`;
-const FilterOption = styled_components_1.default.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 = (0, styled_components_1.default)(Select_1.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_components_1.default.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) {
-    return num < 10 ? '0' + num : num;
-}
-function formatDateWithNoTimeZone(date) {
-    if (!date)
-        return date;
-    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
-}
 //# sourceMappingURL=Filter.js.map

package/lib/components/Filter/FilterCheckboxes.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { FilterProps } from '../../core/types';
+export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterCheckboxes.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterCheckboxes = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterOptions_1 = require("../../components/Filter/FilterOptions");
+const FilterOption_1 = require("../../components/Filter/FilterOption");
+const FilterTitle_1 = require("../../components/Filter/FilterTitle");
+const FilterOptionLabel_1 = require("../../components/Filter/FilterOptionLabel");
+const hooks_1 = require("../../core/hooks");
+const CheckboxIcon_1 = require("../../icons/CheckboxIcon/CheckboxIcon");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const utils_1 = require("../../core/utils");
+function FilterCheckboxes({ filter, filterValuesCasing }) {
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    return (react_1.default.createElement(FilterCheckboxesWrapper, { "data-component-name": "Filter/FilterCheckboxes" },
+        react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
+        react_1.default.createElement(FilterOptions_1.FilterOptions, null, filter.filteredOptions.map(({ value, count }) => {
+            const id = 'filter--' + filter.property + '--' + value;
+            return (react_1.default.createElement(FilterCheckboxOption, { key: id, role: "link", onClick: () => {
+                    filter.toggleOption(value);
+                    telemetry.send('filter_checkbox_toggled', { id });
+                } },
+                react_1.default.createElement(CheckboxIcon_1.CheckboxIcon, { checked: filter.selectedOptions.has(value) }),
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": value }, (0, utils_1.changeTextCasing)(translate(value), filterValuesCasing)),
+                react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, count)));
+        }))));
+}
+exports.FilterCheckboxes = FilterCheckboxes;
+const FilterCheckboxOption = (0, styled_components_1.default)(FilterOption_1.FilterOption) `
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+const FilterCheckboxesWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+`;
+//# sourceMappingURL=FilterCheckboxes.js.map

package/lib/components/Filter/FilterContent.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
+/// <reference types="react" />
+import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
-import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-interface FilterContentProps {
+type FilterContentProps = {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
-    isMobile: boolean;
     filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}
-export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterValuesCasing, }: FilterContentProps): React.JSX.Element;
+};
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing, }: FilterContentProps): JSX.Element;
 export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};