Skip to content
This repository has been archived by the owner on Oct 31, 2023. It is now read-only.

PageContent loading state #96

Merged
merged 1 commit into from
Feb 9, 2023
Merged

PageContent loading state #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions packages/components/page_template/__specs__/page_content.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
});
3 changes: 3 additions & 0 deletions packages/components/page_template/__specs__/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "../../../../tsconfig.spec.json"
}
1 change: 1 addition & 0 deletions packages/components/page_template/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = { presets: ["@babel/preset-env"] };
3 changes: 3 additions & 0 deletions packages/components/page_template/jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import BaseConfig from "../../../jest.config";

export default BaseConfig;
2 changes: 2 additions & 0 deletions packages/components/page_template/jest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import "@testing-library/jest-dom";
import "jest-styled-components";
11 changes: 9 additions & 2 deletions packages/components/page_template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
38 changes: 34 additions & 4 deletions packages/components/page_template/src/page_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be:

Suggested change
display={loading ? "grid" : "block"}
display={loading ? "flex" : "block"}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both work, not sure if one is better than the other.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, turns out if I use display: flex then justify-self doesn't work on the box below.

Per MDN:

In flexbox layouts, this property is ignored. Read more about alignment in Flexbox.

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>
);
};
38 changes: 37 additions & 1 deletion packages/components/page_template/stories/page_template.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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"
}}
Expand Down Expand Up @@ -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>
2 changes: 1 addition & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down