From 3ff4df801f680efb16b49ca2d656a3f89c937bef Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 3 Dec 2024 10:05:54 -0500 Subject: [PATCH 01/21] Creates new Template files --- src/components/Template/TemplateNew.mdx | 17 + .../Template/TemplateNew.stories.tsx | 313 ++++++++++++++++++ src/components/Template/TemplateNew.tsx | 47 +++ src/index.ts | 8 + src/theme/components/templatenew.ts | 83 +++++ src/theme/index.ts | 2 + 6 files changed, 470 insertions(+) create mode 100644 src/components/Template/TemplateNew.mdx create mode 100644 src/components/Template/TemplateNew.stories.tsx create mode 100644 src/components/Template/TemplateNew.tsx create mode 100644 src/theme/components/templatenew.ts diff --git a/src/components/Template/TemplateNew.mdx b/src/components/Template/TemplateNew.mdx new file mode 100644 index 000000000..cc3a6c7c7 --- /dev/null +++ b/src/components/Template/TemplateNew.mdx @@ -0,0 +1,17 @@ +import { + TemplateNew, + TemplateNewBreakout, + TemplateNewTop, + TemplateNewMain, + TemplateNewSidebar, + TemplateNewBottom, +} from "./TemplateNew"; +import * as TemplateNewStories from "./TemplateNew.stories"; + + + +## Full Example + +This is best viewed in the Storybook "Canvas" and not "Docs" section. + + diff --git a/src/components/Template/TemplateNew.stories.tsx b/src/components/Template/TemplateNew.stories.tsx new file mode 100644 index 000000000..fc6846390 --- /dev/null +++ b/src/components/Template/TemplateNew.stories.tsx @@ -0,0 +1,313 @@ +import type { Meta } from "@storybook/react"; +import { getPlaceholderImage } from "../../utils/utils"; +import Accordion, { AccordionDataProps } from "../Accordion/Accordion"; +import Banner from "../Banner/Banner"; +import Breadcrumbs from "../Breadcrumbs/Breadcrumbs"; +import Button from "../Button/Button"; +import Card, { CardHeading, CardContent } from "../Card/Card"; +import Form, { FormField, FormRow } from "../Form/Form"; +import Heading from "../Heading/Heading"; +import Hero from "../Hero/Hero"; +import { HorizontalRule } from "../HorizontalRule/HorizontalRule"; +import Placeholder from "../Placeholder/Placeholder"; +import Table from "../Table/Table"; +import TextInput from "../TextInput/TextInput"; +import { + TemplateNew, + TemplateNewBreakout, + TemplateNewTop, + TemplateNewMain, + TemplateNewSidebar, + TemplateNewBottom, +} from "./TemplateNew"; + +const accordionData: AccordionDataProps[] = [ + { + accordionType: "default", + label: "Tom Nook", + panel: ( + + + Tom Nook + + + Tom Nook, known in Japan as Tanukichi, is a fictional character + in the Animal Crossing series who operates the village store. + + + ), + }, +]; +const faqContentData: AccordionDataProps[] = [ + ...accordionData, + { + accordionType: "warning", + label: "Isabelle", + panel: ( + + + Isabelle + + + Isabelle, known as Shizue in Japan, is a fictional character from the + Animal Crossing series of video games. She is a kindly Shih Tzu that + debuted in the 2012 release Animal Crossing: New Leaf, where she + serves as the secretary to the player character. + + + ), + }, + { + accordionType: "error", + label: "K.K. Slider", + panel: ( + + + K.K. Slider + + +

+ Totakeke, more commonly known as K.K. Slider or K.K., is a + fictional character within the Animal Crossing franchise. One of the + franchise's most popular characters, he debuted in the title Animal + Crossing, and has appeared in every installment since. +

+ + + ), + }, +]; + +const columnHeadersAlt = [ + "Name", + "Nick Name", + "Species", + "Description", + "Bio", + "Salary (USD)", +]; +const tableDataAlt = [ + [ + "Tom Nook", + "Tanukichi", + "Raccoon", + "A businessman who manages the town shop and the player's home loan.", + "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.", + "$225,000", + ], + [ + "Isabelle", + "Shizue", + "Dog", + "A secretary and assistant to the player. Twin sister to Digby.", + "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.", + "$228,500", + ], + [ + "K.K. Slider", + "Totakeke", + "Dog", + "A traveling musician and DJ. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.", + "Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.", + "$157,000", + ], + [ + "Sonny Resetti", + "Risetto san", + "Mole", + "Lectures the player if they reset their game. Brother to Don Resetti.", + "Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.", + "$89,000", + ], +]; +const columnStylesComplex = [ + { minWidth: "200px", width: "15%" }, + { minWidth: "200px", width: "15%" }, + { minWidth: "200px", width: "15%" }, + { minWidth: "500px", width: "auto" }, + { minWidth: "500px", width: "auto" }, + { minWidth: "160px", width: "15%", textAlign: "right" }, +]; + +const otherSubHeaderText = + "With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."; + +const meta: Meta = { + title: "Components/Page Layout/TemplateNew", + component: TemplateNew, +}; + +export default meta; + +export const TemplateNewExample = { + args: { + sidebar: "left", + }, + render: (args) => ( + <> + + + Hero + + + Content Top + + + Left Sidebar + + + Main Content + + + Content Bottom + + + + ), +}; + +export const TemplateNewFullExample = { + args: { + sidebar: "left", + }, + render: (args) => ( + <> + + + + } + imageProps={{ + alt: "Image example", + src: getPlaceholderImage("smaller"), + }} + isDarkBackgroundImage + subHeaderText={otherSubHeaderText} + /> + + + + + +

Sidebar information in a `Card` component.

+ + + Library Image + + + Vestibulum id ligula porta felis euismod semper. Nulla vitae elit + libero, a pharetra augue. + + + + +

This is the main content!

+ + +

Fill out the form!

+
+ + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + ), +}; diff --git a/src/components/Template/TemplateNew.tsx b/src/components/Template/TemplateNew.tsx new file mode 100644 index 000000000..720cd3444 --- /dev/null +++ b/src/components/Template/TemplateNew.tsx @@ -0,0 +1,47 @@ +import { Box, useStyleConfig } from "@chakra-ui/react"; + +const TemplateNew: React.FC = ({ children, sidebar = "none" }) => { + console.log("side -->", sidebar); + const styles = useStyleConfig("TemplateNew", { variant: sidebar }); + + return {children}; +}; + +const TemplateNewBreakout: React.FC = ({ children }) => { + const styles = useStyleConfig("TemplateNewBreakout", {}); + + return {children}; +}; + +const TemplateNewTop: React.FC = ({ children }) => { + const styles = useStyleConfig("TemplateNewTop", {}); + + return {children}; +}; + +const TemplateNewMain: React.FC = ({ children }) => { + const styles = useStyleConfig("TemplateNewMain", {}); + + return {children}; +}; + +const TemplateNewSidebar: React.FC = ({ children }) => { + const styles = useStyleConfig("TemplateNewSidebar", {}); + + return {children}; +}; + +const TemplateNewBottom: React.FC = ({ children }) => { + const styles = useStyleConfig("TemplateNewBottom", {}); + + return {children}; +}; + +export { + TemplateNew, + TemplateNewBreakout, + TemplateNewTop, + TemplateNewMain, + TemplateNewSidebar, + TemplateNewBottom, +}; diff --git a/src/index.ts b/src/index.ts index e5693d54d..6d6068934 100644 --- a/src/index.ts +++ b/src/index.ts @@ -291,6 +291,14 @@ export type { TemplateHeaderProps, TemplateSidebarProps, } from "./components/Template/Template"; +export { + TemplateNew, + TemplateNewBreakout, + TemplateNewTop, + TemplateNewMain, + TemplateNewSidebar, + TemplateNewBottom, +} from "./components/Template/TemplateNew"; export { default as Text } from "./components/Text/Text"; export type { TextProps, TextSizes } from "./components/Text/Text"; export { default as TextInput } from "./components/TextInput/TextInput"; diff --git a/src/theme/components/templatenew.ts b/src/theme/components/templatenew.ts new file mode 100644 index 000000000..ccf5b8e5d --- /dev/null +++ b/src/theme/components/templatenew.ts @@ -0,0 +1,83 @@ +import { defineStyleConfig } from "@chakra-ui/react"; +import { defineStyle } from "@chakra-ui/system"; + +export const responsiveGap = { base: "1rem", md: "1.5rem", xl: "1rem" }; +export const responsivePadding = { base: "1rem", md: "1.5rem", xl: "2rem" }; + +const TemplateNew = defineStyleConfig({ + baseStyle: defineStyle({ + boxSizing: "border-box", + color: "ui.typography.body", + maxWidth: "1280px", + m: "0 auto", + display: "grid", + gap: responsiveGap, + gridTemplateColumns: "repeat(1, minmax(100px, 1fr))", + gridTemplateRows: "auto", + gridTemplateAreas: `"breakout" "top" "main" "bottom"`, + }), + variants: { + left: { + gridTemplateColumns: { + md: "repeat(2, minmax(100px, 1fr))", + lg: "minmax(100px, 1fr) minmax(200px, 2fr)", + xl: "minmax(100px, 1fr) minmax(300px, 3fr)", + }, + gridTemplateAreas: { + base: `"breakout" "top" "sidebar" "main" "bottom"`, + md: `"breakout breakout" "top top" "sidebar main" "bottom bottom"`, + }, + }, + right: { + gridTemplateColumns: { + md: "repeat(2, minmax(100px, 1fr))", + lg: "2fr 1fr", + xl: "3fr 1fr", + }, + gridTemplateAreas: { + base: `"breakout" "top" "main" "sidebar" "bottom"`, + md: `"breakout breakout" "top top" "main sidebar" "bottom bottom"`, + }, + }, + }, +}); + +const TemplateNewBreakout = defineStyleConfig({ + baseStyle: defineStyle({ + gridArea: "breakout", + mx: { xl: "calc(-100vw / 2 + 1200px / 2)" }, + }), +}); + +const TemplateNewTop = defineStyleConfig({ + baseStyle: defineStyle({ + gridArea: "top", + }), +}); + +const TemplateNewMain = defineStyleConfig({ + baseStyle: defineStyle({ + gridArea: "main", + }), +}); + +const TemplateNewSidebar = defineStyleConfig({ + baseStyle: defineStyle({ + gridArea: "sidebar", + }), +}); + +const TemplateNewBottom = defineStyleConfig({ + baseStyle: defineStyle({ + gridArea: "bottom", + }), +}); + +export default { + TemplateNew, + TemplateNewBreakout, + TemplateNewTop, + TemplateNewMain, + TemplateNewSidebar, + TemplateNewBottom, +}; diff --git a/src/theme/index.ts b/src/theme/index.ts index 2044aead1..2255dea01 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -71,6 +71,7 @@ import { SubNav, SubNavChildren } from "./components/subnav"; import Tabs from "./components/tabs"; import TagSetStyles from "./components/tagSet"; import TemplateStyles from "./components/template"; +import TemplateNewStyles from "./components/templatenew"; import Text from "./components/text"; import TextInput from "./components/textInput"; import Toggle from "./components/toggle"; @@ -175,6 +176,7 @@ const theme: any = { CustomTable, ...TagSetStyles, ...TemplateStyles, + ...TemplateNewStyles, Text, TextInput, ...Toggle, From f911d19dc600f2504ee3d56b9117fcbee4cd93e9 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 3 Dec 2024 11:22:12 -0500 Subject: [PATCH 02/21] Style updates --- src/theme/components/templatenew.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/theme/components/templatenew.ts b/src/theme/components/templatenew.ts index ccf5b8e5d..e42e04a0b 100644 --- a/src/theme/components/templatenew.ts +++ b/src/theme/components/templatenew.ts @@ -8,9 +8,10 @@ const TemplateNew = defineStyleConfig({ baseStyle: defineStyle({ boxSizing: "border-box", color: "ui.typography.body", - maxWidth: "1280px", + maxWidth: "min(100vw, 1280px)", m: "0 auto", display: "grid", + p: "s", gap: responsiveGap, gridTemplateColumns: "repeat(1, minmax(100px, 1fr))", gridTemplateRows: "auto", @@ -19,6 +20,7 @@ const TemplateNew = defineStyleConfig({ variants: { left: { gridTemplateColumns: { + base: "repeat(1, minmax(100px, 1fr))", md: "repeat(2, minmax(100px, 1fr))", lg: "minmax(100px, 1fr) minmax(200px, 2fr)", xl: "minmax(100px, 1fr) minmax(300px, 3fr)", @@ -30,9 +32,10 @@ const TemplateNew = defineStyleConfig({ }, right: { gridTemplateColumns: { + base: "repeat(1, minmax(100px, 1fr))", md: "repeat(2, minmax(100px, 1fr))", - lg: "2fr 1fr", - xl: "3fr 1fr", + lg: "minmax(200px, 2fr) minmax(100px, 1fr)", + xl: "minmax(300px, 3fr) minmax(100px, 1fr)", }, gridTemplateAreas: { base: `"breakout" "top" "main" "sidebar" "bottom"`, @@ -45,7 +48,9 @@ const TemplateNew = defineStyleConfig({ const TemplateNewBreakout = defineStyleConfig({ baseStyle: defineStyle({ gridArea: "breakout", - mx: { xl: "calc(-100vw / 2 + 1200px / 2)" }, + width: "100vw", + ml: "calc(-50vw + 50%)", + px: "s", }), }); From e29688c8cc9cd47df7a28746eb298244d0d9aa15 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 3 Dec 2024 13:36:36 -0500 Subject: [PATCH 03/21] Cleans up styles --- src/components/Template/TemplateNew.tsx | 3 +-- src/theme/components/templatenew.ts | 32 ++++++++++++++++--------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/Template/TemplateNew.tsx b/src/components/Template/TemplateNew.tsx index 720cd3444..5f8fe87fd 100644 --- a/src/components/Template/TemplateNew.tsx +++ b/src/components/Template/TemplateNew.tsx @@ -1,7 +1,6 @@ import { Box, useStyleConfig } from "@chakra-ui/react"; const TemplateNew: React.FC = ({ children, sidebar = "none" }) => { - console.log("side -->", sidebar); const styles = useStyleConfig("TemplateNew", { variant: sidebar }); return {children}; @@ -20,7 +19,7 @@ const TemplateNewTop: React.FC = ({ children }) => { }; const TemplateNewMain: React.FC = ({ children }) => { - const styles = useStyleConfig("TemplateNewMain", {}); + const styles = useStyleConfig("TemplateNewMain"); return {children}; }; diff --git a/src/theme/components/templatenew.ts b/src/theme/components/templatenew.ts index e42e04a0b..652154d02 100644 --- a/src/theme/components/templatenew.ts +++ b/src/theme/components/templatenew.ts @@ -8,39 +8,39 @@ const TemplateNew = defineStyleConfig({ baseStyle: defineStyle({ boxSizing: "border-box", color: "ui.typography.body", - maxWidth: "min(100vw, 1280px)", - m: "0 auto", display: "grid", + maxWidth: "1280px", + m: "0 auto", p: "s", gap: responsiveGap, + gridTemplateAreas: `"breakout" "top" "main" "bottom"`, gridTemplateColumns: "repeat(1, minmax(100px, 1fr))", gridTemplateRows: "auto", - gridTemplateAreas: `"breakout" "top" "main" "bottom"`, }), variants: { left: { + gridTemplateAreas: { + base: `"breakout" "top" "sidebar" "main" "bottom"`, + md: `"breakout breakout" "top top" "sidebar main" "bottom bottom"`, + }, gridTemplateColumns: { base: "repeat(1, minmax(100px, 1fr))", md: "repeat(2, minmax(100px, 1fr))", lg: "minmax(100px, 1fr) minmax(200px, 2fr)", xl: "minmax(100px, 1fr) minmax(300px, 3fr)", }, - gridTemplateAreas: { - base: `"breakout" "top" "sidebar" "main" "bottom"`, - md: `"breakout breakout" "top top" "sidebar main" "bottom bottom"`, - }, }, right: { + gridTemplateAreas: { + base: `"breakout" "top" "main" "sidebar" "bottom"`, + md: `"breakout breakout" "top top" "main sidebar" "bottom bottom"`, + }, gridTemplateColumns: { base: "repeat(1, minmax(100px, 1fr))", md: "repeat(2, minmax(100px, 1fr))", lg: "minmax(200px, 2fr) minmax(100px, 1fr)", xl: "minmax(300px, 3fr) minmax(100px, 1fr)", }, - gridTemplateAreas: { - base: `"breakout" "top" "main" "sidebar" "bottom"`, - md: `"breakout breakout" "top top" "main sidebar" "bottom bottom"`, - }, }, }, }); @@ -64,6 +64,16 @@ const TemplateNewMain = defineStyleConfig({ baseStyle: defineStyle({ gridArea: "main", }), + variants: { + featuredContent: { + width: "100vw", + ml: "calc(-50vw + 50%)", + px: "s", + }, + text: { + maxWidth: "600px", + }, + }, }); const TemplateNewSidebar = defineStyleConfig({ From 2ad0f66a0c3af8deca85df092f7e47df54baaf60 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 5 Dec 2024 15:31:10 -0500 Subject: [PATCH 04/21] Cleans up docs and tests --- src/components/Template/Template.mdx | 505 ++------------ src/components/Template/Template.stories.tsx | 625 ++++++++++-------- src/components/Template/Template.test.tsx | 308 +-------- src/components/Template/Template.tsx | 397 +---------- src/components/Template/TemplateNew.mdx | 17 - .../Template/TemplateNew.stories.tsx | 313 --------- src/components/Template/TemplateNew.tsx | 46 -- .../Template/templateChangelogData.ts | 9 + src/index.ts | 29 +- src/theme/components/templatenew.ts | 42 +- 10 files changed, 484 insertions(+), 1807 deletions(-) delete mode 100644 src/components/Template/TemplateNew.mdx delete mode 100644 src/components/Template/TemplateNew.stories.tsx delete mode 100644 src/components/Template/TemplateNew.tsx diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx index 9f4a33c8d..21ee2cc3d 100644 --- a/src/components/Template/Template.mdx +++ b/src/components/Template/Template.mdx @@ -2,499 +2,110 @@ import { ArgTypes, Canvas, Description, Meta, Source } from "@storybook/blocks"; import ComponentChangelogTable from "../../utils/ComponentChangelogTable"; import { changelogData } from "./templateChangelogData"; -import * as TemplateStories from "./Template.stories"; +import * as TemplateNewStories from "./Template.stories"; import { Template, - TemplateAboveHeader, - TemplateAppContainer, TemplateBreakout, - TemplateContent, - TemplateContentBottom, - TemplateContentPrimary, - TemplateContentSidebar, - TemplateContentTop, - TemplateFooter, - TemplateHeader, + TemplateTop, + TemplateSidebar, + TemplateMain, + TemplateMainNarrow, + TemplateBottom, } from "./Template"; import Link from "../Link/Link"; - + # Template -| Component Version | DS Version | -| ----------------- | ---------- | -| Added | `0.3.6` | -| Latest | `3.4.0` | +| Component Version | DS Version | +| ----------------- | ------------ | +| Added | `0.3.6` | +| Latest | `Prerelease` | ## Table of Contents -- {TemplateAppContainer Overview} -- {TemplateAppContainer Component Props} -- {TemplateAppContainer Accessibility} -- {Template Children Overview} -- {Template Children Component Props} -- {Full Example with Template Children Components} +- {Template Overview} +- {Template Props} +- {Template Components} +- {Template Accessibility} +- {Template Sidebar Configuration} - {Changelog} -## TemplateAppContainer Overview +## Template Overview - - -If you have a custom `Header` component that _already_ renders an HTML `
` -element, set `renderHeaderElement` to false so only one `
` element is -rendered. - -If you need to render the `SkipNavigation` component, set `renderSkipNavigation` -to true. - -Likewise, if you have a custom `Footer` component that _already_ renders an HTML -`
` element, set `renderFooterElement` to false so only one `
` -element is rendered. - -**This is the recommended way to render an app page template.** - -Above Header} - header={Header} - breakout={ - <> - Breadcrumbs - Hero - - } - sidebar="left" - contentTop={Content Top} - contentSidebar={Left Sidebar} - contentPrimary={ - <> - Main Content - More Content - - } - contentBottom={Content Bottom} - footer={Footer} - renderSkipNavigation={true} -/> -`} - language="jsx" -/> - -## TemplateAppContainer Component Props - - - - - -## TemplateAppContainer Accessibility - -**The `TemplateAppContainer` component is the recommended way to render the entire -application.** Therefore, this accessibility section is specifically for the -`TemplateAppContainer` but the same rules apply to the individual "Template" -components. - -The `TemplateAppContainer` component renders the header as a `
` element, -the content as a `
` element, and the footer as a `
` element. - -If you need to render an alert or notification at the top of the page with an -`aside` HTML element or HTML element with the `role="complementary"` attribute, -then pass that alert or notification component to the `aboveHeader` prop. These -elements should _not_ be rendered in the `header` HTML section since that's an -accessibility violation. - -The `TemplateAppContainer` component renders a full DOM and one of the children -is the `main` HTML element with a default "id" of `"mainContent"`. This should -be used as the anchor element that the skip navigation link points to. If your -application is using the current Header, it already contains the skip -navigation feature but make sure it is pointing to the correct anchor element. - -If you are using a custom header component or you need to use the Reservoir -Design System (DS) `SkipNavigation` component, then set the `renderSkipNavigation` -prop to true. This will render the `SkipNavigation` component at the top of the -page before any other elements. The main link will point to the `#mainContent` -`main` element. - -Resources - -- [W3C Aria Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html) -- [Digital A11y Role=Complementary](https://www.digitala11y.com/complementary-role/) -- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/) -- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/) - -## Template Children Overview - -The Reservoir Design System (DS) also provides a set of "template" components -that work together to render a consistent mobile and desktop layout. More -information on individual components and how they should be composed can be -found below. Even though these component are available for use, we recommend -using the `TemplateAppContainer` component and passing down children component -as props as needed. - -Note: If you need to render the `SkipNavigation` component, you need to explicitly -render it immediately before the `Template` component. This is done -automatically in the `TemplateAppContainer` component. - -Note: All components that go above the main content `TemplateContent` component -should be wrapped in a `
` element or a `` component. - -Basic "template" components structure: +TBD - - - -`} - language="jsx" -/> -## Template Children Component Props + +`} language="jsx" /> + +## Template Props - + - + -### Template Components +## Template Components The components consist of, listed in DOM structure order: - `Template` -- `TemplateAboveHeader` -- `TemplateHeader` - `TemplateBreakout` -- `TemplateContent` -- `TemplateContentTop` -- `TemplateContentPrimary` -- `TemplateContentSidebar` -- `TemplateContentBottom` -- `TemplateFooter` - -#### Template - - - // ... - -`} - language="jsx" -/> - - - -#### TemplateBreakout - - - - // ... - - -`} - language="jsx" -/> +- `TemplateTop` +- `TemplateMain` or `TemplateMainNarrow` +- `TemplateSidebar` +- `TemplateBottom` - +## Template Accessibility -#### TemplateAboveHeader +Wide lines of text are difficult to read and are proven to make it harder for +people to focus, while short lines of text force the eye to travel back too often, +breaking a reader's rhythm. The `TemplateMain` component has a max width of 1280px, +which is too wide for text. If your content includes long chunks of text, you +should use the `TemplateMainNarrow` component instead. - - - - // ... - - - -`} - language="jsx" -/> +The `TemplateMain` and `TemplateMainNarrow` components render the content as a +`
` element with a default "id" of `"mainContent"`. This should be used as +the anchor element that the skip navigation link points to. If your application +is using the current Header, it already contains the skip navigation feature but +make sure it is pointing to the correct anchor element. - - -#### TemplateHeader - - - - - // ... - - - // ... - - - -`} - language="jsx" -/> - - - -#### TemplateContent - - - - - // ... - - - - // ... - - -`} - language="jsx" -/> - - - -#### TemplateContentTop - - - - - // ... - - - // ... - - - - - // ... - - - -`} - language="jsx" -/> - - - -#### TemplateContentPrimary - - - - - // ... - - - // ... - - - - - // ... - - - - -