Skip to content

Commit bf55972

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2148 from dxc-technology/gomezivann/tokens-button
Button redesign
2 parents f78eb80 + edcd9f1 commit bf55972

File tree

25 files changed

+663
-2918
lines changed

25 files changed

+663
-2918
lines changed

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

‎apps/website/pages/components/button/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 ButtonPageLayout from "screens/components/button/ButtonPageLayout";
4-
import ButtonCodePage from "screens/components/button/code/ButtonCodePage";
4+
import ButtonOverviewPage from "screens/components/button/overview/ButtonOverviewPage";
55

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

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

2117
export default Index;

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

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

‎apps/website/pages/components/button/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
@@ -29,7 +29,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
2929
return linksList;
3030
};
3131

32-
const DxcQuickNavContainer = ({ title, sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
32+
const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
3333
<MainContainer>
3434
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
3535
{sections.map((section) => (

‎apps/website/screens/components/button/ButtonPageLayout.tsx‎

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

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

1413
return (
@@ -18,12 +17,9 @@ const ButtonPageHeading = ({ children }: { children: ReactNode }) => {
1817
<ComponentHeading name="Button" />
1918
<DxcParagraph>
2019
Buttons are basic interface elements that initialize an action or function when the user interacts with
21-
them. The appearance of the button should suggest the user takes an action that leads to different
22-
scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to
23-
Action) components, which basically are designed to capture user attention and improve the user experience
24-
within the application.
20+
them.
2521
</DxcParagraph>
26-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2723
</DxcFlex>
2824
</PageHeading>
2925
{children}

‎apps/website/screens/components/button/code/ButtonCodePage.tsx‎

Lines changed: 71 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Code from "@/common/Code";
33
import DocFooter from "@/common/DocFooter";
44
import QuickNavContainer from "@/common/QuickNavContainer";
55
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
6-
import StatusBadge from "@/common/StatusBadge";
76
import Example from "@/common/example/Example";
87
import basicUsage from "./examples/basicUsage";
98
import semantic from "./examples/semantic";
@@ -26,63 +25,13 @@ const sections = [
2625
</thead>
2726
<tbody>
2827
<tr>
29-
<td>label</td>
30-
<td>
31-
<TableCode>string</TableCode>
32-
</td>
33-
<td>Text to be placed in the button.</td>
34-
<td>-</td>
35-
</tr>
36-
<tr>
37-
<td>mode</td>
38-
<td>
39-
<TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
40-
</td>
41-
<td>The available button modes.</td>
42-
<td>
43-
<TableCode>'primary'</TableCode>
44-
</td>
45-
</tr>
46-
<tr>
47-
<td>
48-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
49-
<StatusBadge status="new" />
50-
semantic
51-
</DxcFlex>
52-
</td>
53-
<td>
54-
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
55-
</td>
56-
<td>Specifies the semantic meaning of the buttons, which determines its color.</td>
57-
<td>
58-
<TableCode>'default'</TableCode>
59-
</td>
60-
</tr>
61-
<tr>
62-
<td>title</td>
63-
<td>
64-
<TableCode>string</TableCode>
65-
</td>
66-
<td>
67-
Text representing advisory information related to the button's action. Under the hood, this prop also
68-
serves as an accessible label for the component.
69-
</td>
70-
<td>-</td>
71-
</tr>
72-
<tr>
73-
<td>type</td>
74-
<td>
75-
<TableCode>'button' | 'reset' | 'submit'</TableCode>
76-
</td>
28+
<td>disabled</td>
7729
<td>
78-
Sets the <Code>type</Code> attribute of the <abbr>HTML</abbr> button element. See{" "}
79-
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">
80-
MDN
81-
</DxcLink>{" "}
82-
for further information.
30+
<TableCode>boolean</TableCode>
8331
</td>
32+
<td>If true, the component will be disabled.</td>
8433
<td>
85-
<TableCode>'button'</TableCode>
34+
<TableCode>false</TableCode>
8635
</td>
8736
</tr>
8837
<tr>
@@ -111,13 +60,32 @@ const sections = [
11160
</td>
11261
</tr>
11362
<tr>
114-
<td>disabled</td>
63+
<td>label</td>
11564
<td>
116-
<TableCode>boolean</TableCode>
65+
<TableCode>string</TableCode>
11766
</td>
118-
<td>If true, the component will be disabled.</td>
67+
<td>Text to be placed in the button.</td>
68+
<td>-</td>
69+
</tr>
70+
<tr>
71+
<td>margin</td>
11972
<td>
120-
<TableCode>false</TableCode>
73+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
74+
</td>
75+
<td>
76+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
77+
'right' properties in order to specify different margin sizes.
78+
</td>
79+
<td>-</td>
80+
</tr>
81+
<tr>
82+
<td>mode</td>
83+
<td>
84+
<TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
85+
</td>
86+
<td>The available button modes.</td>
87+
<td>
88+
<TableCode>'primary'</TableCode>
12189
</td>
12290
</tr>
12391
<tr>
@@ -129,23 +97,17 @@ const sections = [
12997
<td>-</td>
13098
</tr>
13199
<tr>
132-
<td>margin</td>
100+
<td>semantic</td>
133101
<td>
134-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
102+
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
135103
</td>
104+
<td>Specifies the semantic meaning of the buttons, which determines its color.</td>
136105
<td>
137-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
138-
'right' properties in order to specify different margin sizes.
106+
<TableCode>'default'</TableCode>
139107
</td>
140-
<td>-</td>
141108
</tr>
142109
<tr>
143-
<td>
144-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
145-
<StatusBadge status="new" />
146-
size
147-
</DxcFlex>
148-
</td>
110+
<td>size</td>
149111
<td>
150112
<TableCode>
151113
{
@@ -170,6 +132,33 @@ const sections = [
170132
<TableCode>0</TableCode>
171133
</td>
172134
</tr>
135+
<tr>
136+
<td>title</td>
137+
<td>
138+
<TableCode>string</TableCode>
139+
</td>
140+
<td>
141+
Text representing advisory information related to the button's action. Under the hood, this prop also
142+
serves as an accessible label for the component.
143+
</td>
144+
<td>-</td>
145+
</tr>
146+
<tr>
147+
<td>type</td>
148+
<td>
149+
<TableCode>'button' | 'reset' | 'submit'</TableCode>
150+
</td>
151+
<td>
152+
Sets the <Code>type</Code> attribute of the <abbr>HTML</abbr> button element. See{" "}
153+
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">
154+
MDN
155+
</DxcLink>{" "}
156+
for further information.
157+
</td>
158+
<td>
159+
<TableCode>'button'</TableCode>
160+
</td>
161+
</tr>
173162
</tbody>
174163
</DxcTable>
175164
),
@@ -181,14 +170,14 @@ const sections = [
181170
title: "Basic usage",
182171
content: <Example example={basicUsage} defaultIsVisible />,
183172
},
184-
{
185-
title: "Semantic",
186-
content: <Example example={semantic} defaultIsVisible />,
187-
},
188173
{
189174
title: "Icons",
190175
content: <Example example={icons} defaultIsVisible />,
191176
},
177+
{
178+
title: "Semantic",
179+
content: <Example example={semantic} defaultIsVisible />,
180+
},
192181
{
193182
title: "Size",
194183
content: <Example example={sizes} defaultIsVisible />,
@@ -197,15 +186,13 @@ const sections = [
197186
},
198187
];
199188

200-
const ButtonCodePage = () => {
201-
return (
202-
<DxcFlex direction="column" gap="4rem">
203-
<QuickNavContainerLayout>
204-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
205-
</QuickNavContainerLayout>
206-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/button/code/ButtonCodePage.tsx" />
207-
</DxcFlex>
208-
);
209-
};
189+
const ButtonCodePage = () => (
190+
<DxcFlex direction="column" gap="4rem">
191+
<QuickNavContainerLayout>
192+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
193+
</QuickNavContainerLayout>
194+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/button/code/ButtonCodePage.tsx" />
195+
</DxcFlex>
196+
);
210197

211198
export default ButtonCodePage;

0 commit comments

Comments
 (0)