Upgrade sparkles components to glimmer

.editorconfig

@@ -4,7 +4,6 @@
 
 root = true
 
-
 [*]
 end_of_line = lf
 charset = utf-8

.eslintrc.js

@@ -1,9 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'
@@ -16,6 +21,7 @@ module.exports = {
     browser: true
   },
   rules: {
+    'ember/no-jquery': 'error'
   },
   overrides: [
     // node files
@@ -38,8 +44,7 @@ module.exports = {
         'tests/dummy/app/**'
       ],
       parserOptions: {
-        sourceType: 'script',
-        ecmaVersion: 2015
+        sourceType: 'script'
       },
       env: {
         browser: false,

.npmignore

@@ -12,6 +12,7 @@
 /.env*
 /.eslintignore
 /.eslintrc.js
+/.git/
 /.gitignore
 /.template-lintrc.js
 /.travis.yml

.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended'
+  extends: 'octane'
 };

.travis.yml

@@ -5,7 +5,6 @@ node_js:
   # so that your addon works for all apps
   - "10"
 
-sudo: false
 dist: trusty
 
 addons:
@@ -30,30 +29,37 @@ branches:
     - /^v\d+\.\d+\.\d+/
 
 jobs:
-  fail_fast: true
+  fast_finish: true
   allow_failures:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
   include:
     # runs linting and tests with current locked deps
-
     - stage: "Tests"
       name: "Tests"
       env:
         - PERCY_ENABLE=1
       script:
-        - npm run lint:hbs
-        - npm run lint:js
-        - npm test
+        - npm run lint
+        - npm run test:ember
+
+    - stage: "Additional Tests"
+      name: "Floating Dependencies"
+      install:
+        - npm install --no-package-lock
+      script:
+        - npm run test:ember
 
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-lts-3.4
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.8
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.12
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.16
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary
     - env: EMBER_TRY_SCENARIO=ember-default-with-jquery
+    - env: EMBER_TRY_SCENARIO=ember-classic
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

CONTRIBUTING.md

@@ -23,4 +23,4 @@
 * `ember serve`
 * Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019
+Copyright (c) 2020
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -7,9 +7,9 @@ This addon is intended to provide basic components for easier style coordination
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.4 or above
+* Ember.js v3.8 or above
 * Ember CLI v2.13 or above
-* Node.js v8 or above
+* Node.js v10 or above
 
 
 Installation

addon/components/es-button.js

@@ -1,20 +1,32 @@
-import Component from 'sparkles-component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export default class EsButton extends Component {
+export default class EsButtonComponent extends Component {
+  // default value
+  _onClicked = () => {};
+  _type = "button";
 
-  constructor({ onClicked }) {
+  constructor() {
     super(...arguments);
 
-    if(!onClicked) {
+
+    if(!this.args.onClicked) {
       // eslint-disable-next-line no-console
       console.warn(new Error('Button created with no onClicked'));
-      this.onClicked = function() {};
     } else {
-      this.onClicked = onClicked;
+      this._onClicked = this.args.onClicked;
+    }
+
+    if(!this.args.type) {
+      // eslint-disable-next-line no-console
+      console.warn(new Error('Button created with no @type defined - defaulting to `type="button"`'));
+    } else {
+      this._type = this.args.type;
     }
   }
 
+  @action
   buttonClicked() {
-    this.onClicked();
+    this._onClicked();
   }
 }

addon/components/es-card-content.js

@@ -1,5 +1,4 @@
-import Component from 'sparkles-component';
-
-export default class EsCardContent extends Component {
+import Component from '@glimmer/component';
 
+export default class EsCardContentComponent extends Component {
 }

addon/components/es-card.js

@@ -1,5 +1,4 @@
-import Component from 'sparkles-component';
-
-export default class EsCard extends Component {
+import Component from '@glimmer/component';
 
+export default class EsCardComponent extends Component {
 }

addon/components/es-footer-contributions.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class EsFooterContributionsComponent extends Component {
+}

addon/components/es-footer-info.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class EsFooterInfoComponent extends Component {
+}

addon/components/es-footer-statement.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class EsFooterStatementComponent extends Component {
+  constructor() {
+    super(...arguments)
+
+    this.currentYear = new Date().getUTCFullYear();
+  }
+}

addon/components/es-footer.js

@@ -1,4 +1,4 @@
-import Component from 'sparkles-component';
+import Component from '@glimmer/component';
 
 import {
   socialLinks,
@@ -7,11 +7,30 @@ import {
   tagline
 } from '../constants/es-footer';
 
-export default class EsPageHeader extends Component {
-  socialLinks = socialLinks
+export default class EsFooterComponent extends Component {
+  get socialLinks() {
+    if (this.args.socialLinks) {
+      return this.args.socialLinks;
+    }
+
+    return socialLinks;
+  }
+
+  get contributorLinks() {
+    if (this.args.contributorLinks) {
+      return this.args.contributorLinks;
+    }
 
-  tagline = tagline
-  contributorLinks = contributorLinks
+    return contributorLinks;
+  }
+
+  get tagline() {
+    if (this.args.tagline) {
+      return this.args.tagline;
+    }
+
+    return tagline;
+  }
 
   get currentYear() {
     return new Date().getUTCFullYear()

addon/components/es-header/navbar-link.js → addon/components/es-header-navbar-link.js

@@ -1,9 +1,10 @@
 import Component from '@ember/component';
-import layout from './template';
+import layout from 'ember-styleguide/templates/components/es-header-navbar-link';
 import { computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { schedule, next } from '@ember/runloop';
+import { action } from '@ember/object';
 
 export default Component.extend({
   layout,
@@ -47,26 +48,25 @@ export default Component.extend({
     });
   },
 
-  actions: {
-    toggleDropdown(event) {
-      this.get('navbar').closePopupMenu(this);
-      this.toggleProperty('isDropdownOpen');
+  @action
+  toggleDropdown(event) {
+    this.get('navbar').closePopupMenu(this);
+    this.toggleProperty('isDropdownOpen');
 
-      if (this.isDropdownOpen) {
-        // if it's open, let's make sure it can do some things
-        schedule('afterRender', this, function() {
-          this.setupLinkBlurs();
+    if (this.isDropdownOpen) {
+      // if it's open, let's make sure it can do some things
+      schedule('afterRender', this, function() {
+        this.setupLinkBlurs();
 
-          // move focus to the first item in the dropdown only when opened with keyboard
-          // ref https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-          if (event.detail === 0) {
-            this.processFirstElementFocus();
-          }
+        // move focus to the first item in the dropdown only when opened with keyboard
+        // ref https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+        if (event.detail === 0) {
+          this.processFirstElementFocus();
+        }
 
-          this.processKeyPress();
-        });
-      }
-    },
+        this.processKeyPress();
+      });
+    }
   },
 
   closeDropdown() {

addon/components/es-header.js

@@ -1,9 +1,9 @@
-import Component from 'sparkles-component';
-import { set } from '@ember/object';
+import { set, action } from '@ember/object';
+import Component from '@glimmer/component';
 
 import defaultLinks from '../constants/links';
 
-export default class EsHeader extends Component {
+export default class EsHeaderComponent extends Component {
   expanded = false;
 
   get navHome() {
@@ -22,11 +22,12 @@ export default class EsHeader extends Component {
     return defaultLinks;
   }
 
+  @action
   toggleMenu() {
     set(this, 'expanded', !this.expanded);
   }
 
-  didInsertElement() {
+  trackExpanded() {
     // Ensure menu is marked as expanded if there is enough screen estate
     // TODO: Dynamically calculate necessary horizontal space and collapse based on that
     if (typeof FastBoot === 'undefined') {

addon/components/es-link-card.js

@@ -1,4 +1,4 @@
-import EsCard from './es-card';
+import Component from '@glimmer/component';
 
-export default class EsLinkCard extends EsCard {
+export default class EsLinkCardComponent extends Component {
 }