Skip to content

Commit 31f5239

Browse files
GomezIvannGomezIvann
authored
Merge pull request #2173 from dxc-technology/jialecl-flex-redesign
Flex redesign
2 parents ebf1ceb + 5e7ba7f commit 31f5239

File tree

9 files changed

+365
-406
lines changed

9 files changed

+365
-406
lines changed

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

‎apps/website/pages/components/flex/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 FlexPageLayout from "screens/components/flex/FlexPageLayout";
4-
import FlexCodePage from "screens/components/flex/code/FlexCodePage";
4+
import FlexOverviewPage from "screens/components/flex/overview/FlexOverviewPage";
55

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

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

2117
export default Index;

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

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

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

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

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

Lines changed: 7 additions & 14 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 FlexPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/flex" },
10-
{ label: "Usage", path: "/components/flex/usage" },
11-
{ label: "Specifications", path: "/components/flex/specifications" },
9+
{ label: "Overview", path: "/components/flex" },
10+
{ label: "Code", path: "/components/flex/code" },
1211
];
1312

1413
return (
@@ -17,17 +16,11 @@ const FlexPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Flex" />
1918
<DxcParagraph>
20-
Flex allows users to build{" "}
21-
<DxcLink
22-
newWindow
23-
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
24-
>
25-
Flexible Box Module
26-
</DxcLink>{" "}
27-
based layouts. It serves as a technical component that abstracts users from working directly with CSS
28-
Flexbox and helps them write more semantic layouts.
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.
2922
</DxcParagraph>
30-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
23+
<TabsPageHeading tabs={tabs} />
3124
</DxcFlex>
3225
</PageHeading>
3326
{children}

0 commit comments

Comments
 (0)