Merge pull request #619 from codaco/fix/form-wizard-styling

Emphasize form wizard pips
complexdatacollective · Aug 1, 2018 · 522e307 · 522e307
2 parents cf47a8a + 3b66e71
commit 522e307
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git 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(<div key={index} className={classes} />);
   }
 
+  const className = `pips ${large ? 'pips--large' : ''}`;
+
   return (
-    <div className="pips">
+    <div className={className}>
       <div className="pips__pips">
         { pips }
       </div>
@@ -27,13 +30,15 @@ const Pips = (props) => {
 };
 
 Pips.propTypes = {
+  large: PropTypes.bool,
   count: PropTypes.number,
   currentIndex: PropTypes.number,
 };
 
 Pips.defaultProps = {
   count: 0,
   currentIndex: 0,
+  large: false,
 };
 
 export default Pips;
diff --git a/src/containers/FormWizard.js b/src/containers/FormWizard.js
@@ -69,7 +69,7 @@ class FormWizard extends Component {
     return (
       <div className="form-wizard">
         <div className="form-wizard__pips">
-          <Pips count={this.shownFields().length} currentIndex={this.state.fieldIndex} />
+          <Pips count={this.shownFields().length} currentIndex={this.state.fieldIndex} large />
         </div>
         <div className="form-wizard__previous">
           {this.state.fieldIndex !== 0 && <Icon name="form-arrow-left" onClick={this.previousField} />}

diff --git a/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap b/src/containers/__tests__/__snapshots__/PromptSwiper.test.js.snap
@@ -47,6 +47,7 @@ ShallowWrapper {
               <Pips
                 count={2}
                 currentIndex={0}
+                large={false}
               />
             </div>
             <div
@@ -84,6 +85,7 @@ ShallowWrapper {
               <Pips
                 count={2}
                 currentIndex={0}
+                large={false}
               />
             </div>
             <div
@@ -117,6 +119,7 @@ ShallowWrapper {
                 <Pips
                   count={2}
                   currentIndex={0}
+                  large={false}
                 />
               </div>,
               <div
@@ -146,6 +149,7 @@ ShallowWrapper {
                 "children": <Pips
                   count={2}
                   currentIndex={0}
+                  large={false}
                 />,
                 "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 {
                 <Pips
                   count={2}
                   currentIndex={0}
+                  large={false}
                 />
               </div>
               <div
@@ -280,6 +286,7 @@ ShallowWrapper {
                 <Pips
                   count={2}
                   currentIndex={0}
+                  large={false}
                 />
               </div>
               <div
@@ -313,6 +320,7 @@ ShallowWrapper {
                   <Pips
                     count={2}
                     currentIndex={0}
+                    large={false}
                   />
                 </div>,
                 <div
@@ -342,6 +350,7 @@ ShallowWrapper {
                   "children": <Pips
                     count={2}
                     currentIndex={0}
+                    large={false}
                   />,
                   "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
@@ -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);
+      }
+    }
+  }
 }