diff --git a/src/components/Pips.js b/src/components/Pips.js index 1bc7f11494..d1a0f6a857 100644 --- a/src/components/Pips.js +++ b/src/components/Pips.js @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; */ const Pips = (props) => { const { + large, count, currentIndex, } = props; @@ -17,8 +18,10 @@ const Pips = (props) => { pips.push(
); } + const className = `pips ${large ? 'pips--large' : ''}`; + return ( -
+
{ pips }
@@ -27,6 +30,7 @@ const Pips = (props) => { }; Pips.propTypes = { + large: PropTypes.bool, count: PropTypes.number, currentIndex: PropTypes.number, }; @@ -34,6 +38,7 @@ Pips.propTypes = { Pips.defaultProps = { count: 0, currentIndex: 0, + large: false, }; export default Pips; diff --git a/src/containers/FormWizard.js b/src/containers/FormWizard.js index 8a8e052299..11a6241cd3 100644 --- a/src/containers/FormWizard.js +++ b/src/containers/FormWizard.js @@ -69,7 +69,7 @@ class FormWizard extends Component { return (
- +
{this.state.fieldIndex !== 0 && } diff --git a/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap b/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap index 6599c38b58..d33a821cf4 100644 --- a/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap +++ b/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap @@ -47,6 +47,7 @@ ShallowWrapper {
,
, "className": "prompts__pips", }, @@ -157,6 +161,7 @@ ShallowWrapper { "props": Object { "count": 2, "currentIndex": 0, + "large": false, }, "ref": null, "rendered": null, @@ -243,6 +248,7 @@ ShallowWrapper {
,
, "className": "prompts__pips", }, @@ -353,6 +362,7 @@ ShallowWrapper { "props": Object { "count": 2, "currentIndex": 0, + "large": false, }, "ref": null, "rendered": null, diff --git a/src/styles/components/_pips.scss b/src/styles/components/_pips.scss index 840bfece8c..bee9ac6a2f 100644 --- a/src/styles/components/_pips.scss +++ b/src/styles/components/_pips.scss @@ -1,5 +1,8 @@ -.pips { +$block: pips; + +.#{$block} { $pip-size: 10px; + $large-pip-size: 15px; &__pips { height: $pip-size; @@ -27,4 +30,16 @@ background-color: palette('light-background'); } } + + &--large { + .#{$block}__pip { + border: 1px solid var(--primary); + height: $large-pip-size; + width: $large-pip-size; + + &--active { + background-color: var(--primary); + } + } + } }