From c5620fd0c3279d90c0896eae892c0105651d1850 Mon Sep 17 00:00:00 2001 From: dkmyta Date: Fri, 18 Oct 2024 12:38:01 -0700 Subject: [PATCH 1/7] Add InProgressAnimation component --- .../protect/assets/images/in-progress.png | Bin 15356 -> 0 bytes .../stories/index.stories.jsx | 4 +- .../error-admin-section-hero/index.tsx | 6 - .../styles.module.scss | 11 -- .../in-progress-animation/index.tsx | 16 +++ .../scan-animation-1.svg | 33 ++++++ .../scan-animation-2.svg | 33 ++++++ .../scan-animation-3.svg | 42 +++++++ .../in-progress-animation/styles.module.scss | 105 ++++++++++++++++++ .../scan/scanning-admin-section-hero.tsx | 8 +- .../src/js/routes/scan/styles.module.scss | 11 -- 11 files changed, 233 insertions(+), 36 deletions(-) delete mode 100644 projects/plugins/protect/assets/images/in-progress.png create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/index.tsx create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss diff --git a/projects/plugins/protect/assets/images/in-progress.png b/projects/plugins/protect/assets/images/in-progress.png deleted file mode 100644 index 7d712a97e66aeb17997953b61430e5cb191c7756..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15356 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 a0004*$Svvv2RqCF0000 ), - secondary: , + secondary: , }; diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx index f199fa92d9f29..5214531dcf362 100644 --- a/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx +++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/index.tsx @@ -1,7 +1,6 @@ import { Text } from '@automattic/jetpack-components'; import { __ } from '@wordpress/i18n'; import { Icon, warning } from '@wordpress/icons'; -import inProgressImage from '../../../../assets/images/in-progress.png'; import AdminSectionHero from '../admin-section-hero'; import ScanNavigation from '../scan-navigation'; import styles from './styles.module.scss'; @@ -38,11 +37,6 @@ const ErrorAdminSectionHero: React.FC< ErrorAdminSectionHeroProps > = ( { } - secondary={ -
- -
- } preserveSecondaryOnMobile={ false } /> ); diff --git a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss index 3ab653757619a..6f0750abd02f8 100644 --- a/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss +++ b/projects/plugins/protect/src/js/components/error-admin-section-hero/styles.module.scss @@ -11,17 +11,6 @@ margin-right: var( --spacing-base ); // 8px } -.illustration { - display: flex; - align-items: center; - height: 100%; - img { - // let's fit images - object-fit: cover; - width: 100%; - } -} - .scan-navigation { margin-top: calc( var( --spacing-base ) * 3 ); // 24px } \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx new file mode 100644 index 0000000000000..f7d454fa48a1f --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx @@ -0,0 +1,16 @@ +import ScanAnim1 from './scan-animation-1.svg'; +import ScanAnim2 from './scan-animation-2.svg'; +import ScanAnim3 from './scan-animation-3.svg'; +import styles from './styles.module.scss'; + +const InProgressAnimation: React.FC = () => { + return ( +
+ + + +
+ ); +}; + +export default InProgressAnimation; diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg new file mode 100644 index 0000000000000..c06565daec2a3 --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg new file mode 100644 index 0000000000000..7c9140c130256 --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg new file mode 100644 index 0000000000000..4ef0ba1021605 --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss new file mode 100644 index 0000000000000..cb3e1fcb77277 --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss @@ -0,0 +1,105 @@ +.scan__animation { + position: relative; + + @media ( max-width: 1240px ) { + display: none; + } +} + +.scan__animation_el_1, +.scan__animation_el_2, +.scan__animation_el_3 { + opacity: 0; + position: absolute; + z-index: 4; + animation: animation-el-3 4s ease-in-out 0.8s infinite normal forwards; +} + +.scan__animation_el_1 { + bottom: 24px; + right: 230px; + animation-name: animation_el_1; + animation-delay: 0.6s; +} + +.scan__animation_el_2 { + bottom: -19px; + right: 10px; + animation-name: animation_el_2; + animation-delay: 0.7s; +} + +.scan__animation_el_3 { + bottom: -164px; + right: -40px; + animation-name: animation_el_3; +} + +@keyframes animation_el_1 { + 0% { + opacity: 0; + transform: translateY( 32px ); + } + 20% { + opacity: 1; + transform: translateY( 0 ); + } + 50% { + opacity: 1; + transform: translateY( 0 ); + } + 60% { + opacity: 0; + transform: translateY( -96px ); + } + 100% { + opacity: 0; + transform: translateY( -96px ); + } +} + +@keyframes animation_el_2 { + 0% { + opacity: 0; + transform: translateY( 64px ); + } + 20% { + opacity: 1; + transform: translateY( 0 ); + } + 50% { + opacity: 1; + transform: translateY( 0 ); + } + 60% { + opacity: 0; + transform: translateY( -96px ); + } + 100% { + opacity: 0; + transform: translateY( -96px ); + } +} + +@keyframes animation_el_3 { + 0% { + opacity: 0; + transform: translateY( 44px ); + } + 20% { + opacity: 1; + transform: translateY( 0 ); + } + 50% { + opacity: 1; + transform: translateY( 0 ); + } + 60% { + opacity: 0; + transform: translateY( -84px ); + } + 100% { + opacity: 0; + transform: translateY( -84px ); + } +} \ No newline at end of file diff --git a/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx index 49e99696cc4e0..f5f19b6ad45af 100644 --- a/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx +++ b/projects/plugins/protect/src/js/routes/scan/scanning-admin-section-hero.tsx @@ -1,7 +1,7 @@ import { Text } from '@automattic/jetpack-components'; import { __, sprintf } from '@wordpress/i18n'; -import inProgressImage from '../../../../assets/images/in-progress.png'; import AdminSectionHero from '../../components/admin-section-hero'; +import InProgressAnimation from '../../components/in-progress-animation'; import ProgressBar from '../../components/progress-bar'; import ScanNavigation from '../../components/scan-navigation'; import useScanStatusQuery from '../../data/scan/use-scan-status-query'; @@ -51,11 +51,7 @@ const ScanningAdminSectionHero: React.FC = () => { } - secondary={ -
- -
- } + secondary={ } preserveSecondaryOnMobile={ false } /> ); diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss index 0b5e90e21e7ae..8651420159fa1 100644 --- a/projects/plugins/protect/src/js/routes/scan/styles.module.scss +++ b/projects/plugins/protect/src/js/routes/scan/styles.module.scss @@ -2,17 +2,6 @@ font-weight: bold; } -.illustration { - display: flex; - align-items: center; - height: 100%; - img { - // let's fit images - object-fit: cover; - width: 100%; - } -} - .product-section, .info-section { margin-top: calc( var( --spacing-base ) * 7 ); // 56px margin-bottom: calc( var( --spacing-base ) * 7 ); // 56px From 24bfcc94ab0655acc6918318f23a94717d9166fb Mon Sep 17 00:00:00 2001 From: dkmyta Date: Fri, 18 Oct 2024 12:38:47 -0700 Subject: [PATCH 2/7] changelog --- .../protect/changelog/add-protect-in-progress-animation | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/plugins/protect/changelog/add-protect-in-progress-animation diff --git a/projects/plugins/protect/changelog/add-protect-in-progress-animation b/projects/plugins/protect/changelog/add-protect-in-progress-animation new file mode 100644 index 0000000000000..e5f224609a668 --- /dev/null +++ b/projects/plugins/protect/changelog/add-protect-in-progress-animation @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Adds an InProgressAnimation component From fa20e213559c92f00189cbca466dba3628d3ecfd Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 18 Oct 2024 14:44:49 -0600 Subject: [PATCH 3/7] Animate existing in-progress SVG --- .../in-progress-animation/index.tsx | 144 +++++++++++++++++- .../scan-animation-1.svg | 33 ---- .../scan-animation-2.svg | 33 ---- .../scan-animation-3.svg | 42 ----- .../stories/index.stories.tsx | 10 ++ .../in-progress-animation/styles.module.scss | 86 ++--------- 6 files changed, 160 insertions(+), 188 deletions(-) delete mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg delete mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg delete mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg create mode 100644 projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx index f7d454fa48a1f..43666567cff12 100644 --- a/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx +++ b/projects/plugins/protect/src/js/components/in-progress-animation/index.tsx @@ -1,15 +1,143 @@ -import ScanAnim1 from './scan-animation-1.svg'; -import ScanAnim2 from './scan-animation-2.svg'; -import ScanAnim3 from './scan-animation-3.svg'; import styles from './styles.module.scss'; const InProgressAnimation: React.FC = () => { return ( -
- - - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg deleted file mode 100644 index c06565daec2a3..0000000000000 --- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-1.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg deleted file mode 100644 index 7c9140c130256..0000000000000 --- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-2.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg b/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg deleted file mode 100644 index 4ef0ba1021605..0000000000000 --- a/projects/plugins/protect/src/js/components/in-progress-animation/scan-animation-3.svg +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx new file mode 100644 index 0000000000000..a7bcb81161c39 --- /dev/null +++ b/projects/plugins/protect/src/js/components/in-progress-animation/stories/index.stories.tsx @@ -0,0 +1,10 @@ +import InProgressAnimation from '..'; + +export default { + title: 'Plugins/Protect/In Progress Animation', + component: InProgressAnimation, +}; + +const Template = args => ; +export const Default = Template.bind( {} ); +Default.args = {}; diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss index cb3e1fcb77277..bba29ab024eb3 100644 --- a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss +++ b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss @@ -1,44 +1,26 @@ -.scan__animation { +.inProgressAnimation { position: relative; - - @media ( max-width: 1240px ) { - display: none; - } } -.scan__animation_el_1, -.scan__animation_el_2, -.scan__animation_el_3 { +.inProgressAnimation__el { + position: relative; + animation: inprogress 4s ease-in-out 0.8s infinite normal forwards; + transform: translateY( 24px ); opacity: 0; - position: absolute; - z-index: 4; - animation: animation-el-3 4s ease-in-out 0.8s infinite normal forwards; } -.scan__animation_el_1 { - bottom: 24px; - right: 230px; - animation-name: animation_el_1; +.inProgressAnimation__el:nth-of-type(2) { animation-delay: 0.6s; } -.scan__animation_el_2 { - bottom: -19px; - right: 10px; - animation-name: animation_el_2; +.inProgressAnimation__el:nth-of-type(3) { animation-delay: 0.7s; } -.scan__animation_el_3 { - bottom: -164px; - right: -40px; - animation-name: animation_el_3; -} - -@keyframes animation_el_1 { +@keyframes inprogress { 0% { opacity: 0; - transform: translateY( 32px ); + transform: translateY( 24px ); } 20% { opacity: 1; @@ -50,56 +32,16 @@ } 60% { opacity: 0; - transform: translateY( -96px ); + transform: translateY( -48px ); } 100% { opacity: 0; - transform: translateY( -96px ); + transform: translateY( -48px ); } } -@keyframes animation_el_2 { - 0% { - opacity: 0; - transform: translateY( 64px ); - } - 20% { - opacity: 1; - transform: translateY( 0 ); - } - 50% { - opacity: 1; - transform: translateY( 0 ); - } - 60% { - opacity: 0; - transform: translateY( -96px ); - } - 100% { - opacity: 0; - transform: translateY( -96px ); +@media (prefers-reduced-motion: reduce) { + .inProgressAnimation__el { + animation: none; } } - -@keyframes animation_el_3 { - 0% { - opacity: 0; - transform: translateY( 44px ); - } - 20% { - opacity: 1; - transform: translateY( 0 ); - } - 50% { - opacity: 1; - transform: translateY( 0 ); - } - 60% { - opacity: 0; - transform: translateY( -84px ); - } - 100% { - opacity: 0; - transform: translateY( -84px ); - } -} \ No newline at end of file From 193f06f0774f490aab8f0100085a16840339af80 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 18 Oct 2024 14:57:11 -0600 Subject: [PATCH 4/7] Scale in progress image with container --- .../src/js/components/in-progress-animation/styles.module.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss index bba29ab024eb3..41ff83b4b3a34 100644 --- a/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss +++ b/projects/plugins/protect/src/js/components/in-progress-animation/styles.module.scss @@ -1,5 +1,7 @@ .inProgressAnimation { position: relative; + max-width: 100%; + height: auto; } .inProgressAnimation__el { From b60a942111a888db8d5fd494201435cb72c2f5da Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 18 Oct 2024 14:58:18 -0600 Subject: [PATCH 5/7] Update changelog --- .../protect/changelog/add-protect-in-progress-animation | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/plugins/protect/changelog/add-protect-in-progress-animation b/projects/plugins/protect/changelog/add-protect-in-progress-animation index e5f224609a668..d97fc20bcffe3 100644 --- a/projects/plugins/protect/changelog/add-protect-in-progress-animation +++ b/projects/plugins/protect/changelog/add-protect-in-progress-animation @@ -1,4 +1,4 @@ -Significance: minor -Type: added +Significance: patch +Type: changed -Adds an InProgressAnimation component +Animated the "scan in progress" placeholder image From 91f6c6e788ad511575819849c5a931fd7c128930 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 18 Oct 2024 14:59:35 -0600 Subject: [PATCH 6/7] Fix horizontal spacing in the history screen --- projects/plugins/protect/src/js/routes/scan/history/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/protect/src/js/routes/scan/history/index.jsx b/projects/plugins/protect/src/js/routes/scan/history/index.jsx index f65cb0633f251..723f9de9ab230 100644 --- a/projects/plugins/protect/src/js/routes/scan/history/index.jsx +++ b/projects/plugins/protect/src/js/routes/scan/history/index.jsx @@ -243,7 +243,7 @@ const ScanHistoryRoute = () => { { ( ! error || numAllThreats ) && ( - + From 72193775c0e93acc1c055fa564c8c58c86dc9a65 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 25 Oct 2024 18:20:06 -0600 Subject: [PATCH 7/7] Adjust vertical spacing, placeholder image width --- .../protect/src/js/components/admin-section-hero/index.tsx | 4 +++- .../js/components/in-progress-animation/styles.module.scss | 1 + .../src/js/routes/scan/scanning-admin-section-hero.tsx | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx index 1f9f812c83e02..5ed83bebc8638 100644 --- a/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx +++ b/projects/plugins/protect/src/js/components/admin-section-hero/index.tsx @@ -11,6 +11,7 @@ interface AdminSectionHeroProps { main: React.ReactNode; secondary?: React.ReactNode; preserveSecondaryOnMobile?: boolean; + spacing?: number; } interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > { @@ -22,12 +23,13 @@ const AdminSectionHero: AdminSectionHeroComponent = ( { main, secondary, preserveSecondaryOnMobile = true, + spacing = 7, } ) => { return ( { } secondary={ } preserveSecondaryOnMobile={ false } + spacing={ 4 } /> ); };