From 883500dfe12ada30f946608794a9744120de7c58 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Tue, 26 Nov 2024 16:53:46 -0700 Subject: [PATCH] Add ShieldIcon component --- .../components/admin-section-hero/index.tsx | 19 +- .../stories/index.stories.jsx | 4 +- .../src/js/components/alert-icon/index.jsx | 74 -------- .../alert-icon/stories/index.stories.jsx | 18 -- .../components/alert-icon/styles.module.scss | 11 -- .../components/protect-check-icon/index.tsx | 25 --- .../src/js/components/shield-icon/index.tsx | 165 ++++++++++++++++++ .../shield-icon/stories/index.stories.tsx | 50 ++++++ .../routes/scan/scan-admin-section-hero.tsx | 14 +- 9 files changed, 231 insertions(+), 149 deletions(-) delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/index.jsx delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx delete mode 100644 projects/plugins/protect/src/js/components/alert-icon/styles.module.scss delete mode 100644 projects/plugins/protect/src/js/components/protect-check-icon/index.tsx create mode 100644 projects/plugins/protect/src/js/components/shield-icon/index.tsx create mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx 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 5ed83bebc8638..87ecccaa8c5f2 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 @@ -1,9 +1,6 @@ -import { - AdminSectionHero as JetpackAdminSectionHero, - H3, - getIconBySlug, -} from '@automattic/jetpack-components'; +import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components'; import SeventyFiveLayout from '../seventy-five-layout'; +import ShieldIcon from '../shield-icon'; import AdminSectionHeroNotices from './admin-section-hero-notices'; import styles from './styles.module.scss'; @@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( { AdminSectionHero.Heading = ( { children, + variant = 'default', showIcon = false, }: { children: React.ReactNode; + variant?: 'default' | 'success' | 'error'; showIcon?: boolean; } ) => { - const Icon = getIconBySlug( 'protect' ); - return (

{ children } - { showIcon && } + { showIcon && ( + + ) }

); }; diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx index 7d5b4f8066c93..ca2dfda7fc98e 100644 --- a/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx +++ b/projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx @@ -12,7 +12,9 @@ Default.args = { main: ( <> - { 'No threats found' } + + { 'No threats found' } + { 'Most recent results' } diff --git a/projects/plugins/protect/src/js/components/alert-icon/index.jsx b/projects/plugins/protect/src/js/components/alert-icon/index.jsx deleted file mode 100644 index 8a4d32da59553..0000000000000 --- a/projects/plugins/protect/src/js/components/alert-icon/index.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Path, SVG, Rect, G } from '@wordpress/components'; -import React from 'react'; -import styles from './styles.module.scss'; - -/** - * Alert icon - * - * @param {object} props - Props. - * @param {string} props.className - Optional component class name. - * @param {string} props.color - Optional icon color. Defaults to '#D63638'. - * @return { React.ReactNode } The Alert Icon component. - */ -export default function AlertSVGIcon( { className, color = '#D63638' } ) { - return ( -
- - - - - - - - - - - - - - - - - - - -
- ); -} diff --git a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx b/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx deleted file mode 100644 index 107e513394d42..0000000000000 --- a/projects/plugins/protect/src/js/components/alert-icon/stories/index.stories.jsx +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable react/react-in-jsx-scope */ -import React from 'react'; -import AlertIcon from '../index.jsx'; - -export default { - title: 'Plugins/Protect/Alert Icon', - component: AlertIcon, - argTypes: { - color: { - control: { - type: 'color', - }, - }, - }, -}; - -const FooterTemplate = args => ; -export const Default = FooterTemplate.bind( {} ); diff --git a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss b/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss deleted file mode 100644 index 938a62897f2a8..0000000000000 --- a/projects/plugins/protect/src/js/components/alert-icon/styles.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.container { - width: 48px; - height: 56px; - margin-bottom: calc( var( --spacing-base ) * 8 ); // 64px - - > svg { - position: relative; - top: -36px; - left: -40px; - } -} diff --git a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx b/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx deleted file mode 100644 index d1100d8ce6d5e..0000000000000 --- a/projects/plugins/protect/src/js/components/protect-check-icon/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { type JSX } from 'react'; - -/** - * Protect Shield and Checkmark SVG Icon - * - * @return {JSX.Element} Protect Shield and Checkmark SVG Icon - */ -export default function ProtectCheck(): JSX.Element { - return ( - - - - - ); -} diff --git a/projects/plugins/protect/src/js/components/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx new file mode 100644 index 0000000000000..3bf7f479f0051 --- /dev/null +++ b/projects/plugins/protect/src/js/components/shield-icon/index.tsx @@ -0,0 +1,165 @@ +import { type JSX } from 'react'; + +/** + * Protect Shield and Checkmark SVG Icon + * + * @param {object} props - Component props. + * @param {string} props.variant - Icon variant. + * @param {string} props.fill - Icon fill color. + * @param {string} props.className - Additional class names. + * @param {number} props.height - Icon height. + * @return {JSX.Element} Protect Shield and Checkmark SVG Icon + */ +export default function ShieldIcon( { + variant = 'default', + height = 32, + className, + fill, +}: { + variant: + | 'default' + | 'success' + | 'error' + | 'default-outline' + | 'success-outline' + | 'error-outline'; + className?: string; + height?: number; + fill?: string; +} ): JSX.Element { + if ( 'error-outline' === variant ) { + return ( + + + + + ); + } + + if ( 'error' === variant ) { + return ( + + + + + ); + } + + if ( 'success-outline' === variant ) { + return ( + + + + + ); + } + + if ( 'success' === variant ) { + return ( + + + + + ); + } + + if ( 'default-outline' === variant ) { + return ( + + + + ); + } + + return ( + + + + ); +} diff --git a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx new file mode 100644 index 0000000000000..d10365f4b0834 --- /dev/null +++ b/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import ShieldIcon from '../index'; + +export default { + title: 'Plugins/Protect/Sheild Icon', + component: ShieldIcon, + parameters: { + layout: 'centered', + }, + decorators: [ + Story => ( +
+ +
+ ), + ], + argTypes: { + variant: { + control: { + type: 'select', + }, + options: [ + 'default', + 'success', + 'error', + 'default-outline', + 'success-outline', + 'error-outline', + ], + }, + fill: { + control: 'color', + }, + }, +}; + +export const Default = args => ; +Default.args = { + variant: 'default', +}; + +export const SuccessVariant = args => ; +SuccessVariant.args = { + variant: 'success', +}; + +export const ErrorVariant = args => ; +ErrorVariant.args = { + variant: 'error', +}; diff --git a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx index 010cf07f88cb1..84fcf41a774a4 100644 --- a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx +++ b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx @@ -100,7 +100,7 @@ const ScanAdminSectionHero: React.FC = () => { position={ isSm ? 'bottom' : 'middle right' } anchor={ dailyScansPopoverAnchor } /> - + 0 ? 'error' : 'success' }> { numThreats > 0 ? sprintf( /* translators: %s: Total number of threats/vulnerabilities */ @@ -110,17 +110,7 @@ const ScanAdminSectionHero: React.FC = () => { ? _n( 'threat', 'threats', numThreats, 'jetpack-protect' ) : _n( 'vulnerability', 'vulnerabilities', numThreats, 'jetpack-protect' ) ) - : sprintf( - /* translators: %s: Pluralized type of threat/vulnerability */ - __( 'No active %s', 'jetpack-protect' ), - hasPlan - ? __( 'threats', 'jetpack-protect' ) - : __( - 'vulnerabilities', - 'jetpack-protect', - /* dummy arg to avoid bad minification */ 0 - ) - ) } + : __( "Don't worry about a thing", 'jetpack-protect' ) } <>