Skip to content

Commit 293564e

Browse files
natewellernateweller
committed
Protect: add ShieldIcon component
1 parent 85891ed commit 293564e

File tree

4 files changed

+230
-10
lines changed

4 files changed

+230
-10
lines changed

‎projects/plugins/protect/src/js/components/admin-section-hero/index.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import {
2-
AdminSectionHero as JetpackAdminSectionHero,
3-
H3,
4-
getIconBySlug,
5-
} from '@automattic/jetpack-components';
1+
import { AdminSectionHero as JetpackAdminSectionHero, H3 } from '@automattic/jetpack-components';
62
import SeventyFiveLayout from '../seventy-five-layout';
3+
import ShieldIcon from '../shield-icon';
74
import AdminSectionHeroNotices from './admin-section-hero-notices';
85
import styles from './styles.module.scss';
96

@@ -15,7 +12,7 @@ interface AdminSectionHeroProps {
1512
}
1613

1714
interface AdminSectionHeroComponent extends React.FC< AdminSectionHeroProps > {
18-
Heading: React.FC< { children: React.ReactNode; showIcon?: boolean } >;
15+
Heading: React.FC< { children: React.ReactNode; showIcon?: boolean; variant?: string } >;
1916
Subheading: React.FC< { children: React.ReactNode } >;
2017
}
2118

@@ -44,17 +41,23 @@ const AdminSectionHero: AdminSectionHeroComponent = ( {
4441

4542
AdminSectionHero.Heading = ( {
4643
children,
44+
variant = 'default',
4745
showIcon = false,
4846
}: {
4947
children: React.ReactNode;
48+
variant?: 'default' | 'success' | 'error';
5049
showIcon?: boolean;
5150
} ) => {
52-
const Icon = getIconBySlug( 'protect' );
53-
5451
return (
5552
<H3 className={ styles.heading } mt={ 2 } mb={ 2 }>
5653
{ children }
57-
{ showIcon && <Icon className={ styles[ 'heading-icon' ] } size={ 32 } /> }
54+
{ showIcon && (
55+
<ShieldIcon
56+
variant={ `${ variant }-outline` }
57+
fill="#1d2327"
58+
className={ styles[ 'heading-icon' ] }
59+
/>
60+
) }
5861
</H3>
5962
);
6063
};

‎projects/plugins/protect/src/js/components/admin-section-hero/stories/index.stories.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ Default.args = {
1212
main: (
1313
<>
1414
<Status status={ 'active' } label={ 'Active' } />
15-
<AdminSectionHero.Heading showIcon>{ 'No threats found' }</AdminSectionHero.Heading>
15+
<AdminSectionHero.Heading showIcon variant="success">
16+
{ 'No threats found' }
17+
</AdminSectionHero.Heading>
1618
<AdminSectionHero.Subheading>
1719
<Text>{ 'Most recent results' }</Text>
1820
</AdminSectionHero.Subheading>

‎projects/plugins/protect/src/js/components/shield-icon/index.tsx

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import { type JSX } from 'react';
2+
3+
/**
4+
* Protect Shield and Checkmark SVG Icon
5+
*
6+
* @param {object} props - Component props.
7+
* @param {string} props.variant - Icon variant.
8+
* @param {string} props.fill - Icon fill color.
9+
* @param {string} props.className - Additional class names.
10+
* @param {number} props.height - Icon height.
11+
* @return {JSX.Element} Protect Shield and Checkmark SVG Icon
12+
*/
13+
export default function ShieldIcon( {
14+
variant = 'default',
15+
height = 32,
16+
className,
17+
fill,
18+
}: {
19+
variant:
20+
| 'default'
21+
| 'success'
22+
| 'error'
23+
| 'default-outline'
24+
| 'success-outline'
25+
| 'error-outline';
26+
className?: string;
27+
height?: number;
28+
fill?: string;
29+
} ): JSX.Element {
30+
if ( 'error-outline' === variant ) {
31+
return (
32+
<svg
33+
height={ height }
34+
width={ ( height * 18 ) / 23 }
35+
viewBox="0 0 18 23"
36+
fill="none"
37+
xmlns="http://www.w3.org/2000/svg"
38+
className={ className }
39+
>
40+
<path
41+
fillRule="evenodd"
42+
clipRule="evenodd"
43+
d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
44+
fill={ fill || '#D63638' }
45+
/>
46+
<path
47+
d="M8.22887 12.9258H9.78763L9.93608 7H8.08041L8.22887 12.9258ZM9.00825 16C9.57113 16 10.0165 15.5732 10.0165 15.0289C10.0165 14.4845 9.57113 14.0577 9.00825 14.0577C8.44536 14.0577 8 14.4845 8 15.0289C8 15.5732 8.44536 16 9.00825 16Z"
48+
fill={ fill || '#D63638' }
49+
/>
50+
</svg>
51+
);
52+
}
53+
54+
if ( 'error' === variant ) {
55+
return (
56+
<svg
57+
height={ height }
58+
width={ ( height * 123 ) / 150 }
59+
viewBox="0 0 123 150"
60+
fill="none"
61+
xmlns="http://www.w3.org/2000/svg"
62+
className={ className }
63+
>
64+
<path
65+
d="M61.364 0L0 27.273v40.909C0 106.023 26.182 141.409 61.364 150c35.182-8.591 61.363-43.977 61.363-81.818v-40.91L61.364 0z"
66+
fill={ fill || '#D63638' }
67+
/>
68+
<path
69+
d="M54.486 40.97h13.755v40.826H54.485V40.97zM54.486 95.55h13.755v13.48H54.485V95.55z"
70+
fill={ `#fff` }
71+
/>
72+
</svg>
73+
);
74+
}
75+
76+
if ( 'success-outline' === variant ) {
77+
return (
78+
<svg
79+
height={ height }
80+
width={ ( height * 14 ) / 17 }
81+
viewBox="0 0 14 17"
82+
fill="none"
83+
xmlns="http://www.w3.org/2000/svg"
84+
className={ className }
85+
>
86+
<path
87+
fillRule="evenodd"
88+
clipRule="evenodd"
89+
d="M7 0.17627L13.75 3.24445V7.8183C13.75 11.7173 11.2458 15.4089 7.7147 16.5735C7.2507 16.7265 6.7493 16.7265 6.2853 16.5735C2.75416 15.4089 0.25 11.7173 0.25 7.8183V3.24445L7 0.17627ZM1.75 4.21032V7.8183C1.75 11.1312 3.89514 14.2057 6.7551 15.149C6.914 15.2014 7.086 15.2014 7.2449 15.149C10.1049 14.2057 12.25 11.1312 12.25 7.8183V4.21032L7 1.82396L1.75 4.21032Z"
90+
fill={ fill || '#069E08' }
91+
/>
92+
<path
93+
fillRule="evenodd"
94+
clipRule="evenodd"
95+
d="M10.5291 7.0315L6.1818 11.358L3.47095 8.66L4.52907 7.5968L6.1818 9.2417L9.4709 5.96826L10.5291 7.0315Z"
96+
fill={ fill || '#069E08' }
97+
/>
98+
</svg>
99+
);
100+
}
101+
102+
if ( 'success' === variant ) {
103+
return (
104+
<svg
105+
height={ height }
106+
width={ ( height * 80 ) / 96 }
107+
viewBox="0 0 80 96"
108+
fill="none"
109+
xmlns="http://www.w3.org/2000/svg"
110+
className={ className }
111+
>
112+
<path
113+
fillRule="evenodd"
114+
clipRule="evenodd"
115+
d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
116+
fill={ fill || '#069E08' }
117+
/>
118+
<path
119+
fillRule="evenodd"
120+
clipRule="evenodd"
121+
d="M60.9 33.6909L35.375 67.9124L19.2047 55.9263L22.7848 51.1264L34.1403 59.5436L56.0851 30.122L60.9 33.6909Z"
122+
fill="white"
123+
/>
124+
</svg>
125+
);
126+
}
127+
128+
if ( 'default-outline' === variant ) {
129+
return (
130+
<svg
131+
height={ height }
132+
width={ ( height * 18 ) / 23 }
133+
viewBox="0 0 18 23"
134+
fill="none"
135+
xmlns="http://www.w3.org/2000/svg"
136+
className={ className }
137+
>
138+
<path
139+
fillRule="evenodd"
140+
clipRule="evenodd"
141+
d="M9 0.234863L18 4.32577V10.4242C18 15.6229 14.6611 20.545 9.95293 22.0978C9.33425 22.3019 8.66575 22.3019 8.04707 22.0978C3.33888 20.545 0 15.6229 0 10.4242V4.32577L9 0.234863ZM2 5.6136V10.4242C2 14.8415 4.86018 18.9408 8.67349 20.1985C8.88533 20.2683 9.11467 20.2683 9.32651 20.1985C13.1398 18.9408 16 14.8415 16 10.4242V5.6136L9 2.43178L2 5.6136Z"
142+
fill={ fill || 'black' }
143+
/>
144+
</svg>
145+
);
146+
}
147+
148+
return (
149+
<svg
150+
height={ height }
151+
width={ ( height * 80 ) / 96 }
152+
viewBox="0 0 80 96"
153+
fill="none"
154+
xmlns="http://www.w3.org/2000/svg"
155+
className={ className }
156+
>
157+
<path
158+
fillRule="evenodd"
159+
clipRule="evenodd"
160+
d="M40 0.00634766L80 17.7891V44.2985C80 66.8965 65.1605 88.2927 44.2352 95.0425C41.4856 95.9295 38.5144 95.9295 35.7648 95.0425C14.8395 88.2927 0 66.8965 0 44.2985V17.7891L40 0.00634766Z"
161+
fill={ fill || 'black' }
162+
/>
163+
</svg>
164+
);
165+
}

‎projects/plugins/protect/src/js/components/shield-icon/stories/index.stories.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import ShieldIcon from '../index';
3+
4+
export default {
5+
title: 'Plugins/Protect/Sheild Icon',
6+
component: ShieldIcon,
7+
parameters: {
8+
layout: 'centered',
9+
},
10+
decorators: [
11+
Story => (
12+
<div style={ { height: '72px', width: '72px' } }>
13+
<Story />
14+
</div>
15+
),
16+
],
17+
argTypes: {
18+
variant: {
19+
control: {
20+
type: 'select',
21+
},
22+
options: [
23+
'default',
24+
'success',
25+
'error',
26+
'default-outline',
27+
'success-outline',
28+
'error-outline',
29+
],
30+
},
31+
fill: {
32+
control: 'color',
33+
},
34+
},
35+
};
36+
37+
export const Default = args => <ShieldIcon { ...args } />;
38+
Default.args = {
39+
variant: 'default',
40+
};
41+
42+
export const SuccessVariant = args => <ShieldIcon { ...args } />;
43+
SuccessVariant.args = {
44+
variant: 'success',
45+
};
46+
47+
export const ErrorVariant = args => <ShieldIcon { ...args } />;
48+
ErrorVariant.args = {
49+
variant: 'error',
50+
};

0 commit comments

Comments
 (0)