Add focus for base button

src/js/common/stories/Button.stories.js → src/js/common/stories/Buttons.stories.js

@@ -4,7 +4,7 @@ import Button from '../../components/Buttons/BaseButton';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
-  title: 'Example/Button',
+  title: 'Design System/Buttons',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout

src/js/common/stories/Colors.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import colors from '../components/Style/Colors';
+
+export default {
+  title: 'Design System/Colors',
+};
+
+const ColorBox = ({ color, label, subtitle }) => (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '220px' }}>
+      <div
+      style={{
+        backgroundColor: color,
+        width: '120px',
+        height: '120px',
+        borderRadius: '50%',
+        strokeWidth: '2px',
+        stroke: '#EFEFEF',
+        boxShadow: '3px 9px 6px 0px rgba(0, 0, 0, 0.25) inset, 10px 14px 11px 0px rgba(0, 0, 0, 0.16) inset',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+      }}
+      />
+      <div style={{ marginTop: '14px', color: colors.darkGrey, textAlign: 'center', fontFamily: 'Roboto', fontSize: '18px', fontStyle: 'normal', fontWeight: 400 }}>{label}</div>
+      <div style={{ marginBottom: '14px', color: colors.grey, textAlign: 'center', fontFamily: 'Roboto', fontSize: '20px', fontStyle: 'normal', fontWeight: 400, lineHeight: '120.4%', textTransform: 'lowercase' }}>{subtitle}</div>
+    </div>
+);
+
+export const Colors = () => (
+  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+    <ColorBox color={colors.primary} label="Primary Color" subtitle="#0834CD" />
+    <ColorBox color={colors.primaryHover} label="Primary Hover Color" subtitle="#09288A" />
+    <ColorBox color={colors.darkGrey} label="Dark Grey" subtitle="#454F69" />
+    <ColorBox color={colors.middleGrey} label="Middle Grey" subtitle="#8C92A2" />
+  </div>
+);
+

src/js/components/Buttons/BaseButton.jsx

@@ -4,48 +4,52 @@ import styled from 'styled-components';
 import colors from '../../common/components/Style/Colors';
 
 const StyledButton = styled.button`
-  /* Default styles */
-  color: ${colors.white};
-  font-weight: 600;
-  border-radius: 4px;
-  aria-label: "Button";
-  border: none;
-  cursor: pointer;
+/* Default styles */
+color: ${colors.white};
+font-weight: 600;
+border-radius: 4px;
+aria-label: "Button";
+border: none;
+cursor: pointer;
 
-  /* Hover state */
-  &:hover {
-    background-color: ${colors.primaryHover};
-  }
-
-  /* Primary styles */
-  ${(props) => props.primary && `
-    background-color: ${colors.primary};
-    color: white;
-  `}
+&:focus {
+  outline: 2px solid ${colors.primary} !important;
+  outline-offset: 2px;
+}
 
-  /* Primary Disabled styles */
-  ${(props) => !props.primary && `
-    background-color: ${colors.lightGrey};
-    color: ${colors.grey};
-    cursor: not-allowed;
+/* Hover state */
+&:hover {
+  background-color: ${colors.primaryHover};
+}
 
-    &:hover {
-      background-color: ${colors.lightGrey};
-      color: ${colors.grey};
-    }
+/* Primary styles */
+${(props) => props.primary && `
+  background-color: ${colors.primary};
+  color: white;
+`}
 
-  `}
+/* Primary Disabled styles */
+${(props) => !props.primary && `
+  background-color: ${colors.lightGrey};
+  color: ${colors.grey};
+  cursor: not-allowed;
 
-  /* Secondary styles */
-    ${(props) => props.secondary && `
-    background-color: transparent;
+  &:hover {
+    background-color: ${colors.lightGrey};
     color: ${colors.grey};
+  }
+`}
 
-    &:hover {
-      background-color: ${colors.secondaryHover};
-      color: ${colors.primary}};
-      cursor: pointer;
-    }
+/* Secondary styles */
+  ${(props) => props.secondary && `
+  background-color: transparent;
+  color: ${colors.grey};
+
+  &:hover {
+    background-color: ${colors.secondaryHover};
+    color: ${colors.primary}};
+    cursor: pointer;
+  }
     `}
 
   /* Size styles */
@@ -63,12 +67,17 @@ const StyledButton = styled.button`
     font-size: 18px;
     padding: 15px;
     width: 450px;
-
   `}
 `;
 
-const Button = ({ primary, size, label, ...props }) => (
-  <StyledButton primary={primary === true} size={size} aria-label={label} {...props}>
+const Button = ({ primary, size, label, onClick, ...props }) => (
+  <StyledButton
+    primary={primary === true}
+    size={size}
+    aria-label={label}
+    onClick={onClick}
+    {...props}
+  >
     {label}
   </StyledButton>
 );
@@ -82,6 +91,7 @@ Button.propTypes = {
   onClick: PropTypes.func,
 };
 
+
 Button.defaultProps = {
   primary: false,
   size: 'medium',

src/js/components/Ready/ViewUpcomingBallotButton.jsx

@@ -99,36 +99,12 @@ class ViewUpcomingBallotButton extends React.Component {
       electionDataExistsForUpcomingElection,
     } = this.state;
     return (
-    // <ViewUpcomingBallotButtonWrapper>
-    //   <Button
-    //     color="primary"
-    //     id={electionDataExistsForUpcomingElection ? 'viewUpcomingBallotButton' : 'viewUpcomingBallotFindYourFriends'}
-    //     onClick={electionDataExistsForUpcomingElection ? this.onClickFunctionLocal : this.goToFindFriends}
-    //     style={{
-    //       boxShadow: 'none !important',
-    //       textTransform: 'none',
-    //       width: 250,
-    //     }}
-    //     variant="contained"
-    //   >
-    //     {electionDataExistsForUpcomingElection ? (
-    //       <>View your ballot</>
-    //     ) : (
-    //       <>Find your friends</>
-    //     )}
-    //   </Button>
-    // </ViewUpcomingBallotButtonWrapper>
-
       <ViewUpcomingBallotButtonWrapper>
         <BaseButton
           id={electionDataExistsForUpcomingElection ? 'viewUpcomingBallotButton' : 'viewUpcomingBallotFindYourFriends'}
           onClick={electionDataExistsForUpcomingElection ? this.onClickFunctionLocal : this.goToFindFriends}
           primary
-          label={electionDataExistsForUpcomingElection ? (
-            <>View Your Ballot</>
-          ) : (
-            <>Find Your Friends</>
-          )}
+          label={electionDataExistsForUpcomingElection ? 'View Your Ballot' : 'Find Your Friends'}
         />
       </ViewUpcomingBallotButtonWrapper>
     );