Protect: Add ShieldIcon Component (#40402)

Author: nateweller

projects/js-packages/components/changelog/add-shield-icon

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add ShieldIcon component

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 (
+		<svg
+			height={ height }
+			width={ ( height * 76 ) / 93 }
+			viewBox="0 0 76 93"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={ className }
+		>
+			<path
+				d={
+					'M37.5652 0.980293L75.1304 18.0554V43.5097C75.1304 65.2086 61.1942 85.753 41.5427 92.2343C38.9604 93.0862 36.1701 93.0862 33.5878 92.2343C13.9362 85.753 0 65.2086 0 43.5097V18.0554L37.5652 0.980293Z' +
+					( outline
+						? ' M8.34783 23.4307V43.5097C8.34783 61.9471 20.286 79.0573 36.2024 84.3068C37.0866 84.5981 38.0438 84.5981 38.928 84.3068C54.8444 79.0573 66.7826 61.9471 66.7826 43.5097V23.4307L37.5652 10.15L8.34783 23.4307Z'
+						: '' )
+				}
+				fill={ shieldFill }
+			/>
+			{ 'success' === iconVariant && (
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M55.6042 37.0675L34.3578 65.2656L20.898 55.3892L23.878 51.4342L33.33 58.3698L51.5965 34.1267L55.6042 37.0675Z"
+					fill={ iconFill }
+				/>
+			) }
+			{ [ 'warning', 'error' ].includes( iconVariant ) && (
+				<path
+					d="M41.7474 54.1614L43.0546 30H32L33.3071 54.1614H41.7474ZM41.4113 66.7283C42.3076 65.8681 42.7931 64.6713 42.7931 63.1378C42.7931 61.5669 42.345 60.3701 41.4487 59.5098C40.5523 58.6496 39.2452 58.2008 37.4899 58.2008C35.7346 58.2008 34.4275 58.6496 33.4939 59.5098C32.5602 60.3701 32.112 61.5669 32.112 63.1378C32.112 64.6713 32.5975 65.8681 33.5312 66.7283C34.5022 67.5886 35.8093 68 37.4899 68C39.1705 68 40.4776 67.5886 41.4113 66.7283Z"
+					fill={ iconFill }
+				/>
+			) }
+		</svg>
+	);
+}

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 => <ShieldIcon { ...args } />;
+Default.args = {
+	variant: 'success',
+	outline: false,
+};
+
+export const Variants = () => {
+	return (
+		<div style={ { display: 'flex', flexDirection: 'column', gap: '8px' } }>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" />
+				<ShieldIcon variant="success" />
+				<ShieldIcon variant="warning" />
+				<ShieldIcon variant="error" />
+			</div>
+			<div style={ { display: 'flex', gap: '8px' } }>
+				<ShieldIcon variant="default" outline />
+				<ShieldIcon variant="success" outline />
+				<ShieldIcon variant="warning" outline />
+				<ShieldIcon variant="error" outline />
+			</div>
+		</div>
+	);
+};

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';

projects/plugins/protect/changelog/refactor-alert-icon

@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Refactored icon component code.
+
+

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 && (
 				<ShieldIcon
-					variant={ `${ variant }-outline` }
-					fill="#1d2327"
+					height={ 38 }
+					variant={ variant }
+					outline
+					fill="default"
 					className={ styles[ 'heading-icon' ] }
 				/>
 			) }

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
-}
+}