adding

demo.js

@@ -5,12 +5,12 @@ import TinyConsentButton from './src/TinyConsentButton.riot';
 riot.register('tiny-consent', TinyConsent);
 riot.register('tiny-consent-button', TinyConsentButton);
 
-const consent = {
+const data = {
     cookies: [{
         title: 'Matomo',
         name: 'matamo_',
         id: 'matamo',
-        content: 'Analyse des Benutzerverhaltens, damit helfen Sie uns diese Seite zu verbessern.',
+        content: '',
         handleAgree: function() {
             console.log('agree');
         },
@@ -18,21 +18,12 @@ const consent = {
             console.log('reject');
         }
     },{
-        id: 'wordpress2',
-        name: 'wordpress2_',
-        content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
-        essential: true
-    },{
-        id: 'wordpress12',
-        name: 'wordpress12_',
-        content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
-        essential: true
-    },{
-        id: 'wordpress3',
-        name: 'wordpress3_',
+        id: 'wordpress',
+        name: 'wordpress_',
         content: 'Wordpress und WooCommerce nutzen Session, diese werden zum einen für den Login genutzt, aber auch für den Warenkorb.',
         essential: true
     }]
 };
-riot.mount('tiny-consent', consent);
+
+riot.mount('tiny-consent', data);
 riot.mount('tiny-consent-button');

demo.scss

@@ -4,12 +4,30 @@
  *
  */
 
-.tiny-consent__content {
-    display: none;
-}
+.tiny-consent {
+    &__banner {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+
+        width: 100%;
+        height: auto;
+
+        margin: 1em;
+    }
+
+    &__cookies {
+        margin: 0;
+        padding: 0;
+    }
+
+    &__content {
+        display: none;
+    }
 
-.tiny-consent__cookie {
-    display: none;
+    &__cookie {
+        display: none;
+    }
 }
 
 .show {

dist/css/demo.css

@@ -1 +1 @@
-.tiny-consent__content,.tiny-consent__cookie{display:none}.show{display:block}
+.tiny-consent__banner{position:fixed;left:0;bottom:0;width:100%;height:auto;margin:1em}.tiny-consent__cookies{margin:0;padding:0}.tiny-consent__content,.tiny-consent__cookie{display:none}.show{display:block}

src/TinyConsent.riot

@@ -1,5 +1,5 @@
 <tiny-consent>
-    <div class="tiny-consent">
+    <div id="tiny-consent" class="tiny-consent">
         <div class="tiny-consent__banner">
             <div class={ state.isOpen === true ? 'tiny-consent__content show' : 'tiny-consent__content' }>
                 <p>
@@ -29,7 +29,7 @@
                         </div>
                     </li>
                 </ul>
-                <div class="tiny-consent__close">
+                <div if={ state.hasChanged === false } class="tiny-consent__close">
                     <button class="button button--submit tiny-consent__button" onclick={ handleClose }>
                         { state.options.messages.close }
                     </button>
@@ -236,8 +236,8 @@
             updateEssential()
             {
                 // set true for last essential cookie where consent is not already set
-                for (let i = (this.props.cookies.length - 1); i > 0; i--) {
-                    if ((this.props.cookies[i].hasConsent === false && this.props.cookies[i].essential === true) || (this.state.hasChanged === false && this.props.cookies[i].essential === true)) {
+                for (let i = (this.props.cookies.length - 1); i >= 0; i--) {
+                    if ((this.state.hasChanged === true && this.props.cookies[i].hasConsent === false && this.props.cookies[i].essential === true) || (this.state.hasChanged === false && this.props.cookies[i].essential === true)) {
                         this.props.cookies[i].essentialLast = true;
                         break;
                     }

src/TinyConsentButton.riot

@@ -1,5 +1,5 @@
 <tiny-consent-button>
-    <div class="tiny-consent-button">
+    <div id="tiny-consent-button" class="tiny-consent-button">
         <button class="button tiny-consent-button__button" onclick={ handleOpen }>
             { state.options.messages.open }
         </button>