1966426 - Create a basic moz-promo element

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

The requirements for this may change as the designs evolve, but this bug will cover implementing the base moz-promo element. It will likely need to support different variants/types - at least one more colorful "fun" variant for more exciting messages that we want to draw attention to, and a "boring" variant for subtler, more informational messages.

In addition to "type" or "variant" we'll need to implement other basic properties as part of this work - things like heading and messsage. There could be a lot of overlap with moz-message-bar, so we'll likely want to use that as inspiration. It's possible we'll want to extend it directly, but before doing this we should evaluate whether or not the amount of overriding will be more trouble than it's worth.

Comment 1

[Mark Striemer [:mstriemer]]

Acceptance criteria:

• New component based on MozLitElement
• fluent properties: heading and label (start a slack thread about heading/label, heading/message, label/description)
• Has purple and grey types (fun and boring)
• Story
• Basic tests

Comment 2

[Tim Giles [:tgiles]]

Attachment: Bug 1966426 - Create basic moz-promo component. r=#recomp-reviewers

These changes create a new moz-promo element based on MozLitElement.

Currently this element utilizes Fluent for the 'heading' and 'message'
for this component. We may want to change this to 'heading'/'label' or
'label'/'description' in the future.

Utilizes two types, "default" and "fun", to change the colors of the
moz-promo element. We will need updated colors for both dark mode and
light mode, see moz-promo.css for TODOs.

Add stories for the "default" and "fun" types of moz-promo.

Add basic tests for the moz-promo component.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1336bdf151fd
https://hg.mozilla.org/integration/autoland/rev/1edca3edf836
Create basic moz-promo component. r=reusable-components-reviewers,desktop-theme-reviewers,hjones

Comment 4

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/1edca3edf836