@redocly/theme 0.21.1 → 0.21.3

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

@@ -3,3 +3,4 @@ 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.CatalogCard = void 0;
+exports.statusToColor = exports.CatalogCard = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
@@ -68,6 +68,7 @@ function statusToColor(status) {
             return '';
     }
 }
+exports.statusToColor = statusToColor;
 const SelectButton = styled_components_1.default.div `
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;

package/lib/components/Menu/MenuGroup.js

@@ -55,10 +55,11 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded },
-                item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                translate(item.labelTranslationKey, item.label),
-                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded, withArrow: !!item.items.length },
+                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
+                react_1.default.createElement(LabelWrapper, null,
+                    item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
+                    translate(item.labelTranslationKey, item.label)))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -82,7 +83,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
 
   ${({ active }) => active
     ? `color: var(--sidebar-item-group-active-text-color);
@@ -93,5 +95,13 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
     `
     color: var(--sidebar-item-group-active-text-color);
   `}
+
+  ${({ withArrow }) => !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+const LabelWrapper = styled_components_1.default.div `
+  display: flex;
 `;
 //# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuItem.js

@@ -25,6 +25,7 @@ function MenuItem({ item, className }) {
 exports.MenuItem = MenuItem;
 const Wrapper = styled_components_1.default.div ``;
 const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding-left: var(--sidebar-item-label-padding);
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Menu/MobileMenuGroup.js

@@ -16,11 +16,11 @@ function MobileMenuGroup({ item, isExpanded, toggleExpanded, children, }) {
     const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MobileMenuGroup" },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded },
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, active: item.active, expanded: isExpanded, withArrow: !!item.items.length },
+                !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })),
                 react_1.default.createElement(LabelContainer, null,
                     item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                    react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))),
-                !!item.items.length && (react_1.default.createElement(icons_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
+                    react_1.default.createElement(Label, null, translate(item.labelTranslationKey, item.label))))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, children),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -39,7 +39,8 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   color: var(--mobile-menu-item-text-color);
   background: var(--mobile-menu-background);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--mobile-menu-item-group-gap);
 
   ${({ active }) => active &&
     `
@@ -51,5 +52,10 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
     `
     color: var(--mobile-menu-item-active-text-color);
   `}
+
+  ${({ withArrow }) => !withArrow &&
+    `
+    padding-left: var(--mobile-menu-item-label-padding);
+  `}
 `;
 //# sourceMappingURL=MobileMenuGroup.js.map

package/lib/components/Menu/styledVariables.js

@@ -40,6 +40,8 @@ exports.mobileMenu = (0, styled_components_1.css) `
   --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
   --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
   --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+  --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
+  --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu control button

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface ScorecardBadgesProps {
+    metadata?: {
+        scorecardLevel?: string;
+        scorecardStatus?: string;
+        scoreCardSlug?: string;
+    };
+}
+export declare function ScorecardBadges(props: ScorecardBadgesProps): JSX.Element | null;
+export {};

package/lib/components/OpenApiDocs/ScorecardBadges.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScorecardBadges = void 0;
+const react_1 = __importDefault(require("react"));
+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");
+function ScorecardBadges(props) {
+    var _a, _b, _c;
+    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 })))) ||
+        null);
+}
+exports.ScorecardBadges = ScorecardBadges;
+const ScorecardBadgesWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+
+  margin-top: var(--panel-gap-vertical);
+  position: absolute;
+  z-index: 1;
+  right: var(--panel-gap-horizontal);
+`;
+function ComplianceTag(props) {
+    const { level, status, slug } = 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,
+            " oops")));
+}
+//# sourceMappingURL=ScorecardBadges.js.map

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

@@ -7,3 +7,4 @@ export * from '../../components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '../../components/OpenApiDocs/hooks/AfterOpenApiOperationSummary';
 export * from '../../components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '../../components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
+export * from '../../components/OpenApiDocs/ScorecardBadges';

package/lib/components/OpenApiDocs/index.js

@@ -23,4 +23,5 @@ __exportStar(require("../../components/OpenApiDocs/hooks/AfterOpenApiOperation")
 __exportStar(require("../../components/OpenApiDocs/hooks/AfterOpenApiOperationSummary"), exports);
 __exportStar(require("../../components/OpenApiDocs/hooks/BeforeOpenApiOperation"), exports);
 __exportStar(require("../../components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary"), exports);
+__exportStar(require("../../components/OpenApiDocs/ScorecardBadges"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/PageNavigation/NextButton.js

@@ -48,5 +48,6 @@ function NextButton({ nextPage, className }) {
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;
 //# sourceMappingURL=NextButton.js.map

package/lib/components/PageNavigation/PreviousButton.js

@@ -28,5 +28,6 @@ function PreviousButton({ prevPage, className }) {
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;
 //# sourceMappingURL=PreviousButton.js.map

package/lib/components/Sidebar/ApiCallItem.js

@@ -23,6 +23,7 @@ const Label = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
   display: flex;
   justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     color: var(--sidebar-item-text-color);

package/lib/components/Sidebar/styledVariables.js

@@ -71,6 +71,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
   --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
 
   /**
     * @tokens Sidebar item border
@@ -111,6 +112,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
   --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   // we need a theme config for chevron-location: left (default), right-compact, right, none
   // we need another theme config for chevron-style: up-down, down-up, right-down, down-right

package/lib/globalStyle.js

@@ -839,6 +839,9 @@ const pages = (0, styled_components_1.css) `
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
+    
+  --page-403-oidc-description-font-size: var(--font-size-lg);
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
    // @tokens End
 `;

package/lib/layouts/OIDCForbidden.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function OIDCForbidden(): JSX.Element;

package/lib/layouts/OIDCForbidden.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OIDCForbidden = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const hooks_1 = require("../mocks/hooks");
+function OIDCForbidden() {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
+    const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
+    const translationKeys = {
+        title: 'theme.page.forbidden.title',
+    };
+    // use whatever you want here
+    const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+    const renderText = (text) => text.split(' ').map((part) => URL_REGEX.test(part) ? (react_1.default.createElement(ErrorDescriptionLink, { key: part, href: part },
+        part,
+        ' ')) : (part + ' '));
+    (0, react_1.useEffect)(() => {
+        if (Array.from(searchParams).length) {
+            setErrorDescription(searchParams.get('error_description') || searchParams.get('error') || '');
+            setSearchParams({});
+        }
+    }, [searchParams, setSearchParams]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/OIDCForbidden" },
+        react_1.default.createElement(Header, null, "403"),
+        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
+        errorDescription && react_1.default.createElement(ErrorDescription, null, renderText(errorDescription))));
+}
+exports.OIDCForbidden = OIDCForbidden;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+const Header = styled_components_1.default.div `
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+const Description = styled_components_1.default.div `
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+const ErrorDescription = styled_components_1.default.div `
+  margin: var(--page-403-oidc-description-margin);
+  font-size: var(--page-403-oidc-description-font-size);
+  color: var(--page-403-description-text-color);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+const ErrorDescriptionLink = styled_components_1.default.a `
+  color: var(--link-text-color);
+
+  &:hover {
+    color: var(--link-hover-text-color);
+  }
+`;
+//# sourceMappingURL=OIDCForbidden.js.map

package/lib/layouts/index.d.ts

@@ -2,3 +2,4 @@ export * from '../layouts/RootLayout';
 export * from '../layouts/PageLayout';
 export * from '../layouts/NotFound';
 export * from '../layouts/Forbidden';
+export * from '../layouts/OIDCForbidden';

package/lib/layouts/index.js

@@ -18,4 +18,5 @@ __exportStar(require("../layouts/RootLayout"), exports);
 __exportStar(require("../layouts/PageLayout"), exports);
 __exportStar(require("../layouts/NotFound"), exports);
 __exportStar(require("../layouts/Forbidden"), exports);
+__exportStar(require("../layouts/OIDCForbidden"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/components/Catalog/CatalogCard.tsx

@@ -50,7 +50,7 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   );
 }
 
-function statusToColor(status: string) {
+export function statusToColor(status: string) {
   switch (status) {
     case 'Below minimum':
       return 'error';

package/src/components/Menu/MenuGroup.tsx

@@ -50,12 +50,15 @@ export function MenuGroup({
           active={item.active}
           role={!item.link ? 'link' : 'none'}
           expanded={isExpanded}
+          withArrow={!!item.items.length}
         >
-          {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
-          {translate(item.labelTranslationKey, item.label)}
           {!!item.items.length && (
             <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
           )}
+          <LabelWrapper>
+            {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
+            {translate(item.labelTranslationKey, item.label)}
+          </LabelWrapper>
         </MenuGroupLabel>
       </MenuLinkItem>
 
@@ -79,7 +82,11 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  isAlwaysExpanded?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
   padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
   font-family: var(--sidebar-item-group-font-family);
@@ -88,7 +95,8 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--sidebar-item-group-gap);
 
   ${({ active }) =>
     active
@@ -101,4 +109,14 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
     `
     color: var(--sidebar-item-group-active-text-color);
   `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--sidebar-item-label-padding);
+  `}
+`;
+
+const LabelWrapper = styled.div`
+  display: flex;
 `;

package/src/components/Menu/MenuItem.tsx

@@ -29,6 +29,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
 const Wrapper = styled.div``;
 
 const Label = styled(MenuItemLabel)<{ active?: boolean }>`
+  padding-left: var(--sidebar-item-label-padding);
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Menu/MobileMenuGroup.tsx

@@ -26,14 +26,19 @@ export function MobileMenuGroup({
   return (
     <Wrapper data-component-name="Menu/MobileMenuGroup">
       <MenuLinkItem item={item}>
-        <MenuGroupLabel onClick={toggleExpanded} active={item.active} expanded={isExpanded}>
+        <MenuGroupLabel
+          onClick={toggleExpanded}
+          active={item.active}
+          expanded={isExpanded}
+          withArrow={!!item.items.length}
+        >
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
           <LabelContainer>
             {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
             <Label>{translate(item.labelTranslationKey, item.label)}</Label>
           </LabelContainer>
-          {!!item.items.length && (
-            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
-          )}
         </MenuGroupLabel>
       </MenuLinkItem>
       <MenuWrapper isExpanded={isExpanded}>{children}</MenuWrapper>
@@ -56,11 +61,16 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
   ${(props) => !props.isExpanded && 'max-height: 0'}
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{
+  active?: boolean;
+  expanded?: boolean;
+  withArrow?: boolean;
+}>`
   color: var(--mobile-menu-item-text-color);
   background: var(--mobile-menu-background);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: var(--mobile-menu-item-group-gap);
 
   ${({ active }) =>
     active &&
@@ -74,4 +84,10 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: bool
     `
     color: var(--mobile-menu-item-active-text-color);
   `}
+
+  ${({ withArrow }) =>
+    !withArrow &&
+    `
+    padding-left: var(--mobile-menu-item-label-padding);
+  `}
 `;

package/src/components/Menu/styledVariables.ts

@@ -38,6 +38,8 @@ export const mobileMenu = css`
   --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
   --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
   --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+  --mobile-menu-item-label-padding: var(--spacing-xl); // @presenter Spacing
+  --mobile-menu-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu control button

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+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';
+
+interface ScorecardBadgesProps {
+  metadata?: {
+    scorecardLevel?: string;
+    scorecardStatus?: string;
+    scoreCardSlug?: string;
+  };
+}
+
+export function ScorecardBadges(props: ScorecardBadgesProps) {
+  return (
+    (props.metadata?.scorecardLevel && (
+      <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}
+        />
+      </ScorecardBadgesWrapper>
+    )) ||
+    null
+  );
+}
+
+const ScorecardBadgesWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  margin-top: var(--panel-gap-vertical);
+  position: absolute;
+  z-index: 1;
+  right: var(--panel-gap-horizontal);
+`;
+
+function ComplianceTag(props: { level: string; status: string; slug: string }) {
+  const { level, status, slug } = props;
+  return (
+    <Link to={slug}>
+      <Tag
+        color={statusToColor(status)}
+        size="large"
+        onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
+      >
+        {level} oops
+      </Tag>
+    </Link>
+  );
+}

package/src/components/OpenApiDocs/index.ts

@@ -7,3 +7,4 @@ export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from '@theme/components/OpenApiDocs/hooks/AfterOpenApiOperationSummary';
 export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from '@theme/components/OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
+export * from '@theme/components/OpenApiDocs/ScorecardBadges';

package/src/components/PageNavigation/NextButton.tsx

@@ -42,4 +42,5 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
 
 const StyledButton = styled(Button)`
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;

package/src/components/PageNavigation/PreviousButton.tsx

@@ -45,4 +45,5 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
 
 const StyledButton = styled(Button)`
   font-family: var(--font-family-base);
+  text-wrap: wrap;
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -28,6 +28,7 @@ const Label = styled(MenuItemLabel)`
   display: flex;
   justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
+  padding-left: var(--sidebar-item-label-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     color: var(--sidebar-item-text-color);

package/src/components/Sidebar/styledVariables.ts

@@ -69,6 +69,7 @@ export const sidebar = css`
   --sidebar-margin-horizontal: var(--spacing-base); // @presenter Spacing
   --sidebar-item-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-item-padding-horizontal: var(--spacing-xs); // @presenter Spacing
+  --sidebar-item-label-padding: var(--spacing-xl); // @presenter Spacing
 
   /**
     * @tokens Sidebar item border
@@ -109,6 +110,7 @@ export const sidebar = css`
   --sidebar-item-group-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-group-active-text-color: var(--sidebar-item-active-color); // @presenter Color
   --sidebar-item-group-active-background-color: var(--sidebar-item-active-background-color);
+  --sidebar-item-group-gap: var(--spacing-xs); // @presenter Spacing
 
   // we need a theme config for chevron-location: left (default), right-compact, right, none
   // we need another theme config for chevron-style: up-down, down-up, right-down, down-right

package/src/globalStyle.ts

@@ -850,6 +850,9 @@ const pages = css`
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
+    
+  --page-403-oidc-description-font-size: var(--font-size-lg);
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
    // @tokens End
 `

package/src/layouts/OIDCForbidden.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useSearchParams } from 'react-router-dom';
+
+import { useTranslate } from '@portal/hooks';
+
+export function OIDCForbidden(): JSX.Element {
+  const { translate } = useTranslate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [errorDescription, setErrorDescription] = useState<string>('');
+
+  const translationKeys = {
+    title: 'theme.page.forbidden.title',
+  };
+
+  // use whatever you want here
+  const URL_REGEX =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+
+  const renderText = (text: string) =>
+    text.split(' ').map((part: string) =>
+      URL_REGEX.test(part) ? (
+        <ErrorDescriptionLink key={part} href={part}>
+          {part}{' '}
+        </ErrorDescriptionLink>
+      ) : (
+        part + ' '
+      ),
+    );
+
+  useEffect(() => {
+    if (Array.from(searchParams).length) {
+      setErrorDescription(searchParams.get('error_description') || searchParams.get('error') || '');
+      setSearchParams({});
+    }
+  }, [searchParams, setSearchParams]);
+
+  return (
+    <Wrapper data-component-name="Pages/OIDCForbidden">
+      <Header>403</Header>
+      <Description data-translation-key={translationKeys.title}>
+        {translate(translationKeys.title, 'Access forbidden')}
+      </Description>
+      {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescription = styled.div`
+  margin: var(--page-403-oidc-description-margin);
+  font-size: var(--page-403-oidc-description-font-size);
+  color: var(--page-403-description-text-color);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescriptionLink = styled.a`
+  color: var(--link-text-color);
+
+  &:hover {
+    color: var(--link-hover-text-color);
+  }
+`;

package/src/layouts/index.ts

@@ -2,3 +2,4 @@ export * from '@theme/layouts/RootLayout';
 export * from '@theme/layouts/PageLayout';
 export * from '@theme/layouts/NotFound';
 export * from '@theme/layouts/Forbidden';
+export * from '@theme/layouts/OIDCForbidden';