Workflow-Success

components.workflow-success.js

import Ember from 'ember';

const icons = [
  'hand-peace-o',
  'thumbs-o-up',
  'smile-o',
  'trophy',
  'star'
];

const phrases = [
  'Success!',
  'Nice!',
  'Good Work!'
];

const getSuccess = function(array) {
	let max = array.length;
  let random = Math.floor(Math.random() * max);
  return array[random];
};

export default Ember.Component.extend({
  classNames: ['workflow-success'],
  
  successIcon: Ember.computed(function() {
  	return getSuccess(icons);
  }),
  
  successPhrase: Ember.computed(function() {
  	return getSuccess(phrases);
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Workflow Success'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.workflow-success {
	display: flex;
  flex-flow: column nowrap;
}

.workflow-success--icon {
  display: flex;
  color: green;
	margin: 8px auto;
  width: 60px;
  height: 60px;
  position: relative;
}

.workflow-success--icon:after,
.workflow-success--icon:before {
	display: block;
  content: '';
  border-radius: 50%;
  position: absolute;
  animation: successIconSpinFadeIn .5s forwards;
}

.workflow-success--icon:after { 
  border: 3px solid green;
  width: 60px;
  height: 60px;
  top: -3px;
  left: -3px;
}

.workflow-success--icon:before {
  border: 2px dotted green;
  width: 68px;
  height: 68px;
  top: -6px;
  left: -6px;
}

.workflow-success--icon > .fa {
	margin: auto;
  text-align: center;
  font-size: 48px;
  line-height: 48px;
  width: 48px;
  height: 48px;
  overflow: hidden;
  animation: successIconBounceIn .3s forwards;
}

.workflow-success--phrase,
.workflow-success--message {
  margin: 8px auto;
	text-align: center;
}

@keyframes successIconBounceIn {
  0% { font-size: 0px; }
  80% { font-size: 52px; }
  100 { font-size: 48px; }
}

@keyframes successIconSpinFadeIn {
	from {
    opacity: 0;
    transform: rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: rotate(0deg);
  }
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{workflow-success}}
{{#workflow-success}}
You did the thing!
{{/workflow-success}}
<br>
<br>

templates.components.workflow-success.hbs

<div class="workflow-success--icon">
	<span class="fa">{{successIcon}}</span>
  <!--span class="fa">&#9786;</span-->
</div>
<div class="workflow-success--phrase">
	{{successPhrase}}
</div>
<div class="workflow-success--message">
	{{yield}}
</div>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}