Create new Privacy Policy page and its credit, and edit label

[JessicaLucindaCheng]

Fixes #2555

What changes did you make and why did you make them ?

• As requested in the issue,
  • I created privacy-policy.yml in _data/internal/credits for the hero image on the Privacy Policy page
  • I created a privacy-policy.html in the pages directory
  • I created a _privacy-policy.scss in _sass/components
  • I added the url to the label description
  • I checked the page looks fine on mobile, tablet, and desktop views
• I also used WCAG 2.0 Compliance Checkers to check the Privacy Policy page structure (HTML) followed WCAG so that our website is accessible to everyone.

Notes:

• There are differences in content (words, punctuation, contractions, etc) in the Google Doc vs the Figma desktop design vs the Figma mobile design. These differences are commented on in the Google Doc and Figma. The Figma desktop design was followed when there were differences, except for "Email Addresses" header, and the "Effective date" and "Questions" sections.
  • I used "E-mail Addresses" in the header to be consistent with the beginning of the sentence on the next line, which begins with "E-mail addresses".
  • For the "Effective date" and "Questions" sections, the content in the Google Doc was followed.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied: There are no visuals before changes are applied because the Privacy Policy page and its associated credit are new. Thus, they don't currently exist on the website.

Visuals after changes are applied

Credit

Mobile View

Desktop View

[luke-karis]

Review:
ETA: 5/4/22
Availability: Wednesday 1-2 hours
Edit: Sorry I couldn't finish by Monday! I will definitely finish Wednesday

[JessicaLucindaCheng]

@RyanCahela
When you're assigned as a reviewer for a pr, please write in a comment the following:

• Availability: "How much time will you have this week to review this pr?"
• Review ETA: "When do you expect to complete your review?"

[RyanCahela]

Availability: 5 hours Fri, Sat, Sun
Review ETA: 5/2/22

[Wny-Duong]

Availability: 4 hours, Thurs, Fri (4/28-4/29)
Review ETA: 4/29/22

[Wny-Duong]

Everything looks like how the original issue specified. The mobile and desktop pages I'm getting match all three of the images attached. Content matches what I'm seeing over in the Figma design besides the changes listed in Notes. The privacy-policy.yml file also matches the format of the rest. Good work!

[Wny-Duong]

Changes approved.

[RyanCahela]

Hey @JessicaLucindaCheng, I've reviewed the newly created files and everything is in the right place and matches the requirements of the issue, The CSS is scoped to the privacy policy page and the content responds to changes in viewport size. Great job!

[answebdev]

Availability: 2 hours
Review ETA: 5/4/2022 (end of day)

[answebdev]

@JessicaLucindaCheng Thank you for submitting your PR. I reviewed the original issue and the changes you made, and everything looks good according to what was asked in the original issue: you created the "privacy-policy" .yml, .html, and .scss; added the privacy-policy.jpg image in the correct location; and added the url to the label description. I checked and the page looks fine on mobile, tablet, and desktop views. Thank you too for adding the notes at the end. I noticed the differences in content, but your notes helped me see what you did and why there were differences. Great job!

On a minor note, I was a little unsure about the spacing in the "Questions" section at the very bottom of the page, so I wanted to ask about it here, specifically the spacing between the sentence and the Code for America address. In the local browser (as well as in your provided screenshot image), there is no space, as you can see in my first screenshot below. I'm wondering if there should be a space here between the sentence and the Code for America address - where the arrow is pointing in my screenshot.

Questions section in the local browser

In the Figma design, there is a space between the sentence and address.

Figma design

I know the Figma design is not exaclty for this section (though it's similar because of the address) and you were going off the Google Doc for this (which in itself has different spacing - the address lines are actually double-spaced in the Google Doc), but I wanted to check on this since the spacing on your page, the Figma design, and the Google Doc are all different. I'm wondering if it would actually look better with the space, as in the Figma design, or if the intention was to have it with no space, so I wanted to point that out and ask about it. Other than that, everything else looks great!

[JessicaLucindaCheng]

@answebdev Good catch! I missed that space. I have updated the code so there is now a space before the address at the bottom of the page. I have also updated the after screenshots for mobile and desktop.

[answebdev]

@JessicaLucindaCheng Thank you for making those changes. I am now able to see the space locally in the browser (as well as the space added in the code) and can see the updated screenshots. As this was the only thing that I noticed, and it has now been addressed, and everything else looked great (as well as looking good to the other reviewers), I'm going to go ahead and merge this.