STDD-21: Shuttle cards colors

[mifonBejenari]

READY FOR REVIEW

Summary

• Create styles and functionality to highlight Shuttle flag, and color

Review By (Date)

• When does this need to be reviewed by?

Criticality

• Affects one site https://transportationd9.sites.stanford.edu/marguerite

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache and import config drush cr ; drush ci
3. Navigate to /marguerite and
4. Verify card styles:
   
5. Navigate to pages from this list (ex: marguerite/rwc)
6. Verify flag from title:
   

Site Configuration Sync

• No config changes

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• https://transportationd9.sites.stanford.edu/marguerite

Associated Issues and/or People

• JIRA ticket(s) - STDD-21
• Adjust color and "flag label" dependent to card Title. Rewrite default pattern-card template to pass flag label to CSS. Adjust border and flag color by old site

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials