Skip to content

Commit 88d53c5

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2203 from dxc-technology/gomezivann/grid-tokens
Grid redesign
2 parents 4d8b88b + dfd2bed commit 88d53c5

File tree

19 files changed

+525
-544
lines changed

19 files changed

+525
-544
lines changed

‎apps/website/pages/components/grid/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 GridPageLayout from "screens/components/grid/GridPageLayout";
4+
import GridCodePage from "screens/components/grid/code/GridCodePage";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Grid code — Halstack Design System</title>
10+
</Head>
11+
<GridCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <GridPageLayout>{page}</GridPageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/grid/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 GridPageLayout from "screens/components/grid/GridPageLayout";
4-
import GridCodePage from "screens/components/grid/code/GridCodePage";
4+
import GridOverviewPage from "screens/components/grid/overview/GridOverviewPage";
55

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

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

2117
export default Index;

‎apps/website/pages/components/grid/specifications.tsx‎

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

‎apps/website/pages/components/grid/usage.tsx‎

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

‎apps/website/screens/common/QuickNavContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
3131

3232
const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
3333
<MainContainer>
34-
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
34+
<DxcGrid gap="var(--spacing-gap-xl)" templateColumns={["minmax(0, 1fr)"]}>
3535
{sections.map((section) => (
3636
<Section
3737
key={`section-${section.title}`}

‎apps/website/screens/components/dialog/code/examples/withContent.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const code = `() => {
2222
<DxcInset space="1.5rem">
2323
<DxcGrid gap="2rem">
2424
<DxcHeading level={2} text="Delivery address" weight="normal" />
25-
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
25+
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="var(--spacing-gap-ml)">
2626
<DxcTextInput label="Street" size="fillParent" />
2727
<DxcTextInput label="City" size="fillParent" />
2828
<DxcGrid.Item column={{ start: 1, end: 3 }}>

‎apps/website/screens/components/flex/FlexPageLayout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => {
1616
<DxcFlex direction="column" gap="2rem">
1717
<ComponentHeading name="Flex" />
1818
<DxcParagraph>
19-
The flex component allows users to build flexible box module based layouts. It serves as a technical
20-
component that abstracts users from working directly with CSS flexible box layout and helps them write more
21-
semantic layouts.
19+
The flex component allows building flexible box module based layouts. It serves as a technical component
20+
that abstracts users from working directly with CSS flexible box layout and helps them write more semantic
21+
layouts.
2222
</DxcParagraph>
2323
<TabsPageHeading tabs={tabs} />
2424
</DxcFlex>

‎apps/website/screens/components/flex/code/FlexCodePage.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,23 @@ import TableCode, { ExtendedTableCode } from "@/common/TableCode";
1010
import StatusBadge from "@/common/StatusBadge";
1111

1212
const gapTypeString = `{
13-
rowGap: string;
14-
columnGap: string
13+
columnGap: string;
14+
rowGap: string;
1515
}`;
1616

1717
const sections = [
1818
{
1919
title: "Props",
2020
content: (
2121
<DxcTable>
22-
<tr>
23-
<th>Name</th>
24-
<th>Type</th>
25-
<th>Description</th>
26-
<th>Default</th>
27-
</tr>
22+
<thead>
23+
<tr>
24+
<th>Name</th>
25+
<th>Type</th>
26+
<th>Description</th>
27+
<th>Default</th>
28+
</tr>
29+
</thead>
2830
<tbody>
2931
<tr>
3032
<td>alignContent</td>

‎apps/website/screens/components/flex/overview/FlexOverviewPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const sections = [
2424
),
2525
},
2626
{
27-
title: "The flexible box layout module",
27+
title: "The flexible box layout",
2828
content: (
2929
<>
3030
<DxcParagraph>

‎apps/website/screens/components/grid/GridPageLayout.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
1+
import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
22
import PageHeading from "@/common/PageHeading";
33
import TabsPageHeading from "@/common/TabsPageLayout";
44
import ComponentHeading from "@/common/ComponentHeading";
55
import { ReactNode } from "react";
66

77
const GridPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/grid" },
10-
{ label: "Usage", path: "/components/grid/usage" },
11-
{ label: "Specifications", path: "/components/grid/specifications" },
9+
{ label: "Overview", path: "/components/grid" },
10+
{ label: "Code", path: "/components/grid/code" },
1211
];
1312

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

0 commit comments

Comments
 (0)