Skip to content

Commit 5d7b44f

Browse files
JialeclJialecl
authored
Merge pull request #2237 from dxc-technology/Mil4n0r/tokens-application-layout
ApplicationLayout redesign
2 parents b721d1e + e546b85 commit 5d7b44f

File tree

16 files changed

+356
-362
lines changed

16 files changed

+356
-362
lines changed

‎apps/website/pages/components/application-layout/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
4+
import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Application layout code — Halstack Design System</title>
10+
</Head>
11+
<ApplicationLayoutCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/application-layout/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
4-
import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
4+
import ApplicationLayoutOverviewPage from "screens/components/application-layout/overview/ApplicationLayoutOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Application layout — Halstack Design System</title>
11-
</Head>
12-
<ApplicationLayoutCodePage></ApplicationLayoutCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Application layout — Halstack Design System</title>
10+
</Head>
11+
<ApplicationLayoutOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/application-layout/specifications.tsx‎

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

‎apps/website/pages/components/application-layout/usage.tsx‎

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

‎apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@ import { ReactNode } from "react";
66

77
const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/application-layout" },
10-
{ label: "Usage", path: "/components/application-layout/usage" },
11-
{
12-
label: "Specifications",
13-
path: "/components/application-layout/specifications",
14-
},
9+
{ label: "Overview", path: "/components/application-layout" },
10+
{ label: "Code", path: "/components/application-layout/code" },
1511
];
1612

1713
return (
@@ -20,9 +16,10 @@ const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) =>
2016
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
2117
<ComponentHeading name="Application Layout" />
2218
<DxcParagraph>
23-
The application layout provides a base UI wrapper for any application built with Halstack.
19+
The Application Layout is the foundational UI wrapper for any application built with Halstack. It ensures
20+
structural consistency and integrates key layout.
2421
</DxcParagraph>
25-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2623
</DxcFlex>
2724
</PageHeading>
2825
{children}

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

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -18,37 +18,44 @@ const ApplicationLayoutPropsTable = () => (
1818
</thead>
1919
<tbody>
2020
<tr>
21-
<td>visibilityToggleLabel</td>
2221
<td>
23-
<TableCode>string</TableCode>
22+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
23+
<StatusBadge status="required" />
24+
children
25+
</DxcFlex>
26+
</td>
27+
<td>
28+
<TableCode>React.ReactNode</TableCode>
29+
</td>
30+
<td>
31+
Use the <Code>DxcApplicationLayout.Main</Code> provided to render main content.
2432
</td>
25-
<td>Text to be placed next to the hamburger button that toggles the visibility of the sidenav.</td>
2633
<td>-</td>
2734
</tr>
2835
<tr>
29-
<td>header</td>
36+
<td>footer</td>
3037
<td>
3138
<TableCode>React.ReactNode</TableCode>
3239
</td>
3340
<td>
34-
Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
35-
the default header will be shown. Please check the Header documentation{" "}
36-
<Link href="/components/header" passHref legacyBehavior>
41+
Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
42+
the default header will be shown. Please check the Footer documentation{" "}
43+
<Link href="/components/footer" passHref legacyBehavior>
3744
<DxcLink>here</DxcLink>
3845
</Link>
3946
.
4047
</td>
4148
<td>-</td>
4249
</tr>
4350
<tr>
44-
<td>footer</td>
51+
<td>header</td>
4552
<td>
4653
<TableCode>React.ReactNode</TableCode>
4754
</td>
4855
<td>
49-
Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
50-
the default header will be shown. Please check the Footer documentation{" "}
51-
<Link href="/components/footer" passHref legacyBehavior>
56+
Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
57+
the default header will be shown. Please check the Header documentation{" "}
58+
<Link href="/components/header" passHref legacyBehavior>
5259
<DxcLink>here</DxcLink>
5360
</Link>
5461
.
@@ -70,18 +77,11 @@ const ApplicationLayoutPropsTable = () => (
7077
<td>-</td>
7178
</tr>
7279
<tr>
80+
<td>visibilityToggleLabel</td>
7381
<td>
74-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
75-
<StatusBadge status="required" />
76-
children
77-
</DxcFlex>
78-
</td>
79-
<td>
80-
<TableCode>React.ReactNode</TableCode>
81-
</td>
82-
<td>
83-
Use the <Code>DxcApplicationLayout.Main</Code> provided to render main content.
82+
<TableCode>string</TableCode>
8483
</td>
84+
<td>Text to be placed next to the hamburger button that toggles the visibility of the sidenav.</td>
8585
<td>-</td>
8686
</tr>
8787
</tbody>
@@ -172,15 +172,13 @@ const sections = [
172172
},
173173
];
174174

175-
const ApplicationLayoutCodePage = () => {
176-
return (
177-
<DxcFlex direction="column" gap="4rem">
178-
<QuickNavContainerLayout>
179-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
180-
</QuickNavContainerLayout>
181-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
182-
</DxcFlex>
183-
);
184-
};
175+
const ApplicationLayoutCodePage = () => (
176+
<DxcFlex direction="column" gap="4rem">
177+
<QuickNavContainerLayout>
178+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
179+
</QuickNavContainerLayout>
180+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
181+
</DxcFlex>
182+
);
185183

186184
export default ApplicationLayoutCodePage;

0 commit comments

Comments
 (0)