[DUOS-1787][risk=no] vote summary header style (#1551)

* Add borders around boxes

* Change vote summary label font

* Add elipses when text overflows box on a single line

* Add tooltip with full label

* Replace icons for different vote summary states

* Adjust position and appearance of icons

* Adjust margin around vote summary header

* Move function for determining result into VoteResultIcon

* Move function for creating propKey into VoteResultLabel

* Replace VoteResultContainer with VoteResultLabel in DataUseVoteSummary

* Update tests

* Rename file

* Rename finalVotes to votes in ResultVoteBox and ResultVoteLabel

* Adjust review-page-body placement

* Update descriptive text for test

* Add id and data-for props to fix duplicate tooltips on chair tab

Co-authored-by: Shae Marks <[email protected]>

cypress/component/DataUseVoteSummary/data_use_vote_summary.spec.js

@@ -36,8 +36,10 @@ describe('DataUseVoteSummary - Tests', function() {
     component.should('exist');
     const rows = cy.get('.vote-summary-row');
     rows.should('have.length', 1);
-    const elements = cy.get('.vote-summary-container');
-    elements.should('have.length', 2);
+    const bucketResult1 = cy.get('.vote-result-box-text-RP-Vote');
+    bucketResult1.should('exist');
+    const bucketResult2 = cy.get('.vote-result-box-text-Bucket-2');
+    bucketResult2.should('exist');
   });
   it('should not render if isLoading is true', function() {
     mount(

cypress/component/DataUseVoteSummary/vote_result_label.spec.js → cypress/component/DataUseVoteSummary/vote_result_box.spec.js

@@ -1,18 +1,17 @@
 /* eslint-disable no-undef */
 import React from 'react';
 import { mount } from '@cypress/react';
-import VoteResultIcon from '../../../src/components/common/DataUseVoteSummary/VoteResultLabel';
+import VoteResultIcon from '../../../src/components/common/DataUseVoteSummary/VoteResultBox';
 
-const propKey = 'test';
+const propKey = 'Test-Label';
 const label = 'Test Label';
 const additionalLabelStyle = {};
 
-describe('VoteResultLabel - Tests', function () {
+describe('VoteResultBox - Tests', function () {
   it('Renders the label with key and inner text assigned by props', function() {
-    mount(<VoteResultIcon propKey={propKey} label={label} additinoalLabelStyle = {additionalLabelStyle}/>);
-    const testElement = cy.get(`.vote-result-label-text-${propKey}`);
+    mount(<VoteResultIcon label={label} additinoalLabelStyle = {additionalLabelStyle}/>);
+    const testElement = cy.get(`.vote-result-box-text-${propKey}`);
     testElement.should('exist');
     testElement.contains('Test Label');
-    testElement.should('have.attr', 'class', `vote-result-label-text-${propKey}`);
   });
 });

cypress/component/DataUseVoteSummary/vote_result_icon.spec.js

@@ -5,34 +5,42 @@ import VoteResultIcon from '../../../src/components/common/DataUseVoteSummary/Vo
 
 const propKeyString = 'test';
 describe('VoteResultIcon - Tests', function () {
-  it('Shows a Yes result if the result is "true"', function () {
-    mount(<VoteResultIcon result={true} propKey= {propKeyString}/>);
-    cy.get(`.vote-result-box-${propKeyString}`).should('exist');
+  it('Shows a Yes result if all votes are true', function () {
+    mount(
+      <VoteResultIcon
+        votes={[{ vote: true }, {vote: true}]}
+        propKey= {propKeyString}/>
+    );
+    cy.get(`.vote-result-icon-${propKeyString}`).should('exist');
     cy.get(`.vote-result-yes-icon-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-yes-text-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-yes-text-${propKeyString}`).contains("Yes");
   });
-  it('Shows a No Result if the result is false', function() {
-    mount(<VoteResultIcon result={false} propKey={propKeyString} />);
-    cy.get(`.vote-result-box-${propKeyString}`).should('exist');
+  it('Shows a No Result if all votes are false', function() {
+    mount(
+      <VoteResultIcon
+        votes={[{ vote: false }, { vote: false }]}
+        propKey={propKeyString} />
+    );
+    cy.get(`.vote-result-icon-${propKeyString}`).should('exist');
     cy.get(`.vote-result-no-icon-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-no-text-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-no-text-${propKeyString}`).contains('No');
   });
-  it('Shows a Under Review Result if the result is "underReview"', function () {
-    mount(<VoteResultIcon result="underReview" propKey={propKeyString} />);
-    cy.get(`.vote-result-box-${propKeyString}`).should('exist');
+  it('Shows a Under Review Result if not all votes are in', function () {
+    mount(
+      <VoteResultIcon
+        votes={[{vote: undefined}]}
+        propKey={propKeyString}
+      />
+    );
+    cy.get(`.vote-result-icon-${propKeyString}`).should('exist');
     cy.get(`.vote-result-under-review-icon-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-under-review-text-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-under-review-text-${propKeyString}`).contains('Under Review');
   });
-  it('Shows a Mixed Result if the result is "mixed"', function () {
-    mount(<VoteResultIcon result="mixed" propKey={propKeyString} />);
-    cy.get(`.vote-result-box-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-mixed-icon-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-mixed-text-${propKeyString}`).should('exist');
-    cy.get(`.vote-result-mixed-text-${propKeyString}`).contains(
-      'Mixed'
+  it('Shows a Mixed Result if there are true and false votes', function () {
+    mount(
+      <VoteResultIcon
+        votes={[{vote:true}, {vote:false}]}
+        propKey={propKeyString}
+      />
     );
+    cy.get(`.vote-result-icon-${propKeyString}`).should('exist');
+    cy.get(`.vote-result-mixed-icon-${propKeyString}`).should('exist');
   });
 });

src/components/common/DataUseVoteSummary/DataUseVoteSummary.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { h, div } from 'react-hyperscript-helpers';
 import { chunk, map, flatMap, isEmpty, range } from 'lodash/fp';
-import VoteResultContainer from './VoteResultContainer';
 import ReactTooltip from 'react-tooltip';
+import VoteResultBox from "./VoteResultBox";
 
 export default function DataUseVoteSummary({dataUseBuckets, isLoading}) {
   useEffect(() => {
@@ -16,23 +16,24 @@ export default function DataUseVoteSummary({dataUseBuckets, isLoading}) {
   //first element -> left corners rounded, no right border
   //middle element, no rounded corners, no left or right border
   //end element -> right corners rounded, no left border
-  const borderStyle = '1% solid rgb(225, 225, 229)';
+  const borderStyle = '0.1rem solid #E9ECEF';
+  const dividerStyle = '0.01rem solid #979797';
   const startElementStyle = {
     borderTopLeftRadius: '4%',
-    border: borderStyle,
-    borderRight: '0px',
-    marginLeft: '2.5%'
+    borderTop: borderStyle,
+    borderLeft: borderStyle,
+    borderRight: dividerStyle
   };
   const endElementStyle = {
     borderTopRightRadius: '4%',
-    border: borderStyle,
-    borderLeft: '0px',
-    marginRight: '2.5%'
+    borderTop: borderStyle,
+    borderLeft: dividerStyle,
+    borderRight: borderStyle
   };
   const middleElementStyle = {
-    border: borderStyle,
-    borderLeft: '0px',
-    borderRight: '0px'
+    borderTop: borderStyle,
+    borderLeft: dividerStyle,
+    borderRight: dividerStyle
   };
 
   const elementTemplate = (row = []) => {
@@ -49,7 +50,7 @@ export default function DataUseVoteSummary({dataUseBuckets, isLoading}) {
       const finalVotes = flatMap((voteObj) =>
         !isEmpty(voteObj) ? voteObj[targetAttr].finalVotes : []
       )(votes);
-      return h(VoteResultContainer, { label: key, finalVotes, additionalLabelStyle }, []);
+      return h(VoteResultBox, { label: key, votes: finalVotes, additionalLabelStyle }, []);
     })(row);
   };
 
@@ -84,8 +85,8 @@ export default function DataUseVoteSummary({dataUseBuckets, isLoading}) {
     }, [
       rowTemplate(chunkedBuckets),
       h(ReactTooltip, {
-        id: 'tip_mixed_result',
-        place: 'left',
+        id: 'vote-result',
+        place: 'bottom',
         effect: 'solid',
         multiline: true,
         className: 'tooltip-wrapper'

src/components/common/DataUseVoteSummary/VoteResultBox.js

@@ -0,0 +1,43 @@
+import {div, h, span} from 'react-hyperscript-helpers';
+import VoteResultIcon from "./VoteResultIcon";
+
+const labelContainerStyle = {
+  display: 'flex',
+  padding: '4px 10px',
+  backgroundColor: '#F3F5F8',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '10%'
+};
+
+const labelFontStyle = {
+  fontFamily: 'Montserrat',
+  fontSize: '1.4rem',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+
+//helper function to generate keys for rendered elements
+const convertLabelToKey = (label) => {
+  return label.split(' ').join('-');
+};
+
+export default function VoteResultBox({ label, votes, additionalLabelStyle = {} }) {
+  const propKey = convertLabelToKey(label);
+  return div(
+    {
+      style: Object.assign({}, labelContainerStyle, additionalLabelStyle),
+      className: `vote-result-box-text-${propKey}`,
+      key: `vote-result-box-${propKey}`,
+      'data-tip': label,
+      'data-for': 'vote-result'
+    },
+    [
+      span({style: labelFontStyle}, [label]),
+      h(VoteResultIcon, { propKey, votes })
+    ]
+  );
+}