Skip to content

Commit 5d1d5b3

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #857 from dxc-technology/jsuarezgonz-issue-848
Adding layout page
2 parents 378c1ce + d1effb3 commit 5d1d5b3

File tree

8 files changed

+256
-1
lines changed

8 files changed

+256
-1
lines changed

‎website/pages/principles/layout.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from "next/head";
2+
import LayoutPage from "../../screens/principles/layout/LayoutPage";
3+
4+
const Layout = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Layout — Halstack Design System</title>
9+
</Head>
10+
<LayoutPage></LayoutPage>
11+
</>
12+
);
13+
};
14+
15+
export default Layout;

‎website/screens/common/pagesList.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ const overviewLinks: LinkDetails[] = [
1818
];
1919
const principlesLinks: LinkDetails[] = [
2020
{ label: "Color", path: "/principles/color" },
21-
{ label: "Typography", path: "/principles/typography" },
2221
{ label: "Spacing", path: "/principles/spacing" },
22+
{ label: "Typography", path: "/principles/typography" },
23+
{ label: "Layout", path: "/principles/layout" },
2324
];
2425

2526
const componentsLinks: LinkDetails[] = [

‎website/screens/principles/layout/LayoutPage.tsx‎

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import PageLayout from "../../common/PageLayout";
2+
import { DxcText, DxcStack } from "@dxc-technology/halstack-react";
3+
import Image from "@/common/Image";
4+
import HeadingLink from "../../common/HeadingLink";
5+
import DocFooter from "../../common/DocFooter";
6+
import standardLayout from "./images/standard_layout.png";
7+
import sidenavLayout from "./images/sidenav_layout.png";
8+
import asideLayout from "./images/aside_layout.png";
9+
import pairedLayout from "./images/paired_layout.png";
10+
import symmetricalLayout from "./images/symmetrical_layout.png";
11+
12+
const Layout = () => {
13+
return (
14+
<PageLayout>
15+
<DxcStack gutter="xxxlarge">
16+
<DxcStack gutter="large">
17+
<HeadingLink level={1}>Layout</HeadingLink>
18+
<DxcText as="p">
19+
Since not all applications have the same layout, we have a
20+
predefined layout configuration factored into our design system so
21+
designers and developers don&#39;t start from a blank page. The most
22+
common screen configurations in our applications have been
23+
considered when building our design principles and component
24+
catalog.
25+
</DxcText>
26+
<DxcText as="p">
27+
Side navigation, tab navigation, flow navigation, and more are valid
28+
experience patterns to navigate in your applications built with
29+
Halstack Design System. This is all about thinking and considering
30+
what is the best approach for your users, what is the best
31+
organization to display your content, and make a nicer and clearer
32+
User Experience. That simple.
33+
</DxcText>
34+
<DxcText as="p">
35+
Every application that will be designed into the DXC environment
36+
should fulfill a series of requirements to give consistency with the
37+
applications using the design system.
38+
</DxcText>
39+
<DxcText as="p">
40+
There are generic elements that each application should implement in
41+
most cases, making the design cohesive across the set of
42+
applications.
43+
</DxcText>
44+
<DxcText as="p">
45+
Regarding this principle, we offer a set of prebuilt layouts to be
46+
used in different scenarios and identified as a pattern in most of
47+
our applications.
48+
</DxcText>
49+
</DxcStack>
50+
<DxcStack gutter="large">
51+
<HeadingLink level={2}>Application Layout</HeadingLink>
52+
<DxcText as="p">
53+
A widely used layout in many applications, keeping it simple, with
54+
three main areas with hierarchical distribution and a defined role.
55+
Header, main content, and footer.
56+
</DxcText>
57+
<DxcText as="p">
58+
Easy to adapt to a changing environment, referring to other devices
59+
like mobile and tablet, the structure of the content and the
60+
alignment of the components won&#39;t be affected by the lack of
61+
space, maintaining the same order and flow.
62+
</DxcText>
63+
<DxcText as="p">
64+
The main content is the most customizable part, acting as the main
65+
content of the application and the main focus where the user will
66+
find the relevant information about the site.
67+
</DxcText>
68+
<DxcText as="p">
69+
Behind the scenes, there are some aspects that we are controlling,
70+
like the definition of a minimum height to the main space making by
71+
default the layout adaptive to the viewport height even if there is
72+
no content inside the main section. If the main area has content
73+
taller than the viewport size, the container will become scrollable.
74+
</DxcText>
75+
<DxcText as="p">
76+
Maximum width is set for the main area of 1320 pixels, giving enough
77+
whitespace to the UI and the elements to breath, and keeping the
78+
content center on the screen to call the attention of the user.
79+
</DxcText>
80+
<DxcText as="p">
81+
Margins from the left and right sides are also other aspects that
82+
the component itself is controlling, adapting it depending on the
83+
device and the needs of the applications.Additionally, a margin area
84+
is defined following the spacing with other components of the layout
85+
with these values:- Margin for desktop: 64 pixels (top), 80 pixels
86+
(bottom), 15.6% (left/right)- Margin for tablet: 48 pixels (top), 64
87+
pixels (bottom), 9.6 (left/right)- Margin for mobile: 36 pixels
88+
(top), 48 pixels (bottom), 6.4% (left/right)
89+
</DxcText>
90+
<DxcText as="p">
91+
The specifications of the header and footer will remain the same in
92+
the rest of the layouts, with the following values:- Header: 68
93+
pixels (height), 100% (width)- Footer: 128 pixels (height), 100%
94+
(width)
95+
</DxcText>
96+
<Image src={standardLayout} alt="Standard layout" />
97+
<HeadingLink level={3}>
98+
Application Layout with side navigation
99+
</HeadingLink>
100+
<DxcText as="p">
101+
In technical applications and documentation sites, where you need to
102+
show an overview of all the items available, a side navigation bar
103+
can be included as part of the application layout.
104+
</DxcText>
105+
<DxcText as="p">
106+
This sidenav component works like an index of a book, displaying
107+
several actionable items that trigger an action, refreshing the
108+
information of the main content area, or navigating to another
109+
resource in the page hierarchy.
110+
</DxcText>
111+
<DxcText as="p">
112+
As opposed to the previous layouts, in this case, the sidenav needs
113+
to adopt a different behavior in responsive mode, due to the lack of
114+
spacing for touchable devices. So in case of keeping it visible as
115+
it can be configured in the desktop version, the component can be
116+
triggered to show and hide the content inside of it, improving the
117+
user experience and letting the main content enough space on the
118+
screen.
119+
</DxcText>
120+
<DxcText as="p">
121+
Specifications for the layout:- Sidenav: 300 pixels (width), 100%
122+
(height)- Main content margins for desktop: 64 pixels (top), 80
123+
pixels (bottom), 8.6% (right), 5.4% (left)- Main content margins for
124+
tablet: 48 pixels (top), 64 pixels (bottom), 9.6 (left/right)- Main
125+
content margins for mobile: 36 pixels (top), 48 pixels (bottom),
126+
6.4% (left/right)
127+
</DxcText>
128+
<DxcText as="p">
129+
If the sidenav is used in push mode, once the component is hidden by
130+
the left side of the screen, the main content will take all the
131+
available space, increasing the size of the left margin to match
132+
with the value of the right margin.
133+
</DxcText>
134+
<DxcText as="p">
135+
The content will be rendered in the middle of the screen and the
136+
look will be similar to the one reproduced using the standard
137+
layout.
138+
</DxcText>
139+
<Image src={sidenavLayout} alt="Side navigation" />
140+
<HeadingLink level={3}>
141+
Application Layout with secondary aside navigation
142+
</HeadingLink>
143+
<DxcText as="p">
144+
A component that can be included as part of the application layout
145+
in certain occasions, is the secondary aside navigation bar. It
146+
shows different types of descriptive icons or actions that will
147+
represent some current selections of the status of the interface.
148+
Both elements can be interchangeable in terms of position due to the
149+
requirements of the applications and the importance of the actions
150+
associated with each element.
151+
</DxcText>
152+
<DxcText as="p">
153+
For that class of layout, the height of the content won&#39;t
154+
increase based on the content itself, on the other side, the area
155+
will have a scroll area to maintain the distribution and not lose
156+
focus of the current hierarchy of the interface.
157+
</DxcText>
158+
<DxcText as="p">
159+
In terms of responsive design, the aside element will stay at the
160+
same position and accessible at any time of the interaction process.
161+
</DxcText>
162+
<DxcText as="p">
163+
Same specifications apply for all the components mentioned before,
164+
adding the measures of the aside element:- Aside: 88 pixels (width),
165+
100% (height)This layout is thought to be adaptive to the viewport,
166+
meaning that in case the content overflow the available space, the
167+
container will display a scrollbar to access all the information
168+
inside it.
169+
</DxcText>
170+
<Image src={asideLayout} alt="Aside navigation" />
171+
</DxcStack>
172+
<DxcStack gutter="large">
173+
<HeadingLink level={2}>Content Layout</HeadingLink>
174+
<HeadingLink level={3}>Two column layout</HeadingLink>
175+
<DxcText as="p">
176+
A special layout that is designed for certain scenarios where the
177+
content and the dual-view are key.
178+
</DxcText>
179+
<DxcText as="p">
180+
Every side of the interface can be customized with custom content
181+
with a relation between. It can be an image related to the content
182+
on his right/left, a login page with detail information on the near
183+
side, or a table with actions that will make some effect on the
184+
information of the other part of the UI, like filtering, searching
185+
or highlight. Even it can be used as a splash screen during the
186+
loading of the application.
187+
</DxcText>
188+
<DxcText as="p">
189+
Thinking about the distribution on mobile and tablet, the left part
190+
always is on top and the right side will be positioned at the
191+
bottom. So take it present at the time of design and place the
192+
information on each side.
193+
</DxcText>
194+
<DxcText as="p">
195+
There should be a relationship aspect between the two columns, to
196+
preserve size and scaling. So we can establish a rule going from 1/4
197+
to 3/4 where, 1/4 is the minimum value that a column can take and
198+
3/4 is the maximum value to be expanded by one single column.
199+
</DxcText>
200+
<DxcText as="p">
201+
Accordingly, the other column should take the rest of available
202+
space based on the ratio selected for each of them, making the 100%
203+
of the screen width.
204+
</DxcText>
205+
<Image src={pairedLayout} alt="Two column layout" />
206+
<HeadingLink level={3}>Symmetrical layout</HeadingLink>
207+
<DxcText as="p">
208+
A flexible layout to distribute the content through three flexible
209+
columns in the main area of the screen.
210+
</DxcText>
211+
<DxcText as="p">
212+
As a layout component, it doesn&#39;t provide any control of the
213+
content inside of each section, but it is intended mainly for back
214+
office applications, where the user needs to have a higher amount of
215+
information compared with a standard user interface application.
216+
</DxcText>
217+
<DxcText as="p">
218+
Even the relevant part of the screen is the middle column as it has
219+
a larger space and it will be updated with relevant information
220+
about the service, both columns on the sides can be used to display
221+
additional information to complement the main part of the screen,
222+
actionable items related with the business or even news and updates
223+
from some topics of importance.
224+
</DxcText>
225+
<DxcText as="p">
226+
Specifications for paired layout:- Main margin for desktop: 64
227+
pixels (top), 80 pixels (bottom), 15.6% (left/right)- Side columns:
228+
270 pixels (width), 64 pixels (margin top), 80 pixels (margin
229+
bottom)
230+
</DxcText>
231+
<Image src={symmetricalLayout} alt="Symmetrical layout" />
232+
</DxcStack>
233+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-style-guide/blob/master/website/screens/principles/layout/LayoutPage.tsx" />
234+
</DxcStack>
235+
</PageLayout>
236+
);
237+
};
238+
239+
export default Layout;

‎website/screens/principles/layout/images/aside_layout.png‎

14.5 KB
Loading

‎website/screens/principles/layout/images/paired_layout.png‎

17.6 KB
Loading

‎website/screens/principles/layout/images/sidenav_layout.png‎

13.6 KB
Loading

‎website/screens/principles/layout/images/standard_layout.png‎

13.2 KB
Loading

‎website/screens/principles/layout/images/symmetrical_layout.png‎

19.3 KB
Loading

0 commit comments

Comments
 (0)