Skip to content

Commit

Permalink
Fix jetpack masterbar animations and missing icons (#97128)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodeyGuyDylan
CodeyGuyDylan authored Dec 6, 2024
1 parent 3d01d4e commit 357fdd0
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 96 deletions.
30 changes: 20 additions & 10 deletions client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 [
<BackupIcon />,
<AntispamIcon />,
<ScanIcon />,
<SearchIcon />,
<SocialIcon />,
<VideopressIcon />,
<CRMIcon />,
<BoostIcon />,
<BackupIcon key="backup" />,
<AntispamIcon key="anti-spam" />,
<ScanIcon key="scan" />,
<SearchIcon key="search" />,
<SocialIcon key="social" />,
<VideopressIcon key="videopress" />,
<CRMIcon key="crm" />,
<BoostIcon key="boost" />,
];
}

if ( bundle.includes( 'security' ) ) {
return [ <BackupIcon />, <AntispamIcon />, <ScanIcon /> ];
return [
<BackupIcon key="backup" />,
<AntispamIcon key="anti-spam" />,
<ScanIcon key="scan" />,
];
}

if ( bundle.includes( 'growth' ) ) {
return [ <SocialIcon /> ];
return [
<StatsIcon key="stats" />,
<SocialIcon key="social" />,
<NewsletterIcon key="newsletter" />,
];
}

return [];
Expand Down
18 changes: 18 additions & 0 deletions ...t/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-newsletter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const NewsletterIcon = () => (
<svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Newsletter</title>
<path
className="jetpack-bundle-product-background"
d="M0.977615 6.55556C0.977615 2.93502 3.91264 0 7.53317 0H52.4221C56.0426 0 58.9776 2.93502 58.9776 6.55556V51.4444C58.9776 55.065 56.0426 58 52.4221 58H7.53317C3.91264 58 0.977615 55.065 0.977615 51.4444V6.55556Z"
fill="#2C3338"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18 22.3333C18 20.8606 19.1939 19.6667 20.6667 19.6667H39.3333C40.8061 19.6667 42 20.8606 42 22.3333V35.6667C42 37.1394 40.8061 38.3333 39.3333 38.3333H20.6667C19.1939 38.3333 18 37.1394 18 35.6667V22.3333ZM20.6667 21.6667H39.3333C39.7015 21.6667 40 21.9651 40 22.3333V23.5834L30.0001 31.0833L20 23.5833V22.3333C20 21.9651 20.2985 21.6667 20.6667 21.6667ZM20 26.0833V35.6667C20 36.0349 20.2985 36.3333 20.6667 36.3333H39.3333C39.7015 36.3333 40 36.0349 40 35.6667V26.0834L30.0001 33.5833L20 26.0833Z"
fill="white"
/>
</svg>
);

export default NewsletterIcon;
18 changes: 18 additions & 0 deletions client/jetpack-cloud/sections/pricing/jpcom-masterbar/icons/jetpack-bundle-icon-stats.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const StatsIcon = () => (
<svg width="58" height="59" viewBox="0 0 58 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Stats</title>
<rect
className="jetpack-bundle-product-background"
x="0.977615"
width="58"
height="58"
rx="6.09524"
fill="#2C3338"
/>
<path d="M28.9776 19H30.9776V39H28.9776V19Z" fill="white" />
<path d="M21.9776 25.6667H23.9776V39H21.9776V25.6667Z" fill="white" />
<path d="M37.9776 31H35.9776V39H37.9776V31Z" fill="white" />
</svg>
);

export default StatsIcon;
116 changes: 30 additions & 86 deletions client/jetpack-cloud/sections/pricing/jpcom-masterbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
// ============================================================================
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 357fdd0

Please sign in to comment.