Merge branch 'master' into release/v.0.2.0

* master:
  feat(banner): additional props for banner localisation (#103)
  chore: Lint workflow checks and cleanup (#102)
  fix: Changed Responsive design (#98)
  feat: Integrated Visual Regression with ember-backstop (#94)
  fix: Refactored Github action CI workflow (#96)
  Removed since (#95)
  fix(modal): modal patch for safari (#91)
  fix(nucleus): removed classic decorator dependency (#87)
  fix(icon): fixed failing tests (#89)
  [RELEASE] 0.3.0 (#79)

# Conflicts:
#	packages/banner/package.json
#	packages/button/package.json
#	packages/inline-banner/package.json
#	packages/modal/package.json
#	packages/toast-message/package.json

.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
         node: true
       },
       plugins: ['node'],
+      // eslint-disable-next-line node/no-extraneous-require
       rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
         'comma-dangle': ['error', 'never'],
         'ember/new-module-imports': 'off',

.github/workflows/continuous-integration-workflow.yml

@@ -1,19 +1,38 @@
-name: CI
+name: Build
 
-on: 
+on:
   pull_request:
     branches:
     - master
 
+  push:
+    branches:
+    - master
+
 jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
+  Lint:
+    name: Lint
+    runs-on: macos-latest
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
+
+    - name: Set Node.js 10.13.0
+      uses: actions/setup-node@master
       with:
-        ref: master
-
+        node-version: 10.13.0
+
+    - name: Install dependencies
+      run: yarn
+
+    - name: Run lint check
+      run: yarn lint
+
+  Test:
+    name: Test
+    runs-on: macos-latest
+    steps:
+    - uses: actions/checkout@v2
+
     - name: Set Node.js 10.13.0
       uses: actions/setup-node@master
       with:

.gitignore

@@ -28,3 +28,7 @@ tmp
 /bower.json.ember-try
 /package.json.ember-try
 .DS_Store
+
+#backstopjs 
+html_report
+bitmaps_test

README.md

@@ -1,7 +1,6 @@
 Nucleus - The Freshworks Design System in Ember
 ==============================================================================
-
-[![Build Status](https://travis-ci.com/freshdesk/nucleus.svg?branch=master)](https://travis-ci.com/freshdesk/nucleus)
+![Build](https://github.com/freshdesk/nucleus/workflows/Build/badge.svg?branch=master)
 ![npm (scoped with tag)](https://img.shields.io/npm/v/@freshworks/button/latest)
 ![npm (scoped with tag)](https://img.shields.io/npm/v/@freshworks/button/beta)
 

package.json

@@ -8,9 +8,10 @@
   ],
   "scripts": {
     "start": "yarn workspace nucleus start",
-    "test": "lerna run test --parallel --no-private --since origin/master",
+    "test": "lerna run test --no-private --stream --concurrency 1",
     "build": "lerna run build --parallel --no-private",
-    "lint": "lerna run lint:hbs",
+    "lint": "lerna run lint:hbs --parallel && lerna run lint:js --parallel",
+    "lint-staged": "lint-staged",
     "lerna:version": "lerna version prerelease --preid beta",
     "lerna:publish": "lerna publish --canary --yes --dist-tag beta",
     "deploy": "yarn workspace nucleus deploy",
@@ -21,8 +22,17 @@
     "ember-cli": "~3.11.0",
     "ember-source-channel-url": "^2.0.0",
     "ember-try": "^1.1.0",
-    "lerna": "^3.18.4"
+    "lerna": "^3.20.2",
+    "lint-staged": "^10.0.7",
+    "pre-commit": "^1.2.2"
   },
+  "lint-staged": {
+    "*.js": "lerna run lint:js",
+    "*.hbs": "lerna run lint:hbs"
+  },
+  "pre-commit": [
+    "lint-staged"
+  ],
   "engines": {
     "node": "^10.13.0",
     "yarn": "^1.17.3"

packages/@nucleus/ember-cli-build.js

@@ -1,8 +1,12 @@
 'use strict';
 
+// eslint-disable-next-line node/no-unpublished-require
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+// eslint-disable-next-line node/no-unpublished-require
 const { UnwatchedDir } = require('broccoli-source');
+// eslint-disable-next-line node/no-unpublished-require
 const MergeTrees = require('broccoli-merge-trees');
+// eslint-disable-next-line node/no-unpublished-require
 const Funnel = require('broccoli-funnel');
 const { readdirSync } = require('fs');
 

packages/banner/.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
         node: true
       },
       plugins: ['node'],
+      // eslint-disable-next-line node/no-unpublished-require
       rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
         'comma-dangle': ['error', 'never'],
         'ember/new-module-imports': 'off',

packages/banner/.template-lintrc.js

@@ -0,0 +1,11 @@
+/* eslint-env node */
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+
+  rules: {
+    'no-bare-strings': false,
+    'quotes': 'double'
+  }
+};

packages/banner/addon/components/nucleus-banner.js

@@ -1,4 +1,3 @@
-import classic from 'ember-classic-decorator';
 import { layout as templateLayout } from '@ember-decorators/component';
 import defaultProp from '@freshworks/core/utils/default-decorator';
 import { observes } from '@ember-decorators/object';
@@ -17,7 +16,6 @@ import { action, computed } from '@ember/object';
   @extends Ember.Component
   @public
 */
-@classic
 @templateLayout(layout)
 class NucleusBanner extends Component {
   /**
@@ -48,6 +46,26 @@ class NucleusBanner extends Component {
   */
   @defaultProp
   isFixed = false;
+
+  /**
+  * Button Label that describes the presence of multiple banners
+  *
+  * @field showMoreLabel
+  * @type string
+  * @public
+  */
+ @defaultProp
+ showMoreLabel = 'more';
+
+ /**
+  * Title text that describes the stack of multiple banners
+  *
+  * @field stackTitle
+  * @type string
+  * @public
+  */
+ @defaultProp
+ stackTitle = 'System Alerts';
 
   /**
   * List of banner items to be rendered.

packages/banner/addon/components/nucleus-banner/item.js

@@ -1,4 +1,3 @@
-import classic from 'ember-classic-decorator';
 import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import { reads } from '@ember/object/computed';
 import Component from '@ember/component';
@@ -12,7 +11,6 @@ import { ICON_MAP } from '../../constants/nucleus-banner';
   @extends Ember.Component
   @public
 */
-@classic
 @templateLayout(layout)
 @tagName('')
 class Item extends Component {

packages/banner/addon/styles/components/_nucleus-banner.scss

@@ -113,4 +113,10 @@
       margin-bottom: 0;
     }
   }
+
+  @media screen and (min-width: $mobile-screen-min-width) and (max-width: $mobile-screen-max-width) {
+    &__main {
+      overflow-x: auto;
+    }
+  }
 }

packages/banner/addon/templates/components/nucleus-banner.hbs

@@ -1,8 +1,8 @@
 {{#if bannerItems.length}}
   {{#ember-wormhole to="nucleus-banner-wormhole" renderInPlace=false}}
-    <div class="nucleus-banner nucleus-banner--{{displayedItem.type}} {{if isFixed 'nucleus-banner--fixed'}}">
+    <div class="nucleus-banner nucleus-banner--{{displayedItem.type}} {{if isFixed "nucleus-banner--fixed"}}">
       <div class="nucleus-banner__main">
-        {{nucleus-banner/item item=displayedItem onDelete=(action 'deleteItem')}}
+        {{nucleus-banner/item item=displayedItem onDelete=(action "deleteItem")}}
       </div>
       {{#if (and _isMultiple stackedItems)}}
         <div class="nucleus-banner__more">
@@ -11,16 +11,16 @@
             ariaLabel="Show more"
             block=true
             type="link"
-            label=(concat "+ " stackedItems.length " more")
+            label=(concat "+ " stackedItems.length " " showMoreLabel)
             onClick=(action "toggleShowMore")}}
           {{#if _isShowMore}}
             {{#transition-group transitionClass="fade"}}
               <div class="more-card">
-                <h5>System alerts</h5>
+                <h5>{{stackTitle}}</h5>
                 <ul class="nucleus-banners">
                   {{#each stackedItems as |hiddenItem|}}
                     <li class="nucleus-banner--mini nucleus-banner--{{hiddenItem.type}}">
-                      {{nucleus-banner/item item=hiddenItem onDelete=(action 'deleteItem')}}
+                      {{nucleus-banner/item item=hiddenItem onDelete=(action "deleteItem")}}
                     </li>
                   {{/each}}
                 </ul>

packages/banner/addon/templates/components/nucleus-banner/item.hbs

@@ -8,7 +8,7 @@
   <div class="nucleus-banner-item__content">
     {{item.title}}
     {{#if item.content}}
-      <a role="button" 
+      <a role="button"
       class="nucleus-banner-item__link"
       aria-label={{item.content.linkText}}
       onClick={{action item.content.linkAction}}>
@@ -24,5 +24,5 @@
     customClass=(concat "nucleus-banner-item__close")
     icon="nucleus-cross"
     iconSize="mini"
-    onClick=(action 'onClose' item)}}
-{{/if}}         
+    onClick=(action "onClose" item)}}
+{{/if}}

packages/banner/ember-backstop/backstop.js

@@ -0,0 +1,37 @@
+/* eslint-env node */
+module.exports = {
+  id: `ember-backstop test`,
+  viewports: [
+    {
+      label: 'webview',
+      width: 1440,
+      height: 900,
+    },
+  ],
+  onBeforeScript: `puppet/onBefore.js`,
+  onReadyScript: `puppet/onReady.js`,
+  scenarios: [
+    {
+      label: '{testName}',
+      cookiePath: 'backstop_data/engine_scripts/cookies.json',
+      url: '{origin}/backstop/dview/{testId}/{scenarioId}',
+      delay: 500,
+    },
+  ],
+  paths: {
+    bitmaps_reference: 'backstop_data/bitmaps_reference',
+    bitmaps_test: 'backstop_data/bitmaps_test',
+    engine_scripts: 'backstop_data/engine_scripts',
+    html_report: 'backstop_data/html_report',
+    ci_report: 'backstop_data/ci_report',
+  },
+  report: [],
+  engine: 'puppet',
+  engineOptions: {
+    args: ['--no-sandbox'],
+  },
+  asyncCaptureLimit: 10,
+  asyncCompareLimit: 50,
+  debug: false,
+  debugWindow: false,
+};

packages/banner/ember-backstop/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

@@ -0,0 +1,41 @@
+/* eslint-env browser, node */
+
+module.exports = async (page, scenario) => {
+  const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  const clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  const scrollToSelector = scenario.scrollToSelector;
+  const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitFor(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitFor(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitFor(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    await page.waitFor(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    await page.waitFor(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};

packages/banner/ember-backstop/backstop_data/engine_scripts/puppet/onReady.js

@@ -0,0 +1,11 @@
+/* eslint-env browser, node */
+
+const debug = require('debug')('BackstopJS');
+
+module.exports = async (page, scenario) => {
+  debug('SCENARIO > ' + scenario.label);
+  await require('./overrideCSS')(page, scenario);
+  await require('./clickAndHoverHelper')(page, scenario);
+
+  // add more ready handlers here...
+};

packages/banner/ember-backstop/backstop_data/engine_scripts/puppet/overrideCSS.js

@@ -0,0 +1,13 @@
+/* eslint-env browser, node */
+
+module.exports = function(page) {
+  // inject arbitrary css to override styles
+  page.evaluate(() => {
+    const BACKSTOP_TEST_CSS_OVERRIDE = `#ember-testing {width: 100% !important; height: 100% !important; -webkit-transform: scale(1) !important; transform: scale(1) !important;}`;
+    let style = document.createElement('style');
+    style.type = 'text/css';
+    let styleNode = document.createTextNode(BACKSTOP_TEST_CSS_OVERRIDE);
+    style.appendChild(styleNode);
+    document.head.appendChild(style);
+  });
+};

packages/banner/ember-cli-build.js

@@ -1,10 +1,12 @@
 'use strict';
 
+// eslint-disable-next-line node/no-unpublished-require
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   let app = new EmberAddon(defaults,
     {
+      hinting: false,
       stylelint: {
         linterConfig:{
           syntax: 'scss'

packages/banner/index.js

@@ -1,6 +1,8 @@
 /* eslint-env node */
 'use strict';
+// eslint-disable-next-line node/no-unpublished-require
 const mergeTrees = require('broccoli-merge-trees');
+// eslint-disable-next-line node/no-unpublished-require
 const Funnel = require('broccoli-funnel');
 const path = require('path');