Skip to content

Commit 6d9e5bd

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2178 from dxc-technology/gomezivann/tabs-redesign
Tabs redesign
2 parents 31f5239 + 7bf8325 commit 6d9e5bd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+741
-1455
lines changed

‎apps/website/pages/_app.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,8 @@ const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationL
3030
const App = ({ Component, pageProps }: AppPropsWithLayout) => {
3131
const getLayout = Component.getLayout || ((page) => page);
3232
const componentWithLayout = getLayout(<Component {...pageProps} />);
33-
3433
const [filter, setFilter] = useState("");
3534
const { asPath: currentPath } = useRouter();
36-
3735
const filteredLinks = useMemo(() => {
3836
const filtered: LinksSectionDetails[] = [];
3937
LinksSections.map((section) => {
@@ -47,17 +45,10 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
4745
return filtered;
4846
}, [filter]);
4947

50-
const onFilterInputChange = ({ value }: { value: string }) => {
51-
setFilter(value);
52-
};
53-
5448
const matchPaths = (linkPath: string) => {
49+
const desiredPaths = [linkPath, `${linkPath}/code`];
5550
const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
56-
const desiredPaths = [linkPath, `${linkPath}/specifications`, `${linkPath}/usage`];
57-
if (pathToBeMatched) {
58-
return desiredPaths.includes(pathToBeMatched);
59-
}
60-
return false;
51+
return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
6152
};
6253

6354
return (
@@ -77,7 +68,9 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
7768
<DxcTextInput
7869
placeholder="Search docs"
7970
value={filter}
80-
onChange={onFilterInputChange}
71+
onChange={({ value }: { value: string }) => {
72+
setFilter(value);
73+
}}
8174
size="fillParent"
8275
clearable
8376
margin={{

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

‎apps/website/pages/components/tabs/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";
3-
import TabsCodePage from "screens/components/tabs/code/TabsCodePage";
3+
import TabsOverviewPage from "screens/components/tabs/overview/TabsOverviewPage";
44
import TabsPageLayout from "screens/components/tabs/TabsPageLayout";
55

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

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

2117
export default Index;

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

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

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

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

‎apps/website/screens/components/button/overview/ButtonOverviewPage.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ const sections = [
153153
<tbody>
154154
<tr>
155155
<td>
156-
<DxcTypography color="#5f249f" fontWeight="600">
156+
<DxcTypography color="var(--color-bg-primary-strong)" fontWeight="600">
157157
Default
158158
</DxcTypography>
159159
</td>
@@ -164,7 +164,7 @@ const sections = [
164164
</tr>
165165
<tr>
166166
<td>
167-
<DxcTypography color="#d0011b" fontWeight="600">
167+
<DxcTypography color="var(--color-bg-error-strong)" fontWeight="600">
168168
Error
169169
</DxcTypography>
170170
</td>
@@ -175,7 +175,7 @@ const sections = [
175175
</tr>
176176
<tr>
177177
<td>
178-
<DxcTypography color="#0086e6" fontWeight="600">
178+
<DxcTypography color="var(--color-bg-secondary-strong)" fontWeight="600">
179179
Info
180180
</DxcTypography>
181181
</td>
@@ -186,7 +186,7 @@ const sections = [
186186
</tr>
187187
<tr>
188188
<td>
189-
<DxcTypography color="#24a148" fontWeight="600">
189+
<DxcTypography color="var(--color-bg-success-strong)" fontWeight="600">
190190
Success
191191
</DxcTypography>
192192
</td>
@@ -197,7 +197,7 @@ const sections = [
197197
</tr>
198198
<tr>
199199
<td>
200-
<DxcTypography color="#c26c0a" fontWeight="600">
200+
<DxcTypography color="var(--color-bg-warning-strong)" fontWeight="600">
201201
Warning
202202
</DxcTypography>
203203
</td>
@@ -257,7 +257,7 @@ const sections = [
257257
</DxcBulletedList.Item>
258258
<DxcBulletedList.Item>
259259
<strong>Secondary actions:</strong> They can be used for less prominent actions that are not the
260-
primary focus of the user’s interaction.
260+
primary focus of the user's interaction.
261261
</DxcBulletedList.Item>
262262
</DxcBulletedList>
263263
</>
@@ -338,7 +338,7 @@ const sections = [
338338
content: (
339339
<DxcBulletedList>
340340
<DxcBulletedList.Item>
341-
<strong>Avoid ambiguity:</strong> Make sure the button’s purpose is immediately clear. Avoid vague labels
341+
<strong>Avoid ambiguity:</strong> Make sure the button's purpose is immediately clear. Avoid vague labels
342342
like "Click here" or "Go".
343343
</DxcBulletedList.Item>
344344
<DxcBulletedList.Item>
@@ -368,7 +368,7 @@ const sections = [
368368
content: (
369369
<DxcBulletedList>
370370
<DxcBulletedList.Item>
371-
<strong>User-centric language:</strong> Write from the user’s perspective. For actions that the user
371+
<strong>User-centric language:</strong> Write from the user's perspective. For actions that the user
372372
performs, consider using first-person pronouns (e.g., "My profile").
373373
</DxcBulletedList.Item>
374374
<DxcBulletedList.Item>

‎apps/website/screens/components/tabs/TabsPageLayout.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

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

1413
return (
@@ -17,10 +16,11 @@ const TabsPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Tabs" />
1918
<DxcParagraph>
20-
Tabs allow the user to interact across the sections to switch from one set of content to another, making the
21-
transition easily from one peer to the other.
19+
A tab is a UI component that allows users to switch between different sections of content without leaving
20+
the page. Tabs are often used to organize related information into distinct views, making it easier to
21+
navigate between them.
2222
</DxcParagraph>
23-
<TabsPageLayout tabs={tabs}></TabsPageLayout>
23+
<TabsPageLayout tabs={tabs} />
2424
</DxcFlex>
2525
</PageHeading>
2626
{children}

0 commit comments

Comments
 (0)