From b4294ec0a17d0666b1865bddb2f92d60439e54fe Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 1/4] Init project branch From c9df68d98f3ed9719312b0ed8d13c97ab6b9179d Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 2/4] Init project branch From 20a87478c37f356cba14e12dd228de3b6f609463 Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Thu, 14 Nov 2024 10:42:12 -0700 Subject: [PATCH 3/4] Init project branch From 44a95a899dc833a65fe28e0cc13a037a20eb76bc Mon Sep 17 00:00:00 2001 From: Nate Weller Date: Fri, 29 Nov 2024 21:02:25 -0700 Subject: [PATCH 4/4] Protect: remove AlertIcon component Protect: implement variant prop in AdminSectionHero.Heading components Improve ShieldIcon component Minor improvements changelog Move shieldicon to components package, minor improvements changelog Minor adjustments Update story options --- .../components/changelog/add-shield-icon | 4 + .../components/shield-icon/index.tsx | 79 +++++++++ .../shield-icon/stories/index.stories.tsx | 54 ++++++ projects/js-packages/components/index.ts | 1 + .../protect/changelog/refactor-alert-icon | 5 + .../components/admin-section-hero/index.tsx | 20 ++- .../admin-section-hero/styles.module.scss | 4 +- .../src/js/components/alert-icon/index.jsx | 74 -------- .../alert-icon/stories/index.stories.jsx | 18 -- .../components/alert-icon/styles.module.scss | 11 -- .../src/js/components/shield-icon/index.tsx | 165 ------------------ .../shield-icon/stories/index.stories.tsx | 50 ------ .../history/history-admin-section-hero.tsx | 2 +- .../routes/scan/scan-admin-section-hero.tsx | 2 +- 14 files changed, 162 insertions(+), 327 deletions(-) create mode 100644 projects/js-packages/components/changelog/add-shield-icon create mode 100644 projects/js-packages/components/components/shield-icon/index.tsx create mode 100644 projects/js-packages/components/components/shield-icon/stories/index.stories.tsx create mode 100644 projects/plugins/protect/changelog/refactor-alert-icon 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/shield-icon/index.tsx delete mode 100644 projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx diff --git a/projects/js-packages/components/changelog/add-shield-icon b/projects/js-packages/components/changelog/add-shield-icon new file mode 100644 index 0000000000000..5c6cc27eeb809 --- /dev/null +++ b/projects/js-packages/components/changelog/add-shield-icon @@ -0,0 +1,4 @@ +Significance: minor +Type: added + +Add ShieldIcon component diff --git a/projects/js-packages/components/components/shield-icon/index.tsx b/projects/js-packages/components/components/shield-icon/index.tsx new file mode 100644 index 0000000000000..fee9f4d70c463 --- /dev/null +++ b/projects/js-packages/components/components/shield-icon/index.tsx @@ -0,0 +1,79 @@ +import React from 'react'; + +const COLORS = { + error: '#D63638', + warning: '#F0B849', + success: '#069E08', + default: '#1d2327', +}; + +/** + * Protect Shield SVG Icon + * + * @param {object} props - Component props. + * @param {string} props.className - Additional class names. + * @param {string} props.contrast - Icon contrast color. Overrides variant. + * @param {string} props.fill - Icon fill color (default, success, warning, error, or a custom color code string). Overrides variant. + * @param {number} props.height - Icon height (px). Width is calculated based on height. + * @param {string} props.icon - Icon variant (success, error). Overrides variant. + * @param {boolean} props.outline - When enabled, the icon will use an outline style. + * @param {string} props.variant - Icon variant (default, success, error). + * + * @return {React.ReactElement} Protect Shield SVG Icon + */ +export default function ShieldIcon( { + className, + contrast = '#fff', + fill, + height = 32, + icon, + outline = false, + variant = 'default', +}: { + className?: string; + contrast?: string; + fill?: 'default' | 'success' | 'warning' | 'error' | string; + height?: number; + icon?: 'success' | 'error'; + outline?: boolean; + variant: 'default' | 'success' | 'warning' | 'error'; +} ): JSX.Element { + const shieldFill = COLORS[ fill ] || fill || COLORS[ variant ]; + const iconFill = outline ? shieldFill : contrast; + const iconVariant = icon || variant; + + return ( + + + { 'success' === iconVariant && ( + + ) } + { [ 'warning', 'error' ].includes( iconVariant ) && ( + + ) } + + ); +} diff --git a/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx new file mode 100644 index 0000000000000..b5a16d4da4075 --- /dev/null +++ b/projects/js-packages/components/components/shield-icon/stories/index.stories.tsx @@ -0,0 +1,54 @@ +import ShieldIcon from '../index'; + +export default { + title: 'JS Packages/Components/Sheild Icon', + component: ShieldIcon, + parameters: { + layout: 'centered', + }, + argTypes: { + variant: { + control: { + type: 'select', + }, + options: [ 'default', 'success', 'warning', 'error' ], + }, + icon: { + control: { + type: 'select', + }, + options: [ 'success', 'error' ], + }, + fill: { + control: 'color', + }, + outline: { + control: 'boolean', + }, + }, +}; + +export const Default = args => ; +Default.args = { + variant: 'success', + outline: false, +}; + +export const Variants = () => { + return ( +
+
+ + + + +
+
+ + + + +
+
+ ); +}; diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts index eb90df97ad5fe..4b0f3612012e7 100644 --- a/projects/js-packages/components/index.ts +++ b/projects/js-packages/components/index.ts @@ -47,6 +47,7 @@ export { default as ThemeProvider } from './components/theme-provider'; export { default as ThreatFixerButton } from './components/threat-fixer-button'; export { default as ThreatSeverityBadge } from './components/threat-severity-badge'; export { default as ThreatsDataViews } from './components/threats-data-views'; +export { default as ShieldIcon } from './components/shield-icon'; export { default as Text, H2, H3, Title } from './components/text'; export { default as ToggleControl } from './components/toggle-control'; export { default as numberFormat } from './components/number-format'; diff --git a/projects/plugins/protect/changelog/refactor-alert-icon b/projects/plugins/protect/changelog/refactor-alert-icon new file mode 100644 index 0000000000000..46b4c247b1b9f --- /dev/null +++ b/projects/plugins/protect/changelog/refactor-alert-icon @@ -0,0 +1,5 @@ +Significance: patch +Type: changed +Comment: Refactored icon component code. + + 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 758c8c21e0193..5ccf607698084 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,6 +1,9 @@ -import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components'; +import { + AdminSectionHero as JetpackAdminSectionHero, + H3, + ShieldIcon, +} 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'; @@ -12,7 +15,12 @@ interface AdminSectionHeroProps { } interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > { - Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >; + Heading: React.FC< { + children: React.ReactNode; + showIcon?: boolean; + variant?: 'default' | 'success' | 'error'; + outline?: boolean; + } >; Subheading: React.FC< { children: React.ReactNode } >; } @@ -53,8 +61,10 @@ AdminSectionHero.Heading = ( { { children } { showIcon && ( ) } diff --git a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss index 5881bcd910045..a414aa9216f5c 100644 --- a/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss +++ b/projects/plugins/protect/src/js/components/admin-section-hero/styles.module.scss @@ -13,7 +13,7 @@ } .heading-icon { - margin-left: var( --spacing-base ); // 8px + margin-left: calc( var( --spacing-base ) * 1.5 ); // 12px margin-bottom: calc( var( --spacing-base ) / 2 * -1 ); // -4px } @@ -23,4 +23,4 @@ .connection-error-col { margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px -} \ No newline at end of file +} 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/shield-icon/index.tsx b/projects/plugins/protect/src/js/components/shield-icon/index.tsx deleted file mode 100644 index 3bf7f479f0051..0000000000000 --- a/projects/plugins/protect/src/js/components/shield-icon/index.tsx +++ /dev/null @@ -1,165 +0,0 @@ -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 deleted file mode 100644 index d10365f4b0834..0000000000000 --- a/projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -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/history/history-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx index 4aa517f5f120b..141c51cde284a 100644 --- a/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx +++ b/projects/plugins/protect/src/js/routes/scan/history/history-admin-section-hero.tsx @@ -60,7 +60,7 @@ const HistoryAdminSectionHero: React.FC = () => { __( 'Most recent results', 'jetpack-protect' ) ) } - + { numAllThreats > 0 ? sprintf( /* translators: %s: Total number of threats */ 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 1c5cc6cac49b9..9e1b9c102a037 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 @@ -95,7 +95,7 @@ const ScanAdminSectionHero: React.FC = () => { anchor={ dailyScansPopoverAnchor } /> ) } - + 0 ? 'error' : 'success' }> { numThreats > 0 ? sprintf( /* translators: %s: Total number of threats/vulnerabilities */