Image attribution component

[stephlao]

Problem Statement

As a designer I would like the ability to showcase small owners on t.com and credit them when we use their images on our web pages.

additional context:
business marketing has legal responsibility to credit the small business owners in social ads and in our digital space when their photos are being used for campaigns.

Social ads used across the web are images only, meaning those who rely on screen readers can’t read any text.
t.com does not currently have a visual component that properly attributes/credits small business owners and we’ve been using components that aren’t best suited for this scenario
Leadership has recently requested on top of owner attribution, they would like to add additional information like, a quote, link out or story/description of the owner.

this component would live on the homepage, offers page, b2b my telus page.

Recommendation

Considerations & Requirements:

1. building a visual solution that meets accessibility requirements
2. having a non-invasive component that doesn’t disrupt the users experience while browsing on t.com
3. component would live on top of an image as an overlay with intractable open and close button. component would be built with flex grid in mind since the images we pair with our content vary in width and height.
4. have a character limit recommended by content but should also flex in size based on content within the box. (will work with content to establish character limits for french and english)

Functionality:

1. overlay component within an image
2. can be opened with a button/hyperlink
3. when you click outside the component, it would close the overlay.
4. ability to add hyperlinks within content

Future considerations: with project monarch underway, this visual solution will serve as a temporary solution until we need to revisit this for updating again.

Designs

- InVision links

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

Meta

• Willing to design solution: Yes/No
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• Do any similar components already exist in TDS (core or community): Yes/No
• Does this pattern exist already but isn’t a community component? (include url)
• Which teams/applications do you think would use this improvement?
• High impact: Yes/No