Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add close button to introduction banner card.

This commit is contained in:
Gan Eng Chin 2022-12-27 20:47:14 +08:00
parent b6eec1e1bf
commit 82db71c94f
No known key found for this signature in database
GPG Key ID: 94D5D972860ADB01
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.scss
View File

@ -34,6 +34,13 @@
rgba( 196, 152, 217, 0.12 ) 77.75%
);
.woocommerce-marketing-introduction-banner-close-button {
position: absolute;
top: $gap-smaller;
right: $gap;
padding: 0;
}
img {
display: block;
width: 100%;

19
plugins/woocommerce-admin/client/marketing/overview-multichannel/IntroductionBanner/IntroductionBanner.tsx
View File

@ -2,8 +2,14 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Card, Flex, FlexItem, FlexBlock } from '@wordpress/components';
import { Icon, trendingUp, megaphone } from '@wordpress/icons';
import { Card, Flex, FlexItem, FlexBlock, Button } from '@wordpress/components';
import {
Icon,
trendingUp,
megaphone,
closeSmall,
close,
} from '@wordpress/icons';
/**
* Internal dependencies
@ -73,6 +79,15 @@ export const IntroductionBanner = () => {
</Flex>
</div>
<div className="woocommerce-marketing-introduction-banner-illustration">
<Button
isSmall
className="woocommerce-marketing-introduction-banner-close-button"
onClick={ () => {
// TODO: dismiss this banner and save it into wp_options.
} }
>
<Icon icon={ closeSmall } />
</Button>
<img
src={ illustrationUrl }
alt={ __(