From d6fee2a26f586af39a6e01dc33e41f4095f3b7d2 Mon Sep 17 00:00:00 2001 From: Paolo Alberca <91231062+omgitsmiles@users.noreply.github.com> Date: Fri, 16 Aug 2024 06:51:49 -0400 Subject: [PATCH 1/5] fixed linting issues on HowItWorksWizard story --- package-lock.json | 49 ++++++++++++++----- package.json | 1 + .../stories/HowItWorksWizard.stories.js | 25 ++++++---- .../Values/IssuesByBallotItemDisplayList.jsx | 22 ++++++++- 4 files changed, 74 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index ed921f31b..2c652e413 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@mui/styled-engine-sc": "^5.10.1", "@mui/styles": "^5.15.20", "@openreplay/tracker": "^8.1.1", + "@storybook/addon-actions": "^7.6.20", "@stripe/react-stripe-js": "^1.3.0", "@stripe/stripe-js": "^1.13.0", "classnames": "^2.3.1", @@ -4520,12 +4521,11 @@ } }, "node_modules/@storybook/addon-actions": { - "version": "7.6.7", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.7.tgz", - "integrity": "sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==", - "dev": true, + "version": "7.6.20", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.20.tgz", + "integrity": "sha512-c/GkEQ2U9BC/Ew/IMdh+zvsh4N6y6n7Zsn2GIhJgcu9YEAa5aF2a9/pNgEGBMOABH959XE8DAOMERw/5qiLR8g==", "dependencies": { - "@storybook/core-events": "7.6.7", + "@storybook/core-events": "7.6.20", "@storybook/global": "^5.0.0", "@types/uuid": "^9.0.1", "dequal": "^2.0.2", @@ -4537,6 +4537,18 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/core-events": { + "version": "7.6.20", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.20.tgz", + "integrity": "sha512-tlVDuVbDiNkvPDFAu+0ou3xBBYbx9zUURQz4G9fAq0ScgBOs/bpzcRrFb4mLpemUViBAd47tfZKdH4MAX45KVQ==", + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-backgrounds": { "version": "7.6.7", "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.7.tgz", @@ -4646,6 +4658,24 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-actions": { + "version": "7.6.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.7.tgz", + "integrity": "sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==", + "dev": true, + "dependencies": { + "@storybook/core-events": "7.6.7", + "@storybook/global": "^5.0.0", + "@types/uuid": "^9.0.1", + "dequal": "^2.0.2", + "polished": "^4.2.2", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-highlight": { "version": "7.6.7", "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.7.tgz", @@ -6938,8 +6968,7 @@ "node_modules/@storybook/global": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", - "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==", - "dev": true + "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==" }, "node_modules/@storybook/instrumenter": { "version": "7.6.7", @@ -9019,8 +9048,7 @@ "node_modules/@types/uuid": { "version": "9.0.7", "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz", - "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==", - "dev": true + "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==" }, "node_modules/@types/warning": { "version": "3.0.3", @@ -22056,7 +22084,6 @@ "version": "4.2.2", "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz", "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==", - "dev": true, "dependencies": { "@babel/runtime": "^7.17.8" }, @@ -26736,7 +26763,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", - "dev": true, "engines": { "node": ">=6.10" } @@ -27408,7 +27434,6 @@ "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", - "dev": true, "funding": [ "https://github.com/sponsors/broofa", "https://github.com/sponsors/ctavan" diff --git a/package.json b/package.json index f06c850d9..af44d73b0 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "@mui/styled-engine-sc": "^5.10.1", "@mui/styles": "^5.15.20", "@openreplay/tracker": "^8.1.1", + "@storybook/addon-actions": "^7.6.20", "@stripe/react-stripe-js": "^1.3.0", "@stripe/stripe-js": "^1.13.0", "classnames": "^2.3.1", diff --git a/src/js/common/stories/HowItWorksWizard.stories.js b/src/js/common/stories/HowItWorksWizard.stories.js index 8a5cbfe95..a8a316d78 100644 --- a/src/js/common/stories/HowItWorksWizard.stories.js +++ b/src/js/common/stories/HowItWorksWizard.stories.js @@ -1,7 +1,9 @@ import React, { useEffect, useState } from 'react'; +import { action } from '@storybook/addon-actions'; import styled from 'styled-components'; import HowItWorks from '../../components/CompleteYourProfile/HowItWorksWizard'; -import { action } from '@storybook/addon-actions'; + +// WV-380: Created controls for action ... const initialSteps = [ { @@ -36,8 +38,6 @@ const initialSteps = [ }, ]; -// const activeStep = 1; - export default { title: 'Design System/CompleteYourProfile', component: HowItWorks, @@ -47,13 +47,19 @@ export default { argTypes: { activeStep: { control: { type: 'check' }, - options: initialSteps.map(step => step.id), + options: initialSteps.map((step) => step.id), description: 'Select which steps are active', }, completed: { control: { type: 'boolean' }, description: 'Toggle the completed status', }, + // title: { + // control: 'text', + // options: initialSteps.map(step => step.title), + // label: 'How WeVote works', + // description: 'Modify the title', + // }, steps: { control: 'object', description: 'Modify the steps', @@ -80,18 +86,18 @@ const Container = styled.div` export const HowItWorksWizard = (args) => { const [steps, setSteps] = useState(args.steps); useEffect(() => { - setSteps(steps.map(step => ({ + setSteps(steps.map((step) => ({ ...step, completed: args.completed && args.activeStep.includes(step.id), }))); action(`Active Step Changed to: ${args.activeStep}`)(); - }, [args.activeStep]); + }, [args.activeStep, args.completed, steps]); const handleStepToggle = (index) => { - const updatedSteps = steps.map((step, i) => + const updatedSteps = steps.map((step, i) => ( i === index ? { ...step, completed: !step.completed } : step - ); + )); setSteps(updatedSteps); action(`Step ${index + 1} Clicked - Completed: ${updatedSteps[index].completed}`)(); }; @@ -102,7 +108,8 @@ export const HowItWorksWizard = (args) => { ...step, onClick: () => handleStepToggle(i), }))} - activeStep={args.activeStep}/> + activeStep={args.activeStep} + /> ); }; diff --git a/src/js/components/Values/IssuesByBallotItemDisplayList.jsx b/src/js/components/Values/IssuesByBallotItemDisplayList.jsx index f6b449a75..78470153d 100644 --- a/src/js/components/Values/IssuesByBallotItemDisplayList.jsx +++ b/src/js/components/Values/IssuesByBallotItemDisplayList.jsx @@ -6,6 +6,8 @@ import IssueStore from '../../stores/IssueStore'; import VoterGuideStore from '../../stores/VoterGuideStore'; import signInModalGlobalState from '../../common/components/Widgets/signInModalGlobalState'; import ValueNameWithPopoverDisplay from './ValueNameWithPopoverDisplay'; +import Chip from '@mui/material/Chip'; +import StickyPopover from '../Ballot/StickyPopover'; // Show a voter a horizontal list of all of the issues they are following that relate to this ballot item class IssuesByBallotItemDisplayList extends Component { @@ -197,7 +199,22 @@ class IssuesByBallotItemDisplayList extends Component { showEllipses = false; } return ( - + { console.log('chip clicked'); }} + key={`${ballotItemWeVoteId}-${oneIssue.issue_we_vote_id}`} + label={oneIssue.issue_name} + ballotItemDisplayName={ballotItemDisplayName} + ballotItemWeVoteId={ballotItemWeVoteId} + externalUniqueId={`${ballotItemWeVoteId}-${externalUniqueId}`} + issueFollowedByVoter={issueFollowedByVoter} + oneIssue={oneIssue} + showEllipses={showEllipses} + style={{ margin: "5px", borderRadius: 2, color: "#7b7b79", }} + /> + {/* */} + {/* + /> */} + ); } else { return null; From 2104e8244d4d96224828f71902db52191728a36e Mon Sep 17 00:00:00 2001 From: Paolo Alberca <91231062+omgitsmiles@users.noreply.github.com> Date: Fri, 16 Aug 2024 06:53:35 -0400 Subject: [PATCH 2/5] fixed linting issues on HowItWorksWizard story --- .../Values/IssuesByBallotItemDisplayList.jsx | 22 ++----------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/js/components/Values/IssuesByBallotItemDisplayList.jsx b/src/js/components/Values/IssuesByBallotItemDisplayList.jsx index 78470153d..f6b449a75 100644 --- a/src/js/components/Values/IssuesByBallotItemDisplayList.jsx +++ b/src/js/components/Values/IssuesByBallotItemDisplayList.jsx @@ -6,8 +6,6 @@ import IssueStore from '../../stores/IssueStore'; import VoterGuideStore from '../../stores/VoterGuideStore'; import signInModalGlobalState from '../../common/components/Widgets/signInModalGlobalState'; import ValueNameWithPopoverDisplay from './ValueNameWithPopoverDisplay'; -import Chip from '@mui/material/Chip'; -import StickyPopover from '../Ballot/StickyPopover'; // Show a voter a horizontal list of all of the issues they are following that relate to this ballot item class IssuesByBallotItemDisplayList extends Component { @@ -199,22 +197,7 @@ class IssuesByBallotItemDisplayList extends Component { showEllipses = false; } return ( - <> - { console.log('chip clicked'); }} - key={`${ballotItemWeVoteId}-${oneIssue.issue_we_vote_id}`} - label={oneIssue.issue_name} - ballotItemDisplayName={ballotItemDisplayName} - ballotItemWeVoteId={ballotItemWeVoteId} - externalUniqueId={`${ballotItemWeVoteId}-${externalUniqueId}`} - issueFollowedByVoter={issueFollowedByVoter} - oneIssue={oneIssue} - showEllipses={showEllipses} - style={{ margin: "5px", borderRadius: 2, color: "#7b7b79", }} - /> - {/* */} - {/* */} - + /> ); } else { return null; From 731c483a7f7f8fba93de10badbfed266ca1fa6ef Mon Sep 17 00:00:00 2001 From: Paolo Alberca <91231062+omgitsmiles@users.noreply.github.com> Date: Fri, 16 Aug 2024 19:18:04 -0400 Subject: [PATCH 3/5] Code/lint clean up and code comment added --- src/js/common/stories/HowItWorksWizard.stories.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/common/stories/HowItWorksWizard.stories.js b/src/js/common/stories/HowItWorksWizard.stories.js index a8a316d78..502c2dd84 100644 --- a/src/js/common/stories/HowItWorksWizard.stories.js +++ b/src/js/common/stories/HowItWorksWizard.stories.js @@ -3,7 +3,9 @@ import { action } from '@storybook/addon-actions'; import styled from 'styled-components'; import HowItWorks from '../../components/CompleteYourProfile/HowItWorksWizard'; -// WV-380: Created controls for action ... +// WV-380: Created controls for the HowItWorks component allowing steps object to be modified, +// multi check on activeSteps, +// and completed status to be toggled true/false. const initialSteps = [ { @@ -86,12 +88,12 @@ const Container = styled.div` export const HowItWorksWizard = (args) => { const [steps, setSteps] = useState(args.steps); useEffect(() => { - setSteps(steps.map((step) => ({ + setSteps((prevSteps) => prevSteps.map((step) => ({ ...step, completed: args.completed && args.activeStep.includes(step.id), }))); action(`Active Step Changed to: ${args.activeStep}`)(); - }, [args.activeStep, args.completed, steps]); + }, [args.activeStep, args.completed, args.steps]); const handleStepToggle = (index) => { From 6bfddc748a96c6b069fd4accd30d5f3fdd464419 Mon Sep 17 00:00:00 2001 From: Paolo Alberca <91231062+omgitsmiles@users.noreply.github.com> Date: Mon, 19 Aug 2024 09:45:57 -0400 Subject: [PATCH 4/5] code cleanup and check for lint errors --- src/js/common/stories/HowItWorksWizard.stories.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/js/common/stories/HowItWorksWizard.stories.js b/src/js/common/stories/HowItWorksWizard.stories.js index 502c2dd84..3a19c93c1 100644 --- a/src/js/common/stories/HowItWorksWizard.stories.js +++ b/src/js/common/stories/HowItWorksWizard.stories.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import HowItWorks from '../../components/CompleteYourProfile/HowItWorksWizard'; // WV-380: Created controls for the HowItWorks component allowing steps object to be modified, -// multi check on activeSteps, +// multi-check on activeSteps, // and completed status to be toggled true/false. const initialSteps = [ @@ -56,12 +56,6 @@ export default { control: { type: 'boolean' }, description: 'Toggle the completed status', }, - // title: { - // control: 'text', - // options: initialSteps.map(step => step.title), - // label: 'How WeVote works', - // description: 'Modify the title', - // }, steps: { control: 'object', description: 'Modify the steps', @@ -93,7 +87,7 @@ export const HowItWorksWizard = (args) => { completed: args.completed && args.activeStep.includes(step.id), }))); action(`Active Step Changed to: ${args.activeStep}`)(); - }, [args.activeStep, args.completed, args.steps]); + }, [args.activeStep, args.completed]); const handleStepToggle = (index) => { From 458b447ffebbb99e09fd15820dbf49c2e4fa2917 Mon Sep 17 00:00:00 2001 From: Paolo Alberca <91231062+omgitsmiles@users.noreply.github.com> Date: Mon, 19 Aug 2024 20:14:11 -0400 Subject: [PATCH 5/5] removed completed toggle, multi check turns completed true --- src/js/common/stories/HowItWorksWizard.stories.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/js/common/stories/HowItWorksWizard.stories.js b/src/js/common/stories/HowItWorksWizard.stories.js index 3a19c93c1..f62142fb4 100644 --- a/src/js/common/stories/HowItWorksWizard.stories.js +++ b/src/js/common/stories/HowItWorksWizard.stories.js @@ -52,10 +52,6 @@ export default { options: initialSteps.map((step) => step.id), description: 'Select which steps are active', }, - completed: { - control: { type: 'boolean' }, - description: 'Toggle the completed status', - }, steps: { control: 'object', description: 'Modify the steps', @@ -84,10 +80,10 @@ export const HowItWorksWizard = (args) => { useEffect(() => { setSteps((prevSteps) => prevSteps.map((step) => ({ ...step, - completed: args.completed && args.activeStep.includes(step.id), + completed: true && args.activeStep.includes(step.id), }))); action(`Active Step Changed to: ${args.activeStep}`)(); - }, [args.activeStep, args.completed]); + }, [args.activeStep]); const handleStepToggle = (index) => { @@ -113,5 +109,4 @@ export const HowItWorksWizard = (args) => { HowItWorksWizard.args = { steps: initialSteps, activeStep: [1], - completed: false, };