Skip to content

Commit

Permalink
Merge pull request #1479 from dxc-technology/rarrojolopez-app-layout
Browse files Browse the repository at this point in the history 
App Layout usage and specs pages added to the site
  • Loading branch information
@aidamag
aidamag committed Feb 21, 2023
2 parents 918d2c8 + d35cf36 commit bce3d57
Show file tree
Hide file tree
Showing 11 changed files with 202 additions and 84 deletions.
21 changes: 21 additions & 0 deletions website/pages/components/application-layout/usage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 Usage = () => {
return (
<>
<Head>
<title>Application layout Usage — Halstack Design System</title>
</Head>
<ApplicationLayoutUsagePage></ApplicationLayoutUsagePage>
</>
);
};

Usage.getLayout = function getLayout(page: ReactElement) {
return <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
};

export default Usage;
1 change: 1 addition & 0 deletions website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const ApplicationLayoutPageHeading = ({
}) => {
const tabs = [
{ label: "Code", path: "/components/application-layout" },
{ label: "Usage", path: "/components/application-layout/usage" },
{
label: "Specifications",
path: "/components/application-layout/specifications",
Expand Down
130 changes: 87 additions & 43 deletions website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,81 +3,125 @@ import {
DxcBulletedList,
DxcParagraph,
DxcFlex,
DxcTable,
} from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Code from "@/common/Code";
import Image from "@/common/Image";
import Link from "next/link";
import ApplicationLayoutAnatomy from "./images/application_layout_anatomy.png";
import Figure from "@/common/Figure";
import specsImage from "./images/appLayout_specs.png";

const sections = [
{
title: "Specifications",
content: (
<>
<Figure caption="Application layout design specifications">
<Image
src={specsImage}
alt="Application layout design specifications"
/>
</Figure>
<DxcParagraph>
The specifications of each of the compound component children are
defined separately:
Columns, gutters, and margins make up the responsive layout grid
following these breakpoints. Depending on resolution and screen size
of a device, column numbers and the values of the margins and gutters
adjust to accommodate all screen elements in the most optimal manner.
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
<Link href="/components/header/specifications" passHref>
<DxcLink>Header</DxcLink>
</Link>
Columns are the areas of the screen where content is placed.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<Link href="/components/sidenav/specifications" passHref>
<DxcLink>Sidenav</DxcLink>
</Link>
A gutter is the space between columns used to separate content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<Link href="/components/footer/specifications" passHref>
<DxcLink>Footer</DxcLink>
</Link>
Margins are the space between the edges of the screen and content.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Anatomy",
title: "Recommended values",
content: (
<>
<Image
src={ApplicationLayoutAnatomy}
alt="Application layout anatomy"
/>
<DxcParagraph>
The following table describes the columns, margins, and gutter at each
of the different breakpoints:
</DxcParagraph>
<DxcTable>
<thead>
<tr>
<th>Breakpoint</th>
<th>Columns</th>
<th>
Gutter (recommended) <sup>1</sup>
</th>
<th>
Margin (min)<sup>2</sup>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Code>xsmall</Code>
</td>
<td>4</td>
<td>16 / small</td>
<td>24</td>
</tr>
<tr>
<td>
<Code>small</Code>
</td>
<td>4</td>
<td>16 / small</td>
<td>24</td>
</tr>
<tr>
<td>
<Code>medium</Code>
</td>
<td>4</td>
<td>24 / medium</td>
<td>48</td>
</tr>
<tr>
<td>
<Code>large</Code>
</td>
<td>8</td>
<td>16 / small</td>
<td>56</td>
</tr>
<tr>
<td>
<Code>xlarge</Code>
</td>
<td>8</td>
<td>24/medium</td>
<td>56</td>
</tr>
</tbody>
</DxcTable>
<DxcBulletedList type="number">
<DxcBulletedList.Item>Header</DxcBulletedList.Item>
<DxcBulletedList.Item>Main content</DxcBulletedList.Item>
<DxcBulletedList.Item>Footer</DxcBulletedList.Item>
<DxcBulletedList.Item>Sidenav</DxcBulletedList.Item>
<DxcBulletedList.Item>
Any value provided by the gutter prop in the layout components can
be used (ideally multiples of 8) although we recommend to stick to
the values provided.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
The margin value provided are the minimun recommended, any value
from our spacing scale can be used or even an auto value.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Accessibility",
subSections: [
{
title: "WAI-ARIA",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
WAI-ARIA Authoring practices 1.2 -{" "}
<DxcLink
newWindow
href="https://www.w3.org/WAI/perspective-videos/layout/"
>
Clear Layout and Design
</DxcLink>
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
];

const ApplicationLayoutSpecsPage = () => {
Expand Down
Binary file added website/screens/components/application-layout/specs/images/appLayout_specs.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...reens/components/application-layout/specs/images/application_layout_anatomy.png
View file
Binary file not shown.
132 changes: 92 additions & 40 deletions website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,129 @@ import {
DxcParagraph,
DxcFlex,
DxcBulletedList,
DxcTable,
} from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import Code from "@/common/Code";
import Image from "@/common/Image";
import Figure from "@/common/Figure";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import SidenavBehavior from "./images/sidenav_behavior.png";
import SidenavBehaviorMobile from "./images/sidenav_behavior_mobile.png";
import layoutGrid from "./images/layout_grid.png";
import layoutBreakpoints from "./images/layout_breakpoints.png";

const sections = [
{
title: "Usage",
content: (
<>
<DxcParagraph>
When using the application layout component consider the following:
The application layout is the base component that wraps any
application built with Halstack. In addition to this, all of the
components listed below can be used within each other to create a wide
variety of standard layouts:
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>Flex</DxcBulletedList.Item>
<DxcBulletedList.Item>Bleed </DxcBulletedList.Item>
<DxcBulletedList.Item>Inset</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Grid",
content: (
<>
<DxcParagraph>
The grid provides the foundation for consistently positioning elements
onscreen. The 8px Grid is the geometric foundation of all the visual
elements of Halstack Design System components and spacing. It provides
structure and guidance for all creative decision-making.
</DxcParagraph>
<Image src={layoutGrid} alt="Layout grid of 8px" />
<DxcBulletedList>
<DxcBulletedList.Item>
Use the sidenav when the application navigation has an horizontal
hierarchy
Use multiples of 8px when defining measurements, spacing, and
positioning elements.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Header and footer elements should be always present
When necessary use 4px to make more fine tuned adjustments.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Only use the mode overlay if the content cannot dynamically adapt to
the available space
Whenever possible, make sure that objects line up, both vertically
and horizontally.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Align your bounding box to the grid, not the baseline of your text.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Sidenav: overlay and push",
title: "Breakpoints",
content: (
<>
<Figure caption="Overlay and push behavior of the sidenav component">
<Image
src={SidenavBehavior}
alt="Overlay and push behavior of the sidenav component"
/>
</Figure>
<DxcParagraph>
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.
Breakpoints define resolutions at which screen components adjust to
offer an optimal user experience across screen sizes and devices.
We&#39;ve defined five different breakpoints to accommodate multiple
web, tablet, and mobile screen resolutions:
</DxcParagraph>
<DxcTable>
<thead>
<tr>
<th>Breakpoint</th>
<th>px</th>
<th>rem</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Code>xsmall</Code>
</td>
<td>320</td>
<td>20</td>
</tr>
<tr>
<td>
<Code>small</Code>
</td>
<td>480</td>
<td>30</td>
</tr>
<tr>
<td>
<Code>medium</Code>
</td>
<td>720</td>
<td>45</td>
</tr>
<tr>
<td>
<Code>large</Code>
</td>
<td>1056</td>
<td>66</td>
</tr>
<tr>
<td>
<Code>xlarge</Code>
</td>
<td>1440</td>
<td>90</td>
</tr>
</tbody>
</DxcTable>
<DxcParagraph>
The image below illustrates how we&#39;ve used data on the most
popular screen resolutions by device over the past few years to help
define each breakpoint.
</DxcParagraph>
<Image src={layoutBreakpoints} alt="Layout breakpoints" />
</>
),
subSections: [
{
title: "Mobile behavior",
content: (
<>
<Figure caption="Default sidenav behavior on mobile devices">
<Image
src={SidenavBehaviorMobile}
alt="Default sidenav behavior on mobile devices"
/>
</Figure>
<DxcParagraph>
The default behavior for mobile device is overlay since the
available space doesn&#39;t allow to push the main content.
</DxcParagraph>
</>
),
},
],
},
];

Expand Down
Binary file added website/screens/components/application-layout/usage/images/layout_breakpoints.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/screens/components/application-layout/usage/images/layout_grid.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed website/screens/components/application-layout/usage/images/sidenav_behavior.png
View file
Binary file not shown.
Binary file removed .../screens/components/application-layout/usage/images/sidenav_behavior_mobile.png
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion website/screens/principles/layout/LayoutPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const sections = [
popular screen resolutions by device over the past few years to
help define each breakpoint.
</DxcParagraph>
<Image src={layoutBreakpoints} alt="Layout grid of 8px" />
<Image src={layoutBreakpoints} alt="Layout breakpoints" />
</>
),
},
Expand Down

0 comments on commit bce3d57

Please sign in to comment.