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';