Skip to content

Container redesign #2166

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
GomezIvann merged 10 commits into from
Mar 26, 2025
Merged

Container redesign #2166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
bb2816f
Reimplementation of the Container component with new CSS variables
Feb 10, 2025
b42b51b
Prepared structure for new documentation
Feb 19, 2025
7aab3b8
Container doc updates
GomezIvann Mar 19, 2025
bf87600
Small fixes
Mar 25, 2025
abef877
Fixed tokens for stories
Mar 25, 2025
259dd47
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
Mar 25, 2025
1c3e2c0
Container doc updates
GomezIvann Mar 26, 2025
2c6c593
Merge branch 'Mil4n0r/tokens-container' of https://github.com/dxc-tec…
GomezIvann Mar 26, 2025
29556bc
Merge branch 'Mil4n0r/tokens-container' of github.com:dxc-technology/…
Mar 26, 2025
426ac1a
Improved readability and did minor syntax problems
Mar 26, 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/container/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 ContainerCodePage from "screens/components/container/code/ContainerCodePage";
import ContainerPageLayout from "screens/components/container/ContainerPageLayout";

const Code = () => (
<>
<Head>
<title>Container code — Halstack Design System</title>
</Head>
<ContainerCodePage />
</>
);

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

export default Code;
26 changes: 11 additions & 15 deletions apps/website/pages/components/container/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 ContainerCodePage from "screens/components/container/code/ContainerCodePage";
import ContainerOverviewPage from "screens/components/container/overview/ContainerOverviewPage";
import ContainerPageLayout from "screens/components/container/ContainerPageLayout";

const Usage = () => {
return (
<>
<Head>
<title>Container — Halstack Design System</title>
</Head>
<ContainerCodePage></ContainerCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Container — Halstack Design System</title>
</Head>
<ContainerOverviewPage />
</>
);

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

export default Usage;
export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/container/usage.tsx
View file
Open in desktop

This file was deleted.

10 changes: 4 additions & 6 deletions apps/website/screens/components/container/ContainerPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { ReactNode } from "react";

const ContainerPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/container" },
{ label: "Usage", path: "/components/container/usage" },
{ label: "Overview", path: "/components/container" },
{ label: "Code", path: "/components/container/code" },
];

return (
Expand All @@ -16,11 +16,9 @@ const ContainerPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Container" />
<DxcParagraph>
The container component represents the box model inside the Halstack Design System. Is a general-purpose
container that allows for controlled use of our design tokens. Being generic in nature can be "over-used",
so it's important to consider situations where more specific and expressive components could be used.
The container component represents the box model inside the Halstack Design System.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/container/code/ContainerCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,15 +427,13 @@ const sections = [
},
];

const ContainerCodePage = () => {
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/container/code/ContainerCodePage.tsx" />
</DxcFlex>
);
};
const ContainerCodePage = () => (
<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/container/code/ContainerCodePage.tsx" />
</DxcFlex>
);

export default ContainerCodePage;
138 changes: 138 additions & 0 deletions apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcInset } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Link from "next/link";

const sections = [
{
title: "Introduction",
content: (
<>
<DxcParagraph>
The Halstack's container component provides a structured way to manage layout and spacing within the Halstack
Design System. It allows for controlled use of design tokens such as spacing, borders, and shadows, ensuring
consistency across the UI.
</DxcParagraph>
<DxcParagraph>
Being generic in nature, it can be overused, so it's important to consider situations where more specific and
expressive components could be used.
</DxcParagraph>
</>
),
},
{
title: "The box model",
content: (
<>
<DxcParagraph>
Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex
layouts for your application.
</DxcParagraph>
<DxcParagraph>
Below, we share a series of essential links to help you understand and use the container component correctly.
If you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
</DxcParagraph>
<DxcBulletedList>
<DxcBulletedList.Item>
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model" newWindow>
MDN web docs: CSS box model
</DxcLink>
<DxcInset top="0.5rem" bottom="0.5rem">
<DxcBulletedList type="circle">
<DxcBulletedList.Item>
<DxcLink
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders"
newWindow
>
Backgrounds and borders
</DxcLink>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<DxcLink
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content"
newWindow
>
Overflowing content
</DxcLink>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<DxcLink
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS"
newWindow
>
Sizing items in CSS
</DxcLink>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<DxcLink href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning" newWindow>
Positioning
</DxcLink>
</DxcBulletedList.Item>
</DxcBulletedList>
</DxcInset>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<DxcLink href="https://web.dev/learn/css/box-model" newWindow>
Google web.dev: Box model
</DxcLink>
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Best practices",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Use a container to group and organize related content within a specific section of a page or layout.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Set size, spacing, and margins that are consistent by applying the box model properties.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Control the depth of the different elements of your UI by customizing the container's box shadow.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Customize border styles of the container to match the rest of your interface design.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>
Don't use the container to build components without first ensuring that there isn't a more specific,
semantic Halstack component that could be used instead.
</strong>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>
Don't use the container to create complex layouts when more suitable components are available.
</strong>{" "}
Use the{" "}
<Link href="/components/flex" passHref legacyBehavior>
<DxcLink>flex</DxcLink>
</Link>{" "}
and{" "}
<Link href="/components/grid" passHref legacyBehavior>
<DxcLink>grid</DxcLink>
</Link>{" "}
components to create those layouts.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Whenever possible, <strong>try to use the design tokens</strong> provided by the Halstack Design System, even
though the component allows any value.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const ContainerOverviewPage = () => (
<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/container/overview/ContainerOverviewPage.tsx" />
</DxcFlex>
);

export default ContainerOverviewPage;
0 ...ainer/usage/examples/alternateBoxModel.ts → ...er/overview/examples/alternateBoxModel.ts
View file
Open in desktop
File renamed without changes.
0 ...ntainer/usage/examples/defaultBoxModel.ts → ...iner/overview/examples/defaultBoxModel.ts
View file
Open in desktop
File renamed without changes.
135 changes: 0 additions & 135 deletions apps/website/screens/components/container/usage/ContainerUsagePage.tsx
View file
Open in desktop

This file was deleted.

Loading