Skip to content

ApplicationLayout redesign #2237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 8 commits into from
Jun 16, 2025
Merged

ApplicationLayout redesign #2237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
34d2ca1
Modified most of the application layout tokens
Apr 15, 2025
2a2f8b3
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
May 29, 2025
c98827b
Added implementation using new tokens architecture
Jun 2, 2025
881ab39
Added documentation with new structure
Jun 10, 2025
540aa8c
Fixed format
Jun 10, 2025
c0d617f
Fixed format
Jun 10, 2025
74c591e
Merge branch 'master' into Mil4n0r/tokens-application-layout
Jialecl Jun 13, 2025
e546b85
Overview links corrected
Jialecl Jun 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/application-layout/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";

const Code = () => (
<>
<Head>
<title>Application layout code — Halstack Design System</title>
</Head>
<ApplicationLayoutCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <ApplicationLayoutPageLayout>{page}</ApplicationLayoutPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/application-layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import ApplicationLayoutPageLayout from "screens/components/application-layout/ApplicationLayoutPageLayout";
import ApplicationLayoutCodePage from "screens/components/application-layout/code/ApplicationLayoutCodePage";
import ApplicationLayoutOverviewPage from "screens/components/application-layout/overview/ApplicationLayoutOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Application layout — Halstack Design System</title>
</Head>
<ApplicationLayoutCodePage></ApplicationLayoutCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Application layout — Halstack Design System</title>
</Head>
<ApplicationLayoutOverviewPage />
</>
);

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

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/application-layout/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/application-layout/usage.tsx
View file
Open in desktop

This file was deleted.

13 changes: 5 additions & 8 deletions apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,8 @@ import { ReactNode } from "react";

const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/application-layout" },
{ label: "Usage", path: "/components/application-layout/usage" },
{
label: "Specifications",
path: "/components/application-layout/specifications",
},
{ label: "Overview", path: "/components/application-layout" },
{ label: "Code", path: "/components/application-layout/code" },
];

return (
Expand All @@ -20,9 +16,10 @@ const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) =>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Application Layout" />
<DxcParagraph>
The application layout provides a base UI wrapper for any application built with Halstack.
The Application Layout is the foundational UI wrapper for any application built with Halstack. It ensures
structural consistency and integrates key layout.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
60 changes: 29 additions & 31 deletions apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,44 @@ const ApplicationLayoutPropsTable = () => (
</thead>
<tbody>
<tr>
<td>visibilityToggleLabel</td>
<td>
<TableCode>string</TableCode>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Use the <Code>DxcApplicationLayout.Main</Code> provided to render main content.
</td>
<td>Text to be placed next to the hamburger button that toggles the visibility of the sidenav.</td>
<td>-</td>
</tr>
<tr>
<td>header</td>
<td>footer</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
the default header will be shown. Please check the Header documentation{" "}
<Link href="/components/header" passHref legacyBehavior>
Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
the default header will be shown. Please check the Footer documentation{" "}
<Link href="/components/footer" passHref legacyBehavior>
<DxcLink>here</DxcLink>
</Link>
.
</td>
<td>-</td>
</tr>
<tr>
<td>footer</td>
<td>header</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified,
the default header will be shown. Please check the Footer documentation{" "}
<Link href="/components/footer" passHref legacyBehavior>
Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
the default header will be shown. Please check the Header documentation{" "}
<Link href="/components/header" passHref legacyBehavior>
<DxcLink>here</DxcLink>
</Link>
.
Expand All @@ -70,18 +77,11 @@ const ApplicationLayoutPropsTable = () => (
<td>-</td>
</tr>
<tr>
<td>visibilityToggleLabel</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Use the <Code>DxcApplicationLayout.Main</Code> provided to render main content.
<TableCode>string</TableCode>
</td>
<td>Text to be placed next to the hamburger button that toggles the visibility of the sidenav.</td>
<td>-</td>
</tr>
</tbody>
Expand Down Expand Up @@ -172,15 +172,13 @@ const sections = [
},
];

const ApplicationLayoutCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
</DxcFlex>
);
};
const ApplicationLayoutCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
</DxcFlex>
);

export default ApplicationLayoutCodePage;
Loading