Skip to content

Commit

Permalink
Protect: Add ShieldIcon Component (#40402)
Browse files Browse the repository at this point in the history
  • Loading branch information
nateweller committed Dec 11, 2024
1 parent dd21913 commit 19c083e
Show file tree
Hide file tree
Showing 14 changed files with 162 additions and 326 deletions.
4 changes: 4 additions & 0 deletions projects/js-packages/components/changelog/add-shield-icon
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: added

Add ShieldIcon component
79 changes: 79 additions & 0 deletions projects/js-packages/components/components/shield-icon/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Original file line number Diff line number Diff line change
@@ -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>
);
};
1 change: 1 addition & 0 deletions projects/js-packages/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
5 changes: 5 additions & 0 deletions projects/plugins/protect/changelog/refactor-alert-icon
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Refactored icon component code.


Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 } >;
}

Expand Down Expand Up @@ -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' ] }
/>
) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand All @@ -23,4 +23,4 @@

.connection-error-col {
margin-top: calc( var( --spacing-base ) * 3 + 1px ); // 25px
}
}
74 changes: 0 additions & 74 deletions projects/plugins/protect/src/js/components/alert-icon/index.jsx

This file was deleted.

This file was deleted.

This file was deleted.

Loading

0 comments on commit 19c083e

Please sign in to comment.