From ae7d9781cd19400620e0459c5aadacadeb661b59 Mon Sep 17 00:00:00 2001 From: veganedge Date: Mon, 13 Nov 2023 10:44:13 -0800 Subject: [PATCH 01/26] Moving
to Layout.jsx --- src/layouts/Layout.jsx | 2 +- src/pages/Home.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/layouts/Layout.jsx b/src/layouts/Layout.jsx index ffdc545a2..d359ea6d6 100644 --- a/src/layouts/Layout.jsx +++ b/src/layouts/Layout.jsx @@ -35,7 +35,7 @@ const Layout = ({ ariaLabel, children }) => { > {session.info.isLoggedIn && } - {children} +
{children}
{session.info.isLoggedIn && }
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 85074881b..573cf0635 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -14,7 +14,7 @@ import { HomeSection, KeyFeatures } from '@components/Home'; /** * Home - First Page you encounter in PASS before login. - * Should not display if you are already logged in + * Should not display if you are already logged in. * * @memberof Pages * @name Home @@ -25,7 +25,7 @@ const Home = () => { const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm')); return ( - + { componentImageSrc="/assets/key-features-green.png" componentImageAlt="" title="Key Features" + noMargin /> Date: Mon, 13 Nov 2023 10:45:13 -0800 Subject: [PATCH 02/26] Fix for margin and issue of creating unneccessary nodes in DOM --- src/components/Home/HomeSection.jsx | 33 +++++++++++++++++------------ 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/components/Home/HomeSection.jsx b/src/components/Home/HomeSection.jsx index abd6355a1..18ab835e7 100644 --- a/src/components/Home/HomeSection.jsx +++ b/src/components/Home/HomeSection.jsx @@ -2,8 +2,8 @@ import React from 'react'; // Material UI Imports import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; /** * Represents a home section component @@ -19,6 +19,7 @@ import Button from '@mui/material/Button'; * @param {string} Props.href - section button href * @param {string} Props.label - section button aria-label * @param {boolean} Props.isReallySmallScreen - screen size + * @param {boolean} Props.noMargin - controls marginBottom * @returns {React.JSX.Element} - the home section component */ const HomeSection = ({ @@ -29,9 +30,10 @@ const HomeSection = ({ button, href, label, - isReallySmallScreen + isReallySmallScreen, + noMargin }) => ( - <> + {title} - - {description} - + {description && ( + + {description} + + )} {button && ( )} - + ); export default HomeSection; From 38617f2c2caa2f775514a72a93b52a4b5a38124c Mon Sep 17 00:00:00 2001 From: veganedge Date: Wed, 15 Nov 2023 07:15:48 -0800 Subject: [PATCH 06/26] switching boolean prop that determines if their is marginBottom --- src/components/Home/HomeSection.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Home/HomeSection.jsx b/src/components/Home/HomeSection.jsx index 6028e4bc6..74a68e29e 100644 --- a/src/components/Home/HomeSection.jsx +++ b/src/components/Home/HomeSection.jsx @@ -10,7 +10,7 @@ import Typography from '@mui/material/Typography'; * Represents a home section component * * @memberof Home - * @name HomeSecton + * @name HomeSection * @param {object} Props - the component props * @param {string} Props.componentImageSrc - image src * @param {string} Props.componentImageAlt - image alt @@ -20,7 +20,7 @@ import Typography from '@mui/material/Typography'; * @param {string} Props.href - section button href * @param {string} Props.label - section button aria-label * @param {boolean} Props.isReallySmallScreen - screen size - * @param {boolean} Props.noMargin - controls marginBottom + * @param {boolean} Props.hasMargin - gives marginBottom * @returns {React.JSX.Element} - the home section component */ const HomeSection = ({ @@ -32,9 +32,9 @@ const HomeSection = ({ href, label, isReallySmallScreen, - noMargin + hasMargin }) => ( - + Date: Wed, 15 Nov 2023 07:16:25 -0800 Subject: [PATCH 07/26] implementing logo styling feedback --- src/pages/Home.jsx | 53 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 41 insertions(+), 12 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 81fbff211..ab0e2dcad 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,9 +1,11 @@ // React Imports import React from 'react'; // Material UI Imports +import ArrowCircleDownOutlinedIcon from '@mui/icons-material/ArrowCircleDownOutlined'; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Diversity1Icon from '@mui/icons-material/Diversity1'; +import Link from '@mui/material/Link'; import SecurityIcon from '@mui/icons-material/Security'; import Stack from '@mui/material/Stack'; import SupportIcon from '@mui/icons-material/Support'; @@ -26,6 +28,22 @@ const Home = () => { const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const iconSize = isReallySmallScreen ? 'medium' : 'large'; + const logoSection = isReallySmallScreen ? ( + + + PASS + + + + ) : ( + + + + PASS + + + ); + return ( { >
- - - - PASS - - + + {logoSection} + Personal Access System for Services + + Learn More + + + + { description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process." button="Request a Demo" href="mailto:hugh@codeforpdx.org" + hasMargin /> { componentImageAlt="" title="An App for Caseworkers" description="PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them." + hasMargin /> Date: Wed, 15 Nov 2023 21:24:35 -0800 Subject: [PATCH 08/26] adjust color and mobile sizing --- src/pages/Home.jsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index ab0e2dcad..758e55797 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -30,7 +30,7 @@ const Home = () => { const logoSection = isReallySmallScreen ? ( - + PASS @@ -38,7 +38,12 @@ const Home = () => { ) : ( - + PASS @@ -67,18 +72,19 @@ const Home = () => { > {logoSection} Personal Access System for Services - + Learn More - + Date: Thu, 16 Nov 2023 08:54:51 -0800 Subject: [PATCH 09/26] implement scroll onclick of learn more icon button --- src/pages/Home.jsx | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 758e55797..c6412fa16 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -5,7 +5,7 @@ import ArrowCircleDownOutlinedIcon from '@mui/icons-material/ArrowCircleDownOutl import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Diversity1Icon from '@mui/icons-material/Diversity1'; -import Link from '@mui/material/Link'; +import IconButton from '@mui/material/IconButton'; import SecurityIcon from '@mui/icons-material/Security'; import Stack from '@mui/material/Stack'; import SupportIcon from '@mui/icons-material/Support'; @@ -83,21 +83,22 @@ const Home = () => { Learn More - - - + + + - +
+ +
Date: Sun, 19 Nov 2023 12:10:20 -0800 Subject: [PATCH 10/26] updated snapshot for Home.test --- test/pages/__snapshots__/Home.test.jsx.snap | 210 +++++++++++++------- 1 file changed, 142 insertions(+), 68 deletions(-) diff --git a/test/pages/__snapshots__/Home.test.jsx.snap b/test/pages/__snapshots__/Home.test.jsx.snap index 2aa8c98cf..3245db891 100644 --- a/test/pages/__snapshots__/Home.test.jsx.snap +++ b/test/pages/__snapshots__/Home.test.jsx.snap @@ -2,7 +2,7 @@ exports[`Home Page > renders 1`] = `
-
renders 1`] = `
- -

- - Keep Your Documents Safe and Secure Using Decentralized Technology - -

-

+ PASS logo +

+ PASS +

+
+

+ Personal Access System for Services +

+

+ Learn More +

+ + + + +
+
- Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process. -

- + +

+ + Keep Your Documents Safe and Secure Using Decentralized Technology + +

+

+ Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process. +

+ + Request a Demo + + +
+
+
- Request a Demo - - - -

- - An App for Caseworkers - -

-

- PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them. -

- -

+ + An App for Caseworkers + +

+

+ PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them. +

+
+
- - Key Features - - -

+ +

+ + Key Features + +

+
- - Secure Storage - +

+ + Secure Storage + +

renders 1`] = ` Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format.

- - Nonprofit-Caseworker Integration - +

+ + Nonprofit-Caseworker Integration + +

renders 1`] = ` The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely.

- - Support Service - +

+ + Support Service + +

renders 1`] = `

-
+ `; From 6ad8d8290d45d263f6782929ccd60b6ca0fae557 Mon Sep 17 00:00:00 2001 From: veganedge Date: Sun, 19 Nov 2023 14:17:47 -0800 Subject: [PATCH 11/26] reverting update of snapshot --- test/pages/__snapshots__/Home.test.jsx.snap | 210 +++++++------------- 1 file changed, 68 insertions(+), 142 deletions(-) diff --git a/test/pages/__snapshots__/Home.test.jsx.snap b/test/pages/__snapshots__/Home.test.jsx.snap index 3245db891..2aa8c98cf 100644 --- a/test/pages/__snapshots__/Home.test.jsx.snap +++ b/test/pages/__snapshots__/Home.test.jsx.snap @@ -2,7 +2,7 @@ exports[`Home Page > renders 1`] = `
-
renders 1`] = `
-
+

-
- PASS logo -

- PASS -

-
-

- Personal Access System for Services -

-

- Learn More -

- - - - -

-
+ Keep Your Documents Safe and Secure Using Decentralized Technology + + +

-

- -

- - Keep Your Documents Safe and Secure Using Decentralized Technology - -

-

- Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process. -

- - Request a Demo - - -
-
-
+ - -

- - An App for Caseworkers - -

-

- PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them. -

-
-
+ +

- -

- - Key Features - -

-
+ + An App for Caseworkers + + +

+ PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them. +

+ +

+ + Key Features + +

+

-

- - Secure Storage - -

+ + Secure Storage +

renders 1`] = ` Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format.

-

- - Nonprofit-Caseworker Integration - -

+ + Nonprofit-Caseworker Integration +

renders 1`] = ` The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely.

-

- - Support Service - -

+ + Support Service +

renders 1`] = `

-
+
`; From 0b6b7374013afac846a316b0afa91c232e4d07d3 Mon Sep 17 00:00:00 2001 From: Milo Fultz Date: Tue, 21 Nov 2023 07:33:41 -0800 Subject: [PATCH 12/26] Update home section test --- test/components/Home/HomeSection.test.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/test/components/Home/HomeSection.test.jsx b/test/components/Home/HomeSection.test.jsx index 7ae668707..4106ec113 100644 --- a/test/components/Home/HomeSection.test.jsx +++ b/test/components/Home/HomeSection.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { expect, it, describe } from 'vitest'; import { HomeSection } from '@components/Home'; import createMatchMedia from '../../helpers/createMatchMedia'; @@ -39,15 +39,15 @@ describe('Button rendering', () => { describe('Default screen', () => { it('renders 300px padding by default', () => { - const component = render(); - const adjustableBox = getComputedStyle(component.container.firstChild); + render(); + const adjustableBox = getComputedStyle(screen.getByRole('img')); expect(adjustableBox.width).toBe('300px'); }); it('renders 85% padding by default', () => { - const { getByText } = render(); - const descriptionElement = getByText('Example Text'); + render(); + const descriptionElement = screen.getByText('Example Text'); const cssProperties = getComputedStyle(descriptionElement); expect(cssProperties.width).toBe('85%'); @@ -57,8 +57,8 @@ describe('Default screen', () => { describe('Mobile screen', () => { window.matchMedia = createMatchMedia(599); it('renders 80% padding by default', () => { - const component = render(); - const adjustableBox = getComputedStyle(component.container.firstChild); + render(); + const adjustableBox = getComputedStyle(screen.getByRole('img')); expect(adjustableBox.width).toBe('80%'); }); From 35e66b9a7b59d4a4ecb2880a6c32a58ed18ce60e Mon Sep 17 00:00:00 2001 From: veganedge Date: Tue, 21 Nov 2023 08:31:15 -0800 Subject: [PATCH 13/26] update Home.test.jsx to no longer use snapshot --- src/pages/Home.jsx | 13 +- test/pages/Home.test.jsx | 33 ++-- test/pages/__snapshots__/Home.test.jsx.snap | 166 -------------------- 3 files changed, 29 insertions(+), 183 deletions(-) delete mode 100644 test/pages/__snapshots__/Home.test.jsx.snap diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c6412fa16..9fe6116e9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -30,7 +30,13 @@ const Home = () => { const logoSection = isReallySmallScreen ? ( - + PASS @@ -41,8 +47,9 @@ const Home = () => { PASS @@ -61,7 +68,7 @@ const Home = () => { padding: '20px' }} > -
+
( - - - -); +import { Home } from '@pages'; +import createMatchMedia from '../helpers/createMatchMedia'; describe('Home Page', () => { afterEach(() => { cleanup(); }); + const h1FontSize = '144px'; + + it('renders desktop', () => { + render(); + const cssProperties = getComputedStyle(screen.getByTestId('testHomeH1')); + + expect(screen.getByTestId('testHomeSection')).toBeDefined(); + expect(cssProperties.fontSize).toBe(h1FontSize); + }); + + it('renders mobile', () => { + window.matchMedia = createMatchMedia(599); + render(); + const cssProperties = getComputedStyle(screen.getByTestId('testHomeH1')); - it('renders', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); + expect(screen.getByTestId('testHomeSection')).toBeDefined(); + expect(cssProperties.fontSize).not.toBe(h1FontSize); }); }); diff --git a/test/pages/__snapshots__/Home.test.jsx.snap b/test/pages/__snapshots__/Home.test.jsx.snap deleted file mode 100644 index 2aa8c98cf..000000000 --- a/test/pages/__snapshots__/Home.test.jsx.snap +++ /dev/null @@ -1,166 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Home Page > renders 1`] = ` -
-
-
-
-
- -

- - Keep Your Documents Safe and Secure Using Decentralized Technology - -

-

- Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process. -

- - Request a Demo - - - -

- - An App for Caseworkers - -

-

- PASS allows users to quickly and securely share documents of their clients within the app. The app helps caseworkers verify and share documents such as ID and proof of income while retaining total control of them. -

- -

- - Key Features - -

-

-

- - - Secure Storage - -
-

- Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format. -

-
- - - Nonprofit-Caseworker Integration - -
-

- The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely. -

-
- - - Support Service - -
-

- Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services. -

-
-
-
-
-
-`; From cb9de7743c3b2088dfaf5a3999d92e2f248311f4 Mon Sep 17 00:00:00 2001 From: veganedge Date: Tue, 21 Nov 2023 09:02:37 -0800 Subject: [PATCH 14/26] adjustments to tests --- test/components/Home/HomeSection.test.jsx | 52 +++++++++++------------ test/components/Home/KeyFeatures.test.jsx | 12 +++--- test/pages/Home.test.jsx | 15 ++++--- 3 files changed, 40 insertions(+), 39 deletions(-) diff --git a/test/components/Home/HomeSection.test.jsx b/test/components/Home/HomeSection.test.jsx index 4106ec113..414c342d0 100644 --- a/test/components/Home/HomeSection.test.jsx +++ b/test/components/Home/HomeSection.test.jsx @@ -4,70 +4,70 @@ import { expect, it, describe } from 'vitest'; import { HomeSection } from '@components/Home'; import createMatchMedia from '../../helpers/createMatchMedia'; -const MockFormSectionDefault = () => ; -const MockFormSectionMobile = () => ; -const MockFormSectionButton = () => ; -const MockFormSectionButtonMobile = () => ; +const MockSection = () => ; +const MockSectionMobile = () => ; +const MockSectionButton = () => ; +const MockSectionButtonMobile = () => ; describe('Button rendering', () => { it('renders no button', () => { - const { queryByRole } = render(); + const { queryByRole } = render(); const button = queryByRole('button'); expect(button).toBeNull(); }); it('renders button', () => { - const { queryByRole } = render(); + const { queryByRole } = render(); const button = queryByRole('button'); - const cssProperties = getComputedStyle(button); + const buttonStyles = getComputedStyle(button); expect(button).not.toBeNull(); - expect(cssProperties.width).toBe('25%'); + expect(buttonStyles.width).toBe('25%'); }); - it('renders buttons mobile', () => { + it('renders button mobile', () => { window.matchMedia = createMatchMedia(599); - const { queryByRole } = render(); + const { queryByRole } = render(); const button = queryByRole('button'); - const cssProperties = getComputedStyle(button); + const buttonStyles = getComputedStyle(button); expect(button).not.toBeNull(); - expect(cssProperties.width).toBe('100%'); + expect(buttonStyles.width).toBe('100%'); }); }); describe('Default screen', () => { it('renders 300px padding by default', () => { - render(); - const adjustableBox = getComputedStyle(screen.getByRole('img')); + render(); + const image = getComputedStyle(screen.getByRole('img')); - expect(adjustableBox.width).toBe('300px'); + expect(image.width).toBe('300px'); }); it('renders 85% padding by default', () => { - render(); - const descriptionElement = screen.getByText('Example Text'); - const cssProperties = getComputedStyle(descriptionElement); + render(); + const description = screen.getByText('Example Text'); + const descriptionStyles = getComputedStyle(description); - expect(cssProperties.width).toBe('85%'); + expect(descriptionStyles.width).toBe('85%'); }); }); describe('Mobile screen', () => { window.matchMedia = createMatchMedia(599); it('renders 80% padding by default', () => { - render(); - const adjustableBox = getComputedStyle(screen.getByRole('img')); + render(); + const image = getComputedStyle(screen.getByRole('img')); - expect(adjustableBox.width).toBe('80%'); + expect(image.width).toBe('80%'); }); it('renders 100% padding by default', () => { - const { getByText } = render(); - const descriptionElement = getByText('Example Text'); - const cssProperties = getComputedStyle(descriptionElement); + const { getByText } = render(); + const description = getByText('Example Text'); + const descriptionStyles = getComputedStyle(description); - expect(cssProperties.width).toBe('100%'); + expect(descriptionStyles.width).toBe('100%'); }); }); diff --git a/test/components/Home/KeyFeatures.test.jsx b/test/components/Home/KeyFeatures.test.jsx index 888066189..adbc7d0f2 100644 --- a/test/components/Home/KeyFeatures.test.jsx +++ b/test/components/Home/KeyFeatures.test.jsx @@ -9,17 +9,17 @@ const MockKeyFeaturesMobile = () => { const { getByText } = render(); - const component = getByText('Example Text'); - const cssProperty = getComputedStyle(component); + const description = getByText('Example Text'); + const descriptionStyles = getComputedStyle(description); - expect(cssProperty.width).toBe('67%'); + expect(descriptionStyles.width).toBe('67%'); }); it('renders 100% width mobile', () => { window.matchMedia = createMatchMedia(599); const { getByText } = render(); - const component = getByText('Example Text'); - const cssProperty = getComputedStyle(component); + const description = getByText('Example Text'); + const descriptionStyles = getComputedStyle(description); - expect(cssProperty.width).toBe('100%'); + expect(descriptionStyles.width).toBe('100%'); }); diff --git a/test/pages/Home.test.jsx b/test/pages/Home.test.jsx index 894e70183..c770c9653 100644 --- a/test/pages/Home.test.jsx +++ b/test/pages/Home.test.jsx @@ -5,25 +5,26 @@ import { Home } from '@pages'; import createMatchMedia from '../helpers/createMatchMedia'; describe('Home Page', () => { - afterEach(() => { - cleanup(); - }); + afterEach(cleanup); + // if tests are failing check this value vs value in Home.jsx const h1FontSize = '144px'; it('renders desktop', () => { render(); - const cssProperties = getComputedStyle(screen.getByTestId('testHomeH1')); + const h1 = screen.getByTestId('testHomeH1'); + const h1Styles = getComputedStyle(h1); expect(screen.getByTestId('testHomeSection')).toBeDefined(); - expect(cssProperties.fontSize).toBe(h1FontSize); + expect(h1Styles.fontSize).toBe(h1FontSize); }); it('renders mobile', () => { window.matchMedia = createMatchMedia(599); render(); - const cssProperties = getComputedStyle(screen.getByTestId('testHomeH1')); + const h1 = screen.getByTestId('testHomeH1'); + const h1Styles = getComputedStyle(h1); expect(screen.getByTestId('testHomeSection')).toBeDefined(); - expect(cssProperties.fontSize).not.toBe(h1FontSize); + expect(h1Styles.fontSize).not.toBe(h1FontSize); }); }); From a0ca52e06ab6657c13dd0f311b71b4167fb8144e Mon Sep 17 00:00:00 2001 From: veganedge Date: Tue, 21 Nov 2023 09:14:27 -0800 Subject: [PATCH 15/26] about-pass div is now more accurate --- src/pages/Home.jsx | 64 +++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 9fe6116e9..7fa231775 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -105,39 +105,39 @@ const Home = () => { href="mailto:hugh@codeforpdx.org" hasMargin /> + + + } + title="Secure Storage" + description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format." + /> + } + title="Nonprofit-Caseworker Integration" + description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely." + /> + } + title="Support Service" + description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services." + /> - - - } - title="Secure Storage" - description="Store vital documents like IDs, Social Security information, birth certificates, medical records, and bank statements in a valid digital format." - /> - } - title="Nonprofit-Caseworker Integration" - description="The platform facilitates smooth communication between nonprofit organizations, case workers, and the individuals they serve. It allows nonprofit organizations to maintain a contact list, and caseworkers are assigned contacts whose data they can access securely." - /> - } - title="Support Service" - description="Verified documents can be used to facilitate access to service such as housing support and shelter accommodation. The platform simplifies the process of submitting necessary documents for such services." - />
From b7418cf007ff07fb0d775929476a9d0996051006 Mon Sep 17 00:00:00 2001 From: veganedge Date: Wed, 22 Nov 2023 06:51:06 -0800 Subject: [PATCH 16/26] aligning text --- src/components/Home/KeyFeatures.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Home/KeyFeatures.jsx b/src/components/Home/KeyFeatures.jsx index d7076de68..26307ff95 100644 --- a/src/components/Home/KeyFeatures.jsx +++ b/src/components/Home/KeyFeatures.jsx @@ -2,6 +2,7 @@ import React from 'react'; // Material UI Imports import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; /** @@ -17,7 +18,7 @@ import Typography from '@mui/material/Typography'; * @returns {React.JSX.Element} the KeyFeatures section component */ const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => ( - <> + ( > {description} - + ); export default KeyFeatures; From 648063aa419690fd34f9e21a4bb2e5dcddfa4068 Mon Sep 17 00:00:00 2001 From: veganedge Date: Wed, 22 Nov 2023 06:53:47 -0800 Subject: [PATCH 17/26] consistent text width on homepage --- src/components/Home/KeyFeatures.jsx | 2 +- test/components/Home/KeyFeatures.test.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Home/KeyFeatures.jsx b/src/components/Home/KeyFeatures.jsx index 26307ff95..3824ba75f 100644 --- a/src/components/Home/KeyFeatures.jsx +++ b/src/components/Home/KeyFeatures.jsx @@ -44,7 +44,7 @@ const KeyFeatures = ({ icon, title, description, isReallySmallScreen }) => ( ; const MockKeyFeaturesMobile = () => ; -it('renders 67% width default', () => { +it('renders 85% width default', () => { const { getByText } = render(); const description = getByText('Example Text'); const descriptionStyles = getComputedStyle(description); - expect(descriptionStyles.width).toBe('67%'); + expect(descriptionStyles.width).toBe('85%'); }); it('renders 100% width mobile', () => { From d1fa00e1c89c433beb14afa2efa361432d984a54 Mon Sep 17 00:00:00 2001 From: veganedge Date: Wed, 22 Nov 2023 13:39:46 -0800 Subject: [PATCH 18/26] implement smooth scrolling to about section --- src/pages/Home.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 7fa231775..69ba77e11 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,5 +1,5 @@ // React Imports -import React from 'react'; +import React, { useRef } from 'react'; // Material UI Imports import ArrowCircleDownOutlinedIcon from '@mui/icons-material/ArrowCircleDownOutlined'; import Box from '@mui/material/Box'; @@ -27,6 +27,9 @@ const Home = () => { const theme = useTheme(); const isReallySmallScreen = useMediaQuery(theme.breakpoints.down('sm')); const iconSize = isReallySmallScreen ? 'medium' : 'large'; + const aboutRef = useRef(null); + + const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' }); const logoSection = isReallySmallScreen ? ( @@ -90,11 +93,11 @@ const Home = () => { Learn More - + -
+
{ button="Request a Demo" href="mailto:hugh@codeforpdx.org" hasMargin + ref={aboutRef} /> Date: Wed, 22 Nov 2023 17:09:37 -0800 Subject: [PATCH 19/26] fix concole error --- src/pages/Home.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 69ba77e11..0f147c4fb 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -107,7 +107,6 @@ const Home = () => { button="Request a Demo" href="mailto:hugh@codeforpdx.org" hasMargin - ref={aboutRef} /> Date: Thu, 16 Nov 2023 20:49:42 -0800 Subject: [PATCH 20/26] Make h1 include full title --- package-lock.json | 29 +++++++++--------- package.json | 1 + src/pages/Home.jsx | 75 ++++++++++++++++++++++++++-------------------- 3 files changed, 58 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 379ef44ed..af29c9fe7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@mui/material": "^5.12.2", "@mui/styled-engine-sc": "^5.12.0", "@mui/system": "^5.12.1", + "@mui/utils": "^5.14.18", "@mui/x-data-grid": "^6.16.2", "@mui/x-date-pickers": "^6.5.0", "@tanstack/react-query": "^4.32.0", @@ -4253,12 +4254,12 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.16", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.16.tgz", - "integrity": "sha512-3xV31GposHkwRbQzwJJuooWpK2ybWdEdeUPtRjv/6vjomyi97F3+68l+QVj9tPTvmfSbr2sx5c/NuvDulrdRmA==", + "version": "5.14.18", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz", + "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==", "dependencies": { "@babel/runtime": "^7.23.2", - "@types/prop-types": "^15.7.9", + "@types/prop-types": "^15.7.10", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, @@ -5275,9 +5276,9 @@ "integrity": "sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng==" }, "node_modules/@types/prop-types": { - "version": "15.7.9", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", - "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==" + "version": "15.7.10", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz", + "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==" }, "node_modules/@types/proper-lockfile": { "version": "4.1.3", @@ -19602,12 +19603,12 @@ "requires": {} }, "@mui/utils": { - "version": "5.14.16", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.16.tgz", - "integrity": "sha512-3xV31GposHkwRbQzwJJuooWpK2ybWdEdeUPtRjv/6vjomyi97F3+68l+QVj9tPTvmfSbr2sx5c/NuvDulrdRmA==", + "version": "5.14.18", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz", + "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==", "requires": { "@babel/runtime": "^7.23.2", - "@types/prop-types": "^15.7.9", + "@types/prop-types": "^15.7.10", "prop-types": "^15.8.1", "react-is": "^18.2.0" } @@ -20427,9 +20428,9 @@ "integrity": "sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng==" }, "@types/prop-types": { - "version": "15.7.9", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.9.tgz", - "integrity": "sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==" + "version": "15.7.10", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz", + "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==" }, "@types/proper-lockfile": { "version": "4.1.3", diff --git a/package.json b/package.json index 690e2edfd..682fd450d 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@mui/material": "^5.12.2", "@mui/styled-engine-sc": "^5.12.0", "@mui/system": "^5.12.1", + "@mui/utils": "^5.14.18", "@mui/x-data-grid": "^6.16.2", "@mui/x-date-pickers": "^6.5.0", "@tanstack/react-query": "^4.32.0", diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 0f147c4fb..64191d6df 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -12,6 +12,7 @@ import SupportIcon from '@mui/icons-material/Support'; import Typography from '@mui/material/Typography'; import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; +import { visuallyHidden } from '@mui/utils'; // Components Import import { HomeSection, KeyFeatures } from '@components/Home'; @@ -31,32 +32,49 @@ const Home = () => { const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' }); + // Logo section elements + const heading = 'PASS'; + const punctuation = ( + + : + + ); + const subheading = 'Personal Access System for Services'; + const logoSection = isReallySmallScreen ? ( - - - PASS - - - + + + + {heading} + {punctuation} + + + + {subheading} + + + ) : ( - - - - PASS - - + + + + + + {heading} + {punctuation} + + + + {subheading} + + + ); return ( @@ -81,15 +99,6 @@ const Home = () => { alignItems="center" > {logoSection} - - Personal Access System for Services - Learn More From 1c0b63c4f23abd13b3d74ed52b4d31b186c2fe73 Mon Sep 17 00:00:00 2001 From: veganedge Date: Sun, 19 Nov 2023 11:27:14 -0800 Subject: [PATCH 21/26] desktop styling fix --- src/pages/Home.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 64191d6df..1cf188c3e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -56,7 +56,7 @@ const Home = () => { ) : ( - + { {punctuation} - + {subheading} From 80eec963d1cbd166b4ce051fba3e689f38d29ab5 Mon Sep 17 00:00:00 2001 From: Milo Fultz Date: Tue, 21 Nov 2023 07:31:00 -0800 Subject: [PATCH 22/26] Tighten up heading code --- src/pages/Home.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 1cf188c3e..8891aebbf 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -33,11 +33,15 @@ const Home = () => { const handleClick = () => aboutRef.current.scrollIntoView({ behavior: 'smooth' }); // Logo section elements - const heading = 'PASS'; - const punctuation = ( - - : - + const heading = ( + <> + PASS + {/* This is added for better screen reader experience by adding a pause + between the acronym and the expanded acronym. */} + + : + + ); const subheading = 'Personal Access System for Services'; @@ -46,7 +50,6 @@ const Home = () => { {heading} - {punctuation} @@ -67,7 +70,6 @@ const Home = () => { {heading} - {punctuation} From c41cc3a0f50aa276e47b44035ea110fb8f24bf79 Mon Sep 17 00:00:00 2001 From: Milo Fultz Date: Fri, 24 Nov 2023 08:31:24 -0800 Subject: [PATCH 23/26] Put testid in right place for tests --- src/pages/Home.jsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 8891aebbf..53197fbc4 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -46,9 +46,15 @@ const Home = () => { const subheading = 'Personal Access System for Services'; const logoSection = isReallySmallScreen ? ( - + - + {heading} @@ -58,7 +64,7 @@ const Home = () => { ) : ( - + { spacing={4} > - + {heading} From d8054bdefdb33359e98fba2b764201285a609ee6 Mon Sep 17 00:00:00 2001 From: veganedge Date: Sat, 25 Nov 2023 12:22:08 -0800 Subject: [PATCH 24/26] resolving conflicts --- package-lock.json | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5cc1e4dd2..2792c032d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3628,8 +3628,9 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.16", - "license": "MIT", + "version": "5.14.18", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz", + "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==", "dependencies": { "@babel/runtime": "^7.23.2", "@types/prop-types": "^15.7.10", @@ -4562,8 +4563,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.9", - "license": "MIT" + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/proper-lockfile": { "version": "4.1.3", @@ -17234,7 +17236,9 @@ "requires": {} }, "@mui/utils": { - "version": "5.14.16", + "version": "5.14.18", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.18.tgz", + "integrity": "sha512-HZDRsJtEZ7WMSnrHV9uwScGze4wM/Y+u6pDVo+grUjt5yXzn+wI8QX/JwTHh9YSw/WpnUL80mJJjgCnWj2VrzQ==", "requires": { "@babel/runtime": "^7.23.2", "@types/prop-types": "^15.7.10", @@ -17883,7 +17887,9 @@ "version": "4.0.1" }, "@types/prop-types": { - "version": "15.7.9" + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "@types/proper-lockfile": { "version": "4.1.3", From d151b5518f1d1634e7d2c126baba6b9afd6c4902 Mon Sep 17 00:00:00 2001 From: veganedge Date: Sat, 25 Nov 2023 13:54:54 -0800 Subject: [PATCH 25/26] adjusting test to be more resilient --- src/pages/Home.jsx | 33 +++++++++++++++++---------------- test/pages/Home.test.jsx | 30 ++++++++++++++++-------------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 53197fbc4..17c2f2545 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -47,14 +47,15 @@ const Home = () => { const logoSection = isReallySmallScreen ? ( - - + + {heading} @@ -65,7 +66,13 @@ const Home = () => { ) : ( - + { spacing={4} > - + {heading} diff --git a/test/pages/Home.test.jsx b/test/pages/Home.test.jsx index c770c9653..042ea2ec9 100644 --- a/test/pages/Home.test.jsx +++ b/test/pages/Home.test.jsx @@ -1,30 +1,32 @@ import React from 'react'; import { render, cleanup, screen } from '@testing-library/react'; -import { expect, it, afterEach, describe } from 'vitest'; +import { expect, describe, it, afterEach } from 'vitest'; import { Home } from '@pages'; import createMatchMedia from '../helpers/createMatchMedia'; describe('Home Page', () => { afterEach(cleanup); - // if tests are failing check this value vs value in Home.jsx - const h1FontSize = '144px'; - it('renders desktop', () => { + it('renders with correct order of logoSection on mobile', () => { + window.matchMedia = createMatchMedia(599); render(); - const h1 = screen.getByTestId('testHomeH1'); - const h1Styles = getComputedStyle(h1); + const h1 = screen.getByTestId('testStack'); + const children = Array.from(h1.children); - expect(screen.getByTestId('testHomeSection')).toBeDefined(); - expect(h1Styles.fontSize).toBe(h1FontSize); + expect(children.length).toBe(3); + expect(children[0].tagName.toLowerCase()).toBe('span'); + expect(children[1].tagName.toLowerCase()).toBe('img'); + expect(children[2].tagName.toLowerCase()).toBe('span'); }); - it('renders mobile', () => { - window.matchMedia = createMatchMedia(599); + it('rrenders with correct order of logoSection on desktop', () => { + window.matchMedia = createMatchMedia(1200); render(); - const h1 = screen.getByTestId('testHomeH1'); - const h1Styles = getComputedStyle(h1); + const h1 = screen.getByTestId('testStack'); + const children = Array.from(h1.children); - expect(screen.getByTestId('testHomeSection')).toBeDefined(); - expect(h1Styles.fontSize).not.toBe(h1FontSize); + expect(children.length).toBe(2); + expect(children[0].tagName.toLowerCase()).toBe('span'); + expect(children[1].tagName.toLowerCase()).toBe('span'); }); }); From 9ee1e3ff2f1f042c195769f2a876c75c7456a6a0 Mon Sep 17 00:00:00 2001 From: veganedge Date: Sat, 25 Nov 2023 14:25:01 -0800 Subject: [PATCH 26/26] giving tests more resilience --- src/components/Home/HomeSection.jsx | 1 + test/components/Home/HomeSection.test.jsx | 59 ++++++++++++++--------- test/components/Home/KeyFeatures.test.jsx | 4 +- 3 files changed, 38 insertions(+), 26 deletions(-) diff --git a/src/components/Home/HomeSection.jsx b/src/components/Home/HomeSection.jsx index 74a68e29e..ac5663757 100644 --- a/src/components/Home/HomeSection.jsx +++ b/src/components/Home/HomeSection.jsx @@ -55,6 +55,7 @@ const HomeSection = ({ {description && ( ; -const MockSectionMobile = () => ; +const MockSection = () => ; +const MockSectionDescription = () => ; +const MockSectionDescriptionMobile = () => ( + +); const MockSectionButton = () => ; const MockSectionButtonMobile = () => ; @@ -23,7 +26,7 @@ describe('Button rendering', () => { const buttonStyles = getComputedStyle(button); expect(button).not.toBeNull(); - expect(buttonStyles.width).toBe('25%'); + expect(buttonStyles.width).not.toBe('100%'); }); it('renders button mobile', () => { @@ -37,37 +40,45 @@ describe('Button rendering', () => { }); }); -describe('Default screen', () => { - it('renders 300px padding by default', () => { - render(); - const image = getComputedStyle(screen.getByRole('img')); +describe('Description rendering', () => { + it('renders no description', () => { + const { queryByText } = render(); + const description = queryByText('Example Text'); - expect(image.width).toBe('300px'); + expect(description).toBeNull(); }); - it('renders 85% padding by default', () => { - render(); - const description = screen.getByText('Example Text'); + it('renders description', () => { + const { queryByText } = render(); + const description = queryByText('Example Text'); const descriptionStyles = getComputedStyle(description); - expect(descriptionStyles.width).toBe('85%'); + expect(descriptionStyles.width).not.toBe('100%'); + }); + + it('renders description mobile', () => { + window.matchMedia = createMatchMedia(599); + const { queryByText } = render(); + const description = queryByText('Example Text'); + const descriptionStyles = getComputedStyle(description); + + expect(descriptionStyles.width).toBe('100%'); }); }); -describe('Mobile screen', () => { - window.matchMedia = createMatchMedia(599); - it('renders 80% padding by default', () => { - render(); - const image = getComputedStyle(screen.getByRole('img')); +describe('Image rendering', () => { + it('renders image at 300px width on desktop', () => { + const { queryByRole } = render(); + const image = getComputedStyle(queryByRole('img')); - expect(image.width).toBe('80%'); + expect(image.width).toBe('300px'); }); - it('renders 100% padding by default', () => { - const { getByText } = render(); - const description = getByText('Example Text'); - const descriptionStyles = getComputedStyle(description); + it('renders image at 80% width on mobile', () => { + window.matchMedia = createMatchMedia(599); + const { queryByRole } = render(); + const image = getComputedStyle(queryByRole('img')); - expect(descriptionStyles.width).toBe('100%'); + expect(image.width).toBe('80%'); }); }); diff --git a/test/components/Home/KeyFeatures.test.jsx b/test/components/Home/KeyFeatures.test.jsx index f53fe8d8a..b83a5e2c0 100644 --- a/test/components/Home/KeyFeatures.test.jsx +++ b/test/components/Home/KeyFeatures.test.jsx @@ -7,12 +7,12 @@ import createMatchMedia from '../../helpers/createMatchMedia'; const MockKeyFeaturesDefault = () => ; const MockKeyFeaturesMobile = () => ; -it('renders 85% width default', () => { +it('renders less width by default', () => { const { getByText } = render(); const description = getByText('Example Text'); const descriptionStyles = getComputedStyle(description); - expect(descriptionStyles.width).toBe('85%'); + expect(descriptionStyles.width).not.toBe('100%'); }); it('renders 100% width mobile', () => {