Add a page content level loading state

BuoySoftware · Feb 9, 2023 · 7dce715 · 7dce715
1 parent 3e820e4
commit 7dce715
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 8 deletions.
diff --git a/packages/components/page_template/__specs__/page_content.spec.tsx b/packages/components/page_template/__specs__/page_content.spec.tsx
@@ -0,0 +1,42 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import { render } from "@testing-library/react";
+
+import { PageContent } from "../src/page_content";
+
+describe("<PageContent />", () => {
+  i18n.use(initReactI18next).init({
+    lng: "en",
+    resources: {
+      en: {
+        translation: {
+          loading: "Loading",
+        },
+      },
+    },
+  });
+
+  it("renders content", () => {
+    const { getByText } = render(<PageContent>My Content</PageContent>);
+
+    expect(getByText("My Content")).toBeInTheDocument();
+  });
+
+  context("loading", () => {
+    it("does not render the content", () => {
+      const { queryByText } = render(
+        <PageContent loading>My Content</PageContent>
+      );
+
+      expect(queryByText("My Content")).not.toBeInTheDocument();
+    });
+
+    it("renders a loading message", () => {
+      const { queryByText } = render(
+        <PageContent loading>My Content</PageContent>
+      );
+
+      expect(queryByText("Loading")).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/components/page_template/__specs__/tsconfig.json b/packages/components/page_template/__specs__/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../tsconfig.spec.json"
+}
diff --git a/packages/components/page_template/babel.config.js b/packages/components/page_template/babel.config.js
@@ -0,0 +1 @@
+module.exports = { presets: ["@babel/preset-env"] };
diff --git a/packages/components/page_template/jest.config.ts b/packages/components/page_template/jest.config.ts
@@ -0,0 +1,3 @@
+import BaseConfig from "../../../jest.config";
+
+export default BaseConfig;
diff --git a/packages/components/page_template/jest.setup.ts b/packages/components/page_template/jest.setup.ts
@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+import "jest-styled-components";
diff --git a/packages/components/page_template/package.json b/packages/components/page_template/package.json
@@ -4,12 +4,19 @@
   "main": "src/index.ts",
   "license": "MIT",
   "dependencies": {
-    "@buoysoftware/anchor-layout": "^0.26.0"
+    "@buoysoftware/anchor-layout": "^0.26.0",
+    "@buoysoftware/anchor-loading-indicator": "*",
+    "@buoysoftware/anchor-typography": "*",
+    "react-i18next": "^12.1.5"
+  },
+  "devDependencies": {
+    "jest": "^29.3.1"
   },
   "scripts": {
     "build": "tsc -outDir dist",
     "compile": "tsc --noEmit",
     "postpack": "clean-package restore",
-    "prepack": "clean-package"
+    "prepack": "clean-package",
+    "test": "jest"
   }
 }
diff --git a/packages/components/page_template/src/page_content.tsx b/packages/components/page_template/src/page_content.tsx
@@ -1,14 +1,44 @@
-import { Box, BoxProps } from "@buoysoftware/anchor-layout";
+import { Box, BoxProps, Flex } from "@buoysoftware/anchor-layout";
+import { LoadingIndicator } from "@buoysoftware/anchor-loading-indicator";
+import { Body } from "@buoysoftware/anchor-typography";
+import { useTranslation } from "react-i18next";
 
-type PageContentProps = Omit<BoxProps, "gridArea">;
+interface OwnProps {
+  loading?: boolean;
+}
+
+type PageContentProps = OwnProps & Omit<BoxProps, "gridArea">;
 
 export const PageContent: React.FC<PageContentProps> = ({
   children,
+  loading,
   ...props
 }): React.ReactElement => {
+  const { t } = useTranslation();
+
   return (
-    <Box gridArea="content" mt="40px" px="page.gutterX" {...props}>
-      {children}
+    <Box
+      gridArea="content"
+      display={loading ? "grid" : "block"}
+      mt="40px"
+      px="page.gutterX"
+      {...props}
+    >
+      {loading ? (
+        <Flex
+          flexDirection="column"
+          alignItems="center"
+          justifySelf="center"
+          alignSelf="center"
+        >
+          <LoadingIndicator strokeSize={2} size={40} color="grey70" />
+          <Body color="text.secondary" mt="s" size="m">
+            {t("loading")}
+          </Body>
+        </Flex>
+      ) : (
+        children
+      )}
     </Box>
   );
 };
diff --git a/packages/components/page_template/stories/page_template.stories.mdx b/packages/components/page_template/stories/page_template.stories.mdx
@@ -1,7 +1,10 @@
 import { Canvas, Story } from "@storybook/addon-docs";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
 
+import { LoadingIndicator } from "@buoysoftware/anchor-loading-indicator";
 import { DropdownMenu, DropdownMenuList, DropdownMenuItem } from "@buoysoftware/anchor-dropdown-menu";
-import { Flex } from "@buoysoftware/anchor-layout";
+import { Box, Flex } from "@buoysoftware/anchor-layout";
 import { Breadcrumbs, Breadcrumb } from "@buoysoftware/anchor-breadcrumbs";
 import { Button } from "@buoysoftware/anchor-button";
 
@@ -11,6 +14,21 @@ import { PageActionBar, PageBreadcrumbs, PageContent, PageFooter, PageHeader, Pa
   title="Templates / PageTemplate"
   component={PageTemplate}
   subcomponents={ PageTemplateArea }
+  decorators={[
+    (Story) => {
+      i18n.use(initReactI18next).init({
+        lng: "en",
+        resources: {
+          en: {
+            translation: {
+              loading: "Loading"
+            }
+          }
+        }
+      });
+      return <Story />
+    }
+  ]}
   parameters={{
     layout: "fullscreen"
   }}
@@ -83,3 +101,21 @@ import { PageActionBar, PageBreadcrumbs, PageContent, PageFooter, PageHeader, Pa
     </PageTemplate>
   </Story>
 </Canvas>
+
+## With Loader
+
+<Canvas>
+  <Story name="with Loader" args={{}}>
+    <PageTemplate>
+      <PageBreadcrumbs>
+        <Breadcrumbs>
+          <Breadcrumb>Questionnaires</Breadcrumb>
+        </Breadcrumbs>
+      </PageBreadcrumbs>
+      <PageHeader title="Template example" />
+      <PageContent loading>
+        Content is loading
+      </PageContent>
+    </PageTemplate>
+  </Story>
+</Canvas>
diff --git a/yarn.lock b/yarn.lock
@@ -13100,7 +13100,7 @@ react-hook-form@^7.42.1:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.1.tgz#0d0d7822f3f7fc05ffc41d5f012b49b90fcfa0f0"
   integrity sha512-+s3+s8LLytRMriwwuSqeLStVjRXFGxgjjx2jED7Z+wz1J/88vpxieRQGvJVvzrzVxshZ0BRuocFERb779m2kNg==
 
-react-i18next@^12.1.4:
+react-i18next@^12.1.4, react-i18next@^12.1.5:
   version "12.1.5"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.1.5.tgz#b65f5733dd2f96188a9359c009b7dbe27443f009"
   integrity sha512-7PQAv6DA0TcStG96fle+8RfTwxVbHVlZZJPoEszwUNvDuWpGldJmNWa3ZPesEsZQZGF6GkzwvEh6p57qpFD2gQ==
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = { presets: ["@babel/preset-env"] };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import BaseConfig from "../../../jest.config";

		export default BaseConfig;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import "@testing-library/jest-dom";
		import "jest-styled-components";