From 652b973426cbd1e8c41c29708f7c6263ba686bca Mon Sep 17 00:00:00 2001
From: Florian Pichler <fp@ylk.gd>
Date: Fri, 10 Dec 2021 15:31:22 +0100
Subject: [PATCH] Breaking: Update container component

- simplify component class
- move @z-index@ handling to CSS custom property

Replaces #272
---
 addon/components/notification-container.js    | 13 ----------
 .../components/notification-container.css     | 26 +++++++++++--------
 .../components/notification-container.hbs     |  3 +--
 tests/dummy/app/templates/application.hbs     |  8 +++---
 4 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/addon/components/notification-container.js b/addon/components/notification-container.js
index 08aa2099..7825cb7e 100644
--- a/addon/components/notification-container.js
+++ b/addon/components/notification-container.js
@@ -1,7 +1,5 @@
 /* eslint-disable ember/no-classic-components, ember/no-computed-properties-in-native-classes */
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/template';
 import { inject as service } from '@ember/service';
 
 import layout from '../templates/components/notification-container';
@@ -12,15 +10,4 @@ export default class NotificationContainerComponent extends Component {
   tagName = '';
   layout = layout;
   position = 'top';
-  zindex = '1060';
-
-  @computed('position')
-  get positionClass() {
-    return `ember-cli-notifications-notification__container--${this.position}`;
-  }
-
-  @computed('zindex')
-  get inlineStyle() {
-    return htmlSafe(`z-index: ${this.zindex};`);
-  }
 }
diff --git a/addon/styles/components/notification-container.css b/addon/styles/components/notification-container.css
index f8c38c78..3a3efea0 100644
--- a/addon/styles/components/notification-container.css
+++ b/addon/styles/components/notification-container.css
@@ -1,5 +1,11 @@
 :root {
-  --ecn-container-position: 10px;
+  /* Spacing */
+  --ecn-spacing-1: 0.5rem;
+  --ecn-spacing-2: 1rem;
+
+  /* Container */
+  --ecn-container-z-index: 9999;
+  --ecn-container-position: var(--ecn-spacing-1);
   --ecn-container-width: 80%;
   --ecn-container-max-with: 400px;
 
@@ -17,51 +23,49 @@
   --ecn-orange: #ff7f48;
   --ecn-red: #e74c3c;
 
-  /* Spacing */
-  --ecn-spacing-1: .5rem;
-  --ecn-spacing-2: 1rem;
 }
 
 /* Base */
-.ember-cli-notifications-notification__container {
+.ecn_container {
   position: fixed;
   margin: 0 auto;
   width: var(--ecn-container-width);
   max-width: var(--ecn-container-max-with);
+  z-index: var(--ecn-container-z-index, 9999);
 }
 
 /* Position */
-.ember-cli-notifications-notification__container--top {
+.ecn_container-top {
   top: var(--ecn-container-position);
   right: 0;
   left: 0;
 }
 
-.ember-cli-notifications-notification__container--top-left {
+.ecn_container-top-left {
   top: var(--ecn-container-position);
   right: auto;
   left: var(--ecn-container-position);
 }
 
-.ember-cli-notifications-notification__container--top-right {
+.ecn_container-top-right {
   top: var(--ecn-container-position);
   right: var(--ecn-container-position);
   left: auto;
 }
 
-.ember-cli-notifications-notification__container--bottom {
+.ecn_container-bottom {
   right: 0;
   bottom: var(--ecn-container-position);
   left: 0;
 }
 
-.ember-cli-notifications-notification__container--bottom-left {
+.ecn_container-bottom-left {
   right: auto;
   bottom: var(--ecn-container-position);
   left: var(--ecn-container-position);
 }
 
-.ember-cli-notifications-notification__container--bottom-right {
+.ecn_container-bottom-right {
   right: var(--ecn-container-position);
   bottom: var(--ecn-container-position);
   left: auto;
diff --git a/addon/templates/components/notification-container.hbs b/addon/templates/components/notification-container.hbs
index 232aa422..33482e58 100644
--- a/addon/templates/components/notification-container.hbs
+++ b/addon/templates/components/notification-container.hbs
@@ -1,6 +1,5 @@
 <div
-  class="ember-cli-notifications-notification__container {{this.positionClass}}"
-  style={{this.inlineStyle}}
+  class="ecn_container ecn_container-{{this.position}}"
   data-test-notification-container={{this.position}}
 >
   {{#each this.notifications.content as |notification|}}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index f34d706e..0dbbf1a1 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,5 +1,5 @@
 {{! template-lint-disable link-rel-noopener no-action no-unbalanced-curlies require-button-type require-input-label }}
-<NotificationContainer @position={{this.position}} @zindex={{this.zindex}} />
+<NotificationContainer @position={{this.position}} />
 <div class="bg-blue white py4">
   <div class="max-width-4 mx-auto px2">
     <div class="mb3">
@@ -26,9 +26,9 @@
     <h2>Basic usage</h2>
     <hr>
     <p>Include the container component in your template.</p>
-    <p>Optionally, change the position or z-index value of the notifications container.</p>
-    <p class="h5"><i>Default value is top</i></p>
-    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right" zindex="9999"&#125;&#125;</CodeBlock>
+    <p>Optionally, change the position of the notifications container. The default value is <code>top</code>.</p>
+    <CodeBlock @language="handlebars">&#123;&#123;notification-container position="top-right"&#125;&#125;</CodeBlock>
+    <p>To change the <code>z-index</code> of the container, override the CSS custom property <code>--ecn-container-zindex</code>. The default value is <code>9999</code>.</p>
 
     <p>Inject the notifications service where required.</p>
     <CodeBlock @language="js">import Controller from '@ember/controller';