Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix jetpack masterbar animations and missing icons #97128

Merged
merged 1 commit into from
Dec 6, 2024
Merged

Fix jetpack masterbar animations and missing icons #97128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions client/jetpack-cloud/sections/pricing/jpcom-masterbar/components/bundle.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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})
);
}
}
}
Comment on lines +744 to +759
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice refactor! Using Scss @for loops!! 🙌

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't take too much credit, I mostly copied from jetpack.com and I made the original, terrible, SCSS here 😆 But thank you!

}
}
@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
Loading