RC 1.2.0 - Slack improvements (#107)

* RC 1.1.0

* Testing request URL previews for Slack messages

* Corrected function param and tests

* Removed --- from Slack messages

* fix typo explaination

* Moved from newline to quotes

* Made Karma bold

* Feature/slack message previews (#106)

* Testing request URL previews for Slack messages

* Corrected function param and tests

* Removed --- from Slack messages

* Moved from newline to quotes

* Made Karma bold

* Harded coded live preview

Added inline quotes to Slack messages

* Testing what is query

* Stringify express query object

* Stored queryString as variable

* Forgot '/'

* Updated test fixture

* Added newline to preview URL

* Renamed homepage -> home

Added ? before querystring

* Forgot '?' for Slack unit test

* Added RC 1.2.0 notes

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 1.2.0
+ - Added Slack message preview URL.
+ - Spelling tweaks
+
+
 # 1.1.0
  - Implemented asyncronous functionality and Slack integration.
 

README.md

@@ -57,7 +57,8 @@ Wuhuu! thanks for considering contributing! We are always looking to make chamel
 
 ## Release history
 
-- v1.1.0 - Asyncronous functionality
+- v1.2.0 - Slack improvements
+- v1.1.0 - Implemented asyncronous functionality and Slack integration.
 - v1.0.1 - Refactoring code
 - v1.0.0 - 🎉 Initial release
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chameleon",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "Interactive colour template previews for the Design System.",
 	"main": "src/index.js",
 	"scripts": {

src/slack.js

@@ -6,6 +6,7 @@
 // Depedencies
 const { IncomingWebhook } = require( '@slack/client' );
 const ColorString = require( 'color-string' );
+const QueryString = require( 'querystring' );
 
 
 /**
@@ -75,42 +76,47 @@ const GetTemplateFromURL = ( url ) => {
 		return baseUrl;
 	}
 
-	return 'homepage';
+	return 'home';
 };
 
 
 /**
  * GenerateChameleonMessage - Creates a formatted message
  *
- * @param   {string} url   - The url that hit the API
+ * @param   {string} path  - The URL path
  * @param   {object} query - The queries that hit the API
  *
  * @returns {string}       - The formatted message
  */
-const GenerateChameleonMessage = ( url, query ) => {
-	let message = '---\n_Karma-Karma-Karma-Chameleon!_\n\n';
+const GenerateChameleonMessage = ( path, query ) => {
+	let message = '>>> _*Karma-Karma-Karma-Karma-Karma-Chameleon!*_\n\n';
 
-	if( url ) {
-		const template = GetTemplateFromURL( url );
+	const template = GetTemplateFromURL( path );
+	const queryString = QueryString.stringify( query );
+
+	if( path ) {
 		message += `Generating *${ template }* page template\n\n`;
 	}
 
 	if( query !== {}) {
-		message += QueryToHexString( query );
+		message += `${ QueryToHexString( query ) }`;
 	}
 
+	// Append a preview URL to message.
+	message += `\nhttps://designsystem.gov.au/templates/${ template }/customise/?${ queryString }`;
+
 	return message;
 };
 
 
 /**
  * SendChameleonMessage - Send a slack message to #chameleon
  *
- * @param {string} url   - The url that hit the API
+ * @param {string} path   - The URL path
  * @param {object} query - The queries that hit the API
  */
-const SendChameleonMessage = ( url, query ) => {
-	const message = GenerateChameleonMessage( url, query );
+const SendChameleonMessage = ( path, query ) => {
+	const message = GenerateChameleonMessage( path, query );
 	SendSlackMessage( message );
 };
 

templates/content/index.html

@@ -62,7 +62,7 @@
 						<img class="au-header__brand-image" alt="Insert alternate text here" src="/chameleon/assets/img/header-logo-agov.png">
 						<div class="au-header__text">
 						<h2 class="au-header__heading">Name of website</h2>
-						<div class="au-header__subline">Simple explaination of the website</div>
+						<div class="au-header__subline">Simple explanation of the website</div>
 						</div>
 					</a>
 				</div>

templates/form/index.html

@@ -63,7 +63,7 @@
 						<img class="au-header__brand-image" alt="Insert alternate text here" src="/chameleon/assets/img/header-logo-agov.png">
 						<div class="au-header__text">
 						<h2 class="au-header__heading">Name of website</h2>
-						<div class="au-header__subline">Simple explaination of the website</div>
+						<div class="au-header__subline">Simple explanation of the website</div>
 						</div>
 					</a>
 				</div>

templates/index.html

@@ -63,7 +63,7 @@
 						<img class="au-header__brand-image" alt="Insert alternate text here" src="/chameleon/assets/img/header-logo-agov.png">
 						<div class="au-header__text">
 						<h2 class="au-header__heading">Name of website</h2>
-						<div class="au-header__subline">Simple explaination of the website</div>
+						<div class="au-header__subline">Simple explanation of the website</div>
 						</div>
 					</a>
 				</div>

test/unit/slack.spec.js

@@ -30,11 +30,13 @@ Describe( 'GenerateChameleonMessage()', () => {
 			action:     'purple',
 			background: 'red',
 		};
-		const url = '/chameleon/form/';
-		const message = GenerateChameleonMessage( url, query );
 
-		let fixture = '---\n_Karma-Karma-Karma-Chameleon!_\n\nGenerating *form* page template\n\n';
+		const path = '/chameleon/form/';
+		const message = GenerateChameleonMessage( path, query );
+
+		let fixture = '>>> _*Karma-Karma-Karma-Karma-Karma-Chameleon!*_\n\nGenerating *form* page template\n\n';
 		fixture += '`action`: #800080\n`background`: #FF0000\n';
+		fixture += `\nhttps://designsystem.gov.au/templates/form/customise/?action=purple&background=red`;
 
 		Expect( message ).to.equal( fixture );
 	});
@@ -63,12 +65,12 @@ Describe( 'QueryToHexString()', () => {
  * GetTemplateFromURL tests
  */
 Describe( 'GetTemplateFromURL()', () => {
-	It( 'Should return the homepage template when requesting /chameleon', () => {
-		Expect( GetTemplateFromURL( '/chameleon' ) ).to.equal( 'homepage' );
+	It( 'Should return the home template when requesting /chameleon', () => {
+		Expect( GetTemplateFromURL( '/chameleon' ) ).to.equal( 'home' );
 	});
 
-	It( 'Should return the homepage template when requesting /chameleon/', () => {
-		Expect( GetTemplateFromURL( '/chameleon/' ) ).to.equal( 'homepage' );
+	It( 'Should return the home template when requesting /chameleon/', () => {
+		Expect( GetTemplateFromURL( '/chameleon/' ) ).to.equal( 'home' );
 	});
 
 	It( 'Should return the content template when requesting /chameleon/content', () => {