Skip to content

Commit c6b347c

Browse files
sametwebsametweb
committed
allSteps() added to each step's props, progress property added to each steps' props.step
1 parent 35ec85b commit c6b347c

4 files changed

Lines changed: 341 additions & 326 deletions

File tree

‎prettier.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
trailingComma: "all",
3+
tabWidth: 2,
4+
bracketSpacing: true,
5+
useTabs: true,
6+
singleQuote: false,
7+
semi: true,
8+
requirePragma: false,
9+
proseWrap: "preserve",
10+
arrowParens: "always",
11+
htmlWhitespaceSensitivity: "css",
12+
};

‎src/App.js‎

Lines changed: 142 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -2,161 +2,160 @@ import React from "react";
22
import { Steps, Step } from "./lib";
33

44
const Step1 = (props) => {
5-
// Test Change 4
6-
return (
7-
<div className="step">
8-
First Name:{" "}
9-
<input
10-
name="firstname"
11-
data-testid="firstname"
12-
value={props.getState("firstname")}
13-
onChange={props.handleChange}
14-
/>
15-
Last Name:{" "}
16-
<input
17-
name="lastname"
18-
data-testid="lastname"
19-
value={props.getState("lastname")}
20-
onChange={props.handleChange}
21-
/>
22-
Over 18?{" "}
23-
<input
24-
type="checkbox"
25-
name="over18"
26-
checked={props.getState("over18")}
27-
onChange={props.handleChange}
28-
/>
29-
<span>
30-
<button
31-
data-testid="green"
32-
onClick={() => props.setState("color", "green")}
33-
>
34-
Green
35-
</button>
36-
<button
37-
data-testid="blue"
38-
onClick={() => props.setState("color", "blue")}
39-
>
40-
Blue
41-
</button>
42-
</span>
43-
{
44-
<button disabled={props.step.isFirst()} onClick={props.prev}>
45-
Previous
46-
</button>
47-
}
48-
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
49-
<button data-testid="jump3" onClick={() => props.jump(3)}>
50-
Jump to 3. Step
51-
</button>
52-
<button data-testid="jump5" onClick={() => props.jump(5)}>
53-
Jump to 5. Step
54-
</button>
55-
</div>
56-
);
5+
return (
6+
<div className="step">
7+
First Name:{" "}
8+
<input
9+
name="firstname"
10+
data-testid="firstname"
11+
value={props.getState("firstname")}
12+
onChange={props.handleChange}
13+
/>
14+
Last Name:{" "}
15+
<input
16+
name="lastname"
17+
data-testid="lastname"
18+
value={props.getState("lastname")}
19+
onChange={props.handleChange}
20+
/>
21+
Over 18?{" "}
22+
<input
23+
type="checkbox"
24+
name="over18"
25+
checked={props.getState("over18")}
26+
onChange={props.handleChange}
27+
/>
28+
<span>
29+
<button
30+
data-testid="green"
31+
onClick={() => props.setState("color", "green")}
32+
>
33+
Green
34+
</button>
35+
<button
36+
data-testid="blue"
37+
onClick={() => props.setState("color", "blue")}
38+
>
39+
Blue
40+
</button>
41+
</span>
42+
{
43+
<button disabled={props.step.isFirst()} onClick={props.prev}>
44+
Previous
45+
</button>
46+
}
47+
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
48+
<button data-testid="jump3" onClick={() => props.jump(3)}>
49+
Jump to 3. Step
50+
</button>
51+
<button data-testid="jump5" onClick={() => props.jump(5)}>
52+
Jump to 5. Step
53+
</button>
54+
</div>
55+
);
5756
};
5857

5958
const Step2 = (props) => {
60-
return (
61-
<div className="step">
62-
Email:{" "}
63-
<input
64-
name="email"
65-
data-testid="email"
66-
value={props.getState("email")}
67-
onChange={props.handleChange}
68-
/>
69-
Password:{" "}
70-
<input
71-
name="password"
72-
data-testid="password"
73-
value={props.getState("password")}
74-
onChange={props.handleChange}
75-
/>
76-
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
77-
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
78-
</div>
79-
);
59+
return (
60+
<div className="step">
61+
Email:{" "}
62+
<input
63+
name="email"
64+
data-testid="email"
65+
value={props.getState("email")}
66+
onChange={props.handleChange}
67+
/>
68+
Password:{" "}
69+
<input
70+
name="password"
71+
data-testid="password"
72+
value={props.getState("password")}
73+
onChange={props.handleChange}
74+
/>
75+
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
76+
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
77+
</div>
78+
);
8079
};
8180

8281
const Step3 = (props) => {
83-
return (
84-
<div className="step">
85-
Address:{" "}
86-
<input
87-
name="address"
88-
data-testid="address"
89-
value={props.getState("address")}
90-
onChange={props.handleChange}
91-
/>
92-
Phone:{" "}
93-
<input
94-
name="phone"
95-
data-testid="phone"
96-
value={props.getState("phone")}
97-
onChange={props.handleChange}
98-
/>
99-
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
100-
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
101-
</div>
102-
);
82+
return (
83+
<div className="step">
84+
Address:{" "}
85+
<input
86+
name="address"
87+
data-testid="address"
88+
value={props.getState("address")}
89+
onChange={props.handleChange}
90+
/>
91+
Phone:{" "}
92+
<input
93+
name="phone"
94+
data-testid="phone"
95+
value={props.getState("phone")}
96+
onChange={props.handleChange}
97+
/>
98+
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
99+
{props.step.hasNext() && <button onClick={props.next}>Next</button>}
100+
</div>
101+
);
103102
};
104103

105104
const Step4 = (props) => {
106-
return (
107-
<div className="step">
108-
<p>
109-
<strong>Name:</strong>
110-
<span data-testid="final_name">
111-
{props.getState("firstname")} {props.getState("lastname")}
112-
</span>
113-
</p>
114-
<p>
115-
<strong>Email:</strong>
116-
<span data-testid="final_email">{props.getState("email")}</span>
117-
</p>
118-
<p>
119-
<strong>Password:</strong>
120-
<span data-testid="final_pass">{props.getState("password")}</span>
121-
</p>
122-
<p>
123-
<strong>Address:</strong>
124-
<span data-testid="final_address">{props.getState("address")}</span>
125-
</p>
126-
<p>
127-
<strong>Phone:</strong>
128-
<span data-testid="final_phone">{props.getState("phone")}</span>
129-
</p>
130-
<p>
131-
<strong>Color Choice:</strong>
132-
<span data-testid="final_color">{props.getState("color")}</span>
133-
</p>
134-
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
135-
{
136-
<button
137-
data-testid="last-next"
138-
onClick={props.next}
139-
disabled={props.step.isLast()}
140-
>
141-
Next
142-
</button>
143-
}
144-
</div>
145-
);
105+
return (
106+
<div className="step">
107+
<p>
108+
<strong>Name:</strong>
109+
<span data-testid="final_name">
110+
{props.getState("firstname")} {props.getState("lastname")}
111+
</span>
112+
</p>
113+
<p>
114+
<strong>Email:</strong>
115+
<span data-testid="final_email">{props.getState("email")}</span>
116+
</p>
117+
<p>
118+
<strong>Password:</strong>
119+
<span data-testid="final_pass">{props.getState("password")}</span>
120+
</p>
121+
<p>
122+
<strong>Address:</strong>
123+
<span data-testid="final_address">{props.getState("address")}</span>
124+
</p>
125+
<p>
126+
<strong>Phone:</strong>
127+
<span data-testid="final_phone">{props.getState("phone")}</span>
128+
</p>
129+
<p>
130+
<strong>Color Choice:</strong>
131+
<span data-testid="final_color">{props.getState("color")}</span>
132+
</p>
133+
{props.step.hasPrev() && <button onClick={props.prev}>Previous</button>}
134+
{
135+
<button
136+
data-testid="last-next"
137+
onClick={props.next}
138+
disabled={props.step.isLast()}
139+
>
140+
Next
141+
</button>
142+
}
143+
</div>
144+
);
146145
};
147146

148147
const App = () => {
149-
return (
150-
<div className="steps_wrapper">
151-
<h1>React Step Builder v1.1.0</h1>
152-
<Steps>
153-
<Step title="" component={Step1} />
154-
<Step title="Login Info" component={Step2} />
155-
<Step title="Contact Info" component={Step3} />
156-
<Step title="Overview" component={Step4} />
157-
</Steps>
158-
</div>
159-
);
148+
return (
149+
<div className="steps_wrapper">
150+
<h1>React Step Builder v1.1.0</h1>
151+
<Steps>
152+
<Step title="" component={Step1} />
153+
<Step title="Login Info" component={Step2} />
154+
<Step title="Contact Info" component={Step3} />
155+
<Step title="Overview" component={Step4} />
156+
</Steps>
157+
</div>
158+
);
160159
};
161160

162161
export default App;

0 commit comments

Comments
 (0)