porting old components from ember-styleguide

Author: mansona

.editorconfig

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

.ember-cli

@@ -5,5 +5,5 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": true
 }

.eslintrc.js

@@ -1,14 +1,8 @@
-'use strict';
-
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true
-    }
+    ecmaVersion: 2017,
+    sourceType: 'module'
   },
   plugins: [
     'ember'
@@ -21,13 +15,14 @@ module.exports = {
     browser: true
   },
   rules: {
-    'ember/no-jquery': 'error'
+    'no-useless-escape': 'off'
   },
   overrides: [
     // node files
     {
       files: [
         '.eslintrc.js',
+        '.stylelintrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
         'index.js',
@@ -43,7 +38,8 @@ module.exports = {
         'tests/dummy/app/**'
       ],
       parserOptions: {
-        sourceType: 'script'
+        sourceType: 'script',
+        ecmaVersion: 2015
       },
       env: {
         browser: false,

.gitignore

@@ -9,8 +9,6 @@
 /node_modules/
 
 # misc
-/.env*
-/.pnp*
 /.sass-cache
 /connect.lock
 /coverage/
@@ -23,3 +21,5 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+.vscode

.netlifyredirects

@@ -0,0 +1 @@
+/*    /index.html   200

.stylelintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  plugins: [
+    'stylelint-declaration-strict-value',
+    'stylelint-order',
+    'stylelint-scss'
+  ],
+  rules: {
+    // Disables this rule to allow case agnostic color hex values
+    'color-hex-case': null,
+    // Require the long version of hex colors
+    'color-hex-length': 'long',
+    // Disallow ids
+    'selector-max-id': 0,
+    // Enforce alphabetical ordering of properties
+    'order/properties-alphabetical-order': true,
+    // Require that color, background-color, etc use variables for colors, instead of direct values
+    'scale-unlimited/declaration-strict-value': [
+      ['/color/'] // We can enforce variables for font-size, margin, etc as well by adding here
+    ],
+    // Enforce that variables are all lowercase and dasherized
+    'scss/dollar-variable-pattern': '^[a-z][a-z-]+$'
+  }
+};

.template-lintrc.js

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

.travis.yml

@@ -3,57 +3,49 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "10"
+  - "8"
 
+sudo: false
 dist: trusty
 
 addons:
   chrome: stable
 
 cache:
-  directories:
-    - $HOME/.npm
+  yarn: true
 
 env:
   global:
     # See https://git.io/vdao3 for details.
     - JOBS=1
 
-branches:
-  only:
-    - master
-    # npm version tags
-    - /^v\d+\.\d+\.\d+/
-
 jobs:
-  fast_finish: true
+  fail_fast: true
   allow_failures:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
   include:
     # runs linting and tests with current locked deps
+
     - stage: "Tests"
       name: "Tests"
       script:
-        - npm run lint
-        - npm run test:ember
-
-    - stage: "Additional Tests"
-      name: "Floating Dependencies"
-      install:
-        - npm install --no-package-lock
-      script:
-        - npm run test:ember
+        - yarn lint:hbs
+        - yarn lint:js
+        - yarn test
 
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - env: EMBER_TRY_SCENARIO=ember-lts-3.12
-    - env: EMBER_TRY_SCENARIO=ember-lts-3.16
+    - stage: "Additional Tests"
+      env: EMBER_TRY_SCENARIO=ember-lts-2.18
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.4
     - 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
+
+before_install:
+  - npm config set spin false
 
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

CODE_OF_CONDUCT.md

@@ -0,0 +1,9 @@
+The Ember team and community are committed to everyone having a safe and inclusive experience.
+
+Our Community Guidelines / Code of Conduct can be found here:
+
+https://emberjs.com/guidelines/
+
+For a history of updates, see the page history here:
+
+https://github.com/emberjs/website/commits/master/source/guidelines.html.erb

addon/components/es-accordion.js

@@ -0,0 +1,132 @@
+import Component from '@ember/component';
+import layout from '../templates/components/es-accordion';
+import {
+  get,
+  getProperties,
+  set,
+} from '@ember/object';
+import {
+  isPresent,
+} from '@ember/utils';
+import { computed } from '@ember/object';
+import {
+  A,
+} from '@ember/array';
+
+export default Component.extend({
+  layout,
+
+  classNames: ['accordion-group'],
+
+  activeItem: null,
+  focusIndex: null,
+  accordionItemIndexes: null,
+
+  accordionState: computed('activeItem', 'focusIndex', function() {
+    const {
+      activeItem,
+      focusIndex,
+      actions,
+    } = getProperties(this, [
+      'activeItem',
+      'focusIndex',
+      'actions',
+    ]);
+
+    return {
+      activeItem,
+      focusIndex,
+      setActiveItem: actions.setActiveItem.bind(this),
+      setFocusIndex: actions.setFocusIndex.bind(this),
+      registerIndex: actions.registerIndex.bind(this),
+    };
+  }),
+
+  init() {
+    this._super(...arguments);
+
+    set(this, 'accordionItemIndexes', []);
+  },
+
+  keyDown(e) {
+    const keyCode = get(e, 'keyCode');
+    const focusIndex = get(this, 'focusIndex');
+
+    if (isPresent(focusIndex)) {
+      const targetIndex = this._resolveTargetItemIndex(keyCode);
+
+      set(this, 'activeItem', targetIndex);
+    }
+  },
+
+  _resolveTargetItemIndex(keyCode) {
+    const {
+      accordionItemIndexes,
+      activeItem,
+      focusIndex,
+    } = getProperties(this, [
+      'accordionItemIndexes',
+      'activeItem',
+      'focusIndex',
+    ]);
+    const first = Math.min(...accordionItemIndexes);
+    const last = Math.max(...accordionItemIndexes);
+    let itemIndexOfIndex = A(accordionItemIndexes).indexOf(activeItem);
+    let targetIndex;
+
+    switch (keyCode) {
+      case 38:
+        if (activeItem === null || itemIndexOfIndex === -1) {
+          targetIndex = focusIndex;
+        } else if (activeItem === first) {
+          targetIndex = last;
+        } else {
+          itemIndexOfIndex--
+          targetIndex = accordionItemIndexes[itemIndexOfIndex];
+        }
+        break;
+      case 40:
+        if (activeItem === null || itemIndexOfIndex === -1) {
+          targetIndex = focusIndex;
+        } else if (activeItem === last) {
+          targetIndex = first;
+        } else {
+          itemIndexOfIndex++
+          targetIndex = accordionItemIndexes[itemIndexOfIndex];
+        }
+        break;
+      case 36:
+        targetIndex = first;
+        break;
+      case 35:
+        targetIndex = last;
+        break;
+      case 13:
+      case 32:
+        if (activeItem !== focusIndex) {
+          targetIndex = focusIndex;
+        } else {
+          targetIndex = null;
+        }
+        break;
+      default:
+        targetIndex = activeItem;
+    }
+
+    return targetIndex;
+  },
+
+  actions: {
+    setActiveItem(accordionItemIndex) {
+      return set(this, 'activeItem', accordionItemIndex);
+    },
+
+    setFocusIndex(accordionItemIndex) {
+      set(this, 'focusIndex', accordionItemIndex);
+    },
+
+    registerIndex(accordionItemIndex) {
+      get(this, 'accordionItemIndexes').push(accordionItemIndex);
+    },
+  },
+});