Skip to content

Grid redesign #2203

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
Mil4n0r merged 4 commits into from
Apr 1, 2025
Merged

Grid redesign #2203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc9fc62
Grid redesign
GomezIvann Mar 31, 2025
a4424b9
Grid stories updated
GomezIvann Mar 31, 2025
c40e446
Replacing gap values with design tokens
GomezIvann Mar 31, 2025
dfd2bed
Grid documentation updates
GomezIvann Mar 31, 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/grid/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 GridPageLayout from "screens/components/grid/GridPageLayout";
import GridCodePage from "screens/components/grid/code/GridCodePage";

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

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

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/grid/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 GridPageLayout from "screens/components/grid/GridPageLayout";
import GridCodePage from "screens/components/grid/code/GridCodePage";
import GridOverviewPage from "screens/components/grid/overview/GridOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Grid — Halstack Design System</title>
</Head>
<GridCodePage></GridCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Grid — Halstack Design System</title>
</Head>
<GridOverviewPage />
</>
);

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

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

This file was deleted.

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

This file was deleted.

2 changes: 1 addition & 1 deletion apps/website/screens/common/QuickNavContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {

const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
<MainContainer>
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
<DxcGrid gap="var(--spacing-gap-xl)" templateColumns={["minmax(0, 1fr)"]}>
{sections.map((section) => (
<Section
key={`section-${section.title}`}
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/dialog/code/examples/withContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const code = `() => {
<DxcInset space="1.5rem">
<DxcGrid gap="2rem">
<DxcHeading level={2} text="Delivery address" weight="normal" />
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="var(--spacing-gap-ml)">
<DxcTextInput label="Street" size="fillParent" />
<DxcTextInput label="City" size="fillParent" />
<DxcGrid.Item column={{ start: 1, end: 3 }}>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/screens/components/flex/FlexPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Flex" />
<DxcParagraph>
The flex component allows users to build flexible box module based layouts. It serves as a technical
component that abstracts users from working directly with CSS flexible box layout and helps them write more
semantic layouts.
The flex component allows building flexible box module based layouts. It serves as a technical component
that abstracts users from working directly with CSS flexible box layout and helps them write more semantic
layouts.
</DxcParagraph>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
Expand Down
18 changes: 10 additions & 8 deletions apps/website/screens/components/flex/code/FlexCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,23 @@ import TableCode, { ExtendedTableCode } from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";

const gapTypeString = `{
rowGap: string;
columnGap: string
columnGap: string;
rowGap: string;
}`;

const sections = [
{
title: "Props",
content: (
<DxcTable>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>alignContent</td>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const sections = [
),
},
{
title: "The flexible box layout module",
title: "The flexible box layout",
content: (
<>
<DxcParagraph>
Expand Down
18 changes: 7 additions & 11 deletions apps/website/screens/components/grid/GridPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import { ReactNode } from "react";

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

return (
Expand All @@ -17,14 +16,11 @@ const GridPageHeading = ({ children }: { children: ReactNode }) => {
<DxcFlex direction="column" gap="2rem">
<ComponentHeading name="Grid" />
<DxcParagraph>
Grid allows users to build applications based on{" "}
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">
CSS Grid Layout
</DxcLink>
. It is a technical component that abstracts users from working directly with CSS Grid properties and allows
them to write more consistent and semantic layouts.
The grid component allows building applications based on the CSS grid layout module. It is a technical
component that abstracts users from working directly with grid properties and allows them to write more
consistent and semantic layouts.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
Loading