Skip to content

Commit 324b670

Browse files
JialeclJialecl
authored
Merge pull request #1774 from dxc-technology/gomezivann/remove-backgroundColorProvider
Remove `BackgroundColorProvider` from Halstack
2 parents 757bc34 + 9f64704 commit 324b670

File tree

39 files changed

+15651
-13370
lines changed

39 files changed

+15651
-13370
lines changed

‎app/package-lock.json‎

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

‎app/package.json‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,22 @@
44
"private": true,
55
"dependencies": {
66
"@dxc-technology/halstack-react": "file:../dist",
7-
"react": "^17.0.1",
8-
"react-dom": "^17.0.1",
7+
"react": "^18.2.0",
8+
"react-dom": "^18.2.0",
99
"react-router-dom": "^5.1.2",
1010
"react-scripts": "5.0.1",
11-
"styled-components": "^5.0.1"
11+
"styled-components": "^5.0.1",
12+
"@radix-ui/react-popover": "^1.0.7",
13+
"color": "^3.1.3",
14+
"dayjs": "^1.11.1",
15+
"slugify": "^1.6.5",
16+
"uuid": "^8.3.2"
1217
},
1318
"scripts": {
1419
"start": "react-scripts start",
1520
"build": "react-scripts build",
1621
"test": "react-scripts test",
17-
"eject": "react-scripts eject",
18-
"cy:open": "cypress open",
19-
"cy:fast": "cypress run --spec 'cypress/integration/fast-visual-regression.js' --config video=false",
20-
"cy:detailed": "cypress run --spec 'cypress/integration/detailed-visual-regression.js' --config video=false",
21-
"cy:updateSnapshot": "cypress run --config video=false --env updateSnapshots=true"
22+
"eject": "react-scripts eject"
2223
},
2324
"eslintConfig": {
2425
"extends": "react-app"
@@ -34,9 +35,5 @@
3435
"last 1 firefox version",
3536
"last 1 safari version"
3637
]
37-
},
38-
"devDependencies": {
39-
"cypress": "^13.1.0",
40-
"cypress-image-snapshot": "^3.1.1"
4138
}
4239
}

‎app/src/pages/Button.jsx‎

Lines changed: 1 addition & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import React from "react";
2-
import {
3-
DxcButton,
4-
HalstackProvider,
5-
BackgroundColorProvider,
6-
} from "@dxc-technology/halstack-react";
2+
import { DxcButton, HalstackProvider } from "@dxc-technology/halstack-react";
73
import styled from "styled-components";
84
import homeLogo from "../images/home.svg";
95

@@ -556,161 +552,8 @@ function App() {
556552
</div>
557553
</HalstackProvider>
558554
</div>
559-
<BackgroundColorProvider color="#000000">
560-
<Mode mode="dark" text="Default">
561-
<DxcButton
562-
mode="primary"
563-
label="Custom Button"
564-
onClick={onClick}
565-
size="large"
566-
margin="small"
567-
/>
568-
</Mode>
569-
<Mode mode="dark" text="Primary">
570-
<DxcButton
571-
mode="primary"
572-
onClick={onClick}
573-
icon={
574-
<svg
575-
x="0px"
576-
y="0px"
577-
width="24px"
578-
height="24px"
579-
viewBox="0 0 24 24"
580-
enableBackground="new 0 0 24 24"
581-
fill="currentColor"
582-
>
583-
<g id="Bounding_Box">
584-
<rect fill="none" width="24" height="24" />
585-
</g>
586-
<g id="Master">
587-
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
588-
</g>
589-
</svg>
590-
}
591-
margin="xsmall"
592-
/>
593-
</Mode>
594-
<Mode mode="dark" text="Primary">
595-
<DxcButton
596-
mode="primary"
597-
label="Custom Button"
598-
onClick={onClick}
599-
size="large"
600-
margin="small"
601-
disabled
602-
/>
603-
</Mode>
604-
<Mode mode="dark" text="Secondary">
605-
<DxcButton
606-
mode="secondary"
607-
label="Custom Button"
608-
onClick={onClick}
609-
size="large"
610-
margin="small"
611-
/>
612-
</Mode>
613-
<Mode mode="dark" text="Secondary">
614-
<DxcButton
615-
mode="secondary"
616-
onClick={onClick}
617-
icon={
618-
<svg
619-
x="0px"
620-
y="0px"
621-
width="24px"
622-
height="24px"
623-
viewBox="0 0 24 24"
624-
enableBackground="new 0 0 24 24"
625-
fill="currentColor"
626-
>
627-
<g id="Bounding_Box">
628-
<rect fill="none" width="24" height="24" />
629-
</g>
630-
<g id="Master">
631-
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
632-
</g>
633-
</svg>
634-
}
635-
margin="xsmall"
636-
/>
637-
</Mode>
638-
<Mode mode="dark" text="Secondary">
639-
<DxcButton
640-
mode="secondary"
641-
label="Custom Button"
642-
onClick={onClick}
643-
size="large"
644-
margin="small"
645-
disabled
646-
/>
647-
</Mode>
648-
<Mode mode="dark" text="Text">
649-
<DxcButton
650-
mode="text"
651-
label="Custom Button"
652-
onClick={onClick}
653-
size="large"
654-
margin="small"
655-
/>
656-
</Mode>
657-
<Mode mode="dark" text="Text">
658-
<DxcButton
659-
mode="text"
660-
onClick={onClick}
661-
icon={
662-
<svg
663-
x="0px"
664-
y="0px"
665-
width="24px"
666-
height="24px"
667-
viewBox="0 0 24 24"
668-
enableBackground="new 0 0 24 24"
669-
fill="currentColor"
670-
>
671-
<g id="Bounding_Box">
672-
<rect fill="none" width="24" height="24" />
673-
</g>
674-
<g id="Master">
675-
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
676-
</g>
677-
</svg>
678-
}
679-
margin="xsmall"
680-
/>
681-
</Mode>
682-
<Mode mode="dark" text="Text">
683-
<DxcButton
684-
mode="text"
685-
label="Custom Button"
686-
onClick={onClick}
687-
size="large"
688-
margin="small"
689-
disabled
690-
/>
691-
</Mode>
692-
</BackgroundColorProvider>
693555
</div>
694556
);
695557
}
696558

697-
const Mode = ({ mode, children }) => {
698-
return (
699-
<ModeContainer mode={mode}>
700-
<PreviewsContainer>{children}</PreviewsContainer>
701-
</ModeContainer>
702-
);
703-
};
704-
705-
const ModeContainer = styled.div`
706-
background-color: ${(props) =>
707-
props.mode === "dark" ? "#000000" : "transparent"};
708-
display: flex;
709-
flex-flow: row wrap;
710-
`;
711-
712-
const PreviewsContainer = styled.div`
713-
flex: 100%;
714-
`;
715-
716559
export default App;

‎app/src/pages/Checkbox.jsx‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React, { useState } from "react";
22
import {
33
DxcCheckbox,
44
HalstackProvider,
5-
BackgroundColorProvider,
65
} from "@dxc-technology/halstack-react";
76
import styled from "styled-components";
87

@@ -280,56 +279,8 @@ function App() {
280279
<DxcCheckbox checked disabled label="Checkbox " onChange={onChange} />
281280
</HalstackProvider>
282281
</div>
283-
<div>
284-
<h4>Dark</h4>
285-
<BackgroundColorProvider color="#000000">
286-
<Mode mode="dark">
287-
<DxcCheckbox
288-
checked={checked}
289-
label="Checkbox "
290-
onChange={onChange}
291-
/>
292-
</Mode>
293-
<Mode mode="dark">
294-
<DxcCheckbox checked={true} label="Checkbox " onChange={onChange} />
295-
</Mode>
296-
<Mode mode="dark">
297-
<DxcCheckbox
298-
checked={checked}
299-
label="Checkbox "
300-
onChange={onChange}
301-
disabled
302-
/>
303-
<DxcCheckbox
304-
checked={true}
305-
label="Checkbox "
306-
onChange={onChange}
307-
disabled
308-
/>
309-
</Mode>
310-
</BackgroundColorProvider>
311-
</div>
312282
</div>
313283
);
314284
}
315285

316-
const Mode = ({ mode, children }) => {
317-
return (
318-
<ModeContainer mode={mode}>
319-
<PreviewsContainer>{children}</PreviewsContainer>
320-
</ModeContainer>
321-
);
322-
};
323-
324-
const ModeContainer = styled.div`
325-
background-color: ${(props) =>
326-
props.mode === "dark" ? "#000000" : "transparent"};
327-
display: flex;
328-
flex-flow: row wrap;
329-
`;
330-
331-
const PreviewsContainer = styled.div`
332-
flex: 100%;
333-
`;
334-
335286
export default App;

‎app/src/pages/DateInput.jsx‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import React, { useRef, useState } from "react";
2-
import {
3-
DxcDateInput,
4-
DxcButton,
5-
BackgroundColorProvider,
6-
} from "@dxc-technology/halstack-react";
2+
import { DxcDateInput, DxcButton } from "@dxc-technology/halstack-react";
73
import styled from "styled-components";
84

95
function App() {
@@ -158,40 +154,8 @@ function App() {
158154
margin={{ left: "medium" }}
159155
></DxcButton>
160156
</div>
161-
<BackgroundColorProvider color="#000000">
162-
<DarkMode>
163-
<DxcDateInput
164-
label="Dark date input"
165-
helperText="Some sample text"
166-
margin={{
167-
left: "medium",
168-
bottom: "small",
169-
top: "small",
170-
right: "medium",
171-
}}
172-
/>
173-
</DarkMode>
174-
</BackgroundColorProvider>
175157
</>
176158
);
177159
}
178160

179-
const DarkMode = ({ children }) => {
180-
return (
181-
<ModeContainer>
182-
<PreviewsContainer>{children}</PreviewsContainer>
183-
</ModeContainer>
184-
);
185-
};
186-
187-
const ModeContainer = styled.div`
188-
background-color: #000000;
189-
display: flex;
190-
flex-flow: row wrap;
191-
`;
192-
193-
const PreviewsContainer = styled.div`
194-
flex: 100%;
195-
`;
196-
197161
export default App;

‎app/src/pages/ProgressBar.jsx‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import styled from "styled-components";
33
import {
44
DxcProgressBar,
55
HalstackProvider,
6-
BackgroundColorProvider,
76
} from "@dxc-technology/halstack-react";
87

98
const colors = {
@@ -126,45 +125,8 @@ function App() {
126125
/>
127126
</HalstackProvider>
128127
</div>
129-
<h4>Dark mode</h4>
130-
<BackgroundColorProvider color="#000000">
131-
<Mode mode="dark" text="Undeterminate default">
132-
<DxcProgressBar
133-
label="Loading"
134-
overlay={false}
135-
margin={{ top: "xsmall", bottom: "xxsmall" }}
136-
/>
137-
</Mode>
138-
<Mode mode="dark" text="Determinate default">
139-
<DxcProgressBar
140-
label="Loading"
141-
overlay={false}
142-
showValue
143-
value={45}
144-
margin={{ top: "xsmall", bottom: "xxsmall" }}
145-
/>
146-
</Mode>
147-
</BackgroundColorProvider>
148128
</div>
149129
);
150130
}
151131

152-
const Mode = ({ mode, children }) => {
153-
return (
154-
<ModeContainer mode={mode}>
155-
<PreviewsContainer>{children}</PreviewsContainer>
156-
</ModeContainer>
157-
);
158-
};
159-
160-
const ModeContainer = styled.div`
161-
background-color: ${(props) =>
162-
props.mode === "dark" ? "#000000" : "transparent"};
163-
display: flex;
164-
flex-flow: row wrap;
165-
`;
166-
167-
const PreviewsContainer = styled.div`
168-
flex: 100%;
169-
`;
170132
export default App;

0 commit comments

Comments
 (0)