Add colors to the Storybook (#3806)

* add colors to storybook * change order of buttons on Storybook --------- Co-authored-by: Ivan Kordonets <[email protected]>
wevote · Dec 19, 2023 · 02f847b · 02f847b
1 parent d74d00f
commit 02f847b
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 72 deletions.
diff --git a/src/img/get-started/make-your-voice-heard-500x500.jpg b/src/img/get-started/make-your-voice-heard-500x500.jpg
diff --git a/src/img/get-started/make-your-voice-heard-500x500.png b/src/img/get-started/make-your-voice-heard-500x500.png
diff --git a/src/img/welcome/header-image-desktop.jpg b/src/img/welcome/header-image-desktop.jpg
diff --git a/src/img/welcome/header-image-desktop.png b/src/img/welcome/header-image-desktop.png
diff --git a/src/js/common/components/Style/Colors.js b/src/js/common/components/Style/Colors.js
@@ -6,6 +6,7 @@ const colors = {
   middleGrey: '#8C92A2',
   grey: '#AEB2BE',
   lightGrey: '#E5E6EA',
+  ultraLightGrey: '#FAFAFA',
   white: '#ffffff',
 };
 

diff --git a/src/js/common/stories/Button.stories.js b/src/js/common/stories/Button.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',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
@@ -21,13 +21,6 @@ export default {
   },
 };
 
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const AllButtons = (args) => (
   <ButtonContainer>
@@ -41,6 +34,13 @@ export const AllButtons = (args) => (
   </ButtonContainer>
 );
 
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
 export const PrimaryDisabled = {
   args: {
     primary: false,

diff --git a/src/js/common/stories/Colors.stories.js b/src/js/common/stories/Colors.stories.js
@@ -0,0 +1,172 @@
+import React from 'react';
+import styled from 'styled-components';
+import colors from '../components/Style/Colors';
+
+export default {
+  title: 'Design System/Colors - Product Brand',
+};
+
+const bluePalette = ['#E6F3FF', '#B2D6F8', '#8BBCE9', '#66A2D8', '#4187C6', '#206DB3', '#0858A1', '#074986', '#053C6D', '#042B4E'];
+const steelSecondary = ['#ECF2F7', '#C8D4DF', '#A7BACD', '#87A0B9', '#6888A5', '#4E6E8E', '#3A5B7C', '#2C4A66', '#1F3A53', '#142B41'];
+const redTertiary = ['#FFEDF1', '#FFC3D0', '#FF98AE', '#FA708D', '#E1516F', '#CB2649', '#AA203D', '#8B1A32', '#74162A', '#53101E'];
+const orangeAccent = ['#FCEFE4', '#FBC89C', '#FBA255', '#FB7704', '#D46505', '#AC5204', '#8F4403', '#743703', '#602E02', '#442102'];
+
+const isLight = (color) => {
+  const hex = color.replace('#', '');
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const result = (r * 299 + g * 587 + b * 114) / 1000;
+  return result > 128;
+};
+
+const ColorRowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 44px;
+  border-bottom: 0.5px solid var(--colorSplit, ${colors.lightGrey});
+  color: ${colors.darkGrey};
+`;
+const PrimitiveSemanticName = styled.div`
+  width: 20%;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  padding-left: 14px;
+`;
+
+const Circle = styled.div`
+  background-color: ${(props) => props.color};
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  stroke-width: 2px;
+  stroke: #EFEFEF;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+`;
+
+const Hex = styled.div`
+  width: 20%;
+  display: flex;
+`;
+
+const ColorValue = styled.div`
+  width: 30%;
+  background-color: ${(props) => props.color};
+  color: ${(props) => `rgba(${isLight(props.color) ? '0, 0, 0' : '255, 255, 255'}, 0.80)`};
+  height: 100%;
+  font-family: SF Pro Text;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  padding-left: 18px;
+  border-bottom: 1px solid var(--colorSplit, ${(props) => props.color});
+`;
+
+const TableHeaderTitle = styled.div`
+  font-weight: 600;
+  color: ${colors.darkGrey};
+`;
+
+const TableColorHeader = () => (
+  <ColorRowContainer style={{ backgroundColor: colors.ultraLightGrey }}>
+    <PrimitiveSemanticName>
+      <TableHeaderTitle>Primitive Name</TableHeaderTitle>
+    </PrimitiveSemanticName>
+
+    <PrimitiveSemanticName>
+      <TableHeaderTitle>Semantic Name</TableHeaderTitle>
+    </PrimitiveSemanticName>
+
+    <Hex>
+      <Circle color="#fffff" />
+      <PrimitiveSemanticName>
+        <TableHeaderTitle>Hex</TableHeaderTitle>
+      </PrimitiveSemanticName>
+    </Hex>
+
+    <ColorValue color="#fffff">
+      <TableHeaderTitle>Value</TableHeaderTitle>
+    </ColorValue>
+  </ColorRowContainer>
+);
+
+const ColorRow = ({ color, SemanticLabel, PrimitiveLabel, value }) => (
+  <ColorRowContainer>
+    <PrimitiveSemanticName>{PrimitiveLabel}</PrimitiveSemanticName>
+    <PrimitiveSemanticName>{SemanticLabel}</PrimitiveSemanticName>
+    <Hex>
+      <Circle color={color} />
+      <PrimitiveSemanticName>{color}</PrimitiveSemanticName>
+    </Hex>
+    <ColorValue color={color}>{value}</ColorValue>
+  </ColorRowContainer>
+);
+
+const Colors = ({ palette, title }) => (
+  <div style={{  justifyContent: 'center', paddingLeft: '50px', paddingRight: '50px' }}>
+    <h2 style={{ color: colors.darkGrey, fontFamily: 'SF Pro Text', fontSize: '24px', fontStyle: 'normal', fontWeight: 600 }}>{ title }</h2>
+
+    <TableColorHeader />
+    <div>
+      {
+        palette?.map((color, index) => (
+          <ColorRow
+            key={index}
+            PrimitiveLabel={`${title.split('/')[0].toLowerCase()}-${(index + 1) * 100}`}
+            SemanticLabel={`${title.split('/')[1].toLowerCase()}-${(index + 1) * 100}`}
+            color={color}
+            value={(index + 1) * 100}
+          />
+        ))
+      }
+    </div>
+  </div>
+);
+
+export const AllColors = () => {
+  return (
+    <>
+      <h1 style={{ 
+        color: colors.darkGrey, 
+        fontFamily: 'SF Pro Text', 
+        fontSize: '38px', 
+        fontWeight: 600, 
+        paddingBottom: '36px', 
+        paddingTop: '26px', 
+        paddingLeft: '50px' 
+        }}>
+          Colors - Product Brand
+      </h1>
+
+      <Colors palette={bluePalette} title="Blue/Primary" />
+      <Colors palette={steelSecondary} title="Steel/Secondary" />
+      <Colors palette={redTertiary} title="Red/Tertiary" />
+      <Colors palette={orangeAccent} title="Orange/Accent" />
+    </>
+  );
+};
+
+export const BluePrimary = () => {
+  return <Colors palette={bluePalette} title="Blue/Primary" />
+};
+
+export const SteelSecondary = () => {
+  return <Colors palette={steelSecondary} title="Steel/Secondary" />
+};
+
+export const RedTertiary = () => {
+  return <Colors palette={redTertiary} title="Red/Tertiary" />
+};
+
+export const OrangeAccent = () => {
+  return <Colors palette={orangeAccent} title="Orange/Accent" />
+};
diff --git a/src/js/components/Buttons/BaseButton.jsx b/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};
-  }
+&:focus {
+  outline: 2px solid ${colors.primary} !important;
+  outline-offset: 2px;
+}
 
-  /* Primary styles */
-  ${(props) => props.primary && `
-    background-color: ${colors.primary};
-    color: white;
-  `}
+/* Hover state */
+&:hover {
+  background-color: ${colors.primaryHover};
+}
 
-  /* Primary Disabled styles */
-  ${(props) => !props.primary && `
-    background-color: ${colors.lightGrey};
-    color: ${colors.grey};
-    cursor: not-allowed;
-
-    &: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};
+  }
+`}
+
+/* Secondary styles */
+  ${(props) => props.secondary && `
+  background-color: transparent;
+  color: ${colors.grey};
 
-    &:hover {
-      background-color: ${colors.secondaryHover};
-      color: ${colors.primary}};
-      cursor: pointer;
-    }
+  &: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>
 );

diff --git a/src/js/components/Ready/ViewUpcomingBallotButton.jsx b/src/js/components/Ready/ViewUpcomingBallotButton.jsx
@@ -1,4 +1,3 @@
-// import { Button } from '@mui/material';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
@@ -99,36 +98,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>
     );