feat: 403 page customization added

demo/src/Components/ErrorPage/index.scss

@@ -0,0 +1 @@
+@import '@diplodoc/components';

demo/src/Components/ErrorPage/index.stories.tsx

@@ -1,22 +1,32 @@
 import React from 'react';
 import {ERROR_CODES, ErrorPage} from '@diplodoc/components';
 
+// import './index.scss';
+
 type Args = {
     Title: string;
     Mobile: string;
     ErrorCode: string;
+    ReceiveAccessText?: string;
+    ReceiveAccessUrl?: string;
 };
 
 const ErrorPageDemo = (args: Args) => {
     const title = args['Title'];
     const isMobile = args['Mobile'];
     const errorCode = args['ErrorCode'];
+    const receiveAccessText = args['ReceiveAccessText'] || '';
+    const receiveAccessUrl = args['ReceiveAccessUrl'];
+
+    const processedUrl = receiveAccessUrl?.trim();
+    const renderMultiline = (text: string) => text.replace(/\r\n/g, '\n').replace(/\\n/g, '\n');
 
     return (
         <div className={isMobile === 'true' ? 'mobile' : 'desktop'}>
             <ErrorPage
                 code={Number(errorCode)}
-                receiveAccessUrl={'Request access url'}
+                receiveAccessText={renderMultiline(receiveAccessText)}
+                receiveAccessUrl={processedUrl}
                 errorTitle={title}
             />
         </div>
@@ -37,6 +47,12 @@ export default {
             control: 'select',
             options: ERROR_CODES,
         },
+        ReceiveAccessText: {
+            control: 'text',
+        },
+        ReceiveAccessUrl: {
+            control: 'text',
+        },
     },
 };
 
@@ -45,5 +61,6 @@ export const Error = {
         Title: '',
         Mobile: false,
         ErrorCode: ERROR_CODES,
+        ReceiveAccessText: 'Request access',
     },
 };

src/components/ErrorPage/ErrorPage.scss

@@ -43,6 +43,7 @@
 
         max-width: 800px;
         margin-bottom: 20px;
+        white-space: pre-line;
     }
 
     &__description {

src/components/ErrorPage/ErrorPage.tsx

@@ -18,6 +18,7 @@ export interface ErrorPageProps {
     code?: number;
     pageGroup?: string;
     homeUrl?: string;
+    receiveAccessText?: string;
     receiveAccessUrl?: string;
     links?: LinkType[];
     errorTitle?: string;
@@ -26,6 +27,7 @@ export interface ErrorPageProps {
 const ErrorPage: React.FC<ErrorPageProps> = ({
     code = 500,
     homeUrl,
+    receiveAccessText,
     receiveAccessUrl,
     pageGroup,
     links,
@@ -50,7 +52,7 @@ const ErrorPage: React.FC<ErrorPageProps> = ({
                     {receiveAccessUrl && (
                         <Link href={receiveAccessUrl} target="_blank" rel="noopener noreferrer">
                             <Button view="action" className={b('description-link')}>
-                                {t('label_link-access')}
+                                {receiveAccessText || t('label_link-access')}
                             </Button>
                         </Link>
                     )}

src/components/constants.ts

@@ -16,3 +16,6 @@ export const DOC_PAGE_FEEDBACK_SHOWN_URL =
     BASE_URL + '/iframe.html?args=HideFeedback:false&id=pages-document--document&viewMode=story';
 export const SEARCH_SUGGEST_URL =
     BASE_URL + '/iframe.html?id=components-searchsuggest--search-suggest&viewMode=story';
+export const ERROR_PAGE_URL =
+    BASE_URL +
+    '/iframe.html?args=ErrorCode:403;Title:Page%20403;ReceiveAccessText:Custom%20link;ReceiveAccessUrl:access&id=pages-error--error&viewMode=story';