Counter as a slot

[PatriRoman]

Goal

We received a request from O2 UK to have a timer banner, so the purpose is to respond to this need and request from the OB. The goal is to design a counter that responds to this need.
​

Context

The request from O2 UK says:
"Within the offers section we run timed events and sale periods such as “Summer Sale”.​
We would like a new content card designed for us to show in a prominent position a short message with a countdown timer built in. The copy and countdown timer would need to be configurable in the CMS to overlay an image we could upload.​
We would use these in examples such as:​
“For next day delivery order within the next…”​
“Be quick, the Summer Sale ends in…”​
The design of the module needs to be the page width and slim – example of the website design shown.​"

Impact

The need for a counter slot to be inserted in the cards that apply. In this case, we propose the Display card because we consider it to be the one that best suits the UK's request as it has a more banner-like format, with a high presence of the image and the visual content takes precedence over the written content.

Discussion Questions

• Should this new slot be part of Mistica or should it be a Novum extended?
• What kind of design do we want for this new slot?
• Do we want it to have some kind of animation?
• Is it a slot that should be able to be embedded in all types of cards or just some?
• What type of card is best suited to respond to the UK proposal?

Additional considerations

Additionally, if we consider that the card that best suits the needs of the OB is the Display card, we will have to make it possible to add a slot area to them, as they do not have one at the moment.

Do you have a visual proposal?

https://www.figma.com/file/oFCRtFpzvF5Qghc3xi1rhN/Product-Specs---Targeting?type=design&node-id=6158%3A18337&mode=design&t=bvrKqkxQ8rLcQhn8-1

[yceballost]

The first question that I have is... don't you think it might be too much cognitive load to use a counter inside a media display where it has a background image? (imagine if you use a video inside 💀). This is the main reason that what we did not include a slot in DisplayMediaCard, to avoid too much visual information in this type of cards.

On the other hand, I believe we are mixing things up. Are you asking about the possibility of including Slot in DisplayMediaCard, or including a new countdown component in Mística? These are different things! Please, let's use the discussions to argue for independent things 😃

[PatriRoman]

I chose the Display Media card because of the cards available in Mística I think it is the one that best fits the UK request. It is true that if you fill in all the optional fields that the card allows, the cognitive load is high.
Other possibilities are to see what other card already available can fit with this counter, or the creation of a new "counter card" that only has the essential elements to respond to the request of the OB. Here the Figma with an example of how it could be and the example sent to us by the OB.
As for "the request to add a slot in the Display Cards" it would only be necessary if we agree that the Display Cards are the ones that should have a counter. If not, it is obviously not necessary.
The main doubts to be resolved here are:

1. Where do we consider that this counter can live, in an existing card or in a new one?
2. Do we consider that this counter should be part of Mística or do we approach it as a Novum extended?

[aweell]

I would focus the discussion in this component rather than if the mediaDisplay should have slot since this is a particular OB request. We can open a different one to understand "the essential elements to respond to the request of the OB" and if the slot of the card is the way to solve them.

1. This component (countdown) should be independent of the container or layout option you choose to display it. So it can be posible to use it inside a card, a hero a header or in a color background if needed.

The same way the text component in Mistica behaves the text of the countdown should be reactive to context changes so can be used in all the available contexts.

This is for example a counter in the hero of blau.de:

2. I consider that the countdown element could gather all the ingredients to be a core component.

Some drawbacks I foresee are similar with other heavy text based components as community blocks or the price component. The font-size or item distribution are highly susceptible to be something system users want to customise based on the context.

[AnaMontes11]

Hello @PatriRoman, after discussing it with the team and pending further examination, we believe it might make sense to provide both options:

1. Enable the slot for the mediaDisplay.
2. Create a independent Countdown core component so it can be used inside other components if needed.

[PatriRoman]

Hello!
Thank you for your answers :)
Regarding your comments, maybe I didn't explain myself very well:

1. The main purpose of the thread was to find out how we should set up the counter: as a slot, as a new card, or in what way.
2. What we want this counter to look like.
3. If we want it to be part of Mística or an extended component.

The issue of the slot in the Display cards was only raised if we considered that the Displays should be able to hold a counter, otherwise it is not something necessary, so I did not create another Github thread about it as it seemed that it was not the ideal option.

From what I understood from your answers:

1. The counter will be in slot format.
2. Its final design is yet to be defined.
3. It will be part of Mística.

Is it right?

I add a link to Figma with an example of how this counter could look like in the Hero (as Alex said).

On the other hand, if we go with the option of the counter being a slot, I think its elements should be:

• Number of days + "days" literal.
• Number of hours + literal of "hours".
• Number of minutes + literal of "minutes".

Thank you!

[AnaMontes11]

Hello @PatriRoman,

I'm responding to your recent questions:

• The counter will be a "core" component. As a component, it can be added to any slot. This way, you can place it inside the slot of a card or a hero, for example.
• Since this component is included as core, we need to define it globally. For the definition, we will take into account the elements you propose.
• To include it within mediaDisplay, we would have to enable these cards to have slot capability. We agree to open up this possibility.

We can find room to align on the definition of that global approach :)

If you have more questions, we are here to help!