@redocly/theme 0.30.3-beta.1 → 0.30.4

package/lib/components/Catalog/useCatalog.js

@@ -256,10 +256,9 @@ function collectFilterOptions(items, filters) {
                 }
             }
         }
-        const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
-        if (!staticOptions) {
-            options.sort((a, b) => b.value.localeCompare(a.value));
-        }
+        const options = Object.entries(usedOptions)
+            .map(([value, count]) => ({ value, count }))
+            .sort((a, b) => b.value.localeCompare(a.value));
         if (othersCount) {
             options.push({
                 value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/lib/components/Feedback/Mood.js

@@ -41,7 +41,7 @@ var MOOD_STATES;
     MOOD_STATES["SATISFIED"] = "satisfied";
     MOOD_STATES["NEUTRAL"] = "neutral";
     MOOD_STATES["DISSATISFIED"] = "dissatisfied";
-})(MOOD_STATES = exports.MOOD_STATES || (exports.MOOD_STATES = {}));
+})(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
 const Mood = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState('');
@@ -50,7 +50,7 @@ const Mood = ({ settings, onSubmit, className }) => {
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
     const renderCommentLabel = (score) => {
-        if (!(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable))
+        if (!commentSettings || (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide) === true)
             return '';
         switch (score) {
             case MOOD_STATES.SATISFIED:
@@ -66,8 +66,8 @@ const Mood = ({ settings, onSubmit, className }) => {
                 return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
         }
     };
-    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
-    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+    const displayComment = !!score && commentSettings && !commentSettings.hide;
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
     const onSubmitMoodForm = () => {
         onSubmit({

package/lib/components/Feedback/Rating.js

@@ -53,8 +53,8 @@ const Rating = ({ settings, onSubmit, className }) => {
         });
         setIsSubmitted(true);
     };
-    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
-    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+    const displayComment = !!score && commentSettings && !commentSettings.hide;
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
     (0, react_1.useEffect)(() => {
         if (score && !displayComment && !displayReasons) {

package/lib/components/Feedback/Scale.js

@@ -47,8 +47,8 @@ const Scale = ({ settings, onSubmit, className }) => {
     for (let i = 1; i <= exports.MAX_SCALE; i++) {
         scaleOptions.push(React.createElement(ScaleOption, { id: `scale-option-${i}`, key: `scale-option-${i}`, onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
     }
-    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
-    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+    const displayComment = !!score && commentSettings && !commentSettings.hide;
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
     const onSubmitScaleForm = () => {
         onSubmit({

package/lib/components/Feedback/Sentiment.js

@@ -43,8 +43,8 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
-    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+    const displayComment = !!score && commentSettings && !commentSettings.hide;
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||

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

@@ -10,11 +10,11 @@ export type RatingProps = {
         label?: string;
         submitText?: string;
         comment?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
         };
         reasons?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
             component?: string;
             items: string[];
@@ -35,11 +35,11 @@ export type ScaleProps = {
         leftScaleLabel?: string;
         rightScaleLabel?: string;
         comment?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
         };
         reasons?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
             component?: string;
             items: string[];
@@ -57,13 +57,13 @@ export type MoodProps = {
         label?: string;
         submitText?: string;
         comment?: {
-            enable: boolean;
+            hide?: boolean;
             satisfiedLabel?: string;
             neutralLabel?: string;
             dissatisfiedLabel?: string;
         };
         reasons?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
             component?: string;
             items: string[];
@@ -81,12 +81,12 @@ export type SentimentProps = {
         label?: string;
         submitText?: string;
         comment?: {
-            enable: boolean;
+            hide?: boolean;
             likeLabel?: string;
             dislikeLabel?: string;
         };
         reasons?: {
-            enable: boolean;
+            hide?: boolean;
             label?: string;
             component?: string;
             items: string[];

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 + '--' + value.value;
+            const id = 'filter--' + filter.property + '--' + slug(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,6 +133,10 @@ 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/Menu/constants.js

@@ -6,5 +6,5 @@ var MenuType;
     MenuType["MAIN_MENU"] = "MAIN_MENU";
     MenuType["PRODUCT"] = "PRODUCT";
     MenuType["PAGE"] = "PAGE";
-})(MenuType = exports.MenuType || (exports.MenuType = {}));
+})(MenuType || (exports.MenuType = MenuType = {}));
 //# sourceMappingURL=constants.js.map

package/lib/components/Navbar/Navbar.js

@@ -64,15 +64,13 @@ function Navbar() {
     if (!menu && !logo) {
         return react_1.default.createElement(EmptyNavbarHack, null);
     }
-    return (react_1.default.createElement(NavbarPresentational, Object.assign({}, {
-        closeMobileMenu,
+    return (react_1.default.createElement(NavbarPresentational, { closeMobileMenu,
         openMobileMenu,
         isOpen,
         hideSearch: Boolean(hideSearch),
         logo: logo,
         hideUserProfile,
-        changeLanguage,
-    })));
+        changeLanguage }));
 }
 exports.Navbar = Navbar;
 function NavbarPresentational(props) {

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

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

package/lib/components/Scorecard/Card.js

@@ -5,11 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.ScorecardCard = styled_components_1.default.div.attrs({
-    'data-component-name': 'Scorecard/ScorecardCard',
-}) `
+exports.ScorecardCard = styled_components_1.default.div `
   color: var(--text-primary);
-  background-color: var(--bg-raised);
+  background-color: var(--thin-tile-background-color);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

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

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

package/lib/components/Scorecard/Gauge.js

@@ -29,12 +29,8 @@ 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, 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 })))));
+function Gauge({ chunks, }) {
+    return (React.createElement(GaugeWrapper, null, chunks.map((chunk, i) => (React.createElement(GaugeChunk, Object.assign({ key: i }, chunk))))));
 }
 exports.Gauge = Gauge;
 exports.GaugeValue = styled_components_1.default.span `

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

@@ -7,6 +7,5 @@ export interface StatusByLevelWidgetProps {
         warnings: number;
         total: number;
     }[];
-    className?: string;
 }
 export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): 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, className } = props;
-    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
+    const { levels, title } = props;
+    return (React.createElement(Card_1.ScorecardCard, null,
         React.createElement(Card_1.ScorecardCardTitle, null, title),
         React.createElement(CardBody, null, levels.map((level) => {
             const success = level.total - level.errors - level.warnings;
@@ -43,17 +43,14 @@ 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/components/Sidebar/types.js

@@ -4,5 +4,5 @@ exports.MenuStyle = void 0;
 var MenuStyle;
 (function (MenuStyle) {
     MenuStyle["Drilldown"] = "drilldown";
-})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+})(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
 //# sourceMappingURL=types.js.map

package/lib/components/SidebarActions/SidebarActions.js

@@ -14,7 +14,7 @@ var LayoutVariant;
 (function (LayoutVariant) {
     LayoutVariant["STACKED"] = "stacked";
     LayoutVariant["THREE_PANEL"] = "three-panel";
-})(LayoutVariant = exports.LayoutVariant || (exports.LayoutVariant = {}));
+})(LayoutVariant || (exports.LayoutVariant = LayoutVariant = {}));
 const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },

package/lib/components/Tabs/Tabs.js

@@ -40,10 +40,12 @@ function Tabs(props) {
             const { label, key } = child.props;
             return (react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: `${key || label}-${idx}`, label: label, onClick: onTabSelect }));
         })),
-        react_1.default.createElement(TabContent, null, children.map((child) => {
+        react_1.default.createElement(TabContent, null, children.map((child, idx) => {
             if (child.props.label !== activeTab)
                 return undefined;
-            return child.props.children;
+            return react_1.default.createElement(react_1.default.Fragment, { key: idx },
+                " ",
+                child.props.children);
         }))));
 }
 exports.Tabs = Tabs;

package/lib/config.d.ts

@@ -308,9 +308,6 @@ declare const scorecardConfigSchema: {
                     readonly name: {
                         readonly type: "string";
                     };
-                    readonly color: {
-                        readonly type: "string";
-                    };
                     readonly extends: {
                         readonly type: "array";
                         readonly items: {
@@ -1068,9 +1065,9 @@ export declare const themeConfigSchema: {
                         readonly reasons: {
                             readonly type: "object";
                             readonly properties: {
-                                readonly enable: {
+                                readonly hide: {
                                     readonly type: "boolean";
-                                    readonly default: true;
+                                    readonly default: false;
                                 };
                                 readonly component: {
                                     readonly type: "string";
@@ -1092,9 +1089,9 @@ export declare const themeConfigSchema: {
                         readonly comment: {
                             readonly type: "object";
                             readonly properties: {
-                                readonly enable: {
+                                readonly hide: {
                                     readonly type: "boolean";
-                                    readonly default: true;
+                                    readonly default: false;
                                 };
                                 readonly label: {
                                     readonly type: "string";
@@ -1871,9 +1868,6 @@ export declare const themeConfigSchema: {
                             readonly name: {
                                 readonly type: "string";
                             };
-                            readonly color: {
-                                readonly type: "string";
-                            };
                             readonly extends: {
                                 readonly type: "array";
                                 readonly items: {

package/lib/config.js

@@ -280,7 +280,6 @@ const scorecardConfigSchema = {
                 required: ['name'],
                 properties: {
                     name: { type: 'string' },
-                    color: { type: 'string' },
                     extends: { type: 'array', items: { type: 'string' } },
                     rules: {
                         type: 'object',
@@ -408,7 +407,10 @@ exports.themeConfigSchema = {
                         reasons: {
                             type: 'object',
                             properties: {
-                                enable: { type: 'boolean', default: true },
+                                hide: {
+                                    type: 'boolean',
+                                    default: false,
+                                },
                                 component: {
                                     type: 'string',
                                     enum: ['radio', 'checkbox'],
@@ -422,7 +424,10 @@ exports.themeConfigSchema = {
                         comment: {
                             type: 'object',
                             properties: {
-                                enable: { type: 'boolean', default: true },
+                                hide: {
+                                    type: 'boolean',
+                                    default: false,
+                                },
                                 label: { type: 'string' },
                                 likeLabel: { type: 'string' },
                                 dislikeLabel: { type: 'string' },
@@ -604,5 +609,5 @@ var ScorecardStatus;
     ScorecardStatus["BelowMinimum"] = "Below minimum";
     ScorecardStatus["Highest"] = "Highest";
     ScorecardStatus["Minimum"] = "Minimum";
-})(ScorecardStatus = exports.ScorecardStatus || (exports.ScorecardStatus = {}));
+})(ScorecardStatus || (exports.ScorecardStatus = ScorecardStatus = {}));
 //# sourceMappingURL=config.js.map

package/lib/mocks/Sidebar/types.js

@@ -7,5 +7,5 @@ var MenuType;
     MenuType["DrillDown"] = "drilldown";
     MenuType["Group"] = "group";
     MenuType["Operation"] = "operation";
-})(MenuType = exports.MenuType || (exports.MenuType = {}));
+})(MenuType || (exports.MenuType = MenuType = {}));
 //# sourceMappingURL=types.js.map

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

@@ -12,14 +12,14 @@ var FEEDBACK_TYPES;
     FEEDBACK_TYPES["MOOD"] = "mood";
     FEEDBACK_TYPES["PROBLEM"] = "problem";
     FEEDBACK_TYPES["SCALE"] = "scale";
-})(FEEDBACK_TYPES = exports.FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = {}));
+})(FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = FEEDBACK_TYPES = {}));
 exports.DEV_LOGIN_SLUG = '/login/';
 var ExternalRoutes;
 (function (ExternalRoutes) {
     ExternalRoutes["AUTH0_PASS"] = "/auth/auth0-pass";
-})(ExternalRoutes = exports.ExternalRoutes || (exports.ExternalRoutes = {}));
+})(ExternalRoutes || (exports.ExternalRoutes = ExternalRoutes = {}));
 var FsErrors;
 (function (FsErrors) {
     FsErrors["NotExist"] = "ENOENT";
-})(FsErrors = exports.FsErrors || (exports.FsErrors = {}));
+})(FsErrors || (exports.FsErrors = FsErrors = {}));
 //# sourceMappingURL=constants.js.map

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

@@ -4,5 +4,5 @@ exports.MenuStyle = void 0;
 var MenuStyle;
 (function (MenuStyle) {
     MenuStyle["Drilldown"] = "drilldown";
-})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+})(MenuStyle || (exports.MenuStyle = MenuStyle = {}));
 //# sourceMappingURL=nav.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.30.3-beta.1",
+  "version": "0.30.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -28,18 +28,18 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-viewport": "^7.4.6",
-    "@storybook/addons": "^7.4.6",
-    "@storybook/core-common": "^7.4.6",
-    "@storybook/node-logger": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-webpack5": "^7.4.6",
+    "@storybook/addon-actions": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-viewport": "^7.5.0",
+    "@storybook/addons": "^7.5.0",
+    "@storybook/core-common": "^7.5.0",
+    "@storybook/node-logger": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-webpack5": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.4.6",
+    "@storybook/theming": "^7.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
@@ -68,7 +68,7 @@
     "npm-run-all": "^4.1.5",
     "react-refresh": "^0.14.0",
     "react-router-dom": "^6.10.0",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.0",
     "storybook-addon-pseudo-states": "^2.1.2",
     "storybook-design-token": "3.0.0-beta.6",
     "styled-components": "^5.3.7",
@@ -79,7 +79,7 @@
     "tsc-alias": "^1.8.2",
     "tsconfig-paths": "^4.2.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.8.4",
+    "typescript": "^5.2.2",
     "webpack": "^5.72.0",
     "@redocly/portal-types": "1.2.0"
   },

package/src/components/Catalog/useCatalog.ts

@@ -299,12 +299,9 @@ function collectFilterOptions(
       }
     }
 
-    const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
-
-    if (!staticOptions) {
-      options.sort((a, b) => b.value.localeCompare(a.value));
-    }
-
+    const options = Object.entries(usedOptions)
+      .map(([value, count]) => ({ value, count }))
+      .sort((a, b) => b.value.localeCompare(a.value));
     if (othersCount) {
       options.push({
         value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

package/src/components/Feedback/Mood.tsx

@@ -25,7 +25,7 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   const { translate } = useTranslate();
 
   const renderCommentLabel = (score: string) => {
-    if (!commentSettings?.enable) return '';
+    if (!commentSettings || commentSettings?.hide === true) return '';
 
     switch (score) {
       case MOOD_STATES.SATISFIED:
@@ -48,8 +48,8 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
     }
   };
 
-  const displayReasons = !!score && reasonsSettings?.enable;
-  const displayComment = !!score && commentSettings?.enable;
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
   const onSubmitMoodForm = () => {

package/src/components/Feedback/Rating.tsx

@@ -31,8 +31,8 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
     setIsSubmitted(true);
   };
 
-  const displayReasons = !!score && reasonsSettings?.enable;
-  const displayComment = !!score && commentSettings?.enable;
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
   useEffect(() => {

package/src/components/Feedback/Scale.tsx

@@ -41,8 +41,8 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     );
   }
 
-  const displayReasons = !!score && reasonsSettings?.enable;
-  const displayComment = !!score && commentSettings?.enable;
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
   const onSubmitScaleForm = () => {

package/src/components/Feedback/Sentiment.tsx

@@ -18,8 +18,8 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
 
-  const displayReasons = !!score && reasonsSettings?.enable;
-  const displayComment = !!score && commentSettings?.enable;
+  const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
+  const displayComment = !!score && commentSettings && !commentSettings.hide;
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
   const commentLabel =

package/src/components/Feedback/types.ts

@@ -6,11 +6,11 @@ export type RatingProps = {
     label?: string;
     submitText?: string;
     comment?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
     };
     reasons?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
       component?: string;
       items: string[];
@@ -27,11 +27,11 @@ export type ScaleProps = {
     leftScaleLabel?: string;
     rightScaleLabel?: string;
     comment?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
     };
     reasons?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
       component?: string;
       items: string[];
@@ -46,13 +46,13 @@ export type MoodProps = {
     label?: string;
     submitText?: string;
     comment?: {
-      enable: boolean;
+      hide?: boolean;
       satisfiedLabel?: string;
       neutralLabel?: string;
       dissatisfiedLabel?: string;
     };
     reasons?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
       component?: string;
       items: string[];
@@ -67,12 +67,12 @@ export type SentimentProps = {
     label?: string;
     submitText?: string;
     comment?: {
-      enable: boolean;
+      hide?: boolean;
       likeLabel?: string;
       dislikeLabel?: string;
     };
     reasons?: {
-      enable: boolean;
+      hide?: boolean;
       label?: string;
       component?: string;
       items: string[];

package/src/components/Filter/Filter.tsx

@@ -109,7 +109,7 @@ export function Filter({
         </>
       ) : (
         filter.filteredOptions.map((value: any) => {
-          const id = 'filter--' + filter.property + '--' + value.value;
+          const id = 'filter--' + filter.property + '--' + slug(value.value);
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
@@ -210,6 +210,11 @@ 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/Scorecard/Card.tsx

@@ -1,10 +1,8 @@
 import styled from 'styled-components';
 
-export const ScorecardCard = styled.div.attrs({
-  'data-component-name': 'Scorecard/ScorecardCard',
-})`
+export const ScorecardCard = styled.div`
   color: var(--text-primary);
-  background-color: var(--bg-raised);
+  background-color: var(--thin-tile-background-color);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

package/src/components/Scorecard/Gauge.tsx

@@ -1,27 +1,18 @@
 import * as React from 'react';
 import styled from 'styled-components';
-export interface GaugeProps {
+
+export function Gauge({
+  chunks,
+}: {
   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
-      data-component-name="Scorecard/StatusByLevelWidget"
-      className={className}
-      title={title}
-    >
+    <GaugeWrapper>
       {chunks.map((chunk, i) => (
-        <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
+        <GaugeChunk key={i} {...chunk} />
       ))}
     </GaugeWrapper>
   );

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -7,13 +7,12 @@ 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, className } = props;
+  const { levels, title } = props;
   return (
-    <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
+    <ScorecardCard>
       <ScorecardCardTitle>{title}</ScorecardCardTitle>
       <CardBody>
         {levels.map((level) => {
@@ -26,17 +25,14 @@ 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/components/Tabs/Tabs.tsx

@@ -29,9 +29,9 @@ export function Tabs(props: TabsProps): JSX.Element {
         })}
       </TabList>
       <TabContent>
-        {children.map((child) => {
+        {children.map((child, idx) => {
           if (child.props.label !== activeTab) return undefined;
-          return child.props.children;
+          return <React.Fragment key={idx}> {child.props.children}</React.Fragment>;
         })}
       </TabContent>
     </TabsContainer>

package/src/config.ts

@@ -319,7 +319,6 @@ const scorecardConfigSchema = {
         required: ['name'],
         properties: {
           name: { type: 'string' },
-          color: { type: 'string' },
           extends: { type: 'array', items: { type: 'string' } },
           rules: {
             type: 'object',
@@ -464,7 +463,10 @@ export const themeConfigSchema = {
             reasons: {
               type: 'object',
               properties: {
-                enable: { type: 'boolean', default: true },
+                hide: {
+                  type: 'boolean',
+                  default: false,
+                },
                 component: {
                   type: 'string',
                   enum: ['radio', 'checkbox'],
@@ -478,7 +480,10 @@ export const themeConfigSchema = {
             comment: {
               type: 'object',
               properties: {
-                enable: { type: 'boolean', default: true },
+                hide: {
+                  type: 'boolean',
+                  default: false,
+                },
                 label: { type: 'string' },
                 likeLabel: { type: 'string' },
                 dislikeLabel: { type: 'string' },