@redocly/theme 0.21.2 → 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/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/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.2",
+  "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/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/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';