Skip to content

Commit 28c1e5e

Browse files
raquelarrojoraquelarrojo
authored
Merge branch 'master' into gomezivann/number-input-fix
2 parents 00d2000 + db5d8dc commit 28c1e5e

File tree

10 files changed

+133
-102
lines changed

10 files changed

+133
-102
lines changed

‎website/package-lock.json‎

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

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"lint": "next lint"
99
},
1010
"dependencies": {
11-
"@dxc-technology/halstack-react": "10.0.0",
11+
"@dxc-technology/halstack-react": "next",
1212
"@radix-ui/react-popover": "0.1.6",
1313
"@types/styled-components": "^5.1.18",
1414
"axios": "^0.27.2",

‎website/screens/common/QuickNavContainer.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import styled from "styled-components";
3-
import { DxcFlex, DxcQuickNav } from "@dxc-technology/halstack-react";
3+
import { DxcGrid, DxcQuickNav } from "@dxc-technology/halstack-react";
44
import Section, { SectionType } from "./Section";
55
import { responsiveSizes } from "../common/variables";
66

@@ -36,7 +36,7 @@ const DxcQuickNavContainer = ({
3636
startHeadingLevel = 1,
3737
}: QuickNavContainerTypes): JSX.Element => (
3838
<MainContainer>
39-
<DxcFlex direction="column" gap="3rem" grow={1}>
39+
<DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
4040
{sections.map((section) => (
4141
<Section
4242
key={`section-${section.title}`}
@@ -46,7 +46,7 @@ const DxcQuickNavContainer = ({
4646
content={section.content}
4747
/>
4848
))}
49-
</DxcFlex>
49+
</DxcGrid>
5050
<QuickNavContainer>
5151
<DxcQuickNav title={title} links={getSubSectionsLinks(sections)} />
5252
</QuickNavContainer>
@@ -55,18 +55,21 @@ const DxcQuickNavContainer = ({
5555

5656
const MainContainer = styled.div`
5757
display: grid;
58-
grid-template-columns: 15fr 5fr;
59-
gap: 1.5rem;
58+
grid-template-columns: 800px 1fr;
6059
60+
@media (max-width: ${responsiveSizes.desktop}px) {
61+
grid-template-columns: 75% 25%;
62+
}
6163
@media (max-width: ${responsiveSizes.laptop}px) {
62-
grid-template-columns: 100%;
64+
grid-template-columns: minmax(0, 1fr);
6365
}
6466
`;
6567

6668
const QuickNavContainer = styled.div`
6769
position: sticky;
6870
top: calc(64px + 24px);
6971
max-height: 568px;
72+
margin-left: 1.5rem;
7073
overflow-x: hidden;
7174
overflow-y: auto;
7275

‎website/screens/common/TabsPageLayout.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,19 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
2222
</Link>
2323
))}
2424
</DxcNavTabs>
25-
<Space />
25+
<Divider />
2626
</TabsContainer>
2727
);
2828
};
2929

3030
const TabsContainer = styled.div`
31-
display: flex;
32-
width: 100%;
31+
display: grid;
32+
grid-template-columns: minmax(0, min-content) 1fr;
3333
overflow-x: auto;
3434
`;
3535

36-
const Space = styled.div`
36+
const Divider = styled.span`
3737
border-bottom: 2px solid #bfbfbf;
38-
width: 100%;
3938
`;
4039

4140
export default TabsPageLayout;

‎website/screens/components/dialog/code/examples/backgroundClick.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ const code = `() => {
1313
1414
return (
1515
<DxcInset space="2rem">
16-
<DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
16+
<DxcButton label="Enter your data" onClick={handleClick} />
1717
{isDialogVisible && (
1818
<DxcDialog onBackgroundClick={handleClick} isCloseVisible={false}>
19-
Please enter your personal information.
19+
<DxcInset space="1.5rem">
20+
Please enter your personal information.
21+
</DxcInset>
2022
</DxcDialog>
2123
)}
2224
</DxcInset>

‎website/screens/components/dialog/code/examples/basicUsage.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ const code = `() => {
1313
1414
return (
1515
<DxcInset space="2rem">
16-
<DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
16+
<DxcButton label="Enter your data" onClick={handleClick} />
1717
{isDialogVisible && (
1818
<DxcDialog onCloseClick={handleClick}>
19-
Please enter your personal information.
19+
<DxcInset space="1.5rem">
20+
Please enter your personal information.
21+
</DxcInset>
2022
</DxcDialog>
2123
)}
2224
</DxcInset>

‎website/screens/components/dialog/code/examples/withContent.ts‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
DxcTextInput,
55
DxcInset,
66
DxcFlex,
7+
DxcGrid,
8+
DxcHeading,
79
} from "@dxc-technology/halstack-react";
810
import { useState } from "react";
911

@@ -14,22 +16,25 @@ const code = `() => {
1416
};
1517
return (
1618
<DxcInset space="2rem">
17-
<DxcButton label="Enter your data" onClick={handleClick}></DxcButton>
19+
<DxcButton label="Enter your address" onClick={handleClick} />
1820
{isDialogVisible && (
1921
<DxcDialog onCloseClick={handleClick}>
20-
<DxcInset top="1.5rem" bottom="1.5rem">
21-
<DxcFlex gap="2rem">
22-
<DxcTextInput label="Name" />
23-
<DxcTextInput label="Last name" />
24-
</DxcFlex>
22+
<DxcInset space="1.5rem">
23+
<DxcGrid gap="2rem">
24+
<DxcHeading level={2} text="Delivery address" weight="normal" />
25+
<DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
26+
<DxcTextInput label="Street" size="fillParent" />
27+
<DxcTextInput label="City" size="fillParent" />
28+
<DxcGrid.Item column={{ start: 1, end: 3 }}>
29+
<DxcTextInput label="State" size="fillParent" />
30+
</DxcGrid.Item>
31+
</DxcGrid>
32+
<DxcFlex justifyContent="flex-end" gap="0.5rem">
33+
<DxcButton label="Add client" onClick={handleClick} />
34+
<DxcButton label="Cancel" onClick={handleClick} mode="text" />
35+
</DxcFlex>
36+
</DxcGrid>
2537
</DxcInset>
26-
<DxcInset bottom="4rem">
27-
<DxcTextInput label="Address" size="fillParent" />
28-
</DxcInset>
29-
<DxcFlex justifyContent="center">
30-
<DxcButton label="Add client" onClick={handleClick} />
31-
<DxcButton label="Cancel" onClick={handleClick} mode="text" />
32-
</DxcFlex>
3338
</DxcDialog>
3439
)}
3540
</DxcInset>
@@ -43,6 +48,8 @@ const scope = {
4348
DxcTextInput,
4449
DxcInset,
4550
DxcFlex,
51+
DxcGrid,
52+
DxcHeading,
4653
};
4754

4855
export default { code, scope };

‎website/screens/theme-generator/ImportDialog.tsx‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,17 @@ import {
55
DxcTextarea,
66
DxcHeading,
77
DxcFlex,
8-
DxcInset,
98
} from "@dxc-technology/halstack-react";
109
import { deepMerge } from "./utils";
11-
import ImportDialogProps, {
12-
IndexedThemeInput,
13-
IndexedTheme,
14-
} from "./types";
10+
import ImportDialogProps, { IndexedThemeInput, IndexedTheme } from "./types";
11+
import styled from "styled-components";
1512

1613
const isArrayIncluded = (object1: {}, object2: {}) =>
1714
Object.keys(object1).every((element) =>
1815
Object.keys(object2).includes(element)
1916
);
2017

21-
const validateInputTheme = (
22-
json: string,
23-
customThemeSchema: IndexedTheme
24-
) => {
18+
const validateInputTheme = (json: string, customThemeSchema: IndexedTheme) => {
2519
let inputTheme: IndexedThemeInput = {};
2620
let errMessage = "";
2721

@@ -81,31 +75,43 @@ const ImportDialog = ({
8175

8276
return (
8377
<DxcDialog isCloseVisible={false} onBackgroundClick={closeDialog}>
84-
<DxcInset space="1rem">
85-
<DxcFlex direction="column" gap="1.5rem">
86-
<DxcHeading text="Import theme" level={2} weight="normal" />
87-
<DxcTextarea
88-
placeholder="Paste your theme here..."
89-
value={value}
90-
onChange={onChange}
91-
rows={24}
92-
error={validationErrorMessage}
93-
size="fillParent"
94-
verticalGrow="none"
78+
<ImportDialogContainer>
79+
<DxcHeading text="Import theme" level={2} weight="normal" />
80+
<DxcTextarea
81+
placeholder="Paste your theme here..."
82+
value={value}
83+
onChange={onChange}
84+
error={validationErrorMessage}
85+
size="fillParent"
86+
verticalGrow="none"
87+
/>
88+
<DxcFlex justifyContent="flex-end" gap="0.5rem">
89+
<DxcButton mode="text" label="Cancel" onClick={closeDialog} />
90+
<DxcButton
91+
mode="primary"
92+
label="Import"
93+
onClick={validate}
94+
disabled={validationErrorMessage !== "" || value === ""}
9595
/>
96-
<DxcFlex alignItems="center" justifyContent="right" gap="0.5rem">
97-
<DxcButton mode="text" label="Cancel" onClick={closeDialog} />
98-
<DxcButton
99-
mode="primary"
100-
label="Import"
101-
onClick={validate}
102-
disabled={validationErrorMessage !== "" || value === ""}
103-
/>
104-
</DxcFlex>
10596
</DxcFlex>
106-
</DxcInset>
97+
</ImportDialogContainer>
10798
</DxcDialog>
10899
);
109100
};
110101

102+
const ImportDialogContainer = styled.div`
103+
display: flex;
104+
flex-direction: column;
105+
gap: 1.5rem;
106+
padding: 2rem;
107+
height: 80vh;
108+
109+
div:nth-child(2) {
110+
height: 100%;
111+
}
112+
> div > textarea {
113+
flex-grow: 1;
114+
}
115+
`;
116+
111117
export default ImportDialog;

‎website/screens/theme-generator/components/previews/Dialog.tsx‎

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,32 @@ const Dialog = () => {
4444
<DxcButton label="Delete" onClick={handleClickDefaultDialog} />
4545
{isDefaultDialogVisible && (
4646
<DxcDialog onCloseClick={handleClickDefaultDialog}>
47-
<DxcFlex direction="column" gap="4rem">
48-
<DxcFlex direction="column" gap="1rem">
49-
<DxcFlex alignContent="center" gap="1rem">
50-
<DxcFlex wrap="wrap" alignContent="center">
51-
{errorIcon}
47+
<DxcInset space="1.5rem">
48+
<DxcFlex direction="column" gap="4rem">
49+
<DxcFlex direction="column" gap="1rem">
50+
<DxcFlex alignContent="center" gap="1rem">
51+
<DxcFlex wrap="wrap" alignContent="center">
52+
{errorIcon}
53+
</DxcFlex>
54+
<DxcHeading level={5} text="Delete document" />
5255
</DxcFlex>
53-
<DxcHeading level={5} text="Delete document" />
56+
<DxcParagraph>
57+
Are you sure you want to delete the 3 selected documents?
58+
</DxcParagraph>
59+
</DxcFlex>
60+
<DxcFlex justifyContent="flex-end" gap="1rem">
61+
<DxcButton
62+
label="Cancel"
63+
onClick={handleClickDefaultDialog}
64+
mode="text"
65+
/>
66+
<DxcButton
67+
label="Delete"
68+
onClick={handleClickDefaultDialog}
69+
/>
5470
</DxcFlex>
55-
<DxcParagraph>
56-
Are you sure you want to delete the 3 selected documents?
57-
</DxcParagraph>
58-
</DxcFlex>
59-
<DxcFlex justifyContent="flex-end" gap="1rem">
60-
<DxcButton
61-
label="Cancel"
62-
onClick={handleClickDefaultDialog}
63-
mode="text"
64-
/>
65-
<DxcButton label="Delete" onClick={handleClickDefaultDialog} />
6671
</DxcFlex>
67-
</DxcFlex>
72+
</DxcInset>
6873
</DxcDialog>
6974
)}
7075
</Mode>
@@ -75,22 +80,27 @@ const Dialog = () => {
7580
/>
7681
{isModalDialogVisible && (
7782
<DxcDialog onBackgroundClick={handleClickBackground}>
78-
<DxcFlex direction="column" gap="4rem">
79-
<DxcFlex direction="column" gap="1.5rem">
80-
<DxcHeading level={4} text="Account information" />
81-
<DxcTextInput label="Name" />
82-
<DxcTextInput label="Last name" />
83-
<DxcTextInput label="Address" size="fillParent" />
84-
</DxcFlex>
85-
<DxcFlex justifyContent="center" gap="1rem">
86-
<DxcButton
87-
label="Cancel"
88-
onClick={handleClickBackground}
89-
mode="text"
90-
/>
91-
<DxcButton label="Add client" onClick={handleClickBackground} />
83+
<DxcInset space="1.5rem">
84+
<DxcFlex direction="column" gap="4rem">
85+
<DxcFlex direction="column" gap="1.5rem">
86+
<DxcHeading level={4} text="Account information" />
87+
<DxcTextInput label="Name" />
88+
<DxcTextInput label="Last name" />
89+
<DxcTextInput label="Address" size="fillParent" />
90+
</DxcFlex>
91+
<DxcFlex justifyContent="center" gap="1rem">
92+
<DxcButton
93+
label="Cancel"
94+
onClick={handleClickBackground}
95+
mode="text"
96+
/>
97+
<DxcButton
98+
label="Add client"
99+
onClick={handleClickBackground}
100+
/>
101+
</DxcFlex>
92102
</DxcFlex>
93-
</DxcFlex>
103+
</DxcInset>
94104
</DxcDialog>
95105
)}
96106
</Mode>
@@ -102,9 +112,11 @@ const Dialog = () => {
102112
onCloseClick={handleClickNoOverlay}
103113
overlay={false}
104114
>
105-
<DxcParagraph>
106-
An example of Dialog without overlay (darker background).
107-
</DxcParagraph>
115+
<DxcInset space="1.5rem">
116+
<DxcParagraph>
117+
An example of Dialog without overlay (darker background).
118+
</DxcParagraph>
119+
</DxcInset>
108120
</DxcDialog>
109121
)}
110122
</Mode>

0 commit comments

Comments
 (0)