Add so go survey credit page 3022

[Jaretzbalba]

Fixes #3022

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

• Update header text with new paragraph for Credit page
• Create Tools section and style based off Figma design for desktop and mobile versions
• Add headers to "iconography & Imagery" and "Tools" section

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

Visuals before changes are applied

Visuals after changes are applied

![credit page mobile](https://user-images.githubusercontent.com/93153059/162836089-7204c644-ced6-4937-8a64-efd

87f95d3a7.png)

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b Jaretzbalba-add-SoGoSurvey-credit-page-3022 gh-pages
git pull https://github.com/Jaretzbalba/website.git add-SoGoSurvey-credit-page-3022

[kathrynsilvaconway]

Availability: 1 hour.
ETA: By the end of the day on 4/12.

[kathrynsilvaconway]

Nice woark updating the credits page, @Jaretzbalba. I see that you have made every update listed to the paragraph and also added the tools section. Two things I see:

1. The alt text in line 82 should be changed to an empty alt tag(i.e. alt = "").
   
2. The icons in the Iconography & Imagery section appear in a different order than they do on the live page. They seem to be alphabetized? Did you mean to make this change? I don't see any reference to a change like this in the original issue.

Otherwise, everything looks really good.

[Jaretzbalba]

@kathrynsilvaconway I left the alt tag as is because that code is just pulling information from the .yml file which states that the alt tag is empty. I figured it would be best to leave the code just in case future icons may need an alt tag. I can bring up this topic at tonights meeting to see what people think. As for the icon order, I looked through my code and even tried reverting it back but the order was still changed. This would also be a good question to bring up during the meeting. Thank you for all the input!

[Jaretzbalba]

On Tuesday Dev Meeting 4/12/22 @JessicaLucindaCheng informed us about the ongoing issue of the credit icons being ordered in a different pattern compared to when it becomes live. This will be addressed in a later issue. Also talked about the HTML file and changing the code for the icons to empty alt tags since it would be redundant. All previous icon alt tags will be changed in a later issue as well.

[kathrynsilvaconway]

Thanks for clearing up those two issues, @Jaretzbalba. Nice work overall.

[answebdev]

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

[blulady]

Branches look good. It is linked to the correct issue. The image has been renamed to so-go-survey and placed in the /assets/images/credits directory. A new folder was created in _data/internal/credits named tools and it contains the so-go-survey.yml file. The .yml file looks a little grumpy about there not being a newline at the end and thealt: ''on line 9 isn't in the original text from the linked issue but it looks like it was requested later on.
The HTML has the requested changes in the paragraph. There is the correct if statement, appropriately indented following {%- for item in site.data.internal.credits -%} . At the bottom of the page there is a new section for tools with an h2 header. The alt text for the SoGoSurvey logo image is alt="". The SCSS has been altered. I am uncertain if the .credits-tool and .credits-heading are existing classes/styling in our codebase but the page looks great in mobile, tablet, and desktop views.

[JessicaLucindaCheng]

@Jaretzbalba Thanks for adding the alt="" for the img tag for the Tools section. I made some in-line comments, so please make those changes.

[Jaretzbalba]

@JessicaLucindaCheng I accidentally pushed the wrong code. What would be the best method to undo this commit and push the correct code? Sorry about this mistake!

[blulady]

@JessicaLucindaCheng I accidentally pushed the wrong code. What would be the best method to undo this commit and push the correct code? Sorry about this mistake!

can you push the correct code?

[Jaretzbalba]

@JessicaLucindaCheng Yes, the git revert fixed my problem and I was able to submit the correct code afterward.

[JessicaLucindaCheng]

• Availability: 3 hours
• Review ETA: Tue, Apr 19, 2022

[answebdev]

@Jaretzbalba Thank you for submitting this PR and working on this issue. I can see that you have updated the header text with new paragraph for the Credit page, created a Tools section and style based off the Figma design for desktop and mobile versions, and added the headers to the "Iconography & Imagery" and "Tools" section. I can see these in the browser, and the changes also look good in mobile, tablet, and desktop views. I looked at the files and the code and saw that you have addressed the items in the Action Items. I can also see that you have addressed Jessica's in-line comments, such as removing an extra space in the h2 class name in pages/credits.html, and by updating to the double quotation marks for consistency in the div class name in pages/credits.html. Great job with this!

[blulady]

In addition to the previous requests that you already met, it looks like you made Jessica's requested changes as well. That means you eliminated the alt="" on line 9 in the .yml file, removed the extra space after credits-heading on line 23 in the credits.html and changed the quotation marks to double quotation on line 72 in credits.html. It still looks great in mobile, tablet and desktop

[JessicaLucindaCheng]

@Jaretzbalba Good work on the issue and for making my requested changes! In addition to my new in-line change requests,

• I see the credits for the "Iconography & Imagery" section is cutoff on the right side in tablet view when I view your changes using Docker. How the credits look in the "Iconography & Imagery" section should be the same as on the current website.

  Click here to see tablet view with Credits cutoff on the right

  

  Click here to see current Credits page in tablet view

  

• For mobile, please add a little more spacing on the left side of the SoGoSurvey credit.

  Click here to see screenshot of SoGoSurvey credit in mobile with spacing indicators

  

Also, in the future, you may want to use GoFullPage if you want to take a screenshot of the full webpage.

[JessicaLucindaCheng]

@Jaretzbalba Good job fixing the credits being cut off in tablet view and adding more spacing on the right for the Tools credits. In addition to my in-line comment for change, please do the following:

• For the field "By:", the link for the Design System's Team is no longer showing because of adding "-" to the yml. You will need to change some of the Liquid template language code in pages/credits.html for it to show.
  Click here to see screenshot of Design System's Team link missing

  
  Currently, we have only one team using the SoGoSurvey tool. However, keep in mind if more teams are added in the future for a Tools credit, it may look something like this: `By: Team 1, Team 2, Team 3`. For example, "By: Design System's Team, Website Team".

[blulady]

Looks like the changes requested have been made. Great Job!!
The indent on line 78 now matches the indent on line 113. The div on line 87 is now inside the

div. The div is now indented past the if statement. The {{ item[1] }} is tucked with in the else statement. Lines 92 -101 are now indented inside the if statement. The link is now tucked inside the if statement. The {{ item[1] }} is now indented inside the else statement.

[JessicaLucindaCheng]

• Availability: 2 hours
• Review ETA: Sat, Apr 30

Sorry for the delay in reviewing your pr.

[JessicaLucindaCheng]

@Jaretzbalba Thank you for all your hard work on this issue and making all the requested changes. The changes you made to the Credits page looks good to me now.

[JessicaLucindaCheng]

@Jaretzbalba Since this is now merged, please complete the last action item in your issue #3022