Update 2022 Black Friday banner.

.prettierignore

@@ -0,0 +1,5 @@
+*.yml
+*.yaml
+package.json
+dist/
+node_modules/

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+	"printWidth": 100,
+	"tabWidth": 2,
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"endOfLine": "lf"
+}

.storybook/body-class.js

@@ -1,2 +1,2 @@
 var body = document.body;
-body.classList.add( 'sui-2-12-3' );
+body.classList.add( 'sui-2-12-13' );

.storybook/preview.js

@@ -9,7 +9,7 @@ addParameters({
 		sui: {
 			contrast: '#17A8E3',
 			color: '#FFF',
-			title: 'SUI 2.12.3'
+			title: 'SUI 2.12.13'
 		},
 		beta: {
 			contrast: '#FFF',

package.json

@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@octokit/core": "^3.2.5",
-    "@wpmudev/shared-ui": "^2.12.3"
+    "@wpmudev/shared-ui": "^2.12.13"
   },
   "scripts": {
     "build": "npx lerna run build",

packages/shared-compiler/package.json

@@ -41,7 +41,11 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^11.2.0",
     "babel-plugin-styled-components": "^1.13.3",
+    "postcss": "^8.4.19",
     "rollup": "^2.39.0",
     "rollup-plugin-postcss": "^4.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.1"
   }
 }

packages/shared-modules/package.json

@@ -38,7 +38,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@wpmudev/shared-notifications-black-friday": "^1.0.3",
+    "@wpmudev/shared-notifications-black-friday": "^1.1.0",
     "@wpmudev/shared-notifications-discount": "^1.0.2",
     "@wpmudev/shared-presets": "^1.3.2",
     "@wpmudev/shared-tutorials-list": "^1.2.1",

packages/shared-notifications-black-friday/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.1.0 (2022-11-14)
+
+#### Improvements
+* `shared-notifications-black-friday`
+  * [#148](https://github.com/wpmudev/shared-modules/pull/148) 🐛 fix(notice-black): Update banner with 2022 design. ([@iamleigh](https://github.com/iamleigh))
+
 ## 1.0.3 (2021-10-31)
 
 #### Improvements

packages/shared-notifications-black-friday/docs/shared-notifications-black-friday.stories.js

@@ -6,33 +6,86 @@ export default {
 	component: NoticeBlack
 }
 
-export const Untranslated = ( args ) => {
+export const Primary = ({ ...args }) => {
 	return (
-		<NoticeBlack { ...args }>
-			<p><strong>Black Friday Offer!</strong> Get 11 Pro plugins on unlimited sites and much more with 50% OFF WPMU DEV Agency plan FOREVER</p>
-			<p><small>*Only admin users can see this message</small></p>
+		<NoticeBlack data-test="go" { ...args }>
+			<p>From the creators of Smush, WPMU DEV's all-in-one platform gives you all the Pro tools and support you need to run and grow a web development business. Trusted by over 50,000 web developers. Limited deals available.</p>
 		</NoticeBlack>
 	);
 };
-Untranslated.storyName = "Default";
-Untranslated.args = {
-	link: 'https://wpmudev.com/'
+Primary.storyName = "Default";
+Primary.args = {
+	content: {
+		off: 'Off',
+		intro: 'Black Friday offer for WP Businesses and Agencies',
+		title: 'Everything you need to run your WP business for',
+		close: 'Close',
+		finePrint: {
+			label: "Don't want to claim the offer right now?",
+			action: 'Sign up for exclusive VIP access to future sales.',
+		}
+	},
+	price: 3000,
+	discount: 83.5,
+	action: {
+		label: 'Get deal',
+		link: 'https://wpmudev.com/',
+	},
+	formView: {
+		title: 'Get VIP access to our biggest sales',
+		description: 'The best WPMU DEV deals, directly to your inbox, all year round.',
+		hasForm: false,
+		content: '',
+		fields: '',
+		submit: '',
+	},
+	successView: {
+		enabled: false,
+		title: 'Thanks for joining! 🎉',
+		description: "We've sent an email confirming your addition to our VIP list. Just make sure it hasn't landed in spam so you don't miss out on the epic deals!",
+		content: '',
+		close: 'Got it',
+	},
 }
 
-export const Translated = ( args ) => {
+export const Secondary = ( args ) => {
 	return (
 		<NoticeBlack { ...args }>
-			<p><strong>¡Oferta de Viernes Negro!</strong> Obtén 11 plugins Pro para sitios ilimitados y mucho más por el 50% DE DESCUENTO en el plan WPMU DEV Agency DE POR VIDA</p>
-			<p><small>*Solo los administradores pueden ver este mensaje</small></p>
+			<p>De los creadores de Smush, la plataforma todo en uno de WPMU DEV te brinda todas las herramientas y el soporte que necesitas para ejecutar y hacer crecer tu negocio de desarrollo web. Con la confianza de más de 50,000 desarrolladores web. Ofertas limitadas disponibles.</p>
 		</NoticeBlack>
 	);
 }
-Translated.storyName = "Translated";
-Translated.args = {
-	...Untranslated.args,
-	sourceLang: {
-		discount: '50% Dscto',
-		closeLabel: 'Cerrar',
-		linkLabel: 'Ir a la oferta'
-	}
+Secondary.storyName = "Translated";
+Secondary.args = {
+	content: {
+		off: 'Dscto',
+		intro: 'Oferta de Viernes Negro para Empresas y Agencias de WP',
+		title: 'Todo lo que necesitas para dirigir tu negocio de WP por',
+		close: 'Cerrar',
+		finePrint: {
+			label: "¿Quieres reclamar la oferta ahora mismo?",
+			action: 'Regístrese para obtener acceso VIP exclusivo a futuras ventas.',
+		}
+	},
+	price: 3000,
+	discount: 83.5,
+	action: {
+		label: 'Obtener Oferta',
+		link: 'https://wpmudev.com/',
+	},
+	formView: {
+		title: 'Obtenga acceso VIP a nuestras mejores ofertas',
+		description: 'Las mejores ofertas de WPMU DEV, directamente en su bandeja de entrada, durante todo el año.',
+		hasForm: false,
+		content: '',
+		fields: '',
+		submit: '',
+	},
+	successView: {
+		enabled: false,
+		title: '¡Gracias por unirte! 🎉',
+		description: "Hemos enviado un correo electrónico confirmando su incorporación a nuestra lista VIP. ¡Solo asegúrese de que no haya llegado al correo no deseado para no perderse las ofertas épicas!",
+		content: '',
+		close: 'Entendido',
+	},
 }

packages/shared-notifications-black-friday/lib/elements/content.js

@@ -0,0 +1,98 @@
+import React from "react";
+
+// Build "content" component.
+const Content = ({ intro, title, price, discount, action, children }) => {
+	const hasIntro = !isUndefined( intro ) ? true : false;
+	const hasTitle = !isUndefined( title ) ? true : false;
+
+	const cta = Object.assign(
+		{
+			label: 'Get now',
+			link: '',
+		},
+		action
+	);
+
+	return (
+		<div className="suim-black__promo">
+			<div className="suim-black__content">
+				{ hasIntro && (
+					<span className="suim-black__intro">{ intro }</span>
+				)}
+				{ hasTitle && (
+					<h2 className="suim-black__title">
+						{ title }
+						<ShowPrice price={ price } discount={ discount } />
+					</h2>
+				)}
+				{ children }
+			</div>
+
+			{ '' !== cta.link && (
+				<a
+					href={ cta.link }
+					target="_blank"
+					rel="nofollow"
+					className="suim-black__button">
+					{ cta.label }
+				</a>
+			)}
+		</div>
+	);
+}
+
+// Return price.
+const ShowPrice = ({ price, discount }) => {
+	const hasDiscount = !isUndefined( discount, 'number' ) ? true : false;
+	const hasPrice = !isUndefined( price, 'number' ) ? true : false;
+
+	const getDiscount = discount / 100;
+
+	const oldPrice = price;
+	const newPrice = price - (price * getDiscount);
+
+	return (
+		<>
+			{ ( hasPrice && hasDiscount ) && (
+				<> <s>${ oldPrice }</s> <strong>${ newPrice }</strong></>
+			)}
+
+			{ ( hasPrice && !hasDiscount ) && (
+				<> ${ oldPrice }</>
+			)}
+		</>
+	);
+}
+
+// Check if element is undefined.
+const isUndefined = (element, type = null) => {
+	const isValid = 'undefined' !== typeof element;
+	const isNotEmpty = '' !== element;
+	const isNumber = 'number' === type;
+	const isBoolean = 'boolean' === type;
+
+	// Check if element exists.
+	if ( element && isValid && isNotEmpty ) {
+
+		if ( isNumber ) {
+			if ( Number.isNaN( Math.floor( element ) ) ) {
+				return true;
+			} else {
+				return false;
+			}
+		} else if ( isBoolean ) {
+			if ( 'boolean' === typeof element ) {
+				return false;
+			} else {
+				return true;
+			}
+		} else {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+// Publish required component(s).
+export { Content }