Skip to content

Commit 8df583a

Browse files
JialeclJialecl
authored
Merge pull request #1678 from dxc-technology/gomezivann/grid-usage-specs
Added Usage and Specifications pages of the Grid component
2 parents bd47c58 + 2333500 commit 8df583a

File tree

10 files changed

+363
-191
lines changed

10 files changed

+363
-191
lines changed

‎website/package-lock.json‎

Lines changed: 168 additions & 168 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import GridPageLayout from "../../../screens/components/grid/GridPageLayout";
4+
import GridSpecsPage from "../../../screens/components/grid/specs/GridSpecsPage";
5+
6+
const Specifications = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Grid Specs — Halstack Design System</title>
11+
</Head>
12+
<GridSpecsPage></GridSpecsPage>
13+
</>
14+
);
15+
};
16+
17+
Specifications.getLayout = function getLayout(page: ReactElement) {
18+
return <GridPageLayout>{page}</GridPageLayout>;
19+
};
20+
21+
export default Specifications;

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import GridPageLayout from "../../../screens/components/grid/GridPageLayout";
4+
import GridUsagePage from "../../../screens/components/grid/usage/GridUsagePage";
5+
6+
const Usage = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Grid Usage — Halstack Design System</title>
11+
</Head>
12+
<GridUsagePage></GridUsagePage>
13+
</>
14+
);
15+
};
16+
17+
Usage.getLayout = function getLayout(page: ReactElement) {
18+
return <GridPageLayout>{page}</GridPageLayout>;
19+
};
20+
21+
export default Usage;

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import TabsPageHeading from "@/common/TabsPageLayout";
44
import ComponentHeading from "@/common/ComponentHeading";
55

66
const GridPageHeading = ({ children }: { children: React.ReactNode }) => {
7-
const tabs = [{ label: "Code", path: "/components/grid" }];
7+
const tabs = [
8+
{ label: "Code", path: "/components/grid" },
9+
{ label: "Usage", path: "/components/grid/usage" },
10+
{ label: "Specifications", path: "/components/grid/specifications" },
11+
];
812

913
return (
1014
<DxcFlex direction="column" gap="3rem">
@@ -19,9 +23,9 @@ const GridPageHeading = ({ children }: { children: React.ReactNode }) => {
1923
>
2024
CSS Grid Layout
2125
</DxcLink>
22-
. It is a technical component that abstracts users from
23-
working directly with CSS Grid properties and allows them to write
24-
more consistent and semantic layouts.
26+
. It is a technical component that abstracts users from working
27+
directly with CSS Grid properties and allows them to write more
28+
consistent and semantic layouts.
2529
</DxcParagraph>
2630
<TabsPageHeading tabs={tabs}></TabsPageHeading>
2731
</DxcFlex>

‎website/screens/components/grid/code/GridCodePage.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -191,24 +191,16 @@ const sections = [
191191
content: (
192192
<>
193193
<DxcParagraph>
194-
This compound component should be used when the decision to follow the
195-
Grid layout pattern is assumed only for the parent container. If the
196-
inner layout of a grid item does not make this same compromise and
197-
only features props related to the parent container, then that grid
198-
item should be wrapped with this component.
194+
Compound component representing a child of a grid container. It
195+
provides specific placement controls of how individual items stack or
196+
align within the grid.
199197
</DxcParagraph>
200198
<DxcParagraph>
201-
In case you are building a complex Grid layout with several nested
202-
grid containers, <Code>DxcGrid.Item</Code> becomes very limited
203-
and therefore, you will have to wrap the children with{" "}
204-
<Code>DxcGrid</Code>.
205-
</DxcParagraph>
206-
<DxcParagraph>
207-
So, to fulfil that scenario,{" "}
208199
<strong>
209-
all the <Code>DxcGrid.Item</Code>'s props are also available in{" "}
210-
<Code>DxcGrid</Code>.
211-
</strong>
200+
Every <Code>DxcGrid.Item</Code>'s prop is also available in{" "}
201+
<Code>DxcGrid</Code>
202+
</strong>{" "}
203+
to facilitate the nesting of grid containers.
212204
</DxcParagraph>
213205
</>
214206
),

‎website/screens/components/grid/specs/GridSpecsPage.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { DxcFlex } from "@dxc-technology/halstack-react";
2+
import Figure from "@/common/Figure";
3+
import DocFooter from "@/common/DocFooter";
4+
import Image from "@/common/Image";
5+
import QuickNavContainer from "@/common/QuickNavContainer";
6+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
7+
import gridAutoFlowSpecs from "./images/grid-autoFlow-specs.png";
8+
import gridTemplateSpecs from "./images/grid-templates-specs.png";
9+
10+
11+
const sections = [
12+
{
13+
title: "Specifications",
14+
content: (
15+
<>
16+
<Figure caption="Grid Auto-Flow: Rows, Columns, Rows-Dense">
17+
<Image
18+
src={gridAutoFlowSpecs}
19+
alt="Grid Auto-Flow: Rows, Columns, Rows-Dense"
20+
/>
21+
</Figure>
22+
<Figure caption="Grid Templates: Areas, Rows, Columns">
23+
<Image
24+
src={gridTemplateSpecs}
25+
alt="Grid Templates: Areas, Rows, Columns"
26+
/>
27+
</Figure>
28+
</>
29+
),
30+
},
31+
];
32+
33+
const GridSpecsPage = () => {
34+
return (
35+
<DxcFlex direction="column" gap="4rem">
36+
<QuickNavContainerLayout>
37+
<QuickNavContainer
38+
sections={sections}
39+
startHeadingLevel={2}
40+
></QuickNavContainer>
41+
</QuickNavContainerLayout>
42+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/grid/specs/GridSpecsPage.tsx" />
43+
</DxcFlex>
44+
);
45+
};
46+
47+
export default GridSpecsPage;

‎website/screens/components/grid/specs/images/grid-autoFlow-specs.png‎

8.9 KB
Loading

‎website/screens/components/grid/specs/images/grid-templates-specs.png‎

15.4 KB
Loading

‎website/screens/components/grid/usage/GridUsagePage.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
2+
import DocFooter from "@/common/DocFooter";
3+
import QuickNavContainer from "@/common/QuickNavContainer";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import Code from "@/common/Code";
6+
7+
const sections = [
8+
{
9+
title: "Usage",
10+
content: (
11+
<>
12+
<DxcParagraph>
13+
The Grid component allows for both row and column layouts while
14+
allowing for a lot of flexibility of item placement within the grid
15+
itself.
16+
</DxcParagraph>
17+
</>
18+
),
19+
},
20+
{
21+
title: "Layout, Spacing, and Placement",
22+
content: (
23+
<>
24+
<DxcParagraph>
25+
The layout type can be specified using the <Code>grid-auto-flow</Code>{" "}
26+
property. This property lets you control how the auto-placement
27+
algorithm works, determining exactly how auto-placed items get flowed
28+
into the grid. Use the <Code>gap</Code> property to set the space
29+
between items and the placement properties <Code>placeContent</Code>{" "}
30+
and <Code>placeItems</Code> for more specific controls of how
31+
individual items stack or align within the grid.
32+
</DxcParagraph>
33+
</>
34+
),
35+
},
36+
{
37+
title: "Grid Templates",
38+
content: (
39+
<>
40+
<DxcParagraph>
41+
You can use templates to define grid areas, columns, and rows. The{" "}
42+
<Code>grid-template-areas</Code> property is used to establish cells
43+
within a grid and assign them names.{" "}
44+
<Code>grid-template-columns</Code> defines the line names and track
45+
sizing functions of the grid columns while{" "}
46+
<Code>grid-template-rows</Code> defines the line names and track
47+
sizing functions of the grid columns.
48+
</DxcParagraph>
49+
</>
50+
),
51+
},
52+
{
53+
title: "Grid Items",
54+
content: (
55+
<>
56+
<DxcParagraph>
57+
The Grid items are direct descendants of a grid container. They are
58+
represented by the <Code>DxcGrid.Item</Code> tag and should be used
59+
when the decision to follow the Grid layout pattern is assumed only by
60+
the parent container.
61+
</DxcParagraph>
62+
<DxcParagraph>
63+
In case you are building a complex Grid layout with several nested
64+
grid containers, <Code>DxcGrid.Item</Code> becomes very limited and
65+
therefore, you will have to wrap the children with{" "}
66+
<Code>DxcGrid</Code>.
67+
</DxcParagraph>
68+
</>
69+
),
70+
},
71+
];
72+
73+
const GridUsagePage = () => {
74+
return (
75+
<DxcFlex direction="column" gap="4rem">
76+
<QuickNavContainerLayout>
77+
<QuickNavContainer
78+
sections={sections}
79+
startHeadingLevel={2}
80+
></QuickNavContainer>
81+
</QuickNavContainerLayout>
82+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/grid/usage/GridUsagePage.tsx" />
83+
</DxcFlex>
84+
);
85+
};
86+
87+
export default GridUsagePage;

‎website/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,10 @@
143143
"@babel/helper-validator-identifier" "^7.22.15"
144144
to-fast-properties "^2.0.0"
145145

146-
"@dxc-technology/halstack-react@next":
147-
version "0.0.0-75be8bf"
148-
resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-75be8bf.tgz#34f12532f4c96df3512f3aa87a53cd60d4dd38eb"
149-
integrity sha512-thMdupj+nJ7kHiVya0fKbBSRmXc0tKYlSpU32Bh5jMmOQIOGUcc7gC9g2QbYe/RcyakwfllFS3tNcu7BHDfjmw==
146+
"@dxc-technology/halstack-react@0.0.0-bd47c58":
147+
version "0.0.0-bd47c58"
148+
resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-bd47c58.tgz#6a23f6c876e3e2484a0b556aa2e81899c6d6af95"
149+
integrity sha512-6c1Gvgy9+td4nhcJ+0HBibdWd/FR/grEKIEuu6OV2QtAYH/0jtU8obbIOtz93mDI6wK3kE4rORxqmsMARnQKdQ==
150150
dependencies:
151151
"@radix-ui/react-popover" "0.1.6"
152152
"@types/styled-components" "^5.1.24"

0 commit comments

Comments
 (0)