Skip to content

Commit 646cad5

Browse files
JialeclJialecl
authored
Merge pull request #2153 from dxc-technology/Mil4n0r/tokens-chip
Chip redesign
2 parents cf4ed97 + 8065fd3 commit 646cad5

File tree

19 files changed

+406
-673
lines changed

19 files changed

+406
-673
lines changed

‎apps/website/pages/components/chip/code.tsx

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

‎apps/website/pages/components/chip/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
3-
import ChipCodePage from "screens/components/chip/code/ChipCodePage";
3+
import ChipOverviewPage from "screens/components/chip/overview/ChipOverviewPage";
44
import ChipPageLayout from "screens/components/chip/ChipPageLayout";
55

66
const Index = () => {
@@ -9,13 +9,11 @@ const Index = () => {
99
<Head>
1010
<title>Chip — Halstack Design System</title>
1111
</Head>
12-
<ChipCodePage></ChipCodePage>
12+
<ChipOverviewPage />
1313
</>
1414
);
1515
};
1616

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

2119
export default Index;

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

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

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

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

‎apps/website/screens/components/chip/ChipPageLayout.tsx

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

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

1413
return (
@@ -17,9 +16,10 @@ const ChipPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Chip" />
1918
<DxcParagraph>
20-
Chips are elements that represent status, complementary information, or association between elements.
19+
A chip is a compact, interactive UI element used to represent small pieces of information, actions, or
20+
selections.
2121
</DxcParagraph>
22-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2323
</DxcFlex>
2424
</PageHeading>
2525
{children}

‎apps/website/screens/components/chip/code/ChipCodePage.tsx

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,31 @@ const sections = [
2323
</thead>
2424
<tbody>
2525
<tr>
26-
<td>label</td>
26+
<td>disabled</td>
2727
<td>
28-
<TableCode>string</TableCode>
28+
<TableCode>boolean</TableCode>
2929
</td>
30-
<td>Text to be placed on the chip.</td>
31-
<td>-</td>
32-
</tr>
33-
<tr>
34-
<td>prefixIcon</td>
30+
<td>If true, the component will be disabled.</td>
3531
<td>
36-
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
32+
<TableCode>false</TableCode>
3733
</td>
34+
</tr>
35+
<tr>
36+
<td>label</td>
3837
<td>
39-
<DxcLink newWindow href="https://fonts.google.com/icons">
40-
Material Symbol
41-
</DxcLink>{" "}
42-
name or SVG element as the icon that will be placed before the chip label. When using Material Symbols,
43-
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
44-
symbol name with <TableCode>"filled_"</TableCode>.
38+
<TableCode>string</TableCode>
4539
</td>
40+
<td>Text to be placed on the chip.</td>
4641
<td>-</td>
4742
</tr>
4843
<tr>
49-
<td>suffixIcon</td>
44+
<td>margin</td>
5045
<td>
51-
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
46+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
5247
</td>
5348
<td>
54-
<DxcLink newWindow href="https://fonts.google.com/icons">
55-
Material Symbol
56-
</DxcLink>{" "}
57-
name or SVG element as the icon that will be placed after the chip label. When using Material Symbols,
58-
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
59-
symbol name with <TableCode>"filled_"</TableCode>.
49+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
50+
'right' properties in order to specify different margin sizes.
6051
</td>
6152
<td>-</td>
6253
</tr>
@@ -83,23 +74,32 @@ const sections = [
8374
<td>-</td>
8475
</tr>
8576
<tr>
86-
<td>disabled</td>
77+
<td>prefixIcon</td>
8778
<td>
88-
<TableCode>boolean</TableCode>
79+
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
8980
</td>
90-
<td>If true, the component will be disabled.</td>
9181
<td>
92-
<TableCode>false</TableCode>
82+
<DxcLink newWindow href="https://fonts.google.com/icons">
83+
Material Symbol
84+
</DxcLink>{" "}
85+
name or SVG element as the icon that will be placed before the chip label. When using Material Symbols,
86+
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
87+
symbol name with <TableCode>"filled_"</TableCode>.
9388
</td>
89+
<td>-</td>
9490
</tr>
9591
<tr>
96-
<td>margin</td>
92+
<td>suffixIcon</td>
9793
<td>
98-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
94+
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
9995
</td>
10096
<td>
101-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
102-
'right' properties in order to specify different margin sizes.
97+
<DxcLink newWindow href="https://fonts.google.com/icons">
98+
Material Symbol
99+
</DxcLink>{" "}
100+
name or SVG element as the icon that will be placed after the chip label. When using Material Symbols,
101+
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
102+
symbol name with <TableCode>"filled_"</TableCode>.
103103
</td>
104104
<td>-</td>
105105
</tr>
@@ -143,7 +143,7 @@ const ChipCodePage = () => {
143143
return (
144144
<DxcFlex direction="column" gap="4rem">
145145
<QuickNavContainerLayout>
146-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
146+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
147147
</QuickNavContainerLayout>
148148
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/chip/code/ChipCodePage.tsx" />
149149
</DxcFlex>

0 commit comments

Comments
 (0)