Spike: Build Pullquote CSS/HTML for Inner Page Migration for R4 #4631
Closed
Task
1 of 1 issue completed
Description
In order to migrate Inner Pages to the NCIDS style, we need a developer to create the CSS and HTML for the new design of the NCIDS Pullquote so it can be implemented in the migration.
Maximum Time Allocation: 2 days
Expected Deliverables
- HTML and CSS displaying the new NCIDS Pullquote (can be done on NCIDS Storybook)
- Having he HTML and CSS ready to be copied into the GitHub Crib Notes and ready to be copied into a migration script to convert all existing Pullquotes into the NCIDS Pullquote style
Technical Notes
- NCIDS Pullquote NEW LINKS: Link 1
- NOTE: Previously, comps have been made for a pullquote with an image. For the purposes of the migration, the pullquote with image will NOT be created. There is at least one instance where a pullquote has been hacked in the Source View to include an image. That will be handled through content editing, not through the migration script.
- Make the text be in NCIDS style (font token size MD italics)
- When there is an author, migrate the author to NCIDS style (font token size body XS)
- When there is an author title, migrate the author title to NCIDS style (font token size body XS)
- Keep the alignments functioning (left, right, and center. Center = Full width)
- Ensure the entity that holds the pullquote is identifiable by screenreaders in such a way that they are able to identify that it is related to the content of the section hierarchy that it is in, but does not get skipped over. This does not need to be new/different from the existing functionality if that meets this requirement.
Technical Tasks
- Create the HTML for the Pullquote (to be completed in Sprint 65)
- See the comp without the image
- Create options for a pullquote with and without the author
- Keep the alignments functional (left, right, center, and full. Note: center and full should be the same)
Scenarios
- Create three (3) pullquotes to test the different variations that can appear on the front end
- Pullquote 1 (Quote Only):
- Alignment: Left aligned
- Quote: "I can say that this has been an incredible experience and highly recommend it without reservation. I have especially valued the opportunities it has provided to meet people across NIH, participate in engaging and valuable trainings, and to work on interesting projects."
- Author: None
- Author Title: None
- Pullquote 2 (Quote and Author):
- Alignment: Right Aligned
- Quote: "I could not have picked a better program to jumpstart my career in public health!"
- Author: "Maureen Clark Szemborski"
- Author Title: None
- Pullquote 3 (Quote, Author, Author Title):
- Alignment: Center/Full
- Quote: "I benefitted greatly from working in the lab both in terms of tangible bench skills and making very valuable connections…I feel like everyone here is looking out for my success and happy to help me figure out my interests and hone my skills."
- Author: "Ons Mrad Bouali"
- Author Title: "Former CRI participant"