diff --git a/demo/src/Components/ErrorPage/index.scss b/demo/src/Components/ErrorPage/index.scss
new file mode 100644
index 00000000..04f88c8e
--- /dev/null
+++ b/demo/src/Components/ErrorPage/index.scss
@@ -0,0 +1 @@
+@import '@diplodoc/components';
diff --git a/demo/src/Components/ErrorPage/index.stories.tsx b/demo/src/Components/ErrorPage/index.stories.tsx
index d8fc6c1c..8c940bfd 100644
--- a/demo/src/Components/ErrorPage/index.stories.tsx
+++ b/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 (
@@ -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',
},
};
diff --git a/src/components/ErrorPage/ErrorPage.scss b/src/components/ErrorPage/ErrorPage.scss
index 537a99be..08183c1f 100644
--- a/src/components/ErrorPage/ErrorPage.scss
+++ b/src/components/ErrorPage/ErrorPage.scss
@@ -43,6 +43,7 @@
max-width: 800px;
margin-bottom: 20px;
+ white-space: pre-line;
}
&__description {
diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx
index fc852f06..203092ed 100644
--- a/src/components/ErrorPage/ErrorPage.tsx
+++ b/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 = ({
code = 500,
homeUrl,
+ receiveAccessText,
receiveAccessUrl,
pageGroup,
links,
@@ -50,7 +52,7 @@ const ErrorPage: React.FC = ({
{receiveAccessUrl && (
)}
diff --git a/src/components/constants.ts b/src/components/constants.ts
index 01ac90eb..107952cf 100644
--- a/src/components/constants.ts
+++ b/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';