Skip to content

Commit d04dfa0

Browse files
jasonbasuiljasonbasuil
authored
add Steps components to DS (#539)
1 parent 1678324 commit d04dfa0

File tree

10 files changed

+530
-0
lines changed

10 files changed

+530
-0
lines changed

‎cypress/integration/steps_spec.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const steps = [
2+
{
3+
name: 'Default',
4+
path: 'components-steps--default',
5+
},
6+
{
7+
name: 'Varying Content Length',
8+
path: 'components-steps--varying-content-length',
9+
},
10+
];
11+
12+
describe('Steps', () => {
13+
steps.forEach((test) => {
14+
it(test.name, () => {
15+
cy.visit(test.path);
16+
cy.get('#storybook-preview-iframe').iframe().find('.Steps').should('exist');
17+
cy.takePercySnapshot(test.path);
18+
});
19+
});
20+
});

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7349,6 +7349,211 @@ exports[`Storyshots Components/Selects/Single Searchable 1`] = `
73497349
</div>
73507350
`;
73517351

7352+
exports[`Storyshots Components/Steps Default 1`] = `
7353+
<div
7354+
style={
7355+
Object {
7356+
"padding": "1rem",
7357+
}
7358+
}
7359+
>
7360+
<div
7361+
className="Steps"
7362+
>
7363+
<div
7364+
className="Step Step--1"
7365+
>
7366+
<div
7367+
className="Step__circle"
7368+
>
7369+
<span
7370+
className="Step__circle__number"
7371+
>
7372+
1
7373+
</span>
7374+
</div>
7375+
<span
7376+
className="Step__text-container"
7377+
>
7378+
<span
7379+
className="Step__text-container__text"
7380+
>
7381+
<b>
7382+
Create
7383+
</b>
7384+
a profile and browse studies that interest you.
7385+
</span>
7386+
</span>
7387+
</div>
7388+
<div
7389+
className="Step Step--2"
7390+
>
7391+
<div
7392+
className="Step__circle"
7393+
>
7394+
<span
7395+
className="Step__circle__number"
7396+
>
7397+
2
7398+
</span>
7399+
</div>
7400+
<span
7401+
className="Step__text-container"
7402+
>
7403+
<span
7404+
className="Step__text-container__text"
7405+
>
7406+
<b>
7407+
Confirm
7408+
</b>
7409+
your time slot, participate, and get paid!
7410+
</span>
7411+
</span>
7412+
</div>
7413+
<div
7414+
className="Step Step--3"
7415+
>
7416+
<div
7417+
className="Step__circle"
7418+
>
7419+
<span
7420+
className="Step__circle__number"
7421+
>
7422+
3
7423+
</span>
7424+
</div>
7425+
<span
7426+
className="Step__text-container"
7427+
>
7428+
<span
7429+
className="Step__text-container__text"
7430+
>
7431+
<b>
7432+
Something
7433+
</b>
7434+
else...
7435+
</span>
7436+
</span>
7437+
</div>
7438+
</div>
7439+
</div>
7440+
`;
7441+
7442+
exports[`Storyshots Components/Steps Varying Content Length 1`] = `
7443+
<div
7444+
style={
7445+
Object {
7446+
"padding": "1rem",
7447+
}
7448+
}
7449+
>
7450+
<div
7451+
className="Steps"
7452+
>
7453+
<div
7454+
className="Step Step--1"
7455+
>
7456+
<div
7457+
className="Step__circle"
7458+
>
7459+
<span
7460+
className="Step__circle__number"
7461+
>
7462+
1
7463+
</span>
7464+
</div>
7465+
<span
7466+
className="Step__text-container"
7467+
>
7468+
<span
7469+
className="Step__text-container__text"
7470+
>
7471+
<b>
7472+
Create
7473+
</b>
7474+
a profile and browse studies that interest you.
7475+
</span>
7476+
</span>
7477+
</div>
7478+
<div
7479+
className="Step Step--2"
7480+
>
7481+
<div
7482+
className="Step__circle"
7483+
>
7484+
<span
7485+
className="Step__circle__number"
7486+
>
7487+
2
7488+
</span>
7489+
</div>
7490+
<span
7491+
className="Step__text-container"
7492+
>
7493+
<span
7494+
className="Step__text-container__text"
7495+
>
7496+
<b>
7497+
Lorem
7498+
</b>
7499+
ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere vestibulum velit, interdum lacinia quam tincidunt eget. Fusce sagittis luctus massa, vitae posuere odio imperdiet ac. Nam sem leo, blandit a orci vel, lacinia volutpat libero. Etiam maximus nulla sed eleifend molestie. Aliquam et posuere justo, id suscipit mauris. Sed luctus tortor nec accumsan commodo. Nunc in lacus pretium, condimentum lorem sit amet, hendrerit arcu. Quisque gravida ullamcorper magna, at hendrerit purus viverra vel. Donec tempor purus dui, nec pulvinar est vestibulum a. Nam condimentum facilisis orci, nec elementum justo semper sit amet.
7500+
</span>
7501+
</span>
7502+
</div>
7503+
<div
7504+
className="Step Step--3"
7505+
>
7506+
<div
7507+
className="Step__circle"
7508+
>
7509+
<span
7510+
className="Step__circle__number"
7511+
>
7512+
3
7513+
</span>
7514+
</div>
7515+
<span
7516+
className="Step__text-container"
7517+
>
7518+
<span
7519+
className="Step__text-container__text"
7520+
>
7521+
<b>
7522+
Confirm
7523+
</b>
7524+
your time slot, participate, and get paid!
7525+
</span>
7526+
</span>
7527+
</div>
7528+
<div
7529+
className="Step Step--4"
7530+
>
7531+
<div
7532+
className="Step__circle"
7533+
>
7534+
<span
7535+
className="Step__circle__number"
7536+
>
7537+
4
7538+
</span>
7539+
</div>
7540+
<span
7541+
className="Step__text-container"
7542+
>
7543+
<span
7544+
className="Step__text-container__text"
7545+
>
7546+
<b>
7547+
Something
7548+
</b>
7549+
else...
7550+
</span>
7551+
</span>
7552+
</div>
7553+
</div>
7554+
</div>
7555+
`;
7556+
73527557
exports[`Storyshots Components/Table Default 1`] = `
73537558
<div
73547559
style={

‎src/Steps/Step.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
5+
import './Step.scss';
6+
7+
const Step = ({
8+
className,
9+
circleText,
10+
text,
11+
...props
12+
}) => (
13+
<div
14+
className={classNames('Step', className, `Step--${circleText}`)}
15+
{...props}
16+
>
17+
<div className="Step__circle">
18+
<span className="Step__circle__number">
19+
{circleText}
20+
</span>
21+
</div>
22+
<span className="Step__text-container">
23+
<span className="Step__text-container__text">{text}</span>
24+
</span>
25+
</div>
26+
);
27+
28+
Step.propTypes = {
29+
circleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
30+
className: PropTypes.string,
31+
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
32+
};
33+
34+
Step.defaultProps = {
35+
circleText: undefined,
36+
className: undefined,
37+
text: undefined,
38+
};
39+
40+
export default Step;

‎src/Steps/Step.scss‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import '../../scss/theme';
2+
3+
$step-circle-size: 2.5rem;
4+
$text-container-margin-top: 0.625rem;
5+
6+
.Step {
7+
display: grid;
8+
grid-template-columns: $step-circle-size auto;
9+
grid-template-rows: auto auto;
10+
11+
&__circle {
12+
grid-column-start: 1;
13+
grid-row-start: 1;
14+
15+
background: $ux-white;
16+
border: 1px solid $ux-emerald-600;
17+
border-radius: 50%;
18+
19+
height: 0;
20+
width: 100%;
21+
padding-bottom: 95%;
22+
23+
position: relative;
24+
25+
z-index: 1;
26+
27+
&__number {
28+
@include font-type-40--bold;
29+
color: $ux-emerald-600;
30+
float: left;
31+
line-height: 1;
32+
margin-top: -0.5rem;
33+
padding-top: 50%;
34+
text-align: center;
35+
width: 100%;
36+
}
37+
}
38+
39+
// removes last line
40+
&:last-of-type {
41+
.Step__text-container {
42+
border-left: none;
43+
}
44+
}
45+
46+
&__text-container {
47+
grid-column-start: 2;
48+
grid-column-end: 3;
49+
grid-row-start: 1;
50+
grid-row-end: 2;
51+
52+
display: flex;
53+
position: relative;
54+
// translates the text-container so that border is centered with circle
55+
right: 1.25rem;
56+
57+
min-height: ($step-circle-size * 2) - $ux-spacing-30;
58+
59+
border-left: 1px solid $ux-emerald-600;
60+
61+
// centers text container with step circle
62+
margin-top: $text-container-margin-top;
63+
64+
// provides padding bottom between steps
65+
padding-bottom: $ux-spacing-30;
66+
67+
&__text {
68+
margin-left: $ux-spacing-60;
69+
}
70+
}
71+
}
72+

‎src/Steps/Steps.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
5+
import './Steps.scss';
6+
7+
const Steps = ({ children, className, ...props }) => (
8+
<div className={classNames('Steps', className)} {...props}>
9+
{children}
10+
</div>
11+
);
12+
13+
Steps.propTypes = {
14+
children: PropTypes.node,
15+
className: PropTypes.string,
16+
};
17+
18+
Steps.defaultProps = {
19+
children: undefined,
20+
className: undefined,
21+
};
22+
23+
export default Steps;

0 commit comments

Comments
 (0)