dxc-technology · aweell · Apr 7, 2022 · Mar 25, 2022 · Mar 28, 2022 · Mar 29, 2022
diff --git a/contributing/assets/components/application_layout.xd b/contributing/assets/components/application_layout.xd
diff --git a/guidelines/catalog.json b/guidelines/catalog.json
@@ -34,6 +34,10 @@
       "key": "autosuggest",
       "name": "Autosuggest"
     },
+    {
+      "key": "application-layout",
+      "name": "Application layout"
+    },
     {
       "key": "v3_autocomplete",
       "name": "Autocomplete (deprecated)"

diff --git a/guidelines/components/application-layout/README.md b/guidelines/components/application-layout/README.md
@@ -0,0 +1,66 @@
+
+# Application layout
+
+The application layout provides a base UI wrapper for any application built with Halstack. 
+
+
+## Usage
+
+When using the application layout component consider the following:
+
+* Use the sidenav when the application navigation has an horizontal hierarchy
+* Header and footer elements should be always present
+* Only use the mode overlay if the content cannot dynamically adapt to the available space 
+
+
+## Sidenav: overlay and push
+
+Overlay and push interactions by the sidenav component can alter the way the layout is displayed. For overlay, the sidenav simply slides over the content with no changes to position. The push interaction moves the main container to the side depending on the width of the sidenav. 
+
+![layout sidenav interaction](images/sidenav_behavior.png)
+
+_Overlay and push sidenav layout interactions_
+
+### Mobile behavior
+
+The default behavior for mobile device is overlay since the available space doesn't allow to push the main content.
+
+![Comparison of the sidenav behavior between deskton and mobile](images/application_layout_behavior_mobile.png)
+
+_Desktop (push) vs mobile behavior (overlay)_
+
+
+## Anatomy
+
+![application layout anatomy](images/application_layout_anatomy.png)
+
+1. Header
+2. Main content
+3. Footer
+4. Side Navigation (sidenav)
+
+
+## Specifications
+
+The specifications of each of the compound component children are defined separately:
+
+* [Header]()
+* [Footer]()
+* [Sidenav]()
+
+## Accessibility
+
+### WAI-ARIA 1.2
+
+* WAI-ARIA Clear Layout and Design [Clear Layout and Design](https://www.w3.org/WAI/perspective-videos/layout/)
+
+
+## Links
+
+* [Adobe XD link]()
+
+____________________________________________________________
+
+[Edit this page on Github](https://github.com/dxc-technology/halstack-style-guide/blob/master/guidelines/principles/layout/README.md)
+
+
diff --git a/guidelines/components/application-layout/images/application_layout_anatomy.png b/guidelines/components/application-layout/images/application_layout_anatomy.png
diff --git a/...nes/components/application-layout/images/application_layout_behavior_mobile.png b/...nes/components/application-layout/images/application_layout_behavior_mobile.png
diff --git a/guidelines/components/application-layout/images/sidenav_behavior.png b/guidelines/components/application-layout/images/sidenav_behavior.png
diff --git a/website/pages/components/application-layout/index.tsx b/website/pages/components/application-layout/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ApplicationLayoutPageLayout from "../../../screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutUsagePage from "../../../screens/components/application-layout/usage/ApplicationLayoutUsagePage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Application layout — Halstack Design System</title>
+      </Head>
+      <ApplicationLayoutUsagePage></ApplicationLayoutUsagePage>
+    </>
+  );
+};
+
+Index.getLayout = function getLayout(page: ReactElement) {
+  return <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
+};
+
+export default Index;
diff --git a/website/pages/components/application-layout/specifications.tsx b/website/pages/components/application-layout/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ApplicationLayoutPageLayout from "../../../screens/components/application-layout/ApplicationLayoutPageLayout";
+import ApplicationLayoutSpecsPage from "../../../screens/components/application-layout/specs/ApplicationLayoutSpecsPage";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Application layout Specs — Halstack Design System</title>
+      </Head>
+      <ApplicationLayoutSpecsPage></ApplicationLayoutSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
+};
+
+export default Specifications;
diff --git a/website/screens/common/pagesList.ts b/website/screens/common/pagesList.ts
@@ -26,6 +26,7 @@ const principlesLinks: LinkDetails[] = [
 const componentsLinks: LinkDetails[] = [
   { label: "Accordion", path: "/components/accordion" },
   { label: "Alert", path: "/components/alert" },
+  { label: "Application layout", path: "/components/application-layout" },
   { label: "Box", path: "/components/box" },
   { label: "Button", path: "/components/button" },
   { label: "Card", path: "/components/card" },

diff --git a/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx b/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
@@ -0,0 +1,20 @@
+import PageHeading from "../../common/TabsPageLayout";
+
+const ApplicationLayoutPageHeading = ({ children }: { children: React.ReactNode }) => {
+  const tabs = [
+    { label: "Usage", path: "/components/application-layout" },
+    { label: "Specifications", path: "/components/application-layout/specifications" },
+  ];
+
+  return (
+    <PageHeading
+      title="Application layout"
+      description="The application layout provides a base UI wrapper for any application built with Halstack. "
+      tabs={tabs}
+    >
+      {children}
+    </PageHeading>
+  );
+};
+
+export default ApplicationLayoutPageHeading;
diff --git a/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx b/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
@@ -0,0 +1,70 @@
+import Image from "@/common/Image";
+import {
+  DxcLink,
+  DxcList,
+  DxcStack,
+  DxcTable,
+  DxcText,
+} from "@dxc-technology/halstack-react";
+import DocFooter from "../../../common/DocFooter";
+import HeadingLink from "../../../common/HeadingLink";
+import ApplicationLayoutAnatomy from "./images/application_layout_anatomy.png";
+
+const ApplicationLayoutSpecsPage = () => {
+  return (
+    <DxcStack gutter="xxxlarge">
+      <DxcStack gutter="large">
+        <HeadingLink level={2}>Anatomy</HeadingLink>
+        <Image src={ApplicationLayoutAnatomy} alt="Alert anatomy" />
+        <DxcList type="number">
+          <DxcText>Header</DxcText>
+          <DxcText>Main content</DxcText>
+          <DxcText>Footer</DxcText>
+          <DxcText>Sidenav</DxcText>
+        </DxcList>
+      </DxcStack>
+
+      <DxcStack gutter="large">
+        <HeadingLink level={3}>Specifications</HeadingLink>
+        <DxcText>The specifications of each of the compound component children are defined separately:</DxcText>  
+        <DxcList>
+          <DxcText>
+            <DxcLink
+            href="/components/header/specifications"
+            text="Header"
+            />
+          </DxcText>
+          <DxcText>
+          <DxcLink
+            href="/components/sidenav/specifications"
+            text="Sidenav"
+            />
+          </DxcText>
+          <DxcText>
+          <DxcLink
+            href="/components/footer/specifications"
+            text="Footer"
+            />
+          </DxcText>
+        </DxcList>     
+      </DxcStack>
+
+      <DxcStack>
+        <HeadingLink level={4}>WAI-ARIA</HeadingLink>
+        <DxcList>
+          <DxcText>
+            WAI-ARIA Authoring practices 1.2 -{" "}
+            <DxcLink
+              newWindow
+              text="Clear Layout and Design"
+              href="https://www.w3.org/WAI/perspective-videos/layout/"
+            />
+          </DxcText>
+        </DxcList>
+      </DxcStack>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-style-guide/blob/master/website/screens/components/alert/specs/ApplicationLayoutSpecsPage.tsx" />
+    </DxcStack>
+  );
+};
+
+export default ApplicationLayoutSpecsPage;
diff --git a/...reens/components/application-layout/specs/images/application_layout_anatomy.png b/...reens/components/application-layout/specs/images/application_layout_anatomy.png
diff --git a/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx b/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
@@ -0,0 +1,54 @@
+import Image from "@/common/Image";
+import {
+  DxcText,
+  DxcStack,
+  DxcList,
+  DxcTable,
+} from "@dxc-technology/halstack-react";
+import SidenavBehavior from "./images/sidenav_behavior.png";
+import SidenavBehaviorMobile from "./images/sidenav_behavior_mobile.png";
+import DocFooter from "../../../common/DocFooter";
+import Figure from "../../../common/Figure";
+import HeadingLink from "../../../common/HeadingLink";
+
+const ApplicationLayoutUsagePage = () => {
+  return (
+    <DxcStack gutter="xxxlarge">
+      <DxcStack gutter="large">
+        <HeadingLink level={2}>Usage</HeadingLink>
+        <DxcText>When using the application layout component consider the following:</DxcText>
+        <DxcList>
+          <DxcText>
+            Use the sidenav when the application navigation has an horizontal hierarchy
+          </DxcText>
+          <DxcText>
+            Header and footer elements should be always present
+          </DxcText>
+          <DxcText>
+            Only use the mode overlay if the content cannot dynamically adapt to the available space
+          </DxcText>
+        </DxcList>
+      </DxcStack>
+      <DxcStack gutter="large">
+        <HeadingLink level={3}>Sidenav: overlay and push</HeadingLink>
+        <Figure caption="Overlay and push behavior of the sidenav component">
+          <Image src={SidenavBehavior} alt="Overlay and push behavior of the sidenav component" />
+        </Figure>
+        <DxcText>Overlay and push interactions by the sidenav component can alter the way the layout is displayed. 
+          For overlay, the sidenav simply slides over the content with no changes to position. 
+          The push interaction moves the main container to the side depending on the width of the sidenav. </DxcText>
+
+        <HeadingLink level={4}>Mobile behavior</HeadingLink>
+        <Figure caption="Default sidenav behavior on mobile devices">
+          <Image src={SidenavBehaviorMobile} alt="Default sidenav behavior on mobile devices" />
+        </Figure>
+        <DxcText as="p">
+            The default behavior for mobile device is overlay since the available space doesn't allow to push the main content.
+        </DxcText>
+      </DxcStack>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-style-guide/blob/master/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx" />
+    </DxcStack>
+  );
+};
+
+export default ApplicationLayoutUsagePage;
diff --git a/website/screens/components/application-layout/usage/images/sidenav_behavior.png b/website/screens/components/application-layout/usage/images/sidenav_behavior.png
diff --git a/.../screens/components/application-layout/usage/images/sidenav_behavior_mobile.png b/.../screens/components/application-layout/usage/images/sidenav_behavior_mobile.png