From 357fdd07cd328ae86aeedb944c2a9ed021823f6c Mon Sep 17 00:00:00 2001 From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com> Date: Fri, 6 Dec 2024 11:12:52 -0700 Subject: [PATCH] Fix jetpack masterbar animations and missing icons (#97128) --- .../jpcom-masterbar/components/bundle.tsx | 30 +++-- .../icons/jetpack-bundle-icon-newsletter.tsx | 18 +++ .../icons/jetpack-bundle-icon-stats.tsx | 18 +++ .../pricing/jpcom-masterbar/style.scss | 116 +++++------------- 4 files changed, 86 insertions(+), 96 deletions(-) create mode 100644 client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-newsletter.tsx create mode 100644 client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-stats.tsx diff --git a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx index 0cc6dce1435967..dc2834eb0c7b21 100644 --- a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx +++ b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx @@ -5,9 +5,11 @@ import AntispamIcon from '../icons/jetpack-bundle-icon-antispam'; import BackupIcon from '../icons/jetpack-bundle-icon-backup'; import BoostIcon from '../icons/jetpack-bundle-icon-boost'; import CRMIcon from '../icons/jetpack-bundle-icon-crm'; +import NewsletterIcon from '../icons/jetpack-bundle-icon-newsletter'; import ScanIcon from '../icons/jetpack-bundle-icon-scan'; import SearchIcon from '../icons/jetpack-bundle-icon-search'; import SocialIcon from '../icons/jetpack-bundle-icon-social'; +import StatsIcon from '../icons/jetpack-bundle-icon-stats'; import VideopressIcon from '../icons/jetpack-bundle-icon-videopress'; import { onLinkClick } from '../utils'; import type { FC, MouseEvent } from 'react'; @@ -33,23 +35,31 @@ const Bundle: FC< BundleType > = ( { bundle } ) => { // causing the name to change to `complete-2` or something similar. if ( bundle.includes( 'complete' ) ) { return [ - , - , - , - , - , - , - , - , + , + , + , + , + , + , + , + , ]; } if ( bundle.includes( 'security' ) ) { - return [ , , ]; + return [ + , + , + , + ]; } if ( bundle.includes( 'growth' ) ) { - return [ ]; + return [ + , + , + , + ]; } return []; diff --git a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-newsletter.tsx b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-newsletter.tsx new file mode 100644 index 00000000000000..3b4d8a295cb65a --- /dev/null +++ b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-newsletter.tsx @@ -0,0 +1,18 @@ +const NewsletterIcon = () => ( + + Newsletter + + + +); + +export default NewsletterIcon; diff --git a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-stats.tsx b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-stats.tsx new file mode 100644 index 00000000000000..da68cc2fba5954 --- /dev/null +++ b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-stats.tsx @@ -0,0 +1,18 @@ +const StatsIcon = () => ( + + Stats + + + + + +); + +export default StatsIcon; diff --git a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/style.scss b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/style.scss index a853f02a702dcc..b2a0cf8e19495e 100644 --- a/client/jetpack-cloud/sections/pricing/jpcom-masterbar/style.scss +++ b/client/jetpack-cloud/sections/pricing/jpcom-masterbar/style.scss @@ -5,6 +5,11 @@ * Some overwrites are necessary to make both this and Jetpack.com headers look * similar. */ + +$duration: 0.1s; +$delay-ratio: 1.5; +$delay: 0.055s; + .is-group-jetpack-cloud.is-section-jetpack-cloud-pricing .jpcom-masterbar, .is-group-jetpack-cloud.is-section-jetpack-cloud-features-comparison .jpcom-masterbar { // ============================================================================ @@ -735,6 +740,24 @@ animation-name: submenu-item; animation-duration: 0.25s; animation-timing-function: ease-in-out; + + @for $column from 1 through 5 { + &:nth-of-type(#{$column}) { + animation-delay: calc( + calc(#{$delay} * #{$column}) + calc(#{$duration} / #{$delay-ratio}) + ); + + @for $i from 1 through 6 { + .header__submenu-links-list > li:nth-of-type(#{$i}) > a, + .header__submenu-links-list > li:nth-of-type(#{$i}) > p { + animation-delay: calc( + calc(#{$delay} * #{$i + 1 + $column}) + + calc(#{$duration} / #{$delay-ratio}) + ); + } + } + } + } } @media (prefers-reduced-motion) { .header__submenu-categories-list > li { @@ -773,86 +796,6 @@ } } - // FIRST MEGAMENU CATEGORY - .header__submenu-categories-list > li:nth-of-type(1) { - animation-delay: calc(calc(0.055s * 1) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(1) - .header__submenu-links-list > li:nth-of-type(1) > a { - animation-delay: calc(calc(0.055s * 3) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(1) - .header__submenu-links-list > li:nth-of-type(2) > a { - animation-delay: calc(calc(0.055s * 4) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(1) - .header__submenu-links-list > li:nth-of-type(3) > a { - animation-delay: calc(calc(0.055s * 5) + calc(0.1s / 1.5)); - } - - // SECOND MEGAMENU CATEGORY - .header__submenu-categories-list > li:nth-of-type(2) { - animation-delay: calc(calc(0.055s * 2) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(2) - .header__submenu-links-list > li:nth-of-type(1) > a { - animation-delay: calc(calc(0.055s * 4) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(2) - .header__submenu-links-list > li:nth-of-type(2) > a { - animation-delay: calc(calc(0.055s * 5) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(2) - .header__submenu-links-list > li:nth-of-type(3) > a { - animation-delay: calc(calc(0.055s * 6) + calc(0.1s / 1.5)); - } - - // THIRD MEGAMENU CATEGORY - .header__submenu-categories-list > li:nth-of-type(3) { - animation-delay: calc(calc(0.055s * 3) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(1) > a { - animation-delay: calc(calc(0.055s * 5) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(2) > a { - animation-delay: calc(calc(0.055s * 6) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(3) > a { - animation-delay: calc(calc(0.055s * 7) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(4) > a { - animation-delay: calc(calc(0.055s * 8) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(5) > a { - animation-delay: calc(calc(0.055s * 9) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(3) - .header__submenu-links-list > li:nth-of-type(6) > a { - animation-delay: calc(calc(0.055s * 10) + calc(0.1s / 1.5)); - } - - // FOURTH MEGAMENU CATEGORY - .header__submenu-categories-list > li:nth-of-type(4) { - animation-delay: calc(calc(0.055s * 3) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(4) - .header__submenu-links-list > li:nth-of-type(1) > p { - animation-delay: calc(calc(0.055s * 6) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(4) - .header__submenu-links-list > li:nth-of-type(2) > a { - animation-delay: calc(calc(0.055s * 7) + calc(0.1s / 1.5)); - } - .header__submenu-categories-list > li:nth-of-type(4) - .header__submenu-links-list > li:nth-of-type(3) > a { - animation-delay: calc(calc(0.055s * 8) + calc(0.1s / 1.5)); - } - .header__submenu-bundles { flex: 2; max-width: 315px; @@ -899,18 +842,19 @@ } > li { + @for $row from 1 through 3 { + &:nth-of-type(#{$row}) { + animation-delay: calc( + calc(#{$delay} * #{$row}) + calc(#{$duration} / #{$delay-ratio}) + ); + } + } margin: 0; animation-fill-mode: backwards; animation-name: submenu-item; animation-duration: 0.25s; animation-timing-function: ease-in-out; - &:nth-of-type(1) { - animation-delay: calc(calc(0.055s * 4) + calc(0.1s / 1.5)); - } - &:nth-of-type(2) { - animation-delay: calc(calc(0.055s * 5) + calc(0.1s / 1.5)); - } @media (prefers-reduced-motion) { animation-duration: 0;