feat(styled-components): fix wizard step alignment issues

Author: Ian Wensink

src/Wizard/WizardProgress/styled/bar.js

@@ -4,5 +4,5 @@ export default styled.ul`
   display: flex;
   margin: 0 0 calc(2 * ${p => p.theme.spacingUnit}) 0;
   padding: 0;
-  width: 100%;
+  width: calc(100% - 15px);
 `;

src/Wizard/WizardProgress/styled/step-title.js

@@ -4,6 +4,7 @@ export default styled.span`
   display: none;
 
   @media (min-width: 768px) {
+    line-height: 1em;
     display: block;
   }
 `;

src/Wizard/WizardProgress/styled/step.js

@@ -7,15 +7,20 @@ export default styled.li`
   margin-right: 5px;
   background: #f4f4f4;
   z-index: ${p => 11 - p.step};
+  margin-left: -5px;
+  
+  &:first-child {
+    margin-left: 0;
+  }
 
   &::before {
     position: absolute;
     content: '';
     top: 0;
     left: 0;
     border-left: 20px solid #fff;
-    border-bottom: 24px solid transparent;
-    border-top: 24px solid transparent;
+    border-bottom: 22.5px solid transparent;
+    border-top: 22.5px solid transparent;
     clear: both;
   }
 
@@ -25,12 +30,12 @@ export default styled.li`
     top: 0;
     right: -20px;
     border-left: 20px solid #f4f4f4;
-    border-bottom: 24px solid transparent;
-    border-top: 24px solid transparent;
+    border-bottom: 22.5px solid transparent;
+    border-top: 22.5px solid transparent;
     clear: both;
   }
   
-  ${p => p.step === 1 && `
+  ${p => p.step === 0 && `
     &::before {
       display: none;
     }