Skip to content

Commit 19207f7

Browse files
jsuarezgonzjsuarezgonz
authored
Merge branch 'master' into gomezivann/remove-uuid
2 parents 85bc4ef + ff6c8bf commit 19207f7

File tree

17 files changed

+423
-386
lines changed

17 files changed

+423
-386
lines changed

‎lib/package-lock.json‎

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

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
"react": "^18.2.0",
8181
"react-dom": "^18.2.0",
8282
"storybook": "^7.5.3",
83-
"storybook-addon-pseudo-states": "^2.1.2",
83+
"storybook-addon-pseudo-states": "^3.0.1",
8484
"styled-components": "^5.0.1",
8585
"typescript": "^5.3.3"
8686
}

‎lib/src/slider/Slider.stories.tsx‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import React from "react";
2+
import DxcSlider from "./Slider";
3+
import Title from "../../.storybook/components/Title";
4+
import ExampleContainer from "../../.storybook/components/ExampleContainer";
5+
import { HalstackProvider } from "../HalstackContext";
6+
7+
export default {
8+
title: "Slider",
9+
component: DxcSlider,
10+
};
11+
12+
const labelFormat = (value) => `${value}E100000000000000000000000`;
13+
14+
const opinionatedTheme = {
15+
slider: {
16+
baseColor: "#0067b3",
17+
fontColor: "#000000",
18+
totalLineColor: "#e6e6e6",
19+
},
20+
};
21+
22+
export const Chromatic = () => (
23+
<>
24+
<Title title="States" theme="light" level={2} />
25+
<ExampleContainer pseudoState="pseudo-hover">
26+
<Title title="Hovered" theme="light" level={4} />
27+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
28+
</ExampleContainer>
29+
<ExampleContainer pseudoState="pseudo-active">
30+
<Title title="Active" theme="light" level={4} />
31+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
32+
</ExampleContainer>
33+
<ExampleContainer pseudoState="pseudo-focus">
34+
<Title title="Focused" theme="light" level={4} />
35+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
36+
</ExampleContainer>
37+
<ExampleContainer>
38+
<Title title="Disabled" theme="light" level={4} />
39+
<DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
40+
</ExampleContainer>
41+
<ExampleContainer>
42+
<Title title="Disabled discrete slider with input" theme="light" level={4} />
43+
<DxcSlider
44+
label="Slider"
45+
helperText="Help message"
46+
disabled
47+
defaultValue={40}
48+
minValue={0}
49+
maxValue={50}
50+
showLimitsValues
51+
showInput
52+
marks
53+
step={10}
54+
/>
55+
</ExampleContainer>
56+
<Title title="Variants" theme="light" level={2} />
57+
<ExampleContainer>
58+
<Title title="Continuous slider" theme="light" level={4} />
59+
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
60+
</ExampleContainer>
61+
<ExampleContainer>
62+
<Title title="Discrete slider" theme="light" level={4} />
63+
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
64+
</ExampleContainer>
65+
<ExampleContainer>
66+
<Title title="Discrete slider with input" theme="light" level={4} />
67+
<DxcSlider
68+
defaultValue={20}
69+
minValue={0}
70+
maxValue={50}
71+
label="Slider"
72+
helperText="Help message"
73+
showLimitsValues
74+
showInput
75+
marks
76+
step={10}
77+
/>
78+
</ExampleContainer>
79+
<Title title="Margins" theme="light" level={2} />
80+
<ExampleContainer>
81+
<Title title="Xxsmall" theme="light" level={4} />
82+
<DxcSlider label="Xxsmall" margin="xxsmall" />
83+
</ExampleContainer>
84+
<ExampleContainer>
85+
<Title title="Xsmall" theme="light" level={4} />
86+
<DxcSlider label="Xsmall" margin="xsmall" />
87+
</ExampleContainer>
88+
<ExampleContainer>
89+
<Title title="Small" theme="light" level={4} />
90+
<DxcSlider label="Small" margin="small" />
91+
</ExampleContainer>
92+
<ExampleContainer>
93+
<Title title="Medium" theme="light" level={4} />
94+
<DxcSlider label="Medium" margin="medium" />
95+
</ExampleContainer>
96+
<ExampleContainer>
97+
<Title title="Large" theme="light" level={4} />
98+
<DxcSlider label="Large" margin="large" />
99+
</ExampleContainer>
100+
<ExampleContainer>
101+
<Title title="Xlarge" theme="light" level={4} />
102+
<DxcSlider label="Xlarge" margin="xlarge" />
103+
</ExampleContainer>
104+
<ExampleContainer>
105+
<Title title="Xxlarge" theme="light" level={4} />
106+
<DxcSlider label="Xxlarge" margin="xxlarge" />
107+
</ExampleContainer>
108+
<Title title="Sizes" theme="light" level={2} />
109+
<ExampleContainer>
110+
<Title title="Medium" theme="light" level={4} />
111+
<DxcSlider label="Medium" size="medium" />
112+
</ExampleContainer>
113+
<ExampleContainer>
114+
<Title title="Large" theme="light" level={4} />
115+
<DxcSlider label="Large" size="large" />
116+
</ExampleContainer>
117+
<ExampleContainer>
118+
<Title title="FillParent" theme="light" level={4} />
119+
<DxcSlider label="FillParent" size="fillParent" />
120+
</ExampleContainer>
121+
<ExampleContainer>
122+
<Title title="Large limit values labels" theme="light" level={4} />
123+
<DxcSlider
124+
label="Slider"
125+
helperText="Help message"
126+
showLimitsValues
127+
labelFormatCallback={labelFormat}
128+
size="large"
129+
/>
130+
</ExampleContainer>
131+
<Title title="Opinionated theme" theme="light" level={2} />
132+
<ExampleContainer pseudoState="pseudo-hover">
133+
<Title title="Hovered" theme="light" level={4} />
134+
<HalstackProvider theme={opinionatedTheme}>
135+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
136+
</HalstackProvider>
137+
</ExampleContainer>
138+
<ExampleContainer pseudoState="pseudo-active">
139+
<Title title="Active" theme="light" level={4} />
140+
<HalstackProvider theme={opinionatedTheme}>
141+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
142+
</HalstackProvider>
143+
</ExampleContainer>
144+
<ExampleContainer pseudoState="pseudo-focus">
145+
<Title title="Focused" theme="light" level={4} />
146+
<HalstackProvider theme={opinionatedTheme}>
147+
<DxcSlider label="Slider" helperText="Help message" showLimitsValues />
148+
</HalstackProvider>
149+
</ExampleContainer>
150+
<ExampleContainer>
151+
<Title title="Disabled discrete slider with input" theme="light" level={4} />{" "}
152+
<HalstackProvider theme={opinionatedTheme}>
153+
<DxcSlider
154+
label="Slider"
155+
helperText="Help message"
156+
disabled
157+
defaultValue={40}
158+
minValue={0}
159+
maxValue={50}
160+
showLimitsValues
161+
showInput
162+
marks
163+
step={10}
164+
/>
165+
</HalstackProvider>
166+
</ExampleContainer>
167+
<ExampleContainer>
168+
<Title title="Continuous slider" theme="light" level={4} />
169+
<HalstackProvider theme={opinionatedTheme}>
170+
<DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
171+
</HalstackProvider>
172+
</ExampleContainer>
173+
<ExampleContainer>
174+
<Title title="Discrete slider" theme="light" level={4} />
175+
<HalstackProvider theme={opinionatedTheme}>
176+
<DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
177+
</HalstackProvider>
178+
</ExampleContainer>
179+
</>
180+
);

‎website/pages/_app.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,10 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
9595
size="fillParent"
9696
clearable
9797
margin={{
98-
top: "small",
99-
bottom: "small",
100-
right: "xsmall",
101-
left: "xsmall",
98+
top: "large",
99+
bottom: "large",
100+
right: "medium",
101+
left: "medium",
102102
}}
103103
/>
104104
</DxcApplicationLayout.SideNav.Section>

‎website/pages/principles/iconography.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from "next/head";
2+
import IconographyPage from "../../screens/principles/iconography/IconographyPage";
3+
4+
const Iconography = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Iconography — Halstack Design System</title>
9+
</Head>
10+
<IconographyPage></IconographyPage>
11+
</>
12+
);
13+
};
14+
15+
export default Iconography;

‎website/pages/principles/iconography/index.tsx‎

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

‎website/pages/principles/iconography/usage.tsx‎

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

0 commit comments

Comments
 (0)