Skip to content

Commit cece482

Browse files
jsuarezgonzjsuarezgonz
authored
Merge branch 'master' into aef-doc
2 parents 541a096 + a6a69fa commit cece482

File tree

82 files changed

+5986
-1836
lines changed

Some content is hidden

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

82 files changed

+5986
-1836
lines changed

‎lib/src/HalstackContext.tsx‎

Lines changed: 89 additions & 33 deletions
Large diffs are not rendered by default.

‎lib/src/accordion/Accordion.stories.tsx‎

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,14 @@ const advancedTheme = {
7070
},
7171
};
7272

73+
const opinionatedTheme = {
74+
accordion: {
75+
accentColor: "#5f249f",
76+
titleFontColor: "#000000",
77+
assistiveTextFontColor: "#666666",
78+
},
79+
};
80+
7381
export const Chromatic = () => (
7482
<>
7583
<Title title="Component anatomy" theme="light" level={2} />
@@ -340,7 +348,48 @@ export const Chromatic = () => (
340348
lobortis eget.
341349
</div>
342350
</DxcAccordion>
343-
<hr />
351+
</ExampleContainer>
352+
<Title title="Opinionated theme" theme="light" level={2} />
353+
<ExampleContainer>
354+
<Title title="With assistive text and icon" theme="light" level={4} />
355+
<HalstackProvider theme={opinionatedTheme}>
356+
<DxcAccordion label="Accordion" assistiveText="Assistive text" icon={folderIcon}>
357+
Content
358+
</DxcAccordion>
359+
</HalstackProvider>
360+
</ExampleContainer>
361+
<ExampleContainer pseudoState="pseudo-hover">
362+
<Title title="Hovered" theme="light" level={4} />
363+
<HalstackProvider theme={opinionatedTheme}>
364+
<DxcAccordion label="Hovered">
365+
<div>
366+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
367+
leo lobortis eget.
368+
</div>
369+
</DxcAccordion>
370+
</HalstackProvider>
371+
</ExampleContainer>
372+
<ExampleContainer pseudoState="pseudo-active">
373+
<Title title="Active" theme="light" level={4} />
374+
<HalstackProvider theme={opinionatedTheme}>
375+
<DxcAccordion label="Active">
376+
<div>
377+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
378+
leo lobortis eget.
379+
</div>
380+
</DxcAccordion>
381+
</HalstackProvider>
382+
</ExampleContainer>
383+
<ExampleContainer>
384+
<Title title="Disabled" theme="light" level={4} />
385+
<HalstackProvider theme={opinionatedTheme}>
386+
<DxcAccordion label="Disabled" assistiveText="Assistive text" icon={folderIcon} disabled>
387+
<div>
388+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
389+
leo lobortis eget.
390+
</div>
391+
</DxcAccordion>
392+
</HalstackProvider>
344393
</ExampleContainer>
345394
</>
346395
);

‎lib/src/alert/Alert.stories.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,21 @@ import React from "react";
22
import DxcAlert from "./Alert";
33
import Title from "../../.storybook/components/Title";
44
import ExampleContainer from "../../.storybook/components/ExampleContainer";
5+
import { HalstackProvider } from "../HalstackContext";
56

67
export default {
78
title: "Alert",
89
component: DxcAlert,
910
};
1011

12+
const opinionatedTheme = {
13+
alert: {
14+
baseColor: "#e6f4ff",
15+
accentColor: "#0067b3",
16+
overlayColor: "#000000b3",
17+
},
18+
};
19+
1120
export const Chromatic = () => (
1221
<>
1322
<ExampleContainer>
@@ -155,6 +164,12 @@ export const Chromatic = () => (
155164
</div>
156165
</DxcAlert>
157166
</ExampleContainer>
167+
<Title title="Opinionated theme" theme="light" level={2} />
168+
<ExampleContainer>
169+
<HalstackProvider theme={opinionatedTheme}>
170+
<DxcAlert inlineText="Info type alert with inline text." />
171+
</HalstackProvider>
172+
</ExampleContainer>
158173
</>
159174
);
160175

@@ -168,3 +183,16 @@ export const ModalAlert = () => (
168183
</DxcAlert>
169184
</ExampleContainer>
170185
);
186+
187+
export const ModalAlertOpinionated = () => (
188+
<ExampleContainer>
189+
<HalstackProvider theme={opinionatedTheme}>
190+
<DxcAlert inlineText="Modal alert." mode="modal" onClose={() => {}}>
191+
<div>
192+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
193+
lobortis eget.
194+
</div>
195+
</DxcAlert>
196+
</HalstackProvider>
197+
</ExampleContainer>
198+
);

‎lib/src/box/Box.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@ import React from "react";
22
import Title from "../../.storybook/components/Title";
33
import ExampleContainer from "../../.storybook/components/ExampleContainer";
44
import DxcBox from "./Box";
5+
import { HalstackProvider } from "../HalstackContext";
56

67
export default {
78
title: "Box ",
89
component: DxcBox,
910
};
1011

12+
const opinionatedTheme = {
13+
box: {
14+
baseColor: "#ffffff",
15+
},
16+
};
17+
1118
export const Chromatic = () => (
1219
<>
1320
<Title title="Display flex" theme="light" level={2} />
@@ -128,5 +135,13 @@ export const Chromatic = () => (
128135
<Title title="FitContent" theme="light" level={4} />
129136
<DxcBox size="fitContent">Box</DxcBox>
130137
</ExampleContainer>
138+
<Title title="Opinionated theme" theme="light" level={2} />
139+
<ExampleContainer>
140+
<HalstackProvider theme={opinionatedTheme}>
141+
<DxcBox display="flex" padding="medium">
142+
Box
143+
</DxcBox>
144+
</HalstackProvider>
145+
</ExampleContainer>
131146
</>
132147
);

‎lib/src/button/Button.stories.tsx‎

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from "react";
2+
import { BackgroundColorProvider } from "../BackgroundColorContext";
23
import DxcButton from "./Button";
34
import DxcFlex from "./../flex/Flex";
4-
import { BackgroundColorProvider } from "../BackgroundColorContext";
55
import Title from "../../.storybook/components/Title";
66
import ExampleContainer from "../../.storybook/components/ExampleContainer";
77
import DarkContainer from "../../.storybook/components/DarkSection";
8+
import { HalstackProvider } from "../HalstackContext";
89

910
export default {
1011
title: "Button",
@@ -48,6 +49,14 @@ const smallIcon = (
4849
</svg>
4950
);
5051

52+
const opinionatedTheme = {
53+
button: {
54+
baseColor: "#5f249f",
55+
primaryFontColor: "#ffffff",
56+
secondaryHoverFontColor: "#ffffff",
57+
},
58+
};
59+
5160
export const Chromatic = () => (
5261
<>
5362
<Title title="Primary" theme="light" level={2} />
@@ -69,7 +78,7 @@ export const Chromatic = () => (
6978
</ExampleContainer>
7079
<ExampleContainer>
7180
<Title title="Disabled" theme="light" level={4} />
72-
<DxcButton label="Primary disabled" disabled />
81+
<DxcButton label="Primary disabled" disabled icon={iconSVG} />
7382
</ExampleContainer>
7483
<ExampleContainer>
7584
<Title title="With left icon" theme="light" level={4} />
@@ -114,7 +123,7 @@ export const Chromatic = () => (
114123
</ExampleContainer>
115124
<ExampleContainer>
116125
<Title title="Disabled" theme="light" level={4} />
117-
<DxcButton mode="secondary" disabled label="Secondary disabled" />
126+
<DxcButton mode="secondary" disabled label="Secondary disabled" icon={iconSVG} />
118127
</ExampleContainer>
119128
<ExampleContainer>
120129
<Title title="With icon" theme="light" level={4} />
@@ -146,7 +155,7 @@ export const Chromatic = () => (
146155
</ExampleContainer>
147156
<ExampleContainer>
148157
<Title title="Disabled" theme="light" level={4} />
149-
<DxcButton mode="text" label="Text disabled" disabled />
158+
<DxcButton mode="text" label="Text disabled" disabled icon={iconSVG} />
150159
</ExampleContainer>
151160
<ExampleContainer>
152161
<Title title="With icon" theme="light" level={4} />
@@ -180,7 +189,7 @@ export const Chromatic = () => (
180189
</ExampleContainer>
181190
<ExampleContainer>
182191
<Title title="Disabled" theme="dark" level={4} />
183-
<DxcButton label="Primary disabled" disabled />
192+
<DxcButton label="Primary disabled" disabled icon={iconSVG} />
184193
</ExampleContainer>
185194
<ExampleContainer>
186195
<Title title="With icon" theme="dark" level={4} />
@@ -205,7 +214,7 @@ export const Chromatic = () => (
205214
</ExampleContainer>
206215
<ExampleContainer>
207216
<Title title="Disabled" theme="dark" level={4} />
208-
<DxcButton mode="secondary" disabled label="Secondary disabled" />
217+
<DxcButton mode="secondary" disabled label="Secondary disabled" icon={iconSVG} />
209218
</ExampleContainer>
210219
<ExampleContainer>
211220
<Title title="With icon" theme="dark" level={4} />
@@ -230,7 +239,7 @@ export const Chromatic = () => (
230239
</ExampleContainer>
231240
<ExampleContainer>
232241
<Title title="Disabled" theme="dark" level={4} />
233-
<DxcButton mode="text" label="Text disabled" disabled />
242+
<DxcButton mode="text" label="Text disabled" disabled icon={iconSVG} />
234243
</ExampleContainer>
235244
<ExampleContainer>
236245
<Title title="With icon" theme="dark" level={4} />
@@ -336,5 +345,81 @@ export const Chromatic = () => (
336345
<DxcButton label="Button" />
337346
</DxcFlex>
338347
</ExampleContainer>
348+
<Title title="Opinionated theme" theme="light" level={2} />
349+
<Title title="Primary" theme="light" level={3} />
350+
<ExampleContainer>
351+
<Title title="Enabled" theme="light" level={4} />
352+
<HalstackProvider theme={opinionatedTheme}>
353+
<DxcButton label="Primary" icon={iconSVG} />
354+
</HalstackProvider>
355+
</ExampleContainer>
356+
<ExampleContainer pseudoState="pseudo-hover">
357+
<Title title="Hovered" theme="light" level={4} />
358+
<DxcButton label="Primary hovered" icon={iconSVG} />
359+
</ExampleContainer>
360+
<ExampleContainer pseudoState="pseudo-focus">
361+
<Title title="Focused" theme="light" level={4} />
362+
<DxcButton label="Primary focused" icon={iconSVG} />
363+
</ExampleContainer>
364+
<ExampleContainer pseudoState="pseudo-active">
365+
<Title title="Actived" theme="light" level={4} />
366+
<DxcButton label="Primary actived" icon={iconSVG} />
367+
</ExampleContainer>
368+
<ExampleContainer>
369+
<Title title="Disabled" theme="light" level={4} />
370+
<HalstackProvider theme={opinionatedTheme}>
371+
<DxcButton label="Primary" icon={iconSVG} disabled />
372+
</HalstackProvider>
373+
</ExampleContainer>
374+
<Title title="Secondary" theme="light" level={3} />
375+
<ExampleContainer>
376+
<Title title="Enabled" theme="light" level={4} />
377+
<HalstackProvider theme={opinionatedTheme}>
378+
<DxcButton mode="secondary" label="Secondary" icon={iconSVG} />
379+
</HalstackProvider>
380+
</ExampleContainer>
381+
<ExampleContainer pseudoState="pseudo-hover">
382+
<Title title="Hovered" theme="light" level={4} />
383+
<DxcButton mode="secondary" label="Secondary hovered" icon={iconSVG} />
384+
</ExampleContainer>
385+
<ExampleContainer pseudoState="pseudo-focus">
386+
<Title title="Focused" theme="light" level={4} />
387+
<DxcButton mode="secondary" label="Secondary focused" icon={iconSVG} />
388+
</ExampleContainer>
389+
<ExampleContainer pseudoState="pseudo-active">
390+
<Title title="Actived" theme="light" level={4} />
391+
<DxcButton mode="secondary" label="Secondary actived" icon={iconSVG} />
392+
</ExampleContainer>
393+
<ExampleContainer>
394+
<Title title="Disabled" theme="light" level={4} />
395+
<HalstackProvider theme={opinionatedTheme}>
396+
<DxcButton mode="secondary" label="Secondary" icon={iconSVG} disabled />
397+
</HalstackProvider>
398+
</ExampleContainer>
399+
<Title title="Text" theme="light" level={3} />
400+
<ExampleContainer>
401+
<Title title="Enabled" theme="light" level={4} />
402+
<HalstackProvider theme={opinionatedTheme}>
403+
<DxcButton mode="text" label="Text" icon={iconSVG} />
404+
</HalstackProvider>
405+
</ExampleContainer>
406+
<ExampleContainer pseudoState="pseudo-hover">
407+
<Title title="Hovered" theme="light" level={4} />
408+
<DxcButton mode="text" label="Text hovered" icon={iconSVG} />
409+
</ExampleContainer>
410+
<ExampleContainer pseudoState="pseudo-focus">
411+
<Title title="Focused" theme="light" level={4} />
412+
<DxcButton mode="text" label="Text focused" icon={iconSVG} />
413+
</ExampleContainer>
414+
<ExampleContainer pseudoState="pseudo-active">
415+
<Title title="Actived" theme="light" level={4} />
416+
<DxcButton mode="text" label="Text actived" icon={iconSVG} />
417+
</ExampleContainer>
418+
<ExampleContainer>
419+
<Title title="Disabled" theme="light" level={4} />
420+
<HalstackProvider theme={opinionatedTheme}>
421+
<DxcButton mode="text" label="Text disabled" icon={iconSVG} disabled />
422+
</HalstackProvider>
423+
</ExampleContainer>
339424
</>
340425
);

‎lib/src/checkbox/Checkbox.stories.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,21 @@ import Title from "../../.storybook/components/Title";
55
import ExampleContainer from "../../.storybook/components/ExampleContainer";
66
import DarkContainer from "../../.storybook/components/DarkSection";
77
import styled from "styled-components";
8+
import { HalstackProvider } from "../HalstackContext";
89

910
export default {
1011
title: "Checkbox",
1112
component: DxcCheckbox,
1213
};
1314

15+
const opinionatedTheme = {
16+
checkbox: {
17+
baseColor: "#0067b3",
18+
checkColor: "#ffffff",
19+
fontColor: "#000000",
20+
},
21+
};
22+
1423
const Checkbox = () => (
1524
<>
1625
<ExampleContainer>
@@ -178,6 +187,49 @@ const Checkbox = () => (
178187
<DxcCheckbox label="Very long label to check its overflowing" labelPosition="after" />
179188
</SmallContainer>
180189
</ExampleContainer>
190+
<Title title="Opinionated theme" theme="light" level={2} />
191+
<ExampleContainer>
192+
<Title title="Default" theme="light" level={4} />
193+
<HalstackProvider theme={opinionatedTheme}>
194+
<DxcCheckbox label="Checkbox" />
195+
</HalstackProvider>
196+
</ExampleContainer>
197+
<ExampleContainer>
198+
<Title title="Checked" theme="light" level={4} />
199+
<HalstackProvider theme={opinionatedTheme}>
200+
<DxcCheckbox label="Checkbox" defaultChecked />
201+
</HalstackProvider>
202+
</ExampleContainer>
203+
<ExampleContainer>
204+
<Title title="Disabled" theme="light" level={4} />
205+
<HalstackProvider theme={opinionatedTheme}>
206+
<DxcCheckbox label="Checkbox" disabled />
207+
</HalstackProvider>
208+
</ExampleContainer>
209+
<ExampleContainer>
210+
<Title title="Disabled checked" theme="light" level={4} />
211+
<HalstackProvider theme={opinionatedTheme}>
212+
<DxcCheckbox label="Checkbox" defaultChecked disabled />
213+
</HalstackProvider>
214+
</ExampleContainer>
215+
<ExampleContainer pseudoState="pseudo-focus">
216+
<Title title="Focused" theme="light" level={4} />
217+
<HalstackProvider theme={opinionatedTheme}>
218+
<DxcCheckbox label="Focused" />
219+
</HalstackProvider>
220+
</ExampleContainer>
221+
<ExampleContainer pseudoState="pseudo-hover">
222+
<Title title="Hovered" theme="light" level={4} />
223+
<HalstackProvider theme={opinionatedTheme}>
224+
<DxcCheckbox label="Hovered" />
225+
</HalstackProvider>
226+
</ExampleContainer>
227+
<ExampleContainer pseudoState="pseudo-hover">
228+
<Title title="Hovered and checked" theme="light" level={4} />
229+
<HalstackProvider theme={opinionatedTheme}>
230+
<DxcCheckbox label="Hovered" defaultChecked />
231+
</HalstackProvider>
232+
</ExampleContainer>
181233
</>
182234
);
183235

0 commit comments

Comments
 (0)