@redocly/theme 0.30.8 → 0.31.0

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

@@ -3,4 +3,3 @@ import type { CatalogItem } from '../../types/portal/src/shared/types/catalog';
 export declare function CatalogCard({ item }: {
     item: CatalogItem;
 }): JSX.Element;
-export declare function statusToColor(status: string): "error" | "" | "warning" | "success";

package/lib/components/Catalog/CatalogCard.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.statusToColor = exports.CatalogCard = void 0;
+exports.CatalogCard = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
@@ -35,9 +35,10 @@ const Tag_1 = require("../../components/Tag");
 const icons_1 = require("../../icons");
 const telemetry_1 = require("../../mocks/telemetry");
 const utils_1 = require("../../utils");
+const Card_1 = require("../../components/Scorecard/Card");
 function CatalogCard({ item }) {
     var _a, _b;
-    const hasTags = item.scorecardStatus || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
+    const hasTags = item.scorecardLevel || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
@@ -49,26 +50,13 @@ function CatalogCard({ item }) {
                     hasTags && (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, (0, utils_1.capitalize)(tag))))),
-                        (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
+                        (item.scorecardLevel && (React.createElement(StatusDot, { color: (0, Card_1.getLevelColor)(item.scorecardLevelIdx || -1, Object.keys(item.scorecardLevels || {}).length) },
                             React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
                             null)),
                     React.createElement(SelectButton, null,
                         React.createElement(icons_1.PointingArrowIcon, null)))))));
 }
 exports.CatalogCard = CatalogCard;
-function statusToColor(status) {
-    switch (status) {
-        case 'Below minimum':
-            return 'error';
-        case 'Minimum':
-            return 'warning';
-        case 'Highest':
-            return 'success';
-        default:
-            return '';
-    }
-}
-exports.statusToColor = statusToColor;
 const SelectButton = styled_components_1.default.div `
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
@@ -153,4 +141,27 @@ const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
   text-transform: inherit;
   margin: 0;
 `;
+const StatusDot = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  &:not(:only-child) {
+    margin-left: 4px;
+  }
+
+  ${({ color }) => color &&
+    `
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: ${color};
+    margin-right: 8px;
+  }`};
+`;
 //# sourceMappingURL=CatalogCard.js.map

package/lib/components/Catalog/useCatalog.js

@@ -117,7 +117,6 @@ function useCatalog(items, config) {
     // filterParents[i] is a Set with indexes of parents of this filter
     const filterParents = React.useMemo(() => collectFilterParents(config.filters), [config.filters]);
     return React.useMemo(() => {
-        var _a;
         const filters = filtersWithOptions.map((filter, idx) => {
             var _a, _b, _c, _d;
             return (Object.assign(Object.assign({}, filter), { toggleOption: (value) => toggleOption(idx, value), selectOption: (value) => selectOption(idx, value), selectedOptions: (_a = filtersState[idx]) !== null && _a !== void 0 ? _a : new Set(), isFilterUsed: ((_c = (_b = filtersState[idx]) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : 0) > 0 || !!((_d = filtersState[idx]) === null || _d === void 0 ? void 0 : _d.from) }));
@@ -140,7 +139,7 @@ function useCatalog(items, config) {
             const adjustedFilterOptions = collectFilterOptions(filteredWithOtherFilters.map((m) => ({ metadata: m })), config.filters);
             return Object.assign(Object.assign({}, filter), { parentUsed, filteredOptions: adjustedFilterOptions[idx].options });
         });
-        const groups = config.groupByFirstFilter && ((_a = filters[0].selectedOptions) === null || _a === void 0 ? void 0 : _a.size) > 0
+        const groups = config.groupByFirstFilter
             ? groupByFirstFilter(resolvedFilters, filteredItems)
             : [{ title: 'APIs', items: filteredItems }];
         return {
@@ -241,7 +240,7 @@ function collectFilterOptions(items, filters) {
                 ? (_b = item.metadata) === null || _b === void 0 ? void 0 : _b[filter.property]
                 : [(_c = item.metadata) === null || _c === void 0 ? void 0 : _c[filter.property]];
             for (const value of values) {
-                const str = String(value);
+                const str = mapFilterValues(String(value), filter.valuesMapping);
                 if (staticOptions) {
                     if (str in staticOptions) {
                         usedOptions[str] = usedOptions[str] + 1;
@@ -256,9 +255,10 @@ function collectFilterOptions(items, filters) {
                 }
             }
         }
-        const options = Object.entries(usedOptions)
-            .map(([value, count]) => ({ value, count }))
-            .sort((a, b) => b.value.localeCompare(a.value));
+        const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+        if (!staticOptions) {
+            options.sort((a, b) => b.value.localeCompare(a.value));
+        }
         if (othersCount) {
             options.push({
                 value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
@@ -286,7 +286,7 @@ function filterItems(normalizedItems, filters, term) {
             if (filter.selectedOptions.size === 0) {
                 return true;
             }
-            const itemValue = (item === null || item === void 0 ? void 0 : item[filter.property]) || filter.missingCategoryName || 'Others';
+            const itemValue = mapFilterValues((item === null || item === void 0 ? void 0 : item[filter.property]) || filter.missingCategoryName || 'Others', filter.valuesMapping);
             if (Array.isArray(itemValue)) {
                 return itemValue.some((value) => filter.selectedOptions.has(value));
             }
@@ -307,4 +307,11 @@ function filterItems(normalizedItems, filters, term) {
         return filteredByFilters;
     }
 }
+function mapFilterValues(value, mapping) {
+    if (!mapping)
+        return value;
+    return Array.isArray(value)
+        ? value.map((v) => mapping[String(v)] || v)
+        : mapping[String(value)] || value;
+}
 //# sourceMappingURL=useCatalog.js.map

package/lib/components/Filter/Filter.js

@@ -52,7 +52,7 @@ function Filter({ filter, filterValuesCasing, }) {
                             return;
                         filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
                     } })))) : (filter.filteredOptions.map((value) => {
-            const id = 'filter--' + filter.property + '--' + slug(value.value);
+            const id = 'filter--' + filter.property + '--' + value.value;
             return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
                 react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
                 react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
@@ -133,10 +133,6 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
     margin: var(--filter-select-option-margin);
   }
 `;
-// TODO: import from portal
-function slug(str) {
-    return str.replace(/\s/g, '-').toLowerCase();
-}
 const DatePickerWrapper = styled_components_1.default.div `
   color: var(--filter-date-picker-color);
   display: flex;

package/lib/components/LastUpdated/LastUpdated.js

@@ -32,6 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const timeago_js_1 = require("timeago.js");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const constants_1 = require("../../types/portal/src/shared/constants");
 const FORMATS = {
     timeago: (date, locale) => (0, timeago_js_1.format)(date, locale),
     iso: (date) => date.toISOString().split('T')[0],
@@ -47,7 +48,9 @@ function LastUpdated(props) {
     }
     const lastModified = props.lastModified;
     const format = props.format || lastUpdatedBlock.format || 'timeago';
-    const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
+    const locale = props.locale ||
+        lastUpdatedBlock.locale ||
+        (currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
     const isoDate = lastModified.toISOString().split('T')[0];
     const lastUpdatedString = FORMATS[format](lastModified, locale);
     const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';

package/lib/components/OpenApiDocs/ScorecardBadges.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 interface ScorecardBadgesProps {
     metadata?: {
         scorecardLevel?: string;
-        scorecardStatus?: string;
         scoreCardSlug?: string;
+        scorecardLevelIdx?: number;
+        scorecardLevels?: Record<string, any>;
     };
 }
 export declare function ScorecardBadges(props: ScorecardBadgesProps): React.JSX.Element | null;

package/lib/components/OpenApiDocs/ScorecardBadges.js

@@ -9,11 +9,11 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag");
 const Link_1 = require("../../mocks/Link");
 const telemetry_1 = require("../../mocks/telemetry");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const Card_1 = require("../../components/Scorecard/Card");
 function ScorecardBadges(props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     return ((((_a = props.metadata) === null || _a === void 0 ? void 0 : _a.scorecardLevel) && (react_1.default.createElement(ScorecardBadgesWrapper, { "data-component-name": "OpenApiDocs/ScorecardBadges" },
-        react_1.default.createElement(ComplianceTag, { level: props.metadata.scorecardLevel, status: (_b = props.metadata) === null || _b === void 0 ? void 0 : _b.scorecardStatus, slug: (_c = props.metadata) === null || _c === void 0 ? void 0 : _c.scoreCardSlug })))) ||
+        react_1.default.createElement(ComplianceTag, { level: props.metadata.scorecardLevel, slug: (_b = props.metadata) === null || _b === void 0 ? void 0 : _b.scoreCardSlug, color: (0, Card_1.getLevelColor)((_c = props.metadata) === null || _c === void 0 ? void 0 : _c.scorecardLevelIdx, Object.keys(((_d = props.metadata) === null || _d === void 0 ? void 0 : _d.scorecardLevels) || {}).length) })))) ||
         null);
 }
 exports.ScorecardBadges = ScorecardBadges;
@@ -27,8 +27,32 @@ const ScorecardBadgesWrapper = styled_components_1.default.div `
   right: var(--panel-gap-horizontal);
 `;
 function ComplianceTag(props) {
-    const { level, status, slug } = props;
+    const { level, slug, color } = props;
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { color: (0, CatalogCard_1.statusToColor)(status), size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) }, level)));
+        react_1.default.createElement(Tag_1.Tag, { size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) },
+            react_1.default.createElement(StatusDot, { color: color }, level))));
 }
+const StatusDot = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  &:not(:only-child) {
+    margin-left: 4px;
+  }
+
+  ${({ color }) => color &&
+    `
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: ${color};
+    margin-right: 8px;
+  }`};
+`;
 //# sourceMappingURL=ScorecardBadges.js.map

package/lib/components/Scorecard/Card.d.ts

@@ -1,2 +1,5 @@
-export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;
 export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
+export declare function getLevelColor(idx: number, numberOfLevels: number): string;

package/lib/components/Scorecard/Card.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
+exports.getLevelColor = exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.ScorecardCard = styled_components_1.default.div `
+exports.ScorecardCard = styled_components_1.default.div.attrs({
+    'data-component-name': 'Scorecard/ScorecardCard',
+}) `
   color: var(--text-primary);
-  background-color: var(--thin-tile-background-color);
+  background-color: var(--bg-raised);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);
@@ -23,4 +25,13 @@ exports.ScorecardCardTitle = styled_components_1.default.h3 `
   margin-bottom: 10px;
   margin-top: 0;
 `;
+function getLevelColor(idx, numberOfLevels) {
+    if (numberOfLevels === 0) {
+        return 'hsl(0, 0%, 50%)';
+    }
+    const hue = ((idx + 1) / numberOfLevels) * 120;
+    const lum = 50 - ((idx + 1) / numberOfLevels) * 25;
+    return `hsl(${hue}, 100%, ${lum}%)`;
+}
+exports.getLevelColor = getLevelColor;
 //# sourceMappingURL=Card.js.map

package/lib/components/Scorecard/Gauge.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
-export declare function Gauge({ chunks, }: {
+export interface GaugeProps {
     chunks: {
         share: number;
         color: string;
+        title?: string;
     }[];
-}): React.JSX.Element;
+    className?: string;
+}
+export declare function Gauge({ chunks, className }: GaugeProps): React.JSX.Element;
 export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/Scorecard/Gauge.js

@@ -29,15 +29,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GaugeValue = exports.Gauge = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Gauge({ chunks, }) {
-    return (React.createElement(GaugeWrapper, null, chunks.map((chunk, i) => (React.createElement(GaugeChunk, Object.assign({ key: i }, chunk))))));
+function Gauge({ chunks, className }) {
+    const title = chunks
+        .map((chunk) => chunk.title)
+        .filter(Boolean)
+        .join(', ');
+    return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
 }
 exports.Gauge = Gauge;
 exports.GaugeValue = styled_components_1.default.span `
   font-size: var(--font-size-lg);
   line-height: var(line-height-regular);
 
-  margin-right: 5px;
   vertical-align: middle;
   display: inline-block;
   margin-right: 0;

package/lib/components/Scorecard/StatusByLevelWidget.d.ts

@@ -7,5 +7,6 @@ export interface StatusByLevelWidgetProps {
         warnings: number;
         total: number;
     }[];
+    className?: string;
 }
 export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): React.JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.js

@@ -32,8 +32,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Gauge_1 = require("../../components/Scorecard/Gauge");
 const Card_1 = require("../../components/Scorecard/Card");
 function StatusByLevelWidget(props) {
-    const { levels, title } = props;
-    return (React.createElement(Card_1.ScorecardCard, null,
+    const { levels, title, className } = props;
+    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
         React.createElement(Card_1.ScorecardCardTitle, null, title),
         React.createElement(CardBody, null, levels.map((level) => {
             const success = level.total - level.errors - level.warnings;
@@ -43,14 +43,17 @@ function StatusByLevelWidget(props) {
                         {
                             share: (success / level.total) * 100,
                             color: 'var(--scorecard-color-success)',
+                            title: `${success} passed`,
                         },
                         {
                             share: (level.warnings / level.total) * 100,
                             color: 'var(--scorecard-color-warning)',
+                            title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                         },
                         {
                             share: (level.errors / level.total) * 100,
                             color: 'var(--scorecard-color-error)',
+                            title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                         },
                     ] }),
                 React.createElement(Gauge_1.GaugeValue, null,

package/lib/config.d.ts

@@ -269,6 +269,12 @@ declare const catalogFilterSchema: {
         readonly parentFilter: {
             readonly type: "string";
         };
+        readonly valuesMapping: {
+            readonly type: "object";
+            readonly additionalProperties: {
+                readonly type: "string";
+            };
+        };
         readonly missingCategoryName: {
             readonly type: "string";
         };
@@ -315,6 +321,9 @@ declare const scorecardConfigSchema: {
                     readonly name: {
                         readonly type: "string";
                     };
+                    readonly color: {
+                        readonly type: "string";
+                    };
                     readonly extends: {
                         readonly type: "array";
                         readonly items: {
@@ -390,6 +399,12 @@ declare const catalogSchema: {
                     readonly parentFilter: {
                         readonly type: "string";
                     };
+                    readonly valuesMapping: {
+                        readonly type: "object";
+                        readonly additionalProperties: {
+                            readonly type: "string";
+                        };
+                    };
                     readonly missingCategoryName: {
                         readonly type: "string";
                     };
@@ -1690,6 +1705,12 @@ export declare const themeConfigSchema: {
                                     readonly parentFilter: {
                                         readonly type: "string";
                                     };
+                                    readonly valuesMapping: {
+                                        readonly type: "object";
+                                        readonly additionalProperties: {
+                                            readonly type: "string";
+                                        };
+                                    };
                                     readonly missingCategoryName: {
                                         readonly type: "string";
                                     };
@@ -1882,6 +1903,9 @@ export declare const themeConfigSchema: {
                             readonly name: {
                                 readonly type: "string";
                             };
+                            readonly color: {
+                                readonly type: "string";
+                            };
                             readonly extends: {
                                 readonly type: "array";
                                 readonly items: {
@@ -2414,9 +2438,4 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
-export declare enum ScorecardStatus {
-    BelowMinimum = "Below minimum",
-    Highest = "Highest",
-    Minimum = "Minimum"
-}
 export {};

package/lib/config.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScorecardStatus = exports.productThemeOverrideSchema = exports.themeConfigSchema = void 0;
+exports.productThemeOverrideSchema = exports.themeConfigSchema = void 0;
 const logoConfigSchema = {
     type: 'object',
     properties: {
@@ -259,6 +259,7 @@ const catalogFilterSchema = {
         titleTranslationKey: { type: 'string' },
         property: { type: 'string' },
         parentFilter: { type: 'string' },
+        valuesMapping: { type: 'object', additionalProperties: { type: 'string' } },
         missingCategoryName: { type: 'string' },
         missingCategoryNameTranslationKey: { type: 'string' },
         options: { type: 'array', items: { type: 'string' } },
@@ -285,6 +286,7 @@ const scorecardConfigSchema = {
                 required: ['name'],
                 properties: {
                     name: { type: 'string' },
+                    color: { type: 'string' },
                     extends: { type: 'array', items: { type: 'string' } },
                     rules: {
                         type: 'object',
@@ -609,10 +611,4 @@ exports.productThemeOverrideSchema = {
     additionalProperties: true,
     default: {},
 };
-var ScorecardStatus;
-(function (ScorecardStatus) {
-    ScorecardStatus["BelowMinimum"] = "Below minimum";
-    ScorecardStatus["Highest"] = "Highest";
-    ScorecardStatus["Minimum"] = "Minimum";
-})(ScorecardStatus || (exports.ScorecardStatus = ScorecardStatus = {}));
 //# sourceMappingURL=config.js.map

package/lib/types/portal/src/shared/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DEFAULT_THEME_NAME = "@redocly/theme";
 export declare const USER_THEME_ALIAS = "@theme";
 export declare const REDOCLY_TEAMS_RBAC = "redocly::teams-rbac";
+export declare const DEFAULT_LOCALE_PLACEHOLDER = "default_locale";
 export type REQUIRED_OIDC_SCOPES = string[];
 export type DEFAULT_COOKIE_EXPIRATION = number;
 export declare enum FEEDBACK_TYPES {

package/lib/types/portal/src/shared/constants.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.REDOCLY_TEAMS_RBAC = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = void 0;
+exports.FsErrors = exports.ExternalRoutes = exports.DEV_LOGIN_SLUG = exports.FEEDBACK_TYPES = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = exports.USER_THEME_ALIAS = exports.DEFAULT_THEME_NAME = void 0;
 exports.DEFAULT_THEME_NAME = '@redocly/theme';
 exports.USER_THEME_ALIAS = '@theme';
 exports.REDOCLY_TEAMS_RBAC = 'redocly::teams-rbac';
+exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
 var FEEDBACK_TYPES;
 (function (FEEDBACK_TYPES) {
     FEEDBACK_TYPES["RATING"] = "rating";

package/lib/types/portal/src/shared/types/catalog.d.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig, ScorecardStatus } from '../../../../../index.js';
+import { CatalogFilterConfig } from '../../../../../index.js';
 export type FilteredCatalog = {
     groups: {
         title: string;
@@ -31,8 +31,12 @@ export type CatalogItem = {
     description?: string;
     image?: string;
     docsLink?: string;
-    scorecardStatus?: ScorecardStatus;
     scorecardLevel?: string;
+    scorecardLevelIdx?: number;
+    scorecardLevels?: Record<string, {
+        uniqueErrors: number;
+        uniqueWarnings: number;
+    }>;
     scoreCardSlug?: string;
     tags?: unknown[];
     [k: string]: unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.30.8",
+  "version": "0.31.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/CatalogCard.tsx

@@ -8,9 +8,10 @@ import { Tag } from '@theme/components/Tag';
 import { PointingArrowIcon } from '@theme/icons';
 import { telemetry } from '@portal/telemetry';
 import { slug, capitalize } from '@theme/utils';
+import { getLevelColor } from '@theme/components/Scorecard/Card';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
-  const hasTags = item.scorecardStatus || item.tags?.length;
+  const hasTags = item.scorecardLevel || item.tags?.length;
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
@@ -29,13 +30,15 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
                     <Highlight>{capitalize(tag)}</Highlight>
                   </CardTag>
                 ))}
-                {(item.scorecardLevel && item.scorecardStatus && (
-                  <CardTag
-                    color={statusToColor(item.scorecardStatus)}
-                    className="tag-variant-scorecard-level"
+                {(item.scorecardLevel && (
+                  <StatusDot
+                    color={getLevelColor(
+                      item.scorecardLevelIdx || -1,
+                      Object.keys(item.scorecardLevels || {}).length,
+                    )}
                   >
                     <Highlight>{item.scorecardLevel}</Highlight>
-                  </CardTag>
+                  </StatusDot>
                 )) ||
                   null}
               </CardTags>
@@ -50,19 +53,6 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   );
 }
 
-export function statusToColor(status: string) {
-  switch (status) {
-    case 'Below minimum':
-      return 'error';
-    case 'Minimum':
-      return 'warning';
-    case 'Highest':
-      return 'success';
-    default:
-      return '';
-  }
-}
-
 const SelectButton = styled.div`
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
@@ -154,3 +144,28 @@ const CardTag = styled(Tag)`
   text-transform: inherit;
   margin: 0;
 `;
+
+const StatusDot = styled.div<{ color: string }>`
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  &:not(:only-child) {
+    margin-left: 4px;
+  }
+
+  ${({ color }) =>
+    color &&
+    `
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: ${color};
+    margin-right: 8px;
+  }`};
+`;

package/src/components/Catalog/useCatalog.ts

@@ -158,10 +158,9 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       };
     });
 
-    const groups =
-      config.groupByFirstFilter && (filters[0].selectedOptions as any)?.size > 0
-        ? groupByFirstFilter(resolvedFilters, filteredItems)
-        : [{ title: 'APIs', items: filteredItems }];
+    const groups = config.groupByFirstFilter
+      ? groupByFirstFilter(resolvedFilters, filteredItems)
+      : [{ title: 'APIs', items: filteredItems }];
 
     return {
       groups,
@@ -283,7 +282,7 @@ function collectFilterOptions(
         : [item.metadata?.[filter.property]];
 
       for (const value of values) {
-        const str = String(value);
+        const str = mapFilterValues(String(value), filter.valuesMapping) as string;
         if (staticOptions) {
           if (str in staticOptions) {
             usedOptions[str] = usedOptions[str] + 1;
@@ -299,15 +298,19 @@ function collectFilterOptions(
       }
     }
 
-    const options = Object.entries(usedOptions)
-      .map(([value, count]) => ({ value, count }))
-      .sort((a, b) => b.value.localeCompare(a.value));
+    const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
+
+    if (!staticOptions) {
+      options.sort((a, b) => b.value.localeCompare(a.value));
+    }
+
     if (othersCount) {
       options.push({
         value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
         count: othersCount,
       });
     }
+
     return { ...filter, options };
   });
 }
@@ -336,7 +339,11 @@ function filterItems(
         return true;
       }
 
-      const itemValue = item?.[filter.property] || filter.missingCategoryName || 'Others';
+      const itemValue = mapFilterValues(
+        item?.[filter.property] || filter.missingCategoryName || 'Others',
+        filter.valuesMapping,
+      );
+
       if (Array.isArray(itemValue)) {
         return itemValue.some((value) => (filter.selectedOptions as Set<any>).has(value));
       }
@@ -357,3 +364,10 @@ function filterItems(
     return filteredByFilters;
   }
 }
+
+function mapFilterValues(value: unknown | unknown[], mapping?: Record<string, string>) {
+  if (!mapping) return value;
+  return Array.isArray(value)
+    ? value.map((v) => mapping[String(v)] || v)
+    : mapping[String(value)] || value;
+}

package/src/components/Filter/Filter.tsx

@@ -109,7 +109,7 @@ export function Filter({
         </>
       ) : (
         filter.filteredOptions.map((value: any) => {
-          const id = 'filter--' + filter.property + '--' + slug(value.value);
+          const id = 'filter--' + filter.property + '--' + value.value;
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
@@ -210,11 +210,6 @@ const StyledSelect = styled(Select)`
   }
 `;
 
-// TODO: import from portal
-function slug(str: string): string {
-  return str.replace(/\s/g, '-').toLowerCase();
-}
-
 const DatePickerWrapper = styled.div`
   color: var(--filter-date-picker-color);
   display: flex;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -5,6 +5,8 @@ import { format } from 'timeago.js';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
 
+import { DEFAULT_LOCALE_PLACEHOLDER } from '../../types/portal/src/shared/constants';
+
 const FORMATS = {
   timeago: (date: Date, locale: string) => format(date, locale),
   iso: (date: Date) => date.toISOString().split('T')[0],
@@ -32,7 +34,10 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   const lastModified = props.lastModified;
   const format = props.format || lastUpdatedBlock.format || 'timeago';
-  const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
+  const locale =
+    props.locale ||
+    lastUpdatedBlock.locale ||
+    (currentLocale !== DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
 
   const isoDate = lastModified.toISOString().split('T')[0];
 

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -4,13 +4,14 @@ import styled from 'styled-components';
 import { Tag } from '@theme/components/Tag';
 import { Link } from '@portal/Link';
 import { telemetry } from '@portal/telemetry';
-import { statusToColor } from '@theme/components/Catalog/CatalogCard';
+import { getLevelColor } from '@theme/components/Scorecard/Card';
 
 interface ScorecardBadgesProps {
   metadata?: {
     scorecardLevel?: string;
-    scorecardStatus?: string;
     scoreCardSlug?: string;
+    scorecardLevelIdx?: number;
+    scorecardLevels?: Record<string, any>;
   };
 }
 
@@ -20,8 +21,11 @@ export function ScorecardBadges(props: ScorecardBadgesProps) {
       <ScorecardBadgesWrapper data-component-name="OpenApiDocs/ScorecardBadges">
         <ComplianceTag
           level={props.metadata.scorecardLevel as string}
-          status={props.metadata?.scorecardStatus as string}
           slug={props.metadata?.scoreCardSlug as string}
+          color={getLevelColor(
+            props.metadata?.scorecardLevelIdx as number,
+            Object.keys(props.metadata?.scorecardLevels || {}).length,
+          )}
         />
       </ScorecardBadgesWrapper>
     )) ||
@@ -39,17 +43,41 @@ const ScorecardBadgesWrapper = styled.div`
   right: var(--panel-gap-horizontal);
 `;
 
-function ComplianceTag(props: { level: string; status: string; slug: string }) {
-  const { level, status, slug } = props;
+function ComplianceTag(props: { level: string; slug: string; color: string }) {
+  const { level, slug, color } = props;
   return (
     <Link to={slug}>
       <Tag
-        color={statusToColor(status)}
         size="large"
         onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
       >
-        {level}
+        <StatusDot color={color}>{level}</StatusDot>
       </Tag>
     </Link>
   );
 }
+
+const StatusDot = styled.div<{ color: string }>`
+  font-size: var(--font-size-base);
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  display: flex;
+  align-items: center;
+  &:not(:only-child) {
+    margin-left: 4px;
+  }
+
+  ${({ color }) =>
+    color &&
+    `
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: ${color};
+    margin-right: 8px;
+  }`};
+`;

package/src/components/Scorecard/Card.tsx

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
-export const ScorecardCard = styled.div`
+export const ScorecardCard = styled.div.attrs({
+  'data-component-name': 'Scorecard/ScorecardCard',
+})`
   color: var(--text-primary);
-  background-color: var(--thin-tile-background-color);
+  background-color: var(--bg-raised);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);
@@ -19,3 +21,13 @@ export const ScorecardCardTitle = styled.h3`
   margin-bottom: 10px;
   margin-top: 0;
 `;
+
+export function getLevelColor(idx: number, numberOfLevels: number) {
+  if (numberOfLevels === 0) {
+    return 'hsl(0, 0%, 50%)';
+  }
+
+  const hue = ((idx + 1) / numberOfLevels) * 120;
+  const lum = 50 - ((idx + 1) / numberOfLevels) * 25;
+  return `hsl(${hue}, 100%, ${lum}%)`;
+}

package/src/components/Scorecard/Gauge.tsx

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
-export function Gauge({
-  chunks,
-}: {
+export interface GaugeProps {
   chunks: {
     share: number;
     color: string;
+    title?: string;
   }[];
-}) {
+  className?: string;
+}
+
+export function Gauge({ chunks, className }: GaugeProps) {
+  const title = chunks
+    .map((chunk) => chunk.title)
+    .filter(Boolean)
+    .join(', ');
   return (
-    <GaugeWrapper>
+    <GaugeWrapper
+      data-component-name="Scorecard/StatusByLevelWidget"
+      className={className}
+      title={title}
+    >
       {chunks.map((chunk, i) => (
-        <GaugeChunk key={i} {...chunk} />
+        <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
       ))}
     </GaugeWrapper>
   );
@@ -22,7 +31,6 @@ export const GaugeValue = styled.span`
   font-size: var(--font-size-lg);
   line-height: var(line-height-regular);
 
-  margin-right: 5px;
   vertical-align: middle;
   display: inline-block;
   margin-right: 0;

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -7,12 +7,13 @@ import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/C
 export interface StatusByLevelWidgetProps {
   title: string;
   levels: { name: string; errors: number; warnings: number; total: number }[];
+  className?: string;
 }
 
 export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
-  const { levels, title } = props;
+  const { levels, title, className } = props;
   return (
-    <ScorecardCard>
+    <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
       <ScorecardCardTitle>{title}</ScorecardCardTitle>
       <CardBody>
         {levels.map((level) => {
@@ -25,14 +26,17 @@ export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
                   {
                     share: (success / level.total) * 100,
                     color: 'var(--scorecard-color-success)',
+                    title: `${success} passed`,
                   },
                   {
                     share: (level.warnings / level.total) * 100,
                     color: 'var(--scorecard-color-warning)',
+                    title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                   },
                   {
                     share: (level.errors / level.total) * 100,
                     color: 'var(--scorecard-color-error)',
+                    title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                   },
                 ]}
               />

package/src/config.ts

@@ -297,6 +297,7 @@ const catalogFilterSchema = {
     titleTranslationKey: { type: 'string' },
     property: { type: 'string' },
     parentFilter: { type: 'string' },
+    valuesMapping: { type: 'object', additionalProperties: { type: 'string' } },
     missingCategoryName: { type: 'string' },
     missingCategoryNameTranslationKey: { type: 'string' },
     options: { type: 'array', items: { type: 'string' } },
@@ -324,6 +325,7 @@ const scorecardConfigSchema = {
         required: ['name'],
         properties: {
           name: { type: 'string' },
+          color: { type: 'string' },
           extends: { type: 'array', items: { type: 'string' } },
           rules: {
             type: 'object',
@@ -748,9 +750,3 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
-
-export enum ScorecardStatus {
-  BelowMinimum = 'Below minimum',
-  Highest = 'Highest',
-  Minimum = 'Minimum',
-}

package/src/types/portal/src/shared/constants.ts

@@ -1,6 +1,7 @@
 export const DEFAULT_THEME_NAME = '@redocly/theme';
 export const USER_THEME_ALIAS = '@theme';
 export const REDOCLY_TEAMS_RBAC = 'redocly::teams-rbac';
+export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale'
 export type REQUIRED_OIDC_SCOPES =  string[];
 export type DEFAULT_COOKIE_EXPIRATION = number;
 export enum FEEDBACK_TYPES {

package/src/types/portal/src/shared/types/catalog.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig, ScorecardStatus } from '@theme';
+import { CatalogFilterConfig } from '@theme';
 
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
@@ -34,8 +34,9 @@ export type CatalogItem = {
   image?: string;
   docsLink?: string;
 
-  scorecardStatus?: ScorecardStatus;
   scorecardLevel?: string;
+  scorecardLevelIdx?: number;
+  scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
   scoreCardSlug?: string;
   tags?: unknown[];