Issue #250: Use info alert instead of summary box for featured domain

[rachidatecs]

Ticket

Resolves #250

Changes

• Use info alert instead of summary box

Context for reviewers

Per USWDS guidance:

Alerts or callouts. you’re highlighting something new, rather than surfacing details from further down the page, use the alert component, such as the informative status alert.

I didn't mess with the alert--info styling at all. @cisagov/gov-designers, if you want me to match the old summary box color and border just say so, piece of cake.

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

• [x] Met the acceptance criteria, or will meet them in a subsequent PR
• [x] Created/modified automated tests
• [x] Added at least 2 developers as PR reviewers (only 1 will need to approve)
• [x] Messaged on Slack or in standup to notify the team that a PR is ready for review
• [ ] Changes to “how we do things” are documented in READMEs and or onboarding guide
• [ ] If any model was updated to modify/add/delete columns, makemigrations was ran and the assoicated migrations file has been commited.

Ensured code standards are met (Original Developer)

• [ ] All new functions and methods are commented using plain language
• [ ] Did dependency updates in Pipfile also get changed in requirements.txt?
• [ ] Interactions with external systems are wrapped in try/except
• [ ] Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• [ ] New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• [ ] Checked keyboard navigability
• [ ] Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• [x] Add at least 1 designer as PR reviewer

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• [ ] Pulled this branch locally and tested it
• [ ] Reviewed this code and left comments
• [ ] Checked that all code is adequately covered by tests
• [ ] Made it clear which comments need to be addressed before this work is merged
• [ ] If any model was updated to modify/add/delete columns, makemigrations was ran and the assoicated migrations file has been commited.

Ensured code standards are met (Code reviewer)

• [ ] All new functions and methods are commented using plain language
• [ ] Interactions with external systems are wrapped in try/except
• [ ] Error handling exists for unusual or missing values
• [ ] (Rarely needed) Did dependency updates in Pipfile also get changed in requirements.txt?

Validated user-facing changes as a developer

• [ ] New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing

• [ ] Checked keyboard navigability

• [ ] Meets all designs and user flows provided by design/product

• [ ] Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

• [ ] Tested with multiple browsers, the suggestion is to use ones that the developer didn't (check off which ones were used)

  • [ ] Chrome
  • [ ] Microsoft Edge
  • [ ] FireFox
  • [ ] Safari

• [ ] (Rarely needed) Tested as both an analyst and applicant user

Note: Multiple code reviewers can share the checklists above, a second reviewers should not make a duplicate checklist

As a designer reviewer, I have

Verified that the changes match the design intention

• [ ] Checked that the design translated visually
• [ ] Checked behavior
• [ ] Checked different states (empty, one, some, error)
• [ ] Checked for landmarks, page heading structure, and links
• [ ] Tried to break the intended flow

Validated user-facing changes as a designer

• [ ] Checked keyboard navigability

• [ ] Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

• [ ] Tested with multiple browsers (check off which ones were used)

  • [ ] Chrome
  • [ ] Microsoft Edge
  • [ ] FireFox
  • [ ] Safari

• [ ] (Rarely needed) Tested as both an analyst and applicant user

Screenshots

[gabydisarli]

@rachidatecs can we match the styling from the summary box?

[gabydisarli]

Everything looks great. One small update please: on mobile can we add some padding between the more blog posts link and the featured .gov section so they don’t sit right on top of each other?

[michelle-rago]

yay!