@redocly/theme 0.18.2 → 0.18.3-patch.1

package/lib/I18n/LanguagePicker.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
-export declare const LanguagePicker: (props: {
+interface LanguagePickerProps {
     onChangeLanguage: (newLang: string) => void;
-}) => JSX.Element | null;
+    onlyIcon?: boolean;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+}
+export declare const LanguagePicker: (props: LanguagePickerProps) => JSX.Element | null;
+export {};

package/lib/I18n/LanguagePicker.js

@@ -10,6 +10,7 @@ const utils_1 = require("../mocks/utils");
 const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
 const hooks_1 = require("../mocks/hooks");
 const Select_1 = require("../components/Select");
+const icons_1 = require("../icons");
 const LanguagePicker = (props) => {
     const { currentLocale, locales, defaultLocale } = (0, hooks_1.useI18nConfig)();
     const history = (0, usePreloadHistory_1.usePreloadHistory)();
@@ -27,7 +28,7 @@ const LanguagePicker = (props) => {
             history.push(newUrlWithLanguage);
             props.onChangeLanguage(locale.code);
         }, key: locale.code, role: "link" }, locale.name || locale.code || '')));
-    return react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover" });
+    return (react_1.default.createElement(LanguageSelect, { selected: selected, options: languageItems, triggerEvent: "hover", placement: props.placement, alignment: props.alignment, icon: react_1.default.createElement(icons_1.LanguageIcon, null), onlyIcon: props.onlyIcon }));
 };
 exports.LanguagePicker = LanguagePicker;
 const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
@@ -41,12 +42,19 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
   line-height: var(--language-picker-line-height);
   border-radius: var(--language-picker-border-radius);
   color: var(--language-picker-text-color);
+  background-color: var(--language-picker-background-color);
 
   ${Select_1.SelectInput} {
-    color: var(--navbar-text-color);
+    min-height: var(--language-picker-min-height);
+    color: var(--language-picker-text-color);
+    border: 1px solid var(--language-picker-border-color);
     border-radius: var(--language-picker-input-border-radius);
     padding: var(--language-picker-input-padding-vertical)
       var(--language-picker-input-padding-horizontal);
+
+    :hover {
+      border-color: var(--language-picker-hover-border-color);
+    }
   }
 
   ${Select_1.SelectList} {
@@ -77,7 +85,7 @@ const LanguageSelect = (0, styled_components_1.default)(Select_1.Select).attrs((
 
   :hover {
     text-decoration: var(--navbar-item-hover-text-decoration);
-    background: var(--navbar-item-hover-background-color);
+    background: var(--language-picker-hover-background-color);
   }
 `;
 const LanguageItem = styled_components_1.default.div ``;

package/lib/I18n/index.d.ts

@@ -1 +1,2 @@
 export { LanguagePicker } from '../I18n/LanguagePicker';
+export * from '../I18n/styledVariables';

package/lib/I18n/index.js

@@ -1,6 +1,21 @@
 "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 __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 });
 exports.LanguagePicker = void 0;
 var LanguagePicker_1 = require("../I18n/LanguagePicker");
 Object.defineProperty(exports, "LanguagePicker", { enumerable: true, get: function () { return LanguagePicker_1.LanguagePicker; } });
+__exportStar(require("../I18n/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/I18n/styledVariables.d.ts

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

package/lib/I18n/styledVariables.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.languagePicker = void 0;
+const styled_components_1 = require("styled-components");
+exports.languagePicker = (0, styled_components_1.css) `
+  /**
+    * @tokens Language picker
+    * */
+
+  --language-picker-font-size: var(--select-font-size); // @presenter FontSize
+  --language-picker-font-weight: var(--select-font-weight); // @presenter FontWeight
+  --language-picker-line-height: var(--select-line-height); // @presenter LineHeight
+  --language-picker-text-color: var(--text-primary); // @presenter Color
+  --language-picker-min-height: var(--control-height-base); // @presenter Spacing
+  --language-picker-border-radius: calc(var(--spacing-unit) * 1.5); // @presenter BorderRadius
+  --language-picker-border-color: var(--border-primary); // @presenter Color
+  --language-picker-background-color: var(--bg-base); // @presenter Color
+  --language-picker-hover-background-color: var(--language-picker-background-color); // @presenter Color
+  --language-picker-hover-border-color: var(--text-primary); // @presenter Color
+
+  --language-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
+  --language-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing
+  --language-picker-input-border-radius: var(--language-picker-border-radius); // @presenter BorderRadius
+
+  --language-picker-list-min-width: var(--select-list-min-width);
+  --language-picker-list-max-width: var(--select-list-max-width);
+  --language-picker-list-padding: var(--select-list-padding); // @presenter Spacing
+  --language-picker-list-border-radius: var(--language-picker-border-radius); // @presenter BorderRadius
+  --language-picker-list-background-color: var(--select-list-background-color); // @presenter Color
+  --language-picker-list-box-shadow: var(--select-list-box-shadow); // @presenter Shadow
+
+  --language-picker-list-item-horizontal-padding: var(--select-list-item-horizontal-padding); // @presenter Spacing
+  --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
+  --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
+  --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

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 `
@@ -36,9 +36,10 @@ const BreadcrumbWrapper = styled_components_1.default.div `
 `;
 const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
+  color: var(--breadcrumbs-text-color);
 
   &:visited {
-    color: inherit;
+    color: var(--breadcrumbs-text-color);
   }
 `;
 //# sourceMappingURL=Breadcrumb.js.map

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, "/")));
     })));
 };
@@ -30,7 +37,7 @@ const Container = styled_components_1.default.div `
   flex-wrap: wrap;
 
   > div {
-    padding-right: var(--breadcrumbs-padding-horizontal);
+    padding: var(--breadcrumbs-padding);
   }
 
   @media print {

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

@@ -1,2 +1,3 @@
 export * from '../../components/Breadcrumbs/Breadcrumbs';
 export * from '../../components/Breadcrumbs/Breadcrumb';
+export * from '../../components/Breadcrumbs/styledVariables';

package/lib/components/Breadcrumbs/index.js

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

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

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

package/lib/components/Breadcrumbs/styledVariables.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbs = void 0;
+const styled_components_1 = require("styled-components");
+exports.breadcrumbs = (0, styled_components_1.css) `
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-description); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
+  --breadcrumbs-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Button/Button.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
-export type ButtonVariant = 'outlined' | 'contained';
+export type ButtonSize = 'default' | 'small' | 'large' | string;
+export type ButtonColor = 'default' | 'primary' | string;
+export type ButtonVariant = 'outlined' | 'contained' | 'text';
 export interface ButtonProps {
+    children?: React.ReactNode;
     color?: ButtonColor;
     disabled?: boolean;
     blinking?: boolean;
@@ -12,6 +13,8 @@ export interface ButtonProps {
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
+    icon?: JSX.Element;
+    title?: string;
     onClick?: (e?: any) => void;
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;

package/lib/components/Button/Button.js

@@ -45,79 +45,72 @@ const getBlink = () => (0, styled_components_1.keyframes) `
     background-color: var(--button-active-background-color);
   }
 `;
-const getSize = (size = 'medium') => (0, styled_components_1.css) `
+const getSize = (size = 'default') => (0, styled_components_1.css) `
   font-size: var(--button-${size}-font-size);
   padding: var(--button-${size}-padding);
   min-width: var(--button-${size}-min-width);
 `;
 exports.baseButtonStyles = (0, styled_components_1.css) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
   outline: none;
-  border: none;
-  border-radius: var(--button-border-radius);
-  font-weight: var(--button-font-weight);
-  font-size: 14px;
-  padding: 2px 20px;
   margin: var(--button-margin);
   cursor: pointer;
-  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
 
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+  border-radius: var(--button-border-radius);
+
+  font-size: var(--button-font-size);
   font-family: var(--button-font-family);
+  font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
+    background-color: var(--button-hover-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 
   &:active {
     box-shadow: var(--button-active-box-shadow);
+    background-color: var(--button-active-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-active-border-color);
   }
 `;
+const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+`;
 const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
-    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
+    className: `button-${color}${variant ? ` button-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
-  text-decoration: none;
-  text-align: center;
-
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${exports.baseButtonStyles}
 
   ${({ variant }) => variant === 'outlined'
     ? (0, styled_components_1.css) `
-          color: var(--button-background-color);
-          border: 2px solid var(--button-border-color);
-          background-color: transparent;
-          &:hover {
-            color: var(--button-hover-background-color);
-            border: 2px solid var(--button-hover-border-color);
-          }
-
-          &:active {
-            color: var(--button-active-background-color);
-            border: 2px solid var(--button-active-border-color);
-          }
-
-          &:disabled {
-            color: var(--button-disabled-color);
-            background-color: transparent;
-          }
+          background-color: var(--button-background-color);
         `
-    : (0, styled_components_1.css) `
+    : variant === 'text'
+        ? (0, styled_components_1.css) `
           color: var(--button-color);
-          border: 2px solid var(--button-background-color);
+          border-color: var(--button-border-color);
           background-color: var(--button-background-color);
+
           &:hover {
-            border: 2px solid var(--button-hover-background-color);
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
             background-color: var(--button-hover-background-color);
+            box-shadow: none;
           }
-
-          &:active {
-            border: 2px solid var(--button-active-background-color);
-            background-color: var(--button-active-background-color);
-          }
-        `};
+        `
+        : ''};
 
   ${({ size }) => getSize(size)}
 
@@ -138,18 +131,25 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-border-color);
         pointer-events: none;
       }
     `}
 `;
+const StyledIcon = styled_components_1.default.span `
+  display: block;
+  height: var(--button-icon-height);
+  width: var(--button-icon-width);
+`;
 const ButtonComponent = (props) => {
+    const button = (react_1.default.createElement(StyledButton, Object.assign({}, props),
+        props.icon ? react_1.default.createElement(StyledIcon, null, props.icon) : null,
+        props.children));
     if (props.to) {
-        return (react_1.default.createElement(Link_1.Link, { to: props.to },
-            react_1.default.createElement(StyledButton, Object.assign({}, props))));
+        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
     }
     else {
-        return react_1.default.createElement(StyledButton, Object.assign({}, props));
+        return button;
     }
 };
 exports.Button = (0, styled_components_1.default)(ButtonComponent) ``;

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

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

package/lib/components/Button/index.js

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

package/lib/components/Button/styledVariables.d.ts

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

package/lib/components/Button/styledVariables.js

@@ -0,0 +1,107 @@
+"use strict";
+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
+    */
+
+  /**
+    * @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: none; // @presenter Shadow
+  --button-active-box-shadow: none; // @presenter Shadow
+
+  /**
+    * @tokens Button typography
+    */
+
+  --button-font-size: var(--font-size-base); // @presenter FontSize
+  --button-font-family: inherit; // @presenter FontFamily
+  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  --button-default-font-size: var(--font-size-base); // @presenter FontSize
+  --button-default-padding: 8px 16px;
+
+  --button-small-font-size: var(--font-size-base); // @presenter FontSize
+  --button-small-padding: 4px 8px;
+
+  --button-large-font-size: var(--font-size-lg); // @presenter FontSize
+  --button-large-padding: 8px 16px;
+
+  /**
+    * @tokens Button icon
+    */
+  --button-icon-width: 1em; // @presenter Spacing
+  --button-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Button default
+    */
+  .button-default {
+    --button-color: var(--text-primary); // @presenter Color
+    --button-background-color: var(--bg-overlay); // @presenter Color
+    --button-border-color: var(--bg-overlay);
+
+    --button-hover-background-color: var(--bg-overlay); // @presenter Color
+    --button-hover-border-color: var(--border-primary); // @presenter Color
+
+    --button-active-background-color: var(--bg-overlay); // @presenter Color
+    --button-active-border-color: var(--button-color); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button primary
+    */
+  .button-primary {
+    --button-color: var(--text-light-solid); // @presenter Color
+    --button-background-color: var(--color-primary); // @presenter Color
+    --button-border-color: var(--color-primary); // @presenter Color
+    --button-border: 1px solid var(--button-border-color);
+
+    --button-hover-background-color: var(--color-primary-hover); // @presenter Color
+    --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+
+    --button-active-background-color: var(--color-primary-active); // @presenter Color
+    --button-active-border-color: var(--color-primary-active); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button outline
+    */
+  .button-outlined {
+    --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.d.ts

@@ -6,3 +6,4 @@ export default function Catalog(props: {
         catalogConfig: CatalogConfig;
     };
 }): JSX.Element;
+export declare const FilterControls: import("styled-components").StyledComponent<"div", any, {}, never>;