Skip to content

Commit 2574b27

Browse files
raquelarrojoraquelarrojo
committed
Add spacing page documentation
1 parent 99e3eba commit 2574b27

File tree

6 files changed

+310
-0
lines changed

6 files changed

+310
-0
lines changed

‎website/pages/principles/spacing.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 SpacingPage from "../../screens/principles/spacing/SpacingPage";
3+
4+
const Spacing = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Spacing — Halstack Design System</title>
9+
</Head>
10+
<SpacingPage></SpacingPage>
11+
</>
12+
);
13+
};
14+
15+
export default Spacing;

‎website/screens/common/pagesList.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const overviewLinks: LinkDetails[] = [
1919

2020
const principlesLinks: LinkDetails[] = [
2121
{ label: "Color", path: "/principles/color" },
22+
{ label: "Spacing", path: "/principles/spacing" },
2223
];
2324

2425
const componentsLinks: LinkDetails[] = [

‎website/screens/principles/spacing/SpacingPage.tsx‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
import PageLayout from "../../common/PageLayout";
2+
import {
3+
DxcHeading,
4+
DxcText,
5+
DxcStack,
6+
DxcTable,
7+
} from "@dxc-technology/halstack-react";
8+
import Figure from "@/common/Figure";
9+
import Image from "@/common/Image";
10+
import Code from "@/common/Code";
11+
import HeadingLink from "../../common/HeadingLink";
12+
import DocFooter from "../../common/DocFooter";
13+
import spacingOverview from "./images/spacing_overview.png";
14+
import spacingTypes from "./images/spacing_types.png";
15+
import spacingPadding from "./images/spacing_padding.png";
16+
17+
const Spacing = () => {
18+
return (
19+
<PageLayout>
20+
<DxcStack gutter="xxxlarge">
21+
<DxcStack gutter="large">
22+
<DxcHeading level={1} text="Spacing" weight="bold"></DxcHeading>
23+
<DxcText as="p">
24+
In the search of consistent alignment between the elements we
25+
provide a spacing scale based on a root values of 8px and 4px. The
26+
numbers 4 and 8 are easily multiplied, they provide flexible and
27+
consistent, yet distinct enough, steps between them.
28+
</DxcText>
29+
<Image src={spacingOverview} alt="Spacing overview" />
30+
<DxcText as="p">
31+
The spacing scale can be applied to <Code>margin</Code> or{" "}
32+
<Code>padding</Code> properties, as well as to both vertical and
33+
horizontal edges. The token takes the place of the values normally
34+
assigned to this properties.
35+
</DxcText>
36+
</DxcStack>
37+
<DxcStack gutter="large">
38+
<HeadingLink level={2}>Spacing methods</HeadingLink>
39+
<HeadingLink level={3}>Fixed spacing</HeadingLink>
40+
<DxcText as="p">
41+
Althouhg the fixed spacing scale is most commonly used for vertical
42+
spacing, it can also be applied for horizontal spacing, especially
43+
in the case of spacing inside components.
44+
</DxcText>
45+
<Figure
46+
caption={
47+
<>
48+
<DxcText as="p">
49+
<strong>Left</strong>: Horizontal: Used for smaller, more
50+
refined spacing needs, inside components.
51+
</DxcText>
52+
<DxcText as="p">
53+
<strong>Right</strong>: Vertical: Used for positioning
54+
components on a page.
55+
</DxcText>
56+
</>
57+
}
58+
>
59+
<Image src={spacingTypes} alt="Spacing methods" />
60+
</Figure>
61+
<HeadingLink level={3}>Fluid spacing</HeadingLink>
62+
<DxcText as="p">
63+
The use of percentages (e.g. 50% or 33%) is a recommended way to
64+
divide a page or to control a component <Code>max-width</Code> and{" "}
65+
<Code>min-width</Code>. Using percentages for top and bottom values
66+
of <Code>padding</Code> or <Code>margin</Code> inside of a component
67+
or element should be avoided.
68+
</DxcText>
69+
</DxcStack>
70+
<DxcStack gutter="large">
71+
<HeadingLink level={2}>Core spacing tokens</HeadingLink>
72+
<DxcText as="p">
73+
The core spacing scale is used to create space relationships for
74+
detail-level designs.
75+
</DxcText>
76+
<DxcTable>
77+
<thead>
78+
<tr>
79+
<th>Token</th>
80+
<th>rem</th>
81+
<th>px</th>
82+
</tr>
83+
</thead>
84+
<tbody>
85+
<tr>
86+
<td>
87+
<Code>spacing-0</Code>
88+
</td>
89+
<td>0</td>
90+
<td>0</td>
91+
</tr>
92+
<tr>
93+
<td>
94+
<Code>spacing-2</Code>
95+
</td>
96+
<td>0.125</td>
97+
<td>2</td>
98+
</tr>
99+
<tr>
100+
<td>
101+
<Code>spacing-4</Code>
102+
</td>
103+
<td>0.25</td>
104+
<td>4</td>
105+
</tr>
106+
<tr>
107+
<td>
108+
<Code>spacing-8</Code>
109+
</td>
110+
<td>0.5</td>
111+
<td>8</td>
112+
</tr>
113+
<tr>
114+
<td>
115+
<Code>spacing-12</Code>
116+
</td>
117+
<td>0.75</td>
118+
<td>12</td>
119+
</tr>
120+
<tr>
121+
<td>
122+
<Code>spacing-16</Code>
123+
</td>
124+
<td>1</td>
125+
<td>16</td>
126+
</tr>
127+
<tr>
128+
<td>
129+
<Code>spacing-24</Code>
130+
</td>
131+
<td>1.5</td>
132+
<td>24</td>
133+
</tr>
134+
<tr>
135+
<td>
136+
<Code>spacing-32</Code>
137+
</td>
138+
<td>2</td>
139+
<td>32</td>
140+
</tr>
141+
<tr>
142+
<td>
143+
<Code>spacing-40</Code>
144+
</td>
145+
<td>2.5</td>
146+
<td>40</td>
147+
</tr>
148+
<tr>
149+
<td>
150+
<Code>spacing-48</Code>
151+
</td>
152+
<td>3</td>
153+
<td>48</td>
154+
</tr>
155+
<tr>
156+
<td>
157+
<Code>spacing-56</Code>
158+
</td>
159+
<td>3.5</td>
160+
<td>56</td>
161+
</tr>
162+
<tr>
163+
<td>
164+
<Code>spacing-64</Code>
165+
</td>
166+
<td>4</td>
167+
<td>64</td>
168+
</tr>
169+
<tr>
170+
<td>
171+
<Code>spacing-80</Code>
172+
</td>
173+
<td>5</td>
174+
<td>80</td>
175+
</tr>
176+
<tr>
177+
<td>
178+
<Code>spacing-96</Code>
179+
</td>
180+
<td>6</td>
181+
<td>96</td>
182+
</tr>
183+
<tr>
184+
<td>
185+
<Code>spacing-112</Code>
186+
</td>
187+
<td>7</td>
188+
<td>112</td>
189+
</tr>
190+
</tbody>
191+
</DxcTable>
192+
</DxcStack>
193+
<DxcStack gutter="large">
194+
<HeadingLink level={2}>Component spacing tokens</HeadingLink>
195+
<DxcText as="p">
196+
Most components across Halstack can adopt our component spacing
197+
tokens as <Code>margin</Code> or <Code>padding</Code> in every
198+
direction in order to create white space between components.
199+
</DxcText>
200+
<Figure
201+
caption={
202+
<>
203+
<DxcText as="p">
204+
Usage of the <Code>medium</Code> token for <Code>left</Code>,{" "}
205+
<Code> right</Code>, <Code>bottom</Code> and <Code>top</Code>{" "}
206+
<Code>padding</Code> properties.
207+
</DxcText>
208+
</>
209+
}
210+
>
211+
<Image src={spacingPadding} alt="Padding properties" />
212+
</Figure>
213+
<DxcTable>
214+
<thead>
215+
<tr>
216+
<th>Component token</th>
217+
<th>Core token</th>
218+
<th>Value</th>
219+
</tr>
220+
</thead>
221+
<tbody>
222+
<tr>
223+
<td>
224+
<Code>xxsmall</Code>
225+
</td>
226+
<td>
227+
<Code>spacing-4</Code>
228+
</td>
229+
<td>4px</td>
230+
</tr>
231+
<tr>
232+
<td>
233+
<Code>xsmall</Code>
234+
</td>
235+
<td>
236+
<Code>spacing-8</Code>
237+
</td>
238+
<td>8px</td>
239+
</tr>
240+
<tr>
241+
<td>
242+
<Code>small</Code>
243+
</td>
244+
<td>
245+
<Code>spacing-12</Code>
246+
</td>
247+
<td>12px</td>
248+
</tr>
249+
<tr>
250+
<td>
251+
<Code>medium</Code>
252+
</td>
253+
<td>
254+
<Code>spacing-16</Code>
255+
</td>
256+
<td>16px</td>
257+
</tr>
258+
<tr>
259+
<td>
260+
<Code>large</Code>
261+
</td>
262+
<td>
263+
<Code>spacing-24</Code>
264+
</td>
265+
<td>24px</td>
266+
</tr>
267+
<tr>
268+
<td>
269+
<Code>xlarge</Code>
270+
</td>
271+
<td>
272+
<Code>spacing-32</Code>
273+
</td>
274+
<td>32px</td>
275+
</tr>
276+
<tr>
277+
<td>
278+
<Code>xxlarge</Code>
279+
</td>
280+
<td>
281+
<Code>spacing-48</Code>
282+
</td>
283+
<td>48px</td>
284+
</tr>
285+
</tbody>
286+
</DxcTable>
287+
</DxcStack>
288+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-style-guide/blob/master/website/screens/principles/spacing/SpacingPage.tsx" />
289+
</DxcStack>
290+
</PageLayout>
291+
);
292+
};
293+
294+
export default Spacing;

‎website/screens/principles/spacing/images/spacing_overview.png‎

15.9 KB
Loading

‎website/screens/principles/spacing/images/spacing_padding.png‎

23.4 KB
Loading

‎website/screens/principles/spacing/images/spacing_types.png‎

15.4 KB
Loading

0 commit comments

Comments
 (0)