[Ember-Migration] Created Scroll To Top Button (#335)

* Created a navbar

* minor refactoring and fixes

* Created header component

* created description component

* resolved over simplications and minor fixes

* created cards

* made cards and modals responsive

* minor fix

* created more about component

* created scroll to top button

* Created a navbar

* minor refactoring and fixes

* Created a navbar

* [Ember-Migration] Created a navbar (#325)

* Created a navbar

* minor refactoring and fixes

* resolved over simplications and minor fixes

* minor fixes

* Removed repetition of code

* [Ember-Migration] Created a navbar (#325)

* Created a navbar

* minor refactoring and fixes

* resolved over simplications and minor fixes

* created more about component

* [Ember-Migration] Created a navbar (#325)

* Created a navbar

* minor refactoring and fixes

* resolved over simplications and minor fixes

* removed redundant code

app/components/scroll-to-top.hbs

@@ -0,0 +1,3 @@
+<button class='btn__scroll' type='button' {{on 'click' this.scrollToTop}}>
+  <img src='assets/icons/arrowup-icon.svg' alt='arrow up' />
+</button>

app/components/scroll-to-top.js

@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ScrollToTopComponent extends Component {
+  scrollBtn = document.getElementsByClassName('btn__scroll');
+
+  @action scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+}

app/styles/app.css

@@ -3,6 +3,7 @@
 @import 'description.module.css';
 @import 'cards.module.css';
 @import 'more-about.module.css';
+@import 'scroll-to-top.module.css';
 
 * {
   margin: 0px;

app/styles/scroll-to-top.module.css

@@ -0,0 +1,13 @@
+.btn__scroll {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background: var(--color-pink);
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 0 10px var(--color-blackshadow2);
+  cursor: pointer;
+  transition: all 0.3s;
+}

app/templates/application.hbs

@@ -6,4 +6,5 @@
     @signOut={{this.signOut}}
   />
   {{outlet}}
+  <ScrollToTop />
 </body>

tests/integration/components/scroll-to-top-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | scroll-to-top', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ScrollToTop />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <ScrollToTop>
+        template block text
+      </ScrollToTop>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});