Skip to content

Commit 40256f4

Browse files
aidamagaidamag
authored
Merge pull request #1229 from dxc-technology/rarrojolopez-update-site
Updating layout components documentation in website
2 parents a9a8f43 + 23555b9 commit 40256f4

File tree

14 files changed

+180
-220
lines changed

14 files changed

+180
-220
lines changed

‎website/pages/components/paragraph/specifications.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import ParagraphPageLayout from "../../../screens/components/paragraph/ParagraphPageLayout";
4-
import ParagraphSpecsPage from "../../../screens/components/paragraph/specifications/ParagraphSpecsPage";
4+
import ParagraphSpecsPage from "../../../screens/components/paragraph/specs/ParagraphSpecsPage";
55

66
const Specifications = () => {
77
return (

‎website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx‎

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ import {
77
import DocFooter from "@/common/DocFooter";
88
import QuickNavContainer from "@/common/QuickNavContainer";
99
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
10-
import Example from "@/common/example/Example";
1110
import Link from "next/link";
12-
import basicUsage from "./examples/basicUsage";
13-
import withSidenav from "./examples/withSideNav";
14-
import customHeaderFooter from "./examples/customHeaderFooter";
1511
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
1612

1713
const ApplicationLayoutPropsTable = () => (
@@ -32,36 +28,49 @@ const ApplicationLayoutPropsTable = () => (
3228
visibility of the sidenav.
3329
</td>
3430
</tr>
35-
</tbody>
36-
</DxcTable>
37-
);
38-
39-
const SidenavApplicationLayoutPropsTable = () => (
40-
<DxcTable>
41-
<thead>
4231
<tr>
43-
<th>Name</th>
44-
<th>Default</th>
45-
<HeaderDescriptionCell>Description</HeaderDescriptionCell>
32+
<td>header: node</td>
33+
<td></td>
34+
<td>
35+
Header of the application layout shown at the top of the screen. It is
36+
optional and if it is not specified, the default header will be shown.
37+
Please check the Header documentation{" "}
38+
<Link href="/components/header" passHref>
39+
<DxcLink>here</DxcLink>
40+
</Link>
41+
.
42+
</td>
43+
</tr>
44+
<tr>
45+
<td>footer: node</td>
46+
<td></td>
47+
<td>
48+
Footer of the application layout shown at the bottom of the screen. It
49+
is optional and if it is not specified, the default header will be
50+
shown. Please check the Footer documentation{" "}
51+
<Link href="/components/footer" passHref>
52+
<DxcLink>here</DxcLink>
53+
</Link>
54+
.
55+
</td>
4656
</tr>
47-
</thead>
48-
<tbody>
4957
<tr>
50-
<td>padding: string | object</td>
58+
<td>sidenav: node</td>
5159
<td></td>
5260
<td>
53-
Size of the padding to be applied to the custom area ('xxsmall' |
54-
'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You
55-
can pass an object with 'top', 'bottom', 'left' and 'right' properties
56-
in order to specify different padding sizes.
61+
Sidenav of the application layout shown at the left side of the
62+
screen. Please check the Sidenav documentation{" "}
63+
<Link href="/components/sidenav" passHref>
64+
<DxcLink>here</DxcLink>
65+
</Link>
66+
.
5767
</td>
5868
</tr>
5969
<tr>
60-
<td>children: React.ReactNode</td>
70+
<td>children: node</td>
6171
<td></td>
6272
<td>
63-
The area inside the sidenav. This area can be used to render custom
64-
content.
73+
Use the DxcApplicationLayout.Main provided to render main content.
6574
</td>
6675
</tr>
6776
</tbody>
@@ -76,53 +85,6 @@ const sections = [
7685
title: "DxcApplicationLayout",
7786
content: <ApplicationLayoutPropsTable />,
7887
},
79-
{
80-
title: "DxcApplicationLayout.Header",
81-
content: (
82-
<DxcParagraph>
83-
Everything between this tags will be displayed as a header, at the
84-
top of the screen. If you want to show a{" "}
85-
<Link href="/components/header" passHref>
86-
<DxcLink>DxcHeader</DxcLink>
87-
</Link>
88-
, as a shortcut, you can use it as a direct child of the
89-
DxcApplicationLayout without the tags. This is optional and if it is
90-
not specified, the DxcHeader will be shown by default.
91-
</DxcParagraph>
92-
),
93-
},
94-
{
95-
title: "DxcApplicationLayout.Footer",
96-
content: (
97-
<DxcParagraph>
98-
Everything between the tags will be displayed as a footer, at the
99-
bottom of the screen. If you want to show a{" "}
100-
<Link href="/components/footer" passHref>
101-
<DxcLink>DxcFooter</DxcLink>
102-
</Link>
103-
, as a shortcut, you can use it as a direct child of the
104-
DxcApplicationLayout without the tags. This is optional and if it is
105-
not specified, the DxcFooter will be shown by default.
106-
</DxcParagraph>
107-
),
108-
},
109-
{
110-
title: "DxcApplicationLayout.Sidenav",
111-
content: (
112-
<DxcParagraph>
113-
Everything between the tags will be displayed as the content of the
114-
sidenav, positioned on the left side of the screen, between the
115-
header and the footer. This is optional and if it is not specified,
116-
the DxcSidenav will not be shown.
117-
</DxcParagraph>
118-
),
119-
subSections: [
120-
{
121-
title: "Props",
122-
content: <SidenavApplicationLayoutPropsTable />,
123-
},
124-
],
125-
},
12688
{
12789
title: "DxcApplicationLayout.Main",
12890
content: (
@@ -150,16 +112,56 @@ const sections = [
150112
subSections: [
151113
{
152114
title: "Basic usage",
153-
content: <Example example={basicUsage} actionsVisible={false} />,
115+
content: (
116+
<iframe
117+
src="https://codesandbox.io/embed/basic-usage-pi619r?fontsize=14&hidenavigation=1&theme=dark"
118+
style={{
119+
width: "100%",
120+
minHeight: "500px",
121+
border: "0",
122+
borderRadius: "4px",
123+
overflow: "hidden",
124+
}}
125+
title="Basic usage"
126+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
127+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
128+
></iframe>
129+
),
154130
},
155131
{
156132
title: "With sidenav",
157-
content: <Example example={withSidenav} actionsVisible={false} />,
133+
content: (
134+
<iframe
135+
src="https://codesandbox.io/embed/with-sidenav-xce9s2?fontsize=14&hidenavigation=1&theme=dark"
136+
style={{
137+
width: "100%",
138+
minHeight: "500px",
139+
border: "0",
140+
borderRadius: "4px",
141+
overflow: "hidden",
142+
}}
143+
title="With sidenav"
144+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
145+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
146+
></iframe>
147+
),
158148
},
159149
{
160150
title: "Custom header and footer",
161151
content: (
162-
<Example example={customHeaderFooter} actionsVisible={false} />
152+
<iframe
153+
src="https://codesandbox.io/embed/custom-footer-and-header-lt3gkv?fontsize=14&hidenavigation=1&theme=dark"
154+
style={{
155+
width: "100%",
156+
minHeight: "500px",
157+
border: "0",
158+
borderRadius: "4px",
159+
overflow: "hidden",
160+
}}
161+
title="Custom footer and header"
162+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
163+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
164+
></iframe>
163165
),
164166
},
165167
],

‎website/screens/components/application-layout/code/examples/basicUsage.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎website/screens/components/application-layout/code/examples/customHeaderFooter.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎website/screens/components/application-layout/code/examples/withSideNav.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎website/screens/components/footer/FooterPageLayout.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
1+
import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
44
import ComponentHeading from "@/common/ComponentHeading";
5+
import Link from "next/link";
56

67
const FooterPageHeading = ({ children }: { children: React.ReactNode }) => {
78
const tabs = [
@@ -20,10 +21,18 @@ const FooterPageHeading = ({ children }: { children: React.ReactNode }) => {
2021
appear at the bottom and it is the last thing that the user
2122
interacts with. But the presence of the footer must be designed in
2223
every application and be part of it (consumer or back-office) as it
23-
is a key layout element to the overall experience. Is a choice of
24+
is a key layout element to the overall experience. It is a choice of
2425
the designer to either leave the footer visible by default or push
2526
it down, depending on the use case.
2627
</DxcParagraph>
28+
<DxcParagraph>
29+
The footer is part of the application layout, so it can only be used
30+
inside of it. Please check the{" "}
31+
<Link href="/components/application-layout" passHref>
32+
<DxcLink>DxcApplicationLayout</DxcLink>
33+
</Link>{" "}
34+
documentation.
35+
</DxcParagraph>
2736
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2837
</DxcFlex>
2938
</PageHeading>

‎website/screens/components/footer/code/FooterCodePage.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,29 @@ const sections = [
102102
</DxcTable>
103103
),
104104
},
105+
{
106+
title: "Examples",
107+
subSections: [
108+
{
109+
title: "Footer in application layout",
110+
content: (
111+
<iframe
112+
src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
113+
style={{
114+
width: "100%",
115+
minHeight: "500px",
116+
border: "0",
117+
borderRadius: "4px",
118+
overflow: "hidden",
119+
}}
120+
title="Footer and header"
121+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
122+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
123+
></iframe>
124+
),
125+
},
126+
],
127+
},
105128
];
106129

107130
const FooterCodePage = () => {

‎website/screens/components/footer/usage/FooterUsagePage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const sections = [
1212
title: "Usage",
1313
content: (
1414
<>
15+
{/* <Example example={usage} /> */}
1516
<DxcBulletedList>
1617
<DxcBulletedList.Item>
1718
The footer frame should be docked at the bottom of the page and
@@ -40,6 +41,7 @@ const sections = [
4041
title: "Content",
4142
content: (
4243
<>
44+
{/* <Example example={content} /> */}
4345
<DxcParagraph>
4446
The footer component has a custom area where many kinds of content can
4547
be placed, some of them are contemplated in the following list:

‎website/screens/components/header/HeaderPageLayout.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
1+
import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
44
import ComponentHeading from "@/common/ComponentHeading";
5+
import Link from "next/link";
56

67
const HeaderPageHeading = ({ children }: { children: React.ReactNode }) => {
78
const tabs = [
@@ -21,6 +22,14 @@ const HeaderPageHeading = ({ children }: { children: React.ReactNode }) => {
2122
users understand what the content of the page is about. They appear
2223
at the top of a page, above the main content.
2324
</DxcParagraph>
25+
<DxcParagraph>
26+
The header is part of the application layout, so it can only be used
27+
inside of it. Please check the{" "}
28+
<Link href="/components/application-layout" passHref>
29+
<DxcLink>DxcApplicationLayout</DxcLink>
30+
</Link>{" "}
31+
documentation.
32+
</DxcParagraph>
2433
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2534
</DxcFlex>
2635
</PageHeading>

‎website/screens/components/header/code/HeaderCodePage.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,29 @@ const sections = [
113113
},
114114
],
115115
},
116+
{
117+
title: "Examples",
118+
subSections: [
119+
{
120+
title: "Header in application layout",
121+
content: (
122+
<iframe
123+
src="https://codesandbox.io/embed/rough-https-9oduyh?fontsize=14&hidenavigation=1&theme=dark"
124+
style={{
125+
width: "100%",
126+
minHeight: "500px",
127+
border: "0",
128+
borderRadius: "4px",
129+
overflow: "hidden",
130+
}}
131+
title="Footer and header"
132+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
133+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
134+
></iframe>
135+
),
136+
},
137+
],
138+
},
116139
];
117140

118141
const HeaderCodePage = () => {

0 commit comments

Comments
 (0)