add storybook with buttons

wevote · Dec 7, 2023 · 1f39504 · 1f39504
1 parent a3e4cdf
commit 1f39504
Show file tree

Hide file tree

Showing 7 changed files with 29,105 additions and 15,575 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -73,7 +73,8 @@
     "react/sort-comp": 1,
     "space-before-function-paren": [1, {"anonymous": "always", "named": "always"}],
     "space-in-parens": [1],
-    "template-curly-spacing": ["warn", "never"]
+    "template-curly-spacing": ["warn", "never"],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
   },
     "plugins": [
       "react",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,18 +34,30 @@
     "readyTest-Browser": "./node_modules/.bin/wdio ./tests/browserstack/wdio.config.js",
     "autoTest": " mocha --require @babel/register --require tests/component/index.js \"./tests/component/tests.js\" && npm run lint",
     "snyk-protect": "snyk-protect",
-    "prepare": "npm run snyk-protect"
+    "prepare": "npm run snyk-protect",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",
     "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-class-properties": "^7.12.13",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.13.6",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.12.1",
     "@babel/register": "^7.13.16",
     "@snyk/protect": "^1.657.0",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-onboarding": "^1.0.9",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/test": "^7.6.3",
     "@wdio/browserstack-service": "^8.15.10",
     "@wdio/cli": "^8.15.10",
     "@wdio/config": "^8.15.10",
@@ -69,6 +81,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-wdio": "^8.8.7",
     "eslint-webpack-plugin": "^2.4.3",
     "express": "^4.17.1",
@@ -82,6 +95,7 @@
     "pre-commit": "^1.2.2",
     "react-hot-loader": "^4.13.1",
     "remove-files-webpack-plugin": "^1.5.0",
+    "storybook": "^7.6.3",
     "terser-webpack-plugin": "^5.1.2",
     "unused-webpack-plugin": "^2.4.0",
     "webdriver": "^8.15.10",
@@ -147,5 +161,10 @@
     "rxjs": "^6.6.7",
     "styled-components": "~5.3.11",
     "topojson-client": "^3.1.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }
diff --git a/src/js/components/Ready/ElectionCountdown.jsx b/src/js/components/Ready/ElectionCountdown.jsx
@@ -309,9 +309,9 @@ ElectionCountdown.propTypes = {
 };
 
 const CountdownTitleHeaderWrapper = styled('div')(({ theme }) => (`
-  margin-top: 60px;
+  margin-top: 30px;
   ${theme.breakpoints.down('sm')} {
-    margin-top: 42px;
+    margin-top: 30px;
   }
 `));
 
@@ -323,7 +323,7 @@ const CardCountdown = styled('div')(({ theme }) => (`
   padding-top: 4px;
   padding-bottom: 8px;
   ${theme.breakpoints.down('sm')} {
-    min-height: 140px;
+    min-height: 180px;
   }
 `));
 
@@ -335,7 +335,7 @@ const CardTitleUpcoming = styled('h1')(({ theme }) => (`
   font-size: 64px;
   font-weight: 900;
   margin-bottom: 8px;
-  margin-top: 0;
+  margin-top: 12px;
   text-align: center;
   ${theme.breakpoints.down('xs')} {
     font-size: 60px;

diff --git a/src/js/components/Ready/ViewUpcomingBallotButton.jsx b/src/js/components/Ready/ViewUpcomingBallotButton.jsx
@@ -1,7 +1,8 @@
-import { Button } from '@mui/material';
+// import { Button } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
+import BaseButton from '../Buttons/BaseButton';
 import daysUntil from '../../common/utils/daysUntil';
 import historyPush from '../../common/utils/historyPush';
 import { renderLog } from '../../common/utils/logging';
@@ -98,24 +99,37 @@ 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>
-        <Button
-          color="primary"
+        <BaseButton
           id={electionDataExistsForUpcomingElection ? 'viewUpcomingBallotButton' : 'viewUpcomingBallotFindYourFriends'}
           onClick={electionDataExistsForUpcomingElection ? this.onClickFunctionLocal : this.goToFindFriends}
-          style={{
-            boxShadow: 'none !important',
-            textTransform: 'none',
-            width: 250,
-          }}
-          variant="contained"
-        >
-          {electionDataExistsForUpcomingElection ? (
-            <>View your ballot</>
+          primary
+          label={electionDataExistsForUpcomingElection ? (
+            <>View Your Ballot</>
           ) : (
-            <>Find your friends</>
+            <>Find Your Friends</>
           )}
-        </Button>
+        />
       </ViewUpcomingBallotButtonWrapper>
     );
   }

diff --git a/src/js/components/Style/BallotTitleHeaderStyles.jsx b/src/js/components/Style/BallotTitleHeaderStyles.jsx
@@ -1,10 +1,12 @@
 import styled from 'styled-components';
 import { isWebApp } from '../../common/utils/isCordovaOrWebApp';
+import colors from '../../common/components/Style/Colors';
 
 export const BallotAddress = styled('div', {
   shouldForwardProp: (prop) => !['centerText', 'allowTextWrap'].includes(prop),
 })(({ allowTextWrap, centerText }) => (`
   margin-left: 2px;
+  font-size: 18px;
   ${allowTextWrap ? '' : 'overflow: hidden;'}
   ${allowTextWrap ? '' : 'text-overflow: ellipsis;'}
   ${allowTextWrap ? '' : 'white-space: nowrap;'}
@@ -44,9 +46,13 @@ export const ElectionNameBlock = styled('div', {
 export const ElectionNameH1 = styled('h1', {
   shouldForwardProp: (prop) => !['centerText'].includes(prop),
 })(({ centerText, theme }) => (`
-  font-size: 32px;
+  font-size: 30px;
+  padding-top: 5px;
+  padding-bottom: 18px;
   ${theme.breakpoints.down('sm')} {
     font-size: 26px;
+    padding-top: 5px;
+    padding-bottom: 12px;
   }
   line-height: 1;
   margin: 0px;
@@ -61,8 +67,9 @@ export const ElectionNameScrollContent = styled('div')`
 export const ElectionStateLabel = styled('div', {
   shouldForwardProp: (prop) => !['centerText'].includes(prop),
 })(({ centerText }) => (`
-  color: #888;
-  font-size: 12px;
+  color: ${colors.middleGrey};
+  font-size: 14px;
+  font-weight: 600;
   letter-spacing: .1em;
   margin-left: 2px;
   ${centerText ? 'text-align: center;' : ''}

diff --git a/src/js/components/Style/ReadyPageCommonStyles.jsx b/src/js/components/Style/ReadyPageCommonStyles.jsx
@@ -37,7 +37,7 @@ export const ReadyIntroductionMobileWrapper = styled('div')(({ theme }) => (`
 `));
 
 export const ElectionCountdownOuterWrapper = styled('div')`
-  height: 280px;
+  height: 250px;
   position: relative;
   z-index: 1;
 `;