19630: Adding graphical error display components (#20)

src/components/Feedback/ErrorGraphic/ErrorGraphic.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ErrorGraphic } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof ErrorGraphic> = {
+  component: ErrorGraphic,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    type: {
+      options: ["unrecoverable", "not-found", "server"],
+    },
+  },
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof ErrorGraphic>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Unrecoverable: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    type: "unrecoverable",
+  },
+};
+
+export const NotFound: Story = {
+  args: {
+    type: "not-found",
+  },
+};
+
+export const Server: Story = {
+  args: {
+    type: "server",
+  },
+};

src/components/Feedback/ErrorGraphic/index.ts

@@ -0,0 +1 @@
+export * from "./ErrorGraphic";

src/components/Feedback/GraphicalError/GraphicalError.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { GraphicalError } from ".";
+import { Paragraph } from "../../Typography";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof GraphicalError> = {
+  component: GraphicalError,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    type: {
+      options: ["unrecoverable", "not-found", "server"],
+    },
+  },
+  args: {
+    description:
+      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    className: "",
+    heading: "Lorem ipsum dolor sit amet",
+    type: "unrecoverable",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof GraphicalError>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
+};
+
+export const TwoSentenceDescription: Story = {
+  args: {
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie.",
+  },
+};
+
+export const MultipleParagraphDescription: Story = {
+  args: {
+    description: (
+      <>
+        <Paragraph marginBottom>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          Consectetur lorem donec massa sapien faucibus et molestie. Vitae proin
+          sagittis nisl rhoncus mattis rhoncus urna. Viverra ipsum nunc aliquet
+          bibendum. Egestas dui id ornare arcu odio ut sem nulla. Enim lobortis
+          scelerisque fermentum dui faucibus. Felis eget velit aliquet sagittis
+          id consectetur. Morbi tristique senectus et netus et malesuada fames
+          ac turpis. Amet risus nullam eget felis eget nunc lobortis mattis
+          aliquam. Cursus in hac habitasse platea dictumst quisque sagittis.
+          Massa eget egestas purus viverra accumsan in. Amet venenatis urna
+          cursus eget. Viverra maecenas accumsan lacus vel facilisis volutpat
+          est velit. In vitae turpis massa sed elementum tempus egestas sed. At
+          elementum eu facilisis sed odio morbi quis. Scelerisque fermentum dui
+          faucibus in. Pretium aenean pharetra magna ac placerat vestibulum
+          lectus mauris. Ut placerat orci nulla pellentesque dignissim enim sit
+          amet. Quisque id diam vel quam.
+        </Paragraph>
+        <Paragraph>
+          Condimentum id venenatis a condimentum vitae. Non arcu risus quis
+          varius quam quisque id diam. Tellus rutrum tellus pellentesque eu
+          tincidunt tortor aliquam. Nec tincidunt praesent semper feugiat.
+          Viverra nam libero justo laoreet. Amet tellus cras adipiscing enim eu
+          turpis egestas. Vehicula ipsum a arcu cursus vitae congue mauris
+          rhoncus aenean. Facilisis mauris sit amet massa vitae tortor.
+          Tincidunt ornare massa eget egestas purus viverra accumsan in. Eu mi
+          bibendum neque egestas congue quisque. Sagittis eu volutpat odio
+          facilisis mauris sit. Vulputate odio ut enim blandit volutpat maecenas
+          volutpat blandit aliquam. Bibendum ut tristique et egestas quis ipsum.
+          Ante metus dictum at tempor commodo ullamcorper. Aliquam nulla
+          facilisi cras fermentum odio. Et magnis dis parturient montes nascetur
+          ridiculus mus mauris vitae. Sed nisi lacus sed viverra tellus.
+        </Paragraph>
+      </>
+    ),
+  },
+};

src/components/Feedback/GraphicalError/GraphicalError.tsx

@@ -0,0 +1,39 @@
+import { FC, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+import { ErrorGraphic, ErrorGraphicType } from "../ErrorGraphic";
+import { ReadabilityConstraint } from "../../Typography";
+
+export type GraphicalErrorProps = {
+  description?: ReactNode;
+  className?: string;
+  heading: ReactNode;
+  type: ErrorGraphicType;
+};
+
+export const GraphicalError: FC<GraphicalErrorProps> = function ({
+  description,
+  className,
+  type,
+  heading,
+}) {
+  return (
+    <section
+      className={twMerge(
+        "flex flex-col gap-16 items-center justify-center",
+        className
+      )}
+    >
+      <header>
+        <ErrorGraphic type={type} className={className} />
+      </header>
+      <div className="flex flex-col gap-6 items-center justify-center">
+        <h2 className="text-4xl font-bold  text-gray-500 dark:text-gray-400">
+          {heading}
+        </h2>
+        {description && (
+          <ReadabilityConstraint>{description}</ReadabilityConstraint>
+        )}
+      </div>
+    </section>
+  );
+};

src/components/Feedback/GraphicalError/index.ts

@@ -0,0 +1 @@
+export * from "./GraphicalError";

src/components/Feedback/index.ts

@@ -0,0 +1,2 @@
+export * from "./ErrorGraphic";
+export * from "./GraphicalError";

src/components/Typography/ReadabilityConstraint/ReadabilityConstraint.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReadabilityConstraint } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof ReadabilityConstraint> = {
+  component: ReadabilityConstraint,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    children:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus et molestie. Vitae proin sagittis nisl rhoncus mattis rhoncus urna. Viverra ipsum nunc aliquet bibendum. Egestas dui id ornare arcu odio ut sem nulla. Enim lobortis scelerisque fermentum dui faucibus. Felis eget velit aliquet sagittis id consectetur. Morbi tristique senectus et netus et malesuada fames ac turpis. Amet risus nullam eget felis eget nunc lobortis mattis aliquam. Cursus in hac habitasse platea dictumst quisque sagittis. Massa eget egestas purus viverra accumsan in. Amet venenatis urna cursus eget. Viverra maecenas accumsan lacus vel facilisis volutpat est velit. In vitae turpis massa sed elementum tempus egestas sed. At elementum eu facilisis sed odio morbi quis. Scelerisque fermentum dui faucibus in. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Ut placerat orci nulla pellentesque dignissim enim sit amet. Quisque id diam vel quam.",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ReadabilityConstraint>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
+};

src/components/Typography/ReadabilityConstraint/ReadabilityConstraint.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type ReadabilityConstraintProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>;
+export const ReadabilityConstraint: FC<ReadabilityConstraintProps> = function (
+  props
+) {
+  return (
+    <div {...props} className={twMerge("max-w-[65em]", props.className)} />
+  );
+};

src/components/Typography/ReadabilityConstraint/index.ts

@@ -0,0 +1 @@
+export * from "./ReadabilityConstraint";

src/components/Typography/index.ts

@@ -1,3 +1,4 @@
 export * from "./LineClamp";
 export * from "./Link";
 export * from "./Paragraph";
+export * from "./ReadabilityConstraint";

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./Buttons";
+export * from "./Feedback";
 export * from "./Typography";