Merge pull request #351 from nypublicradio/mwalsh/FE-78_centennial-ap…

…p-tout

FE-78 centennial app tout

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

@@ -0,0 +1,9 @@
+import Component from '@ember/component';
+import config from 'wnyc-web-client/config/environment';
+
+export default Component.extend({
+  init() {
+    this._super(...arguments);
+    this.set('staticAssetPath', config.staticAssetPath);
+  }
+});

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

@@ -0,0 +1,47 @@
+<style>
+  .centennial-cta-app {
+      background-image: url("{{staticAssetPath}}img/100/app-iphone-1x.png");
+      background-image: -webkit-image-set(
+        url("{{staticAssetPath}}img/100/app-iphone-1x.png") 1x,
+        url("{{staticAssetPath}}img/100/app-iphone-2x.png") 2x,
+        url("{{staticAssetPath}}img/100/app-iphone-3x.png") 3x
+        );
+      background-image: image-set(
+        url("{{staticAssetPath}}img/100/app-iphone-1x.png") 1x,
+        url("{{staticAssetPath}}img/100/app-iphone-2x.png") 2x,
+        url("{{staticAssetPath}}img/100/app-iphone-3x.png") 3x
+        );
+      background-repeat: no-repeat;
+      background-position: top right;
+      background-size: contain;
+  }
+  @media screen and (min-width: 1220px) {
+    .centennial-cta-app {
+        background-image: url("{{staticAssetPath}}img/100/iphone-1x.png");
+        background-image: -webkit-image-set(
+          url("{{staticAssetPath}}img/100/iphone-1x.png") 1x,
+          url("{{staticAssetPath}}img/100/iphone-2x.png") 2x,
+          url("{{staticAssetPath}}img/100/iphone-2.5x.png") 2.5x
+          );
+        background-image: image-set(
+          url("{{staticAssetPath}}img/100/iphone-1x.png") 1x,
+          url("{{staticAssetPath}}img/100/iphone-2x.png") 2x,
+          url("{{staticAssetPath}}img/100/iphone-2.5x.png") 2.5x
+          );
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-size: contain;
+    }
+  }
+</style>
+<a class="centennial-cta-app" href="https://www.wnyc.org/mobile" target="_blank" rel="noopener noreferrer">
+  <div class="centennial-cta-app__content">
+    <h3 class="centennial-cta-app__header">Listen on the go with the all new WNYC app</h3>
+    <div class="centennial-cta-app__badges">
+      <img width="100" height="34" alt="Download the WNYC App on the App Store" src="{{staticAssetPath}}img/100/app-store-badge-1x.png"
+      srcset="{{staticAssetPath}}img/100/app-store-badge-1x.png 100w, {{staticAssetPath}}img/100/app-store-badge-2x.png 200w, {{staticAssetPath}}img/100/app-store-badge-3x.png 300w">
+      <img width="131" height="50" alt="Get the WNYC App on Google Play" src="{{staticAssetPath}}img/100/google-play-badge-1x.png"
+      srcset="{{staticAssetPath}}img/100/google-play-badge-1x.png 131w, {{staticAssetPath}}img/100/google-play-badge-2x.png 262w, {{staticAssetPath}}img/100/google-play-badge-3x.png 393w">
+    </div>
+  </div>
+</a>

app/components/centennial/centennial-cta-rectangle/template.hbs

@@ -1,16 +1,14 @@
-<div class="centennial-cta-rectangle centennial-module l-constrained">
-  <div class="centennial-cta-rectangle__wrapper">
-    <div class="centennial-cta-rectangle__content">
-      <h3 class="centennial-cta-rectangle__header">Become a member today</h3>
-      <div class="centennial-cta-rectangle__contents">
-        <div class="centennial-cta-rectangle__image">
-          <img alt="WNYC Centennial Commemorative Tote Bag" width="215" height="215" src="{{staticAssetPath}}img/100/centennial-tote-1x.png" srcset="{{staticAssetPath}}img/100/centennial-tote-1x.png 215w, {{staticAssetPath}}img/100/centennial-tote-2x.png 430w, {{staticAssetPath}}img/100/centennial-tote-3x.png 645w">
-        </div>
-        <div class="centennial-cta-rectangle__message">
-          <p class="centennial-cta-rectangle__text">Listener support is WNYC's foundation. Give today so we can keep building on our legacy as an anchor of civic and cultural life in New York.</p>
-          <a class="centennial-cta-rectangle__button" href="https://pledge.wnyc.org/support/wnyc?utm_source=wnyc&utm_medium=centennial-site&utm_campaign=rectangle" target="_blank" rel="noopener noreferrer" class="btn btn--black btn--heavy btn--large">Donate now</a>
-        </div>
+<div class="centennial-cta-rectangle">
+  <div class="centennial-cta-rectangle__content">
+    <h3 class="centennial-cta-rectangle__header">Become a member today</h3>
+    <div class="centennial-cta-rectangle__contents">
+      <div class="centennial-cta-rectangle__image">
+        <img alt="WNYC Centennial Commemorative Tote Bag" width="215" height="215" src="{{staticAssetPath}}img/100/centennial-tote-1x.png" srcset="{{staticAssetPath}}img/100/centennial-tote-1x.png 215w, {{staticAssetPath}}img/100/centennial-tote-2x.png 430w, {{staticAssetPath}}img/100/centennial-tote-3x.png 645w">
+      </div>
+      <div class="centennial-cta-rectangle__message">
+        <p class="centennial-cta-rectangle__text">Listener support is WNYC's foundation. Give today so we can keep building on our legacy as an anchor of civic and cultural life in New York.</p>
+        <a class="centennial-cta-rectangle__button" href="https://pledge.wnyc.org/support/wnyc?utm_source=wnyc&utm_medium=centennial-site&utm_campaign=rectangle" target="_blank" rel="noopener noreferrer" class="btn btn--black btn--heavy">Donate now</a>
       </div>
     </div>
   </div>
-</div>
+</div>

app/components/centennial/centennial-double-cta/component.js

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

app/components/centennial/centennial-double-cta/template.hbs

@@ -0,0 +1,4 @@
+<div class="centennial-double-cta centennial-module l-constrained">
+  {{centennial/centennial-cta-rectangle}}
+  {{centennial/centennial-cta-app}}
+</div>

app/styles/_centennial.scss

@@ -7,7 +7,9 @@
 @import 'centennial/centennial-explore';
 @import 'centennial/centennial-message';
 @import 'centennial/centennial-cta-narrow';
+@import 'centennial/centennial-double-cta';
 @import 'centennial/centennial-cta-rectangle';
+@import 'centennial/centennial-cta-app';
 @import 'centennial/centennial-new-york-stories';
 @import 'centennial/centennial-card-list';
 @import 'centennial/centennial-card';

app/styles/centennial/_centennial-cta-app.scss

@@ -0,0 +1,57 @@
+//centennial cta rectangle
+.centennial-cta-app {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: black;
+  background-color: #FCD240;
+  border-bottom: none;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  height: 250px;
+  width: 335px;
+}
+.centennial-cta-app:hover {
+  border-bottom: none;
+}
+.centennial-cta-app:focus-visible {
+  outline: 2px solid blue;
+  outline-style: auto;
+}
+.centennial-cta-app__header {
+  font-family: ff-tisa-web-pro, serif;
+  padding: 20px 0 0 40px;
+  width: 210px;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.21;
+}
+.centennial-cta-app__badges {
+  display: flex;
+  flex-direction: row;
+  padding: 20px 0 0 40px;
+  align-items: center;
+}
+
+@media screen and (min-width: 1220px) {
+  .centennial-cta-app {
+    width: 496px;
+    height: 375px;
+  }
+  .centennial-cta-app__header {
+    font-family: ff-tisa-web-pro, serif;
+    padding: 80px 0 0 40px;
+    width: 230px;
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1.21;
+    margin-bottom: 24px;
+  }
+  .centennial-cta-app__badges {
+    display: flex;
+    flex-direction: row;
+    padding: 20px 0 0 40px;
+    align-items: center;
+  }
+}

app/styles/centennial/_centennial-cta-rectangle.scss

@@ -1,5 +1,5 @@
 //centennial cta rectangle
-.centennial-cta-rectangle__wrapper {
+.centennial-cta-rectangle {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -9,6 +9,8 @@
   display: flex;
   flex-direction: row;
   margin: auto;
+  height: 250px;
+  width: 335px;
 }
 .centennial-cta-rectangle__contents {
   display: inline-flex;
@@ -29,25 +31,32 @@
 .centennial-cta-rectangle__header {
   font-family: ff-tisa-web-pro, serif;
   font-size: 28px;
+  width: 210px;
   font-weight: 700;
   line-height: 1.2;
-  margin-bottom: 24px;
+  margin-bottom: 10px;
 }
 .centennial-cta-rectangle__text {
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 1.4;
+  font-weight: 600;
+  margin-bottom: 16px;
 }
 .centennial-cta-rectangle__button {
   width: calc(100% - 24px);
   text-align: center;
 }
-@media screen and (min-width: 800px) {
-  .centennial-cta-rectangle__wrapper {
-    max-width: 496px;
+@media screen and (min-width: 1220px) {
+  .centennial-cta-rectangle {
+    width: 496px;
+    height: 375px;
     margin: auto;
     padding: 36px;
   }
   .centennial-cta-rectangle__header {
+    width: 100%;
     font-size: 36px;
+    margin-bottom: 48px;
   }
   .centennial-cta-rectangle__image {
     flex: 1 0 230px;
@@ -58,6 +67,8 @@
   }
   .centennial-cta-rectangle__text {
     font-size: 14px;
+    line-height: 1.4;
+    margin-bottom: 32px;
   }
   .centennial-cta-rectangle__button {
     width: 100%;

app/styles/centennial/_centennial-double-cta.scss

@@ -0,0 +1,12 @@
+.centennial-double-cta {
+  display: flex;
+  flex-direction: column;
+  row-gap: 22px;
+}
+@media screen and (min-width: 1025px) {
+  .centennial-double-cta {
+    flex-direction: row;
+    justify-content: center;
+    column-gap: 24px;
+  }
+}

app/templates/centennial.hbs

@@ -18,6 +18,6 @@
     category3Title=model.featuredCategory3.title
     category3Items=model.featuredCategory3.bucketItems
     }}
-  {{centennial/centennial-cta-rectangle}}
+  {{centennial/centennial-double-cta}}
   {{centennial/centennial-major-sponsor}}
 </div>

tests/integration/components/centennial/centennial-cta-app/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-cta-app', 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-cta-app}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#centennial/centennial-cta-app}}
+        template block text
+      {{/centennial/centennial-cta-app}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/components/centennial/centennial-double-cta/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-double-cta', 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-double-cta}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#centennial/centennial-double-cta}}
+        template block text
+      {{/centennial/centennial-double-cta}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});