@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.1

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -3,4 +3,5 @@ export declare const Breadcrumb: (props: {
     label: string;
     link?: string;
     isActive: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Breadcrumb = (props) => {
-    const { label, link, isActive } = props;
-    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
+    const { label, link, isActive, onClick } = props;
+    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
 };
 exports.Breadcrumb = Breadcrumb;
 const BreadcrumbText = styled_components_1.default.div `

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -7,6 +7,7 @@ exports.Breadcrumbs = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
+const telemetry_1 = require("../../mocks/telemetry");
 const Breadcrumb_1 = require("./Breadcrumb");
 const Breadcrumbs = (props) => {
     const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
@@ -16,7 +17,13 @@ const Breadcrumbs = (props) => {
     return (react_1.default.createElement(Container, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
-            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast }),
+            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
+                    telemetry_1.telemetry.send('breadcrumb_clicked', {
+                        link: breadcrumb.link,
+                        position: idx + 1,
+                        total_breadcrumbs: breadcrumbs.length,
+                    });
+                } }),
             isLast ? null : react_1.default.createElement("div", null, "/")));
     })));
 };

package/lib/components/Button/Button.js

@@ -99,12 +99,14 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
         `
     : variant === 'text'
         ? (0, styled_components_1.css) `
-          border-color: transparent;
-          background-color: transparent;
+          color: var(--button-color);
+          border-color: var(--button-border-color);
+          background-color: var(--button-background-color);
 
           &:hover {
-            border-color: transparent;
-            background-color: transparent;
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
+            background-color: var(--button-hover-background-color);
             box-shadow: none;
           }
         `

package/lib/components/Button/styledVariables.js

@@ -3,26 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.button = void 0;
 const styled_components_1 = require("styled-components");
 exports.button = (0, styled_components_1.css) `
-  /*
-  * Static classnames that can be used to override styles for components:
-  * download-specification-button, next-section-button, button-base
-  */
+  /**
+    * Static classnames that can be used to override styles for components:
+    * download-specification-button, next-section-button, button-base
+    */
 
   /**
-   * @tokens Button borders
-   */
+    * @tokens Button borders
+    */
 
   --button-border-width: 1px; //@presenter Border
   --button-border-style: solid; //@presenter Border
   --button-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --button-margin: 5px; // @presenter Spacing
   --button-box-shadow: none; // @presenter Shadow
-  --button-hover-box-shadow: var(--bg-base-shadow); // @presenter Shadow
-  --button-active-box-shadow: var(--bg-base-shadow); // @presenter Shadow
+  --button-hover-box-shadow: none; // @presenter Shadow
+  --button-active-box-shadow: none; // @presenter Shadow
 
   /**
-     * @tokens Button typography
-     */
+    * @tokens Button typography
+    */
 
   --button-font-size: var(--font-size-base); // @presenter FontSize
   --button-font-family: inherit; // @presenter FontFamily
@@ -38,8 +38,8 @@ exports.button = (0, styled_components_1.css) `
   --button-large-padding: 8px 16px;
 
   /**
-   * @tokens Button icon
-   */
+    * @tokens Button icon
+    */
   --button-icon-width: 1em; // @presenter Spacing
   --button-icon-height: 1em; // @presenter Spacing
 
@@ -89,6 +89,19 @@ exports.button = (0, styled_components_1.css) `
     --button-background-color: transparent; // @presenter Color
   }
 
+  /**
+    * @tokens Button text
+    */
+  .button-text {
+    --button-color: var(--text-secondary); // @presenter Color
+    --button-border-color: transparent; // @presenter Color
+    --button-background-color: transparent; // @presenter Color
+
+    --button-hover-color: var(--text-primary); // @presenter Color
+    --button-hover-background-color: transparent; // @presenter Color
+    --button-hover-border-color: transparent; // @presenter Color
+  }
+
   // @tokens End
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Catalog/Catalog.js

@@ -31,7 +31,7 @@ function Catalog(props) {
                 react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
                 react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters })),
             react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false }),
-            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm })),
+            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters })),
             react_1.default.createElement(CatalogPageContent, null,
                 react_1.default.createElement(CatalogPageDescriptionWrapper, null,
                     catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
@@ -109,7 +109,7 @@ const CatalogDescription = styled_components_1.default.p `
   margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
 `;
 const CatalogPageWrapper = styled_components_1.default.div `
-  --sidebar-width: var(--catalog-sidebar-width, 300px);
+  --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
@@ -138,7 +138,7 @@ const CatalogPageWrapper = styled_components_1.default.div `
     flex-direction: row;
   }
 `;
-const FilterTagsWrapper = styled_components_1.default.div `
+const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/FilterTags' }) `
   padding: var(--filter-tags-wrapper-padding);
   display: flex;
   overflow-x: scroll;

package/lib/components/Catalog/CatalogCard.js

@@ -33,17 +33,19 @@ const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
 const Tag_1 = require("../../components/Tag");
 const icons_1 = require("../../icons");
+const telemetry_1 = require("../../mocks/telemetry");
+const utils_1 = require("../../utils");
 function CatalogCard({ item }) {
     var _a;
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, null,
+        React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
                 React.createElement(Highlight_1.Highlight, null, item.title)),
             React.createElement(CardContent, null,
                 React.createElement(CardDescription, null,
                     React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
                 React.createElement(CardFooter, null,
-                    item.tags && (React.createElement(CardTags, null, item.tags.map((tag, index) => (React.createElement(Tag_1.Tag, { key: tag + index, color: "grey" },
+                    item.tags && (React.createElement(CardTags, null, item.tags.map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
                         React.createElement(Highlight_1.Highlight, null, tag)))))),
                     React.createElement(SelectButton, null,
                         React.createElement(icons_1.PointingArrowIcon, null)))))));
@@ -57,19 +59,20 @@ const SelectButton = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease-in-out;
 
   svg {
     fill: var(--catalog-card-icon-color);
   }
 `;
-const StyledCard = styled_components_1.default.div `
+const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/CatalogCard' }) `
   min-height: var(--catalog-card-min-height);
   height: 100%;
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
   background-color: var(--catalog-card-background-color);
-  border: 1px solid var(--catalog-card-border-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
   transition: all 0.2s ease-in-out;
   border-radius: var(--catalog-card-border-radius);
   cursor: pointer;
@@ -119,5 +122,12 @@ const CardFooter = styled_components_1.default.div `
   align-items: flex-end;
   justify-content: space-between;
 `;
-const CardTags = styled_components_1.default.div ``;
+const CardTags = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+`;
+const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  margin: 0;
+`;
 //# sourceMappingURL=CatalogCard.js.map

package/lib/components/Catalog/styledVariables.js

@@ -43,7 +43,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-separator-label-margin: 0 var(--spacing-xs);
   --catalog-separator-count-height: var(--control-height-xs);
   --catalog-separator-count-padding: 0 var(--spacing-xxs);
-  --catalog-separator-count-border-radius: var(--spacing-sm);
+  --catalog-separator-count-border-radius: var(--border-radius-xlg);
   --catalog-separator-count-border-color: var(--border-secondary);
   --catalog-separator-count-background: var(--bg-raised);
 
@@ -56,8 +56,10 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-font-weight: var(--font-weight-regular);
   --catalog-card-background-color: var(--bg-raised);
   --catalog-card-border-color: var(--border-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
   --catalog-card-hover-border-color: var(--border-primary);
-  --catalog-card-border-radius: var(--spacing-xs);
+  --catalog-card-border-radius: var(--border-radius-lg);
 
   /**
     * @tokens Catalog card button
@@ -86,7 +88,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-line-clamp: 3;
   --catalog-card-description-margin-bottom: var(--spacing-base);
   --catalog-card-content-background-color: var(--bg-base);
-  --catalog-card-content-border-radius: var(--spacing-xs);
+  --catalog-card-content-border-radius: var(--border-radius-lg);
   --catalog-card-content-padding: var(--spacing-base);
   
   // @tokens End

package/lib/components/Catalog/useCatalog.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
 const utils_1 = require("../../utils");
 function useCatalog(items, config) {
     const location = (0, react_router_dom_1.useLocation)();
@@ -60,6 +61,7 @@ function useCatalog(items, config) {
             }
             return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
         });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'toggle' });
         window.scrollTo(0, 0);
     }, []);
     const selectOption = React.useCallback((filterIdx, option) => {
@@ -77,6 +79,7 @@ function useCatalog(items, config) {
                     ? new Set()
                     : f);
         });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'select' });
         window.scrollTo(0, 0);
     }, [filtersWithOptions]);
     React.useEffect(() => {
@@ -136,7 +139,15 @@ function useCatalog(items, config) {
         const groups = config.groupByFirstFilter && ((_a = filters[0].selectedOptions) === null || _a === void 0 ? void 0 : _a.size) > 0
             ? groupByFirstFilter(resolvedFilters, filteredItems)
             : [{ title: 'APIs', items: filteredItems }];
-        return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+        return {
+            groups,
+            filters: resolvedFilters,
+            setFilterTerm: (newTerm) => {
+                setFilterTerm(newTerm);
+                telemetry_1.telemetry.send('catalog_filter_changed', { type: 'term' });
+            },
+            filterTerm,
+        };
     }, [
         filtersWithOptions,
         normalizedItems,

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -34,12 +34,13 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-line-height);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-font-size);
+    font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -9,6 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock");
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 const CopyButton_1 = require("../CopyButton");
 function CodeBlockControls({ children, className, title, controls, }) {
     var _a, _b, _c, _d, _e;
@@ -20,12 +21,15 @@ function CodeBlockControls({ children, className, title, controls, }) {
     const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Title, null, title),
         react_1.default.createElement(ControlsWrapper, null,
-            copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: copy === null || copy === void 0 ? void 0 : copy.onClick })) : null,
+            copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: () => {
+                    copy === null || copy === void 0 ? void 0 : copy.onClick;
+                    telemetry_1.telemetry.send('code_snippet_copied', {});
+                } })) : null,
             expand && !((_b = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _b === void 0 ? void 0 : _b.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
             collapse && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
             select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
-            report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
+            report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props, { onClick: () => telemetry_1.telemetry.send('code_snippet_reported', {}) }), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }
 exports.CodeBlockControls = CodeBlockControls;

package/lib/components/CodeBlock/styledVariables.js

@@ -30,6 +30,8 @@ exports.code = (0, styled_components_1.css) `
     */
   --code-block-font-size: var(--code-font-size); // @presenter FontSize
   --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
   --code-block-text-color: var(--text-secondary); // @presenter Color
   --code-block-background-color: var(--bg-raised); // @presenter Color
   --code-block-border-color: var(--border-primary); // @presenter Color
@@ -56,7 +58,7 @@ exports.code = (0, styled_components_1.css) `
     * @tokens Code Block tokens
    */
   --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
-  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
   --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
@@ -66,8 +68,8 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-gold-8); // @presenter Color
-  --code-block-tokens-property-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
@@ -81,7 +83,7 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-keyword-color: var(--color-magneta-6); // @presenter Color
   --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
-  --code-block-tokens-regex-color: var(--color-gold-4); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-gold-5); // @presenter Color
   --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
   --code-block-tokens-deleted-color: var(--color-red-6); // @presenter Color
 

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -31,6 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ColorModeIcon_1 = require("../../icons/ColorModeIcon");
 const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function ColorModeSwitcher(props) {
     const { className } = props;
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -53,6 +54,7 @@ function ColorModeSwitcher(props) {
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
+        telemetry_1.telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
     };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link", className: className }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
 }

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface DropdownProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     items: JSX.Element[] | string[];
     dataAttributes?: Record<string, string>;
     className?: string;
@@ -9,8 +9,9 @@ export interface DropdownProps {
     placement?: 'top' | 'bottom';
     alignment?: 'start' | 'end';
     onChange?: (value: React.ReactNode | string) => void;
+    icon?: React.ReactNode;
 }
-export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: DropdownProps) => JSX.Element;
 export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {
     placement?: string | undefined;

package/lib/components/Dropdown/Dropdown.js

@@ -28,7 +28,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, placement, alignment, }) => {
+const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, placement, alignment, icon, }) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleOpen = () => {
@@ -48,6 +48,7 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
     return (react_1.default.createElement(DropdownContainer, Object.assign({}, dataAttributes, { "data-testid": "dropdown", className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: handleClose, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.DropdownHeader, null,
             children,
+            icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
         isOpen && (react_1.default.createElement(exports.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
             var _a;

package/lib/components/EditPageButton/EditPageButton.js

@@ -7,8 +7,9 @@ exports.EditPageButton = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const telemetry_1 = require("../../mocks/telemetry");
 const EditPageButton = ({ text, to, icon }) => {
-    return (react_1.default.createElement(EditButton, { to: to },
+    return (react_1.default.createElement(EditButton, { to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
         icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
         react_1.default.createElement(ButtonText, null, text)));
 };
@@ -16,12 +17,16 @@ exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.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/lib/components/Feedback/Comment.js

@@ -70,6 +70,11 @@ const Wrapper = styled_components_1.default.div `
   width: 100%;
 `;
 const Label = styled_components_1.default.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;
 `;
 const TextArea = styled_components_1.default.textarea `

package/lib/components/Feedback/Feedback.js

@@ -33,6 +33,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../hooks");
 const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+const telemetry_1 = require("../../mocks/telemetry");
 const Feedback = (props) => {
     const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
@@ -42,13 +43,22 @@ const Feedback = (props) => {
         switch (type) {
             case 'rating':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'rating', values, path }) })));
+                    React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'rating', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'rating' });
+                        } })));
             case 'sentiment':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'sentiment', values, path }) })));
+                    React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'sentiment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'sentiment' });
+                        } })));
             case 'comment':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'comment', values, path }) })));
+                    React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'comment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'comment' });
+                        } })));
             default:
                 console.log(`No feedback with type ${type}!`);
                 break;

package/lib/components/Feedback/Rating.js

@@ -83,6 +83,10 @@ const Star = styled_components_1.default.span `
 `;
 const Label = styled_components_1.default.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);
 `;
 //# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Reasons.js

@@ -67,6 +67,11 @@ const Wrapper = styled_components_1.default.div `
   flex-direction: column;
 `;
 const Label = styled_components_1.default.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;
 `;
 const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({

package/lib/components/Feedback/Sentiment.js

@@ -66,9 +66,13 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
-        React.createElement(Vote, { onClick: () => setScore(1) },
+        React.createElement(Vote, { onClick: () => {
+                setScore(1);
+            } },
             React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
-        React.createElement(Vote, { onClick: () => setScore(-1) },
+        React.createElement(Vote, { onClick: () => {
+                setScore(-1);
+            } },
             React.createElement(Thumbs_1.ThumbDown, null))));
 };
 exports.Sentiment = Sentiment;
@@ -78,6 +82,11 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
 `;
 const Label = styled_components_1.default.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;
 `;
 const Vote = styled_components_1.default.div `

package/lib/components/Feedback/Thumbs.js

@@ -69,12 +69,12 @@ exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-primary);
+  color: var(--color-info-text);
   &:hover {
-    color: var(--color-primary-active);
+    color: var(--color-info-text-active);
     svg {
       > g {
-        fill: var(--color-primary-active);
+        fill: var(--color-info-text-active);
       }
     }
   }
@@ -85,7 +85,7 @@ const Icon = styled_components_1.default.div `
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary);
+      fill: var(--color-info-text);
     }
   }
 `;

package/lib/components/Filter/Filter.js

@@ -80,6 +80,9 @@ const FilterOptionLabel = styled_components_1.default.label `
   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;
@@ -100,7 +103,7 @@ const FilterTitle = styled_components_1.default.h4 `
   font-size: var(--filter-title-font-size);
   margin: var(--filter-title-margin);
 `;
-const FilterOption = styled_components_1.default.label `
+const FilterOption = styled_components_1.default.label.attrs({ 'data-cy': 'Filter/FilterOption' }) `
   display: flex;
   align-items: center;
   cursor: pointer;

package/lib/components/Filter/FilterContent.js

@@ -17,6 +17,14 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
         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(''));
     };
@@ -24,10 +32,11 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx })))),
-        react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))));
+        hasActiveFilters && (react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = styled_components_1.default.div `
+  width: var(--sidebar-width);
   display: none;
 
   ${_theme_1.Button} {