New: Added support for new Vanilla button color mixins (fixes #145)

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/issue_template.md

@@ -0,0 +1,23 @@
+---
+name: Issue template
+about: Create an issue to help us improve
+---
+
+### Subject of the issue/enhancement/features
+Describe your issue here.
+
+### Your environment
+* version (AT/Framework)
+* which browser and its version
+* device(s) + operating system(s)
+
+### Steps to reproduce
+Tell us how to reproduce this issue.
+
+### Expected behaviour
+Tell us what should happen
+
+### Actual behaviour
+Tell us what happens instead
+
+### Screenshots (if you can)

README.md

@@ -107,4 +107,4 @@ Hotgrid automatically switches to 2 columns in mobile mode for the best user exp
 **Author / maintainer:** CGKineo<br>
 **Accessibility support:** WAI AA<br> 
 **RTL support:** Yes<br>
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera<br> 
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, Safari for macOS/iOS/iPadOS, Opera<br>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-hotgrid",
-  "version": "4.6.5",
+  "version": "4.7.0",
   "framework": ">=5.33.10",
   "homepage": "https://github.com/cgkineo/adapt-hotgrid",
   "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",

example.json

@@ -7,7 +7,7 @@
     "_layout": "full",
     "title": "Hotgrid",
     "displayTitle": "Hotgrid",
-    "body": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.",
+    "body": "<b>Hotgrid</b> is a presentation component which displays a set of images in a grid layout. When a learner selects an image, a pop-up is displayed that consists of text with an image.",
     "instruction": "Select the images to find out more.",
     "_comment": "setCompletionOn = inview | allItems",
     "_setCompletionOn": "allItems",
@@ -39,7 +39,7 @@
         },
         {
             "title": "Item Title 2",
-            "body": "This is display text 2 with a left aligned image.",
+            "body": "This is display text 2 with a left aligned image. Excepteur ex incididunt occaecat irure elit ex ullamco veniam do amet laboris cupidatat. Dolore eiusmod ut commodo deserunt velit. Cupidatat velit officia amet et et qui fugiat non. Duis nulla voluptate laborum dolore.",
             "_imageAlignment": "left",
             "_classes": "",
             "_graphic": {
@@ -58,7 +58,7 @@
         },
         {
             "title": "Item Title 3",
-            "body": "This is display text 3.",
+            "body": "This is display text 3. Occaecat elit id consequat magna minim proident proident amet adipisicing adipisicing pariatur. Culpa Lorem cupidatat ipsum exercitation do adipisicing exercitation commodo aliquip Lorem mollit. Occaecat nostrud sunt enim eiusmod ut eiusmod aliqua irure id.",
             "_imageAlignment": "right",
             "_classes": "",
             "_graphic": {

less/hotgrid.less

@@ -80,6 +80,11 @@
 // --------------------------------------------------
 // THEME
 // --------------------------------------------------
+// fallback variables if Vanilla button styles aren't supported
+@item-color-style: none;
+@item-ui-color-style: none;
+@item-color-focus: @item-color-hover;
+
 .hotgrid {
   &__item-btn {
     position: relative;
@@ -109,23 +114,98 @@
 
   // Hotgrid item theme
   // --------------------------------------------------
-  &__item-btn &__item-title,
-  &__item-btn &__item-icon {
-    background-color: @item-color;
-    color: @item-color-inverted;
+  // apply legacy styles if Vanilla button styles aren't supported
+  & when (@item-color-style = none) {
+    &__item-btn &__item-title,
+    &__item-btn &__item-icon {
+      background-color: @item-color;
+      color: @item-color-inverted;
+    }
+
+    .no-touch &__item-btn:hover &__item-title,
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      background-color: @item-color-hover;
+      color: @item-color-inverted-hover;
+      .transition(background-color @duration ease-in, color @duration ease-in;);
+    }
+
+    &__item-btn.is-visited &__item-title,
+    &__item-btn.is-visited &__item-icon {
+      background-color: @visited;
+      color: @visited-inverted;
+    }
+  }
+
+  & when (@item-color-style = filled) {
+    &__item-btn &__item-title {
+      .item-color;
+    }
+
+    .no-touch &__item-btn:hover &__item-title {
+      .item-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-title {
+      .item-color-focus;
+    }
+
+    &__item-btn.is-visited &__item-title {
+      .item-color-visited;
+    }
+  }
+
+  & when (@item-ui-color-style = filled) {
+    &__item-btn &__item-icon {
+      .item-ui-color;
+    }
+
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      .item-ui-color-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-icon {
+      .item-ui-color-focus;
+    }
+
+    &__item-btn.is-visited &__item-icon {
+      .item-ui-color-visited;
+    }
   }
 
-  .no-touch &__item-btn:hover &__item-title,
-  .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
-    background-color: @item-color-hover;
-    color: @item-color-inverted-hover;
-    .transition(background-color @duration ease-in, color @duration ease-in;);
+  & when (@item-color-style = outline) {
+    &__item-btn &__item-title {
+      .item-color-outline;
+    }
+
+    .no-touch &__item-btn:hover &__item-title {
+      .item-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-title {
+      .item-color-outline-focus;
+    }
+
+    &__item-btn.is-visited &__item-title {
+      .item-color-outline-visited;
+    }
   }
 
-  &__item-btn.is-visited &__item-title,
-  &__item-btn.is-visited &__item-icon {
-    background-color: @visited;
-    color: @visited-inverted;
+  & when (@item-ui-color-style = outline) {
+    &__item-btn &__item-icon {
+      .item-ui-color-outline;
+    }
+
+    .no-touch &__item-btn:not(.is-disabled):not(.is-locked):hover &__item-icon {
+      .item-ui-color-outline-hover;
+    }
+
+    html:not(.a11y-disable-focusoutline) &__item-btn:focus-visible &__item-icon {
+      .item-ui-color-outline-focus;
+    }
+
+    &__item-btn.is-visited &__item-icon {
+      .item-ui-color-outline-visited;
+    }
   }
 
   // Hotgrid CSS border states
@@ -139,6 +219,10 @@
     .transition(border-color @duration ease-in);
   }
 
+  html:not(.a11y-disable-focusoutline) &__item-btn.has-css-states:focus-visible &__item-image {
+    border-color: @item-color-focus;
+  }
+
   &__item-btn.is-visited.has-css-states &__item-image {
     border-color: @visited;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-hotgrid",
-  "version": "4.6.5",
+  "version": "4.7.0",
   "framework": ">=5.33.10",
   "homepage": "https://github.com/cgkineo/adapt-hotgrid",
   "issues": "https://github.com/cgkineo/adapt-hotgrid/issues/",