Add basic StoreAlert component

plugins/woocommerce-admin/client/layout/index.js

@@ -22,6 +22,7 @@ import Header from 'header';
 import Notices from './notices';
 import { recordPageView } from 'lib/tracks';
 import TransientNotices from './transient-notices';
+import StoreAlerts from './store-alerts';
 
 class Layout extends Component {
 	componentDidMount() {
@@ -66,6 +67,8 @@ class Layout extends Component {
 				<TransientNotices />
 
 				<div className="woocommerce-layout__primary" id="woocommerce-layout__primary">
+					<StoreAlerts />
+
 					<Notices />
 					{ ! isEmbeded && (
 						<div className="woocommerce-layout__main">

plugins/woocommerce-admin/client/layout/store-alerts/index.js

@@ -0,0 +1,153 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component, Fragment } from '@wordpress/element';
+import { IconButton, Button, Dashicon } from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * WooCommerce dependencies
+ */
+import { Card } from '@woocommerce/components';
+
+import './style.scss';
+
+const dummy = [
+	{
+		title: 'Lorem ipsum dolor sit amet',
+		type: 'alert',
+		message:
+			'Pellentesque accumsan ligula in aliquam tristique. Donec elementum magna ut sapien tincidunt aliquam.',
+		action: {
+			label: 'Button',
+			url: '#',
+		},
+	},
+	{
+		title: 'Sed bibendum non augue tincidunt mollis',
+		type: 'critical',
+		message: 'Quisque in efficitur nisi. In hac habitasse platea dictumst. Vivamus ut congue diam.',
+		action: {
+			label: 'Button',
+			url: '#',
+		},
+	},
+	{
+		title: 'Duis dictum condimentum sem eu blandit',
+		type: 'emergency',
+		message: 'Fusce fermentum magna dolor, vitae faucibus justo ullamcorper eu.',
+		action: {
+			label: 'Button',
+			url: '#',
+		},
+	},
+];
+
+const alertTypes = {
+	emergency: {
+		label: __( 'Emergency', 'wc-admin' ),
+		icon: 'warning',
+	},
+	alert: {
+		label: __( 'Alert', 'wc-admin' ),
+		icon: 'flag',
+	},
+	critical: {
+		label: __( 'Critical', 'wc-admin' ),
+		icon: 'info',
+	},
+};
+
+class StoreAlerts extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			currentAlert: 0,
+		};
+
+		this.previousAlert = this.previousAlert.bind( this );
+		this.nextAlert = this.nextAlert.bind( this );
+		this.totalAlerts = this.totalAlerts.bind( this );
+	}
+
+	totalAlerts() {
+		return dummy.length;
+	}
+
+	previousAlert( event ) {
+		event.stopPropagation();
+		const { currentAlert } = this.state;
+
+		if ( currentAlert > 0 ) {
+			this.setState( {
+				currentAlert: currentAlert - 1,
+			} );
+		}
+	}
+
+	nextAlert( event ) {
+		event.stopPropagation();
+		const { currentAlert } = this.state;
+
+		if ( currentAlert < this.totalAlerts() - 1 ) {
+			this.setState( {
+				currentAlert: currentAlert + 1,
+			} );
+		}
+	}
+
+	render() {
+		const { currentAlert } = this.state;
+		const alert = dummy[ currentAlert ] ? dummy[ currentAlert ] : null;
+		const type = alertTypes[ alert.type ] ? alertTypes[ alert.type ] : null;
+		const className = classnames( 'woocommerce-store-alerts', {
+			'is-alert-emergency': type && 'emergency' === alert.type,
+			'is-alert-alert': type && 'alert' === alert.type,
+			'is-alert-critical': type && 'critical' === alert.type,
+		} );
+
+		return (
+			<Card
+				title={ [
+					type && <Dashicon key="icon" icon={ type.icon } />,
+					<Fragment key="title">{ alert.title }</Fragment>,
+				] }
+				className={ className }
+				action={
+					this.totalAlerts() > 1 && (
+						<div className="woocommerce-store-alerts__pagination">
+							<IconButton
+								icon="arrow-left-alt2"
+								onClick={ this.previousAlert }
+								disabled={ 0 === currentAlert }
+								label={ __( 'Previous Alert', 'wc-admin' ) }
+							/>
+							<span
+								className="woocommerce-store-alerts__pagination-label"
+								role="status"
+								aria-live="polite"
+							>
+								{ currentAlert + 1 } { __( 'of', 'wc-admin' ) } { this.totalAlerts() }
+							</span>
+							<IconButton
+								icon="arrow-right-alt2"
+								onClick={ this.nextAlert }
+								disabled={ this.totalAlerts() - 1 === currentAlert }
+								label={ __( 'Next Alert', 'wc-admin' ) }
+							/>
+						</div>
+					)
+				}
+			>
+				<div className="woocommerce-store-alerts__message">{ alert.message }</div>
+				<Button isPrimary className="woocommerce-store-alerts__button" href={ alert.action.url }>
+					{ alert.action.label }
+				</Button>
+			</Card>
+		);
+	}
+}
+
+export default StoreAlerts;

plugins/woocommerce-admin/client/layout/store-alerts/style.scss

@@ -0,0 +1,80 @@
+/** @format */
+
+.woocommerce-store-alerts {
+	margin-right: 40px;
+	margin-right: var(--large-gap);
+	padding: 20px 20px 20px 24px;
+	border: 0;
+
+	.woocommerce-card__header {
+		padding: 0;
+		border: 0;
+		margin-bottom: 12px;
+	}
+
+	.woocommerce-card__title {
+		display: inline-flex;
+
+		svg {
+			margin-right: 6px;
+		}
+	}
+
+	.woocommerce-card__body {
+		padding: 0;
+	}
+}
+
+.is-alert-emergency {
+	box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.3), inset 4px 0px 0px 0px #dc3232;
+
+	.woocommerce-card__title {
+		svg {
+			color: #dc3232;
+		}
+	}
+}
+
+.is-alert-alert {
+	box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.3), inset 4px 0px 0px 0px #11a0d2;
+
+	.woocommerce-card__title {
+		svg {
+			color: #11a0d2;
+		}
+	}
+}
+
+.is-alert-critical {
+	box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.3), inset 4px 0px 0px 0px #ffb900;
+
+	.woocommerce-card__title {
+		svg {
+			color: #ffb900;
+		}
+	}
+}
+
+.woocommerce-store-alerts__message {
+	margin-bottom: 14px;
+}
+
+.woocommerce-store-alerts__pagination {
+	display: inline-flex;
+	align-items: center;
+	border: 1px solid $button-border;
+	border-bottom: 2px solid $button-border;
+	border-radius: 4px;
+	background: $button;
+
+	.components-button {
+		padding: 4px;
+	}
+
+	.woocommerce-store-alerts__pagination-label {
+		padding: 5px 12px;
+		border-width: 0 1px;
+		border-color: $button-border;
+		border-style: solid;
+	}
+}