-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue 98: add ErrorPage component (#3900)
* feat: add ErrorPage and BaseErrorPage components * add story for each error page * extract translations * add changeset * refactor into one ErrorPage component with message map * rename hook and variable * linting * update ErrorStatuses type so we get intellisense for handled codes * add sticker sheet * run prettier * restrict type to known status codes * use components BrandMoment * fix text body styles * fix prettier icons --------- Co-authored-by: Geoffrey Chong <gyfchong@users.noreply.github.com> Co-authored-by: Geoffrey Chong <gyf.chong@gmail.com>
- Loading branch information
3 people
committed
Jul 25, 2023
1 parent
b5eece4
commit 5c3fa76
Showing
14 changed files
with
521 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@kaizen/components": minor | ||
| --- | ||
|
|
||
| feat: add ErrorPage component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| @import "~@kaizen/design-tokens/sass/spacing"; | ||
|
|
||
| .paragraphPadding { | ||
| padding: $spacing-24 0; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React, { HTMLAttributes } from "react" | ||
| import { FormattedMessage, useIntl } from "@cultureamp/i18n-react-intl" | ||
| import classNames from "classnames" | ||
| import { BrandMomentError } from "@kaizen/draft-illustration" | ||
| import { Paragraph } from "@kaizen/typography" | ||
| import { BrandMoment } from "~components/BrandMoment" | ||
| import { ArrowRightIcon } from "~components/SVG/icons/ArrowRightIcon" | ||
| import { EmailIcon } from "~components/SVG/icons/EmailIcon" | ||
| import { OverrideClassName } from "~types/OverrideClassName" | ||
| import { ErrorStatuses, useErrorMessages } from "./hooks" | ||
| import styles from "./ErrorPage.module.scss" | ||
|
|
||
| const getMailToHref = (code: ErrorStatuses): string => { | ||
| const supportEmail = "support@cultureamp.com" | ||
| const subject = "Houston we have a problem" | ||
| const body = `Hi there,\n\nI received a ${code} error page while I was trying to...` | ||
| return encodeURI(`mailto:${supportEmail}?subject=${subject}&body=${body}`) | ||
| } | ||
|
|
||
| const HOME_HREF = "/app/home" | ||
|
|
||
| export type ErrorPageProps = { | ||
| code: ErrorStatuses | ||
| title?: string | ||
| message?: React.ReactNode | string | ||
| callToAction?: { | ||
| onContactSupport: () => void | ||
| homeHref?: string | ||
| } | ||
| } & OverrideClassName<HTMLAttributes<HTMLDivElement>> | ||
|
|
||
| export function ErrorPage({ | ||
| code, | ||
| title, | ||
| message, | ||
| callToAction, | ||
| classNameOverride, | ||
| }: ErrorPageProps): JSX.Element { | ||
| const { formatMessage } = useIntl() | ||
| const content = useErrorMessages(code) | ||
|
|
||
| const actions = { | ||
| primary: { href: callToAction?.homeHref || HOME_HREF }, | ||
| secondary: callToAction?.onContactSupport | ||
| ? { onClick: callToAction.onContactSupport } | ||
| : { href: getMailToHref(code) }, | ||
| } | ||
|
|
||
| return ( | ||
| <div className={classNames(classNameOverride)}> | ||
| <BrandMoment | ||
| header={<></>} | ||
| body={ | ||
| <> | ||
| <div className={styles.paragraphPadding}> | ||
| <Paragraph variant="intro-lede"> | ||
| {message || content.message} | ||
| </Paragraph> | ||
| </div> | ||
| <Paragraph color="dark-reduced-opacity" variant="small"> | ||
| <FormattedMessage | ||
| id="kzErrorPage.errorCode" | ||
| defaultMessage="Error code {code}" | ||
| values={{ code }} | ||
| /> | ||
| </Paragraph> | ||
| </> | ||
| } | ||
| illustration={<BrandMomentError isAnimated loop />} | ||
| mood="negative" | ||
| primaryAction={{ | ||
| ...actions.primary, | ||
| icon: <ArrowRightIcon role="presentation" />, | ||
| iconPosition: "end", | ||
| label: formatMessage({ | ||
| id: "kzErrorPage.goToHome", | ||
| defaultMessage: "Go to Home", | ||
| description: "Home button label", | ||
| }), | ||
| }} | ||
| secondaryAction={{ | ||
| ...actions.secondary, | ||
| icon: <EmailIcon role="presentation" />, | ||
| label: formatMessage({ | ||
| id: "kzErrorPage", | ||
| defaultMessage: "Contact support", | ||
| description: "Label for contact button", | ||
| }), | ||
| }} | ||
| text={{ | ||
| title: title || content.title, | ||
| }} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| ErrorPage.displayName = "ErrorPage" |
99 changes: 99 additions & 0 deletions
99
packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import React from "react" | ||
| import { Meta, StoryFn } from "@storybook/react" | ||
| import { StickerSheet } from "../../../../../storybook/components/StickerSheet" | ||
| import { ErrorPage } from "../ErrorPage" | ||
|
|
||
| export default { | ||
| title: "Pages/Error Page", | ||
| parameters: { | ||
| chromatic: { disable: false }, | ||
| controls: { disable: true }, | ||
| }, | ||
| } satisfies Meta<typeof ErrorPage> | ||
|
|
||
| const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({ | ||
| isReversed, | ||
| }) => ( | ||
| <> | ||
| <StickerSheet heading="Error 400" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="400" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 401" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="401" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 403" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="403" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 404" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="404" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 422" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="422" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 500" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="500" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 502" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="502" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 503" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="503" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Error 504" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage code="504" /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| <StickerSheet heading="Custom error" isReversed={isReversed}> | ||
| <StickerSheet.Body> | ||
| <StickerSheet.Row> | ||
| <ErrorPage | ||
| code="400" | ||
| title="This is a 400 custom title" | ||
| message="This is a custom 400 message" | ||
| callToAction={{ | ||
| onContactSupport: () => alert("Custom handler"), | ||
| homeHref: "/anewhome", | ||
| }} | ||
| /> | ||
| </StickerSheet.Row> | ||
| </StickerSheet.Body> | ||
| </StickerSheet> | ||
| </> | ||
| ) | ||
|
|
||
| export const StickerSheetDefault = StickerSheetTemplate.bind({}) |
41 changes: 41 additions & 0 deletions
41
packages/components/src/ErrorPage/_docs/ErrorPage.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { Meta, StoryObj } from "@storybook/react" | ||
| import { ComponentDocsTemplate } from "../../../../../storybook/components/DocsContainer" | ||
| import { statusCodes } from "../hooks" | ||
| import { ErrorPage } from "../index" | ||
|
|
||
| const meta = { | ||
| tags: ["autodocs"], | ||
| title: "Pages/Error Page", | ||
| component: ErrorPage, | ||
| parameters: { | ||
| docs: { | ||
| container: ComponentDocsTemplate, | ||
| canvas: { | ||
| sourceState: "shown", | ||
| }, | ||
| }, | ||
| installation: [ | ||
| "npm install @kaizen/components", | ||
| "import { ErrorPage } from `@kaizen/components`", | ||
| ], | ||
| resourceLinks: { | ||
| /** @todo: Add Github link (adjust as needed) */ | ||
| sourceCode: | ||
| "https://github.com/cultureamp/kaizen-design-system/tree/master/packages/components/src/ErrorPage", | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof ErrorPage> | ||
|
|
||
| export default meta | ||
|
|
||
| export const Playground: StoryObj<typeof meta> = { | ||
| args: { | ||
| code: "400", | ||
| }, | ||
| argTypes: { | ||
| code: { | ||
| options: statusCodes, | ||
| control: { type: "select" }, | ||
| }, | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./useErrorMessages" |
Oops, something went wrong.