@redocly/theme 0.18.3-patch.0 → 0.18.3

package/lib/components/Catalog/CatalogCard.js

@@ -31,93 +31,89 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
-const Tag_1 = require("../../components/Tag");
-const icons_1 = require("../../icons");
+const Tags_1 = require("../../components/Tags");
+const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function CatalogCard({ item }) {
     var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        footer: 'theme.catalog.card.footer',
+    };
     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" },
-                        React.createElement(Highlight_1.Highlight, null, tag)))))),
-                    React.createElement(SelectButton, null,
-                        React.createElement(icons_1.PointingArrowIcon, null)))))));
+            React.createElement(CardDescription, null,
+                React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
+            item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
+            React.createElement("hr", null),
+            React.createElement(CardFooter, { "data-translation-key": translationKeys.footer }, translate(translationKeys.footer, 'View documentation')))));
 }
 exports.CatalogCard = CatalogCard;
-const SelectButton = styled_components_1.default.div `
-  border: 1px solid var(--catalog-card-button-border-color);
-  border-radius: 100%;
-  width: var(--catalog-card-button-width);
-  height: var(--catalog-card-button-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: var(--catalog-card-icon-color);
-  }
-`;
 const StyledCard = styled_components_1.default.div `
-  min-height: var(--catalog-card-min-height);
+  min-height: 268px;
   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);
-  transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
-  cursor: pointer;
+  box-shadow: var(--box-shadow);
+
   display: flex;
   flex-direction: column;
 
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  transition: all 0.2s ease-in-out;
+
   &:hover {
-    border-color: var(--catalog-card-hover-border-color);
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
 
-    ${SelectButton} {
-      transform: rotate(-45deg);
-      border-color: var(--catalog-card-hover-border-color);
-      background: var(--catalog-card-button-hover-background);
-      
-      svg {
-        fill: var(--catalog-card-icon-hover-color);
-      }
-    }
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 `;
 const CardTitle = styled_components_1.default.h4 `
-  color: var(--catalog-card-title-color);
-  min-height: var(--catalog-card-title-min-height);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
   margin: 0;
-  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
+  margin-bottom: 16px;
 `;
 const CardDescription = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--catalog-card-description-margin-bottom);
-`;
-const CardContent = styled_components_1.default.div `
-  background-color: var(--catalog-card-content-background-color);
-  border-radius: var(--catalog-card-content-border-radius);
-  padding: var(--catalog-card-content-padding);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
 `;
 const CardFooter = styled_components_1.default.div `
+  height: 46px;
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
 `;
-const CardTags = styled_components_1.default.div ``;
 //# sourceMappingURL=CatalogCard.js.map

package/lib/components/Catalog/index.d.ts

@@ -1,4 +1,3 @@
-export * from '../../components/Catalog/Catalog';
-export * from '../../components/Catalog/CatalogCard';
-export * from '../../components/Catalog/useCatalog';
-export * from '../../components/Catalog/styledVariables';
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/lib/components/Catalog/index.js

@@ -14,8 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../components/Catalog/Catalog"), exports);
-__exportStar(require("../../components/Catalog/CatalogCard"), exports);
-__exportStar(require("../../components/Catalog/useCatalog"), exports);
-__exportStar(require("../../components/Catalog/styledVariables"), exports);
+__exportStar(require("./Catalog"), exports);
+__exportStar(require("./CatalogCard"), exports);
+__exportStar(require("./useCatalog"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,30 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockContainer = void 0;
-const styled_components_1 = __importStar(require("styled-components"));
+const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
 exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
     'data-component-name': 'CodeBlock/CodeBlockContainer',
@@ -37,24 +17,17 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     line-height: var(--code-line-height);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
+    border-radius: ${(withControls) => withControls
+    ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+    : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-
-    ${(withControls) => withControls
-    ? (0, styled_components_1.css) `
-            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
-            border-left: 1px solid var(--code-block-border-color);
-            border-right: 1px solid var(--code-block-border-color);
-            border-bottom: 1px solid var(--code-block-border-color);
-          `
-    : (0, styled_components_1.css) `
-            border-radius: var(--code-block-border-radius);
-            border: 1px solid var(--code-block-border-color);
-          `}
+    border: none;
+  }
 
   /**
   * Based on prism-dark.css

package/lib/components/CodeBlock/CodeBlockControlButton.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-export declare const CodeBlockControlButton: import("styled-components").StyledComponent<import("react").FC<import("../../components/Button").ButtonProps>, any, {
+export declare const CodeBlockControlButton: import("styled-components").StyledComponent<"button", any, {
+    'data-component-name': string;
+} & {
     asIcon?: boolean | undefined;
-}, never>;
+}, "data-component-name">;

package/lib/components/CodeBlock/CodeBlockControlButton.js

@@ -25,17 +25,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockControlButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-const Button_1 = require("../../components/Button");
-exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Button) `
-  color: var(--code-block-controls-text-color);
+exports.CodeBlockControlButton = styled_components_1.default.button.attrs(() => ({
+    'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+})) `
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
 
   ${({ asIcon }) => asIcon
     ? (0, styled_components_1.css) `
-          background-color: var(--code-block-icon-controls-background-color);
+          background-color: var(--panel-samples-icon-controls-background-color);
         `
     : (0, styled_components_1.css) `
           min-width: 90px;
-          background-color: var(--code-block-text-controls-background-color);
+          background-color: var(--panel-samples-text-controls-background-color);
         `}
 
   ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
@@ -45,5 +54,10 @@ exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Butto
   :not(:first-child) {
     margin-left: 5px;
   }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
 `;
 //# sourceMappingURL=CodeBlockControlButton.js.map

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,34 +21,34 @@ 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;
 const ContainerWraper = styled_components_1.default.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_components_1.default.span `
   display: flex;
   align-items: center;
-  color: var(--code-block-controls-text-color);
+  color: var(--panel-samples-controls-text-color);
 `;
 const ControlsWrapper = styled_components_1.default.div `
-  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

package/lib/components/CodeBlock/index.d.ts

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

package/lib/components/CodeBlock/index.js

@@ -18,5 +18,4 @@ __exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockContainer"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControls"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControlButton"), exports);
-__exportStar(require("../../components/CodeBlock/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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,11 +54,13 @@ 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 })))));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 const Wrapper = styled_components_1.default.div `
+  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

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

@@ -6,16 +6,11 @@ export interface DropdownProps {
     className?: string;
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
-    placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
     onChange?: (value: React.ReactNode | string) => void;
 }
-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, }: 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;
-    alignment?: string | undefined;
-}, never>;
+export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
     separator?: boolean | undefined;
 }, never>;

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, }) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleOpen = () => {
@@ -49,7 +49,7 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
         react_1.default.createElement(exports.DropdownHeader, null,
             children,
             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) => {
+        isOpen && (react_1.default.createElement(exports.DropdownList, null, items.map((item, index) => {
             var _a;
             return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
         })))));
@@ -77,10 +77,8 @@ exports.DropdownHeader = styled_components_1.default.div `
 `;
 exports.DropdownList = styled_components_1.default.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/lib/components/Dropdown/index.d.ts

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

package/lib/components/Dropdown/index.js

@@ -15,5 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Dropdown/Dropdown"), exports);
-__exportStar(require("../../components/Dropdown/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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)));
 };

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

@@ -85,7 +85,7 @@ const OptionWrapper = styled_components_1.default.div `
     cursor: pointer;
   }
   label {
-    font-size: var(--font-size-base);
+    font-size: 14px;
     cursor: pointer;
   }
 `;

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;

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-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);
       }
     }
   }
@@ -85,7 +85,7 @@ const Icon = styled_components_1.default.div `
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary);
+      fill: var(--color-primary-500);
     }
   }
 `;