Merge pull request #419 from ember-learn/es-banner

Creates banner with the same style as on the current website

Author: mansona

addon/components/es-banner.hbs

@@ -0,0 +1,6 @@
+<div
+  class="es-banner"
+  data-test-es-banner
+>
+  {{yield}}
+</div>

addon/styles/addon.css

@@ -19,6 +19,7 @@
 @import 'helpers/index.css';
 
 /* Components */
+@import 'components/es-banner.css';
 @import 'components/es-button.css';
 @import 'components/es-card.css';
 @import 'components/es-footer.css';

addon/styles/components/es-banner.css

@@ -0,0 +1,41 @@
+.es-banner {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-brand-hc-dark);
+  padding: 8px 8px 10px;
+  color: var(--color-white);
+}
+
+.es-banner a, .es-banner a:link, .es-banner a:visited {
+  color: var(--color-white);
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-white-40);
+  background: none;
+  font-size: 16px;
+  line-height: 15px;
+}
+
+.es-banner a:hover, .es-banner a:focus {
+  border-bottom: 1px solid var(--color-white);
+}
+
+.es-banner a + a {
+  margin-left: 20px;
+  position: relative;
+}
+
+.es-banner a + a::before {
+  content: '';
+  width: 3px;
+  height: 3px;
+  background: var(--color-white);
+  border-radius: 50%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  display: block;
+  left: -10px;
+  pointer-events: none;
+  position: absolute;
+}

app/components/es-banner.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-banner';

docs/components/banner.md

@@ -0,0 +1,17 @@
+# Banner
+
+## Usage
+
+A banner will be shown at the top of the page. That can be filled with text.
+```handlebars
+<EsBanner>Some content goes here</EsBanner>
+```
+The banner can also contain a link.
+```handlebars
+<EsBanner><a href="#">Visit Website</a></EsBanner>
+```
+
+When you pass multiple links into the component they will be separated by a tiny dot.
+```handlebars
+<EsBanner><a href="#">Visit Website</a><a href="#">Visit Something else</a></EsBanner>
+```

tests/integration/components/es-banner-test.js

@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | es-banner', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`
+      <EsBanner>
+        I have an announcement to make
+      </EsBanner>
+    `);
+
+    assert
+      .dom('[data-test-es-banner]')
+      .hasText('I have an announcement to make', 'We see the correct message');
+  });
+});