FE-132 Add centennial in-page nav

app/components/centennial/centennial-nav/component.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});

app/components/centennial/centennial-nav/template.hbs

@@ -0,0 +1,11 @@
+<div class="centennial-nav centennial-module l-constrained">
+  <ul>
+   <li><a href="#explore">Explore the Centennial</a></li>
+   <li><a href="#support">Support us</a></li>
+   <li><a href="#history">Our History</a></li>
+   <li><a href="#events">Events</a></li>
+   <li><a href="#stories">Share your New York Stories</a></li>
+   <li><a href="#sponsors">Sponsors</a></li>
+  </ul>
+</div>
+

app/styles/_centennial.scss

@@ -1,6 +1,7 @@
 @import 'centennial/centennial-base';
 
 @import 'centennial/centennial-header';
+@import 'centennial/centennial-nav';
 @import 'centennial/centennial-logo-wnyc';
 @import 'centennial/centennial-timeline';
 @import 'centennial/centennial-archives';

app/styles/centennial/_centennial-base.scss

@@ -13,6 +13,24 @@
   --centennial-header-line-height: 1.2;
   --centennial-module-spacing: 64px;
 }
+
+.centennial-home {
+  position: relative;
+}
+
+
+.centennial-nav-anchor {
+  position: relative;
+  top: -60px;
+}
+
+@media screen and (min-width: 1025px) {
+  .centennial-nav-anchor {
+    position: inherit;
+  }
+}
+
+
 .centennial-module {
   margin-bottom: var(--centennial-module-spacing);
 }

app/styles/centennial/_centennial-header.scss

@@ -1,5 +1,5 @@
 .centennial-header {
-  margin-bottom: var(--centennial-module-spacing);
+  margin-bottom: 32px;
 }
 
 .centennial-header__hero, .centennial-header__hero img {

app/styles/centennial/_centennial-nav.scss

@@ -0,0 +1,30 @@
+.centennial-nav ul, .centennial-nav li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.centennial-nav ul {
+  display: flex;
+  justify-content: space-between;
+}
+@media (max-width: 1210px) {
+  .centennial-nav ul {
+    flex-direction: column;
+    row-gap: 32px;
+  }
+}
+
+.centennial-nav li a {
+  font-size: 16px;
+  font-weight: 700;
+  text-decoration: none;
+  border: none;
+  text-transform: uppercase;
+  color: rgb(51, 51, 51);
+  &:hover {
+    border: none;
+    text-decoration: none;
+    color: #d3008c;
+  }
+}

app/templates/centennial.hbs

@@ -3,7 +3,11 @@
 </HeadLayout>
 <div class="centennial-home">
   {{centennial/centennial-header}}
+
+  {{centennial/centennial-nav}}
+
   {{centennial/centennial-message}}
+  <span class="centennial-nav-anchor" id="explore"></span>
   {{centennial/centennial-explore
     category1Title=model.featuredCategory1.title
     category1Items=model.featuredCategory1.bucketItems
@@ -13,11 +17,16 @@
     category3Items=model.featuredCategory3.bucketItems
     }}
   {{centennial/centennial-cta-narrow}}
+  <span class="centennial-nav-anchor" id="support"></span>
   {{centennial/centennial-legacy-giving}}
+  <span class="centennial-nav-anchor" id="history"></span>
   {{centennial/centennial-timeline}}
   {{centennial/centennial-archives items=model.archiveItems}}
+  <span class="centennial-nav-anchor" id="events"></span>
   {{centennial/centennial-events events=model.events}}
+  <span class="centennial-nav-anchor" id="stories"></span>
   {{centennial/centennial-new-york-stories}}
   {{centennial/centennial-double-cta}}
+  <span class="centennial-nav-anchor" id="sponsors"></span>
   {{centennial/centennial-major-sponsor}}
 </div>

tests/integration/components/centennial/centennial-nav/component-test.js

@@ -0,0 +1,26 @@
+import { module, skip } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | centennial/centennial-nav', function(hooks) {
+  setupRenderingTest(hooks);
+
+  skip('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`{{centennial/centennial-nav}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#centennial/centennial-nav}}
+        template block text
+      {{/centennial/centennial-nav}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});