Merge branch 'master' into release

* master:
  fix(modal): fixes positioning of elements (#154)
  fix(toast-message): Design review updates  (#155)
  feat(tabs): Implementation (#138)
  chore(nucleus): Nucleus now lives in the Dark! (#152)
  fix(Inline-banner): refactored yield (#151)

# Conflicts:
#	packages/@nucleus/package.json

packages/@nucleus/app/styles/doc/_custom-addon-theme.scss

@@ -69,6 +69,11 @@ h4 a.heading-anchor {
   color: #2c5cc5; // used in demos
 }
 
+.docs-md__code {
+  background: #282c34;
+  color: #abb2bf;
+}
+
 button.docs-text-grey-lighter {
   color: #12344d;
   padding: 4px;
@@ -98,3 +103,25 @@ html [type=button],
 [type=submit] {
   border-radius: 4px; // to prevent tailwind CSS from overriding this value in ember-cli-addon-doc
 }
+
+.mode-toggle {
+  z-index: 99999;
+  color: #202020;
+  position: absolute;
+  right: 25px;
+  top: 27px;
+}
+
+@media only screen and (max-width: 1450px) {
+  .mode-toggle {
+    top: 100px;
+    right: 25px;
+  }
+}
+
+@media only screen and (max-width: 750px) {
+  .mode-toggle {
+    top: 100px;
+    right: 70px;
+  }
+}

packages/@nucleus/app/styles/doc/_custom-syntax-highlight.scss

@@ -73,3 +73,38 @@
 .hljs-link {
   text-decoration: underline;
 }
+
+//Custom Syntax Highlight for Dark Mode
+body.dark {
+  .hljs {
+    color: #caa540;
+    background: #272b34;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a1a7a0;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c44ec2;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: #e29a00;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #c38500;
+  }
+}

packages/@nucleus/app/styles/doc/_dark-mode-theme.scss

@@ -0,0 +1,149 @@
+body.dark {
+  & > .ember-view {
+    background: #171717;
+  }
+
+  :root {
+    --brand-primary: #021f60;
+  }
+
+  .docs-bg-brand {
+    background-color: #021f60 !important;
+  }
+
+  //Dark Mode Toggle Icon Fill
+  .toggle-icon {
+    fill: #ddd;
+  }
+
+  .data-search-box-input {
+    color: white;
+  }
+
+  .docs-viewer {
+    background-color: #202020;
+  }
+
+  .docs-pt-8 {
+    color: #ddd;
+  }
+
+  .docs-rounded,
+  .docs-bg-code-base {
+    background-color: #272b34;
+    color: white;
+  }
+
+  ::placeholder {
+    color: #adabab;
+  }
+
+  .docs-md__code {
+    background: #272b34;
+    color: #abb2bf;
+  }
+
+  .docs-text-black {
+    color: #ddd;
+  }
+
+  .docs-bg-grey-lighter {
+    background: #272b34;
+  }
+
+  .docs-text-grey-darker {
+    color: #8d8d8d;
+  }
+
+  //Code blocks within text
+  li > code {
+    color: rgb(226, 165, 52);
+    background: rgb(57, 61, 61);
+  }
+
+  p > code {
+    color: rgb(226, 165, 52);
+    background: rgb(57, 61, 61);
+  }
+
+  .docs-my-8 {
+    box-shadow: 0 2px 8px 0 rgba(40, 46, 53, .25);
+  }
+
+  .docs-rounded .docs-p-4 {
+    border-bottom: 1px dashed #202020;
+  }
+
+  .docs-text-brand,
+  h4 a.heading-anchor {
+    color: #2c5cc5 !important;
+    text-decoration: none;
+  }
+
+  .AddonDocs-DocsViewer-Nav {
+    border-color: #171717;
+  }
+
+  .docs-border-grey-light {
+    border-color: #171717;
+  }
+
+  .docs-border-grey-lighter {
+    border-color: #171717;
+  }
+
+  .docs-bg-grey-lightest {
+    background-color: #151515;
+  }
+
+  .docs-bg-white {
+    background-color: #151515;
+  }
+
+  .docs-shadow {
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .5);
+  }
+
+  .docs-demo__snippets-nav.docs-tracking-tight {
+    background-color: #272b34;
+    border-color: #272b34;
+  }
+
+  //Finds all forms of text
+  .docs-font-title,
+  .docs-text-grey-darkest,
+  .docs-h1,
+  .docs-md__h1,
+  .docs-h2,
+  .docs-md__h2,
+  .docs-md__h2 a,
+  .docs-md__h3 a,
+  .docs-h3 a,
+  .docs-md > p,
+  li {
+    color: #ddd;
+  }
+
+  input,
+  optgroup,
+  select,
+  textarea {
+    color: #000;
+  }
+
+  .playground-container {
+    border-bottom: 1px dotted #202020;
+
+    &--props {
+      border-left: 1px dotted #202020;
+
+      .item {
+        margin: 10px;
+
+        .ember-text-field {
+          border: 1px solid #202020;
+        }
+      }
+    }
+  }
+}

packages/@nucleus/app/styles/nucleus-docs.scss

@@ -4,6 +4,7 @@
 /* ember-cli-addon customisations */
 @import "./doc/custom-addon-theme";
 @import "./doc/custom-syntax-highlight";
+@import "./doc/dark-mode-theme";
 @import "./doc/nucleus-mod";
 @import "./doc/icon";
 @import "./doc/playground";

packages/@nucleus/package.json

@@ -27,6 +27,7 @@
     "@freshworks/inline-banner": "^0.5.5",
     "@freshworks/modal": "^0.5.5",
     "@freshworks/toast-message": "^0.6.5",
+    "@freshworks/tabs": "^0.1.0",
     "ember-cli-autoprefixer": "^0.8.1",
     "ember-cli-babel": "^7.11.1",
     "ember-cli-htmlbars": "^4.0.0",

packages/@nucleus/tests/dummy/app/components/nucleus-tabs/demo-1.js

@@ -0,0 +1,17 @@
+// BEGIN-SNIPPET nucleus-tabs-2.js
+import Component from '@ember/component';
+import { inject } from '@ember/service';
+import { get } from '@ember/object';
+
+export default Component.extend({
+  flashMessages: inject(),
+  actions: {
+    onChange(changedTo) { // changedTo, ChangedFrom, event params accepted
+      const flashMessages = get(this, 'flashMessages');
+      flashMessages.info(`Custom action invoked. '${changedTo}' tab selected!`, {
+        timeout: 1500
+      });
+    }
+  }
+});
+// END-SNIPPET

packages/@nucleus/tests/dummy/app/components/nucleus-tabs/demo-2.js

@@ -0,0 +1,29 @@
+// BEGIN-SNIPPET nucleus-tabs-3.js
+import Component from '@ember/component';
+import { inject } from '@ember/service';
+import RSVP from 'rsvp';
+import { get } from '@ember/object';
+
+export default Component.extend({
+  flashMessages: inject(),
+  actions: {
+    beforeChange() { // changedTo, changedFrom, event params accepted
+      const flashMessages = get(this, 'flashMessages');
+      flashMessages.info(`Performing asyncronous operation..`, {
+        timeout: 1500
+      });
+      return new RSVP.Promise(function(resolve) {
+        setTimeout(function () {
+          resolve();
+        }, 2000);
+      });
+    },
+    onChange() { // changedTo, ChangedFrom, event params accepted
+      const flashMessages = get(this, 'flashMessages');
+      flashMessages.info(`Tab changed.`, {
+        timeout: 1500
+      });
+    }
+  }
+});
+// END-SNIPPET

packages/@nucleus/tests/dummy/app/components/theme-toggle.js

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+import { set, computed } from '@ember/object';
+
+export default Component.extend({
+  dark: true,
+  iconName: computed("dark", function(){
+    return this.dark ? "light" : "dark"
+  }),
+
+  toggleDarkTheme(match) {
+    document.body.classList.toggle('dark', match);
+  },
+  init() {
+    this._super();
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    set(this, 'dark', prefersDark.matches);
+    this.toggleDarkTheme(this.dark);
+    prefersDark.addListener((mediaQuery) => this.toggleDarkTheme(mediaQuery.matches))
+  },
+  actions: {
+    onToggle() {
+      if (this.dark) {
+        set(this, 'dark', false);
+        this.toggleDarkTheme(this.dark);
+      }
+      else {
+        set(this,'dark', true);
+        this.toggleDarkTheme(this.dark);
+      }
+    }
+  }
+});

packages/@nucleus/tests/dummy/app/router.js

@@ -20,6 +20,7 @@ Router.map(function() {
       this.route("nucleus-modal");
       this.route("nucleus-toast-message");
       this.route("nucleus-banner");
+      this.route("nucleus-tabs");
     });
 
     this.route('not-found', { path: '/*path' });

packages/@nucleus/tests/dummy/app/templates/application.hbs

@@ -1,4 +1,6 @@
-{{docs-header name="Nucleus" prefix="Freshworks"}}
+{{theme-toggle}}
+{{#docs-header name="Nucleus" prefix="Freshworks" as |header|}}
+{{/docs-header}}
 {{outlet}}
 {{nucleus-banner isFixed=true}}
 {{nucleus-toast-message}}

packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs

@@ -3,7 +3,7 @@
     <div class="icon-container">
       {{#each icons as |icon|}}
         <div class="icon" aria-role="button" onClick={{action 'copyIcon' icon}}>
-           {{nucleus-icon name=icon size="large"}}
+           {{nucleus-icon name=icon size="large" variant="none"}}
            <div class="icon--text">{{icon}}</div>
         </div>
       {{/each}}

packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs

@@ -1,21 +1,8 @@
 {{#docs-demo as |demo|}}
   {{#demo.example name="nucleus-inline-banner-2.hbs"}}
     {{#nucleus-inline-banner type="warning" as |banner|}}
-      <div class="nucleus-inline-banner__icon">
-        {{nucleus-icon name="nucleus-circle-help" size="medium" variant="warning"}}
-      </div>
-      <div class="nucleus-inline-banner__content">
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim blandit volutpat maecenas volutpat.</p>
-        <a class="docs-link" href="#">Click here</a>
-      </div>
-      <div class="nucleus-inline-banner__close">
-        {{nucleus-button
-        variant="text"
-        size="mini"
-        icon="nucleus-cross"
-        iconOnly=true
-        onClick=(action banner.close)}}
-      </div>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim blandit volutpat maecenas volutpat.</p>
+      <a class="docs-link" href="#">Click here</a>
     {{/nucleus-inline-banner}}
   {{/demo.example}}
   {{demo.snippet "nucleus-inline-banner-2.hbs"}}