From 0d3caf65bcf8e4da1347635f5488343ecf58baab Mon Sep 17 00:00:00 2001
From: Chuck Lorenz <chucklorenz1038@gmail.com>
Date: Mon, 30 Dec 2019 10:46:56 -0500
Subject: [PATCH] initial commit of v5

---
 README.md               |  4 +--
 bower.json              |  4 +--
 js/adapt-stacklist.js   | 24 ++++++-------
 less/stacklist.less     | 74 ++++++++++++++++++++++-------------------
 templates/stacklist.hbs | 14 ++++----
 5 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/README.md b/README.md
index 5ef3f0a..843acf1 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,6 @@ For core model attributes see [**core model attributes**](https://github.com/ada
 No known limitations
 
 ----------------------------
-**Version number:**  4.0.0
-**Framework versions:**  >=4
+**Version number:**  5.0.0
+**Framework versions:**  >=5
 **Author / maintainer:** Dan Storey
diff --git a/bower.json b/bower.json
index 0469a45..d1428d6 100644
--- a/bower.json
+++ b/bower.json
@@ -1,8 +1,8 @@
 {
   "name": "adapt-stacklist",
   "description": "Items fly in one at a time, alternating from left to right, when the learner clicks a button. Demo available.",
-  "version": "4.0.0",
-  "framework": ">=4",
+  "version": "5.0.1",
+  "framework": ">=5",
   "displayName": "Stack List",
   "component": "stacklist",
   "main": "/js/adapt-stacklist.js",
diff --git a/js/adapt-stacklist.js b/js/adapt-stacklist.js
index 7f67faf..a52864e 100644
--- a/js/adapt-stacklist.js
+++ b/js/adapt-stacklist.js
@@ -1,14 +1,14 @@
-define(function(require) {
-
-    var ComponentView = require('coreViews/componentView');
-    var Adapt = require('coreJS/adapt');
+define([
+    'core/js/adapt',
+    'coreViews/componentView'
+], function(Adapt, ComponentView) {
 
     var StackList = ComponentView.extend({
 
         TRANSITION_TIME: 250,
 
         events: {
-            "click .stacklist-next": "nextItem"
+            "click .stacklist__next": "nextItem"
         },
 
         preRender: function() {
@@ -18,8 +18,8 @@ define(function(require) {
         },
 
         postRender: function() {
-            this.$items = this.$(".stacklist-item");
-            this.$button = this.$('.stacklist-button');
+            this.$items = this.$(".stacklist__item");
+            this.$button = this.$('.stacklist__button');
 
             if (!this.model.get("_isComplete") || this.model.get("_isResetOnRevisit")) {
                 this.setupListItems();
@@ -85,7 +85,7 @@ define(function(require) {
 
             var items = this.model.get("_items");
             var isComplete = this.model.get("_items").length - 1 === stage;
-            var $item = this.$(".stacklist-item").eq(stage);
+            var $item = this.$(".stacklist__item").eq(stage);
 
             $item.removeClass("visibility-hidden");
 
@@ -112,13 +112,13 @@ define(function(require) {
         },
 
         updateButton: function(text, offset, ariaLabel) {
-            this.$(".stacklist-button").css({ top: "+=" + offset });
+            this.$(".stacklist__button").css({ top: "+=" + offset });
 
             if (text === '') { // On last item we do not want to update text (it's most important when stack-list has only one item)
                 return;
             }
 
-            var $button = this.$(".stacklist-next");
+            var $button = this.$(".stacklist__next");
             $button.blur();
             setTimeout(function() {
                 $button.html(text);
@@ -127,8 +127,8 @@ define(function(require) {
         },
 
         onComplete: function() {
-            var $buttonDiv = this.$(".stacklist-button");
-            var $button = this.$(".stacklist-next");
+            var $buttonDiv = this.$(".stacklist__button");
+            var $button = this.$(".stacklist__next");
             $buttonDiv.css({ opacity: 0 });
 
             setTimeout(function() {
diff --git a/less/stacklist.less b/less/stacklist.less
index 98e4bf8..3bfdf30 100644
--- a/less/stacklist.less
+++ b/less/stacklist.less
@@ -1,34 +1,40 @@
-.stacklist-items {
-	position: relative;
-	margin-bottom: -@item-margin;
-}
-
-.stacklist-item {
-	position: relative;
-	padding: 20px;
-	margin-bottom: @item-margin;
-	background-color: @primary-color;
-	color: @primary-color-inverted;
-
-    &.show {
-        position: static !important;
-    }
-}
-
-.stacklist-button {
-	display: none;
-	position: absolute;
-	top: 0;
-	height: 53px;
-	width: 100%;
-	text-align: center;
-	-webkit-transition: 0.25s;
-	-moz-transition: 0.25s;
-	-ms-transition: 0.25s;
-	-o-transition: 0.25s;
-	transition: 0.25s;
-
-	button {
-		min-width: 200px;
-	}
-}
+.stacklist {
+
+  &__items {
+    position: relative;
+    margin-bottom: -@item-margin;
+  }
+
+  &__item {
+    position: relative;
+    padding: @item-padding;
+    margin-bottom: @item-margin / 2;
+    background-color: @item-color;
+    color: @font-color-inverted;
+
+    &.show {
+      position: static !important;
+    }
+  }
+
+  &__button {
+    display: none;
+    position: absolute;
+    top: 0;
+    height: 53px;
+    //width: 100%;
+    text-align: center;
+    -webkit-transition: 0.25s;
+    -moz-transition: 0.25s;
+    -ms-transition: 0.25s;
+    -o-transition: 0.25s;
+    transition: 0.25s;
+
+    button {
+      //min-width: 200px;
+      line-height: unset;
+      background-color: @item-color;
+      color: @font-color-inverted;
+    }
+  }
+}
diff --git a/templates/stacklist.hbs b/templates/stacklist.hbs
index 83b8646..1a82439 100644
--- a/templates/stacklist.hbs
+++ b/templates/stacklist.hbs
@@ -1,11 +1,11 @@
-<div class="stacklist-inner component-inner">
+<div class="stacklist__inner component__inner">
     {{> component this}}
 
-    <div class="stacklist-widget component-widget">
-        <div class="stacklist-items">
-            <div class="stacklist-items-inner">
+    <div class="stacklist__widget component__widget">
+        <div class="stacklist__items">
+            <div class="stacklist__items-inner">
                 {{#each _items}}
-                    <div class="stacklist-item">
+                    <div class="stacklist__item">
                         {{#if this.length}}
                             {{{a11y_text this}}}
                         {{else}}
@@ -13,8 +13,8 @@
                         {{/if}}
                     </div>
                 {{/each}}
-                <div class="stacklist-button">
-                    <button class="stacklist-next" aria-label="{{{_button.startText}}}, {{{_button.ariaLabel}}}">{{{_button.startText}}}</button>
+                <div class="stacklist__button">
+                    <button class="stacklist__next" aria-label="{{{_button.startText}}}, {{{_button.ariaLabel}}}">{{{_button.startText}}}</button>
                 </div>
             </div>
         </div>