feat(CoverHero): new component #1144

atabel · 2024-06-10T07:02:42Z

jira: WEB-1848
spec: https://www.figma.com/file/M8t65SWdTUyM44YjxuzCyu/%F0%9F%94%B8-Hero-Specs?type=design&node-id=4912%3A16384&mode=design&t=38QLKG8kvsfmgM38-1

github-actions · 2024-06-10T07:05:24Z

Size stats

	master	this branch	diff
Total JS	10.7 MB	10.7 MB	+12.9 kB
JS without icons	1.95 MB	1.97 MB	+12.8 kB
Lib overhead	53.8 kB	53.8 kB	0 B
Lib overhead (gzip)	14.4 kB	14.4 kB	0 B

github-actions · 2024-06-10T07:06:03Z

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

github-actions · 2024-06-10T07:09:20Z

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-k8hxoi6ga-flows-projects-65bb050e.vercel.app

Built with commit d465585.
This pull request is being automatically deployed with vercel-action

atabel · 2024-06-10T07:35:28Z

src/image.css.ts

@@ -27,7 +27,6 @@ export const image = style([
        borderRadius: skinVars.borderRadii.container,
    }),
    {
-        zIndex: 1,


I don't know why we had this, but removing it didn't break any screenshot test (also tested in webapp)

atabel · 2024-06-10T14:23:53Z

src/cover-hero-media.tsx

@@ -0,0 +1,35 @@
+'use client';


extracted this part to a different file because it's te interactive part of the component, hence we need "use client". This way the rest of the component is a RSC and will not contribute to bundle size in the browser.

atabel · 2024-06-10T14:27:34Z

src/grid-layout.tsx

+    left,
+    right,
+    verticalSpace,
+    collapseBreakpoint = 'tablet',


this prop is new, this will allow configuring GridLayout to collapse in mobile breackpoint instead of tablet (default behaviour). This mode is required in CoverHero

marcoskolodny · 2024-06-10T20:20:28Z

src/cover-hero.tsx

+                  default: vars.colors.background,
+                  inverse: vars.colors.backgroundBrand,
+                  alternative: vars.colors.backgroundAlternative,
+              }[variant ?? 'default'];


This is not how we handle variants in Mistica. For example, this playroom looks weird to me. All the other components read the variant from the context

no, you have to distinguish between components that a adapt to external variant and components that sets the variant. For example, a button or a text component adapt the colors depending on the external variant context, but Hero, Header or some Cards can set their own variant

marcoskolodny · 2024-06-10T20:25:33Z

src/cover-hero.tsx

+                    minHeight: aspectRatio && aspectRatio !== 'auto' ? 'auto' : minHeight,
+                    boxSizing: 'border-box',
+                    background,
+                    aspectRatio: aspectRatioToCssString(aspectRatio),


aspectRatio is not supported by all the Chrome versions we need: https://caniuse.com/?search=aspect-ratio

Why not using AspectRatioContainer (doing something similar to what we do with cards)

I wanted to avoid the paddingTop hack because this is a rare case in this component and the graceful degradation for old browsers is quite good here.
Anyway, I finally included the hack, although I needed an extra div :(

src/grid-layout.tsx

marcoskolodny · 2024-06-10T20:28:54Z

src/card.tsx

@@ -282,11 +282,14 @@ const CardActionPauseIcon = ({color}: IconProps) => <IconPauseFilled color={colo

 const CardActionPlayIcon = ({color}: IconProps) => <IconPlayFilled color={color} size={12} />;

-const useVideoWithControls = (
+export const useVideoWithControls = (


should we abstract this in a separate file instead? It's not something specific to cards anymore

Yes I thought about it, I can extract it if you prefer

Yes, I think we should do it in order to keep the code well organized

I think we could create a top-actions.tsx file with all the top actions components/hooks including this one, what do you think?

talked offline, we'll move this refactor to the future (when we have over media variant)

src/cover-hero.tsx

src/__stories__/cover-hero-story.tsx

src/cover-hero.tsx

aweell

The lenght of the description changes in desktop when there's a side slot depending if centered is true|false, the expected lenght should be the same is if was left aligned.

Example

src/__screenshot_tests__/cover-hero-screenshot-test.tsx

aweell · 2024-06-11T16:10:52Z

src/cover-hero.tsx

+                    <Box paddingY={noPaddingY ? 0 : {desktop: 56, tablet: 56, mobile: 24}}>
+                        <Stack space={24}>
+                            {centered && !sideExtra ? (
+                                mainContent


When centered in desktop seems that there's no limitation for the title, pretitle and description width.

Same as left aligned the content should take:

Pretitle: 6col (or that 75%)
Title: 8col
Description: 6col (or that 75%)

pladaria · 2024-06-17T14:20:53Z

src/__stories__/cover-hero-story.tsx

+        options: ['default', 'inverse', 'alternative'],
+        control: {type: 'select'},
+        // this control should only be visible when background is set to 'color from skin' or 'custom color'
+        // if: {arg: 'background', eq: 'color'},


This is a missing storybook feature. I can configure the variant control to appear when background is 'color from skin': if: {arg: 'background', eq: 'color from skin'} but I can't configure it to appear when background is 'color from skin' or 'custom color'

Yes, it's a very annoying thing from Storybook, but why leaving this commented line? I'd remove it

just to document the intention, but I can remove it

I've rewritten the comment with a better explanation and added a reference to this PR: ComponentDriven/csf#76

yceballost

🙌

# [15.11.0](v15.10.0...v15.11.0) (2024-06-19) ### Bug Fixes * **ButtonLayout:** add bleed when using only link ([#1150](#1150)) ([554f98a](554f98a)) * **Counter:** add aria-live to value ([#1146](#1146)) ([3e2e09b](3e2e09b)) * **Header:** bleed not working in o2-new skin ([#1137](#1137)) ([00fb632](00fb632)) * **MainNavigationBar:** remove logo space in mobile when no sections are given ([#1149](#1149)) ([e4c03a0](e4c03a0)) * **Select:** set text color in native version ([#1141](#1141)) ([eedf265](eedf265)) * **Spinner:** use controlActivatedInverse token as default when used inside inverse variant ([#1133](#1133)) ([38a192d](38a192d)) ### Features * **Cards:** improve accessibility ([#1139](#1139)) ([dde9cc5](dde9cc5)) * **Chip:** allow using badge in selectable chips ([#1134](#1134)) ([9ecda7c](9ecda7c)) * **Circle:** custom background support ([#1136](#1136)) ([bedeaa4](bedeaa4)) * **CoverHero:** new component ([#1144](#1144)) ([a655e6e](a655e6e)) * **DisplayMediaCard, PosterCard:** add extra ([#1131](#1131)) ([501cf73](501cf73)) * **EmptyState:** allow using only ButtonLink as action ([#1140](#1140)) ([d73c219](d73c219)) * **HighlightedCard:** support for alt for image ([#1135](#1135)) ([c9ba728](c9ba728)) * **Image:** Custom fallback icon in Vivo New ([#1145](#1145)) ([ec600fe](ec600fe)) * **Switch:** Improve animation ([#1142](#1142)) ([8162eed](8162eed)) * **Table:** new component ([#1129](#1129)) ([328e013](328e013)) * **Timer:** create component ([#1130](#1130)) ([0b3253e](0b3253e)) * **Touchable:** newTab support in to links ([#1143](#1143)) ([eff07e3](eff07e3))

tuentisre · 2024-06-19T10:00:11Z

🎉 This PR is included in version 15.11.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

atabel added 4 commits June 5, 2024 15:39

WEB-1848 feat(CoverHero): new component

a8a2a35

Merge branch 'master' into atoledano-cover-hero

b5a9e8d

cover hero

6d9461c

Merge branch 'master' into atoledano-cover-hero

ef3a01b

atabel added 3 commits June 10, 2024 09:19

fix dark mode

fe2d62c

update screenshots

48dd2ed

removed image zindex

6ab715f

atabel commented Jun 10, 2024

View reviewed changes

story inside slideshow. Snippets

f06b9aa

atabel commented Jun 10, 2024

View reviewed changes

aria-label dataAttributes and background instead of backgroundColor

7050a1d

atabel requested review from marcoskolodny, pladaria, yceballost and aweell June 10, 2024 14:46

atabel marked this pull request as ready for review June 10, 2024 14:47

marcoskolodny reviewed Jun 10, 2024

View reviewed changes

src/grid-layout.tsx Outdated Show resolved Hide resolved

marcoskolodny reviewed Jun 10, 2024

View reviewed changes

yceballost requested changes Jun 11, 2024

View reviewed changes

src/cover-hero.tsx Show resolved Hide resolved

src/__stories__/cover-hero-story.tsx Outdated Show resolved Hide resolved

src/__stories__/cover-hero-story.tsx Show resolved Hide resolved

src/cover-hero.tsx Show resolved Hide resolved

src/cover-hero.tsx Show resolved Hide resolved

aweell reviewed Jun 11, 2024

View reviewed changes

atabel added 2 commits June 11, 2024 14:45

fixes from CR

1333362

fix description width when using centered+sideExtra

65a68fc

pladaria reviewed Jun 11, 2024

View reviewed changes

src/__screenshot_tests__/cover-hero-screenshot-test.tsx Outdated Show resolved Hide resolved

take screenshots of the component instead of the whole page

07aa5e7

atabel added 2 commits June 11, 2024 15:54

Merge branch 'master' into atoledano-cover-hero

07892d8

allow CoverHero without buttons

280a690

aweell reviewed Jun 11, 2024

View reviewed changes

atabel added 4 commits June 12, 2024 09:10

ssr test

6fc25a0

limit centered content to 8 columns

516baf5

Merge branch 'master' into atoledano-cover-hero

68cca1f

aspect-ratio polyfill

5307fa6

atabel requested review from pladaria, yceballost, marcoskolodny and aweell June 17, 2024 10:40

aweell approved these changes Jun 17, 2024

View reviewed changes

pladaria reviewed Jun 17, 2024

View reviewed changes

pladaria approved these changes Jun 17, 2024

View reviewed changes

yceballost approved these changes Jun 17, 2024

View reviewed changes

add component-name to GridLayout

e8fad1f

marcoskolodny approved these changes Jun 18, 2024

View reviewed changes

atabel added 3 commits June 18, 2024 12:45

Merge branch 'master' into atoledano-cover-hero

904e361

improve story comment

c591980

add reference to csf PR

d465585

atabel added this pull request to the merge queue Jun 18, 2024

Merged via the queue into master with commit a655e6e Jun 18, 2024
11 checks passed

atabel deleted the atoledano-cover-hero branch June 18, 2024 12:15

tuentisre added the released label Jun 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(CoverHero): new component #1144

feat(CoverHero): new component #1144

atabel commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

atabel Jun 10, 2024

atabel Jun 10, 2024

atabel Jun 10, 2024

marcoskolodny Jun 10, 2024

atabel Jun 11, 2024

marcoskolodny Jun 10, 2024

atabel Jun 17, 2024

marcoskolodny Jun 10, 2024

atabel Jun 11, 2024

marcoskolodny Jun 11, 2024

atabel Jun 11, 2024

atabel Jun 11, 2024

aweell left a comment

aweell Jun 11, 2024

atabel Jun 17, 2024

pladaria Jun 17, 2024

atabel Jun 17, 2024

marcoskolodny Jun 18, 2024

atabel Jun 18, 2024

atabel Jun 18, 2024 •

edited

Loading

yceballost left a comment

tuentisre commented Jun 19, 2024

feat(CoverHero): new component #1144

feat(CoverHero): new component #1144

Conversation

atabel commented Jun 10, 2024 • edited Loading

github-actions bot commented Jun 10, 2024 • edited Loading

github-actions bot commented Jun 10, 2024 • edited Loading

github-actions bot commented Jun 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aweell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atabel Jun 18, 2024 • edited Loading

Choose a reason for hiding this comment

yceballost left a comment

Choose a reason for hiding this comment

tuentisre commented Jun 19, 2024

atabel commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024 •

edited

Loading

atabel Jun 18, 2024 •

edited

Loading