Story: Add External Link Icon to NCIDS Collections

[andyvanavery31]

As a user of NCIDS, I need NCIDS Collections to be able to have the external link icon so that my users can see when a collection item is linked to an external source.

Specifications

Visual

• External Link icon is center aligned on the title text
• Follows usa-link styling
• If the title would wrap, the last word of the title will wrap with the icon so the icon does not sit alone

Functional

• If the link text does not have .gov it will get an external link icon
• A Collection Item can be overridden to have an external link icon
• A Collection Item with an external link icon can be overridden to remove it

Impacted Components

• Collection
  • Doc Site
  • Storybook Collection Default
  • Storybook Collection Media
  • Storybook Collection Calendar
  • Storybook Collection Condensed

DoR Tasks

• [x] Comps Created
• [ ] Comps Reviewed
  • [ ] Developer Review
  • [ ] IA Review
  • [ ] Product Review
• [ ] Comps Approved
  • [ ] Developer Approval
  • [ ] IA Approval
  • [ ] Product Approval
• [x] Scenarios Created
  • [ ] Picture for collection with media to be created and added to the ticket by designers
• [ ] Scenarios Reviewed
  • [ ] Designer Review
  • [ ] Developer Review
  • [ ] IA Review
• [ ] Scenarios Approved
  • [ ] Designer Approval
  • [ ] Developer Approval
  • [ ] IA Approval
• [x] Acceptance Criteria Drafted
• [ ] Acceptance Criteria Reviewed
  • [ ] Developer Review
  • [ ] IA Review
• [ ] Acceptance Criteria Approved
  • [ ] Developer Approval
  • [ ] IA Approval

DoD Tasks

• [ ] Governance Drafted
• [ ] PR Review (see PR for review and comments)
• [ ] Client review with demo

Technical Notes

Scenarios/Comps

• On the Documentation Site Collection page add:
  • A section after Character limits and before Accessibility explaining how and when to use and add the External Link Icon.
  • A collection item to the bottom of the Default collection code snippet that is an external link. The title will be "External Link Example", date of, "November 15, 2024", description of "This collection item is an external link that goes to Google", with the link of www.google.com, and no tags.
  • A collection item to the bottom of the Condensed collection code snippet that is an external link. The title will be "External Link Example", with the displayed link of Google.com, and the link being www.google.com
  • A collection item to the bottom of the Default with media code snippet that is an external link. The title will be "External Link Example", no author, date of November 15, 2024, description of "This collection item is an external link that goes to Google", with the link of www.google.com, and no tags. Add the image supplied by the designers added to this ticket.
  • A collection item to the bottom of the Default with calendar code snippet that is an external link. The title will be "External Link Example", with the date of Nov 15, and description of "This collection item is an external link that goes to Google", with the link of www.google.com, and no tags

Acceptance Criteria

Scenario: [title]
  Given [context]
    And [some more context]
  When  [event]
  Then  [outcome]
    And [another outcome]