From f768d2a4fe38808fd4e2b5c0b9888341652608b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 14:20:15 +0200
Subject: [PATCH 01/23] #53585 - Move component to the molecules

---
 components/src/03-modules/footer/Footer.js                      | 2 +-
 .../cookie-message/CookieMessage.html                           | 0
 .../{02-elements => molecules}/cookie-message/CookieMessage.js  | 0
 .../cookie-message/CookieMessage.scss                           | 0
 .../cookie-message/CookieMessage.stories.js                     | 2 +-
 .../{02-elements => molecules}/cookie-message/CookieMessage.vue | 0
 6 files changed, 2 insertions(+), 2 deletions(-)
 rename components/src/{02-elements => molecules}/cookie-message/CookieMessage.html (100%)
 rename components/src/{02-elements => molecules}/cookie-message/CookieMessage.js (100%)
 rename components/src/{02-elements => molecules}/cookie-message/CookieMessage.scss (100%)
 rename components/src/{02-elements => molecules}/cookie-message/CookieMessage.stories.js (92%)
 rename components/src/{02-elements => molecules}/cookie-message/CookieMessage.vue (100%)

diff --git a/components/src/03-modules/footer/Footer.js b/components/src/03-modules/footer/Footer.js
index 8dc24bc3b..7eb4a7425 100644
--- a/components/src/03-modules/footer/Footer.js
+++ b/components/src/03-modules/footer/Footer.js
@@ -3,7 +3,7 @@ import ALink from '../../atoms/link/Link.vue'
 import AButton from '../../atoms/button/Button.vue'
 import AList from '../../atoms/list/List.vue'
 import AListItem from '../../atoms/list-item/ListItem.vue'
-import ACookieMessage from '../../02-elements/cookie-message/CookieMessage.vue'
+import ACookieMessage from '../../molecules/cookie-message/CookieMessage.vue'
 import ADropdownList from '../../02-elements/dropdown-list/DropdownList.vue'
 import ADropdownListItem from '../../02-elements/dropdown-list-item/DropdownListItem.vue'
 import ANewsletter from '../../03-modules/newsletter/Newsletter.vue'
diff --git a/components/src/02-elements/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
similarity index 100%
rename from components/src/02-elements/cookie-message/CookieMessage.html
rename to components/src/molecules/cookie-message/CookieMessage.html
diff --git a/components/src/02-elements/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
similarity index 100%
rename from components/src/02-elements/cookie-message/CookieMessage.js
rename to components/src/molecules/cookie-message/CookieMessage.js
diff --git a/components/src/02-elements/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
similarity index 100%
rename from components/src/02-elements/cookie-message/CookieMessage.scss
rename to components/src/molecules/cookie-message/CookieMessage.scss
diff --git a/components/src/02-elements/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
similarity index 92%
rename from components/src/02-elements/cookie-message/CookieMessage.stories.js
rename to components/src/molecules/cookie-message/CookieMessage.stories.js
index 9a6f74839..06e6a611f 100644
--- a/components/src/02-elements/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/vue'
 
 import ACookieMessage from './CookieMessage.vue'
 
-storiesOf('Elements/CookieMessage', module)
+storiesOf('Molecules/CookieMessage', module)
   // @vue/component
   .add('Default', () => ({
     components: { ACookieMessage },
diff --git a/components/src/02-elements/cookie-message/CookieMessage.vue b/components/src/molecules/cookie-message/CookieMessage.vue
similarity index 100%
rename from components/src/02-elements/cookie-message/CookieMessage.vue
rename to components/src/molecules/cookie-message/CookieMessage.vue

From e72ddc621d7045f288a6447c4734d31adb6b51d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 14:24:14 +0200
Subject: [PATCH 02/23] #53585 - Add 'a' prefix in class

---
 .../src/molecules/cookie-message/CookieMessage.html    | 10 +++++-----
 .../src/molecules/cookie-message/CookieMessage.scss    |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index c8cd2baa7..749695beb 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -1,23 +1,23 @@
 <div
-  :class="['cookie-message', isOpen && 'cookie-message--open']"
+  :class="['a-cookie-message', isOpen && 'a-cookie-message--open']"
   :data-type="dataType"
   :aria-label="ariaLabel"
   tabindex="0"
 >
-  <div class="cookie-message__container">
+  <div class="a-cookie-message__container">
     <span
-      class="cookie-message__text"
+      class="a-cookie-message__text"
       v-html="text"
     />
     <a-button
       :aria-label="closeAriaLabel"
-      class="cookie-message__close"
+      class="a-cookie-message__close"
       @click.native="closeBar()"
     >
       {{ closeButton }}
       <a-icon
         :icon="closeIcon"
-        class="cookie-message__close-icon"
+        class="a-cookie-message__close-icon"
       />
      </a-button>
   </div>
diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 00d7dfe58..6311a427a 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -19,7 +19,7 @@ $cookie-message__close-icon-margin-left: $spacer !default;
 $cookie-message__close-icon-transition : $transition-base !default;
 
 
-.cookie-message {
+.a-cookie-message {
   display: none;
   align-items: stretch;
   box-sizing: border-box;
@@ -106,6 +106,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
   }
 }
 
-.cookie-message__text > a {
+.a-cookie-message__text > a {
   @extend .cookie-message__link;
 }

From 99e912620b028cffdadccf8530b8e466334ddad4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 14:24:49 +0200
Subject: [PATCH 03/23] #53585 - Add 'a' prefix in class

---
 components/src/molecules/cookie-message/CookieMessage.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 6311a427a..418d2cbaa 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -107,5 +107,5 @@ $cookie-message__close-icon-transition : $transition-base !default;
 }
 
 .a-cookie-message__text > a {
-  @extend .cookie-message__link;
+  @extend .a-cookie-message__link;
 }

From 936d2312acb830f12d375f1ed4bb944f92923119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 14:37:02 +0200
Subject: [PATCH 04/23] #53585 - Add slots

---
 .../cookie-message/CookieMessage.html         | 32 +++++++++++--------
 .../molecules/cookie-message/CookieMessage.js |  4 ---
 .../cookie-message/CookieMessage.scss         |  6 +---
 .../cookie-message/CookieMessage.stories.js   | 29 +++++++++++++++--
 4 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index 749695beb..d996ae9e3 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -5,20 +5,24 @@
   tabindex="0"
 >
   <div class="a-cookie-message__container">
-    <span
-      class="a-cookie-message__text"
-      v-html="text"
-    />
-    <a-button
-      :aria-label="closeAriaLabel"
-      class="a-cookie-message__close"
-      @click.native="closeBar()"
+    <div class="a-cookie-message__text">
+      <slot />
+    </div>
+    <slot
+      name="button"
+      :close-bar="closeBar"
     >
-      {{ closeButton }}
-      <a-icon
-        :icon="closeIcon"
-        class="a-cookie-message__close-icon"
-      />
-     </a-button>
+      <a-button
+        :aria-label="closeAriaLabel"
+        class="a-cookie-message__close"
+        @click.native="closeBar()"
+      >
+        {{ closeButton }}
+        <a-icon
+          :icon="closeIcon"
+          class="a-cookie-message__close-icon"
+        />
+      </a-button>
+    </slot>
   </div>
 </div>
diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index 886b61d1a..e17bcd0fe 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,10 +8,6 @@ export default {
     AButton
   },
   props: {
-    text: {
-      type: String,
-      required: true
-    },
     dataType: {
       type: String,
       required: true
diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 418d2cbaa..78fc0abc9 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -57,10 +57,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
     }
   }
 
-  &__link {
-    color: $cookie-message__link-color;
-  }
-
   &__close {
     display: flex;
     flex-basis: auto;
@@ -107,5 +103,5 @@ $cookie-message__close-icon-transition : $transition-base !default;
 }
 
 .a-cookie-message__text > a {
-  @extend .a-cookie-message__link;
+  color: $cookie-message__link-color;
 }
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index 06e6a611f..614a91a2a 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -1,17 +1,40 @@
 import { storiesOf } from '@storybook/vue'
 
+import ALink from '../../atoms/link/Link.vue'
 import ACookieMessage from './CookieMessage.vue'
 
 storiesOf('Molecules/CookieMessage', module)
   // @vue/component
   .add('Default', () => ({
-    components: { ACookieMessage },
+    components: { ACookieMessage, ALink },
     template: `
       <a-cookie-message
-        text="<a href='#' class='cookie-message__link'>Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
         closeIcon="close"
         dataType="cookie"
         closeButton="Close"
-      />
+      >
+        <a-link href='#'>
+          Example link
+        </a-link> 
+          Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
+      </a-cookie-message>
+    `
+  }))
+  .add('With slots', () => ({
+    components: { ACookieMessage, ALink },
+    template: `
+      <a-cookie-message
+        closeIcon="close"
+        dataType="cookie"
+        closeButton="Close"
+      >
+        <a-link href='#'>
+          Example link
+        </a-link> 
+          Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
+        <template #button="{ closeBar }">
+           <button @click="closeBar">Custom button</button>
+        </template>
+      </a-cookie-message>
     `
   }))

From 088e70148f44dcebfc469bd1996e43e503678932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 14:54:59 +0200
Subject: [PATCH 05/23] #53585 - Add description for slots and props

---
 .../molecules/cookie-message/CookieMessage.html   |  2 ++
 .../src/molecules/cookie-message/CookieMessage.js | 15 +++++++++++++++
 .../cookie-message/CookieMessage.spec.js          |  0
 .../cookie-message/CookieMessage.stories.js       |  2 +-
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 components/src/molecules/cookie-message/CookieMessage.spec.js

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index d996ae9e3..561f79d7d 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -6,8 +6,10 @@
 >
   <div class="a-cookie-message__container">
     <div class="a-cookie-message__text">
+      <!-- @slot Content slot -->
       <slot />
     </div>
+    <!-- @slot Close button (Scoped slot) -->
     <slot
       name="button"
       :close-bar="closeBar"
diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index e17bcd0fe..dc96c2d1e 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,22 +8,37 @@ export default {
     AButton
   },
   props: {
+    /**
+     * Data typeQuantity value (used with v-model)
+     */
     dataType: {
       type: String,
       required: true
     },
+    /**
+     * Icon for close button
+     */
     closeIcon: {
       type: String,
       default: null
     },
+    /**
+     * Text for close button
+     */
     closeButton: {
       type: String,
       default: null
     },
+    /**
+     * Aria label for container
+     */
     ariaLabel: {
       type: String,
       default: 'Cookie policy message'
     },
+    /**
+     * Aria label for close button
+     */
     closeAriaLabel: {
       type: String,
       default: 'Close cookie message'
diff --git a/components/src/molecules/cookie-message/CookieMessage.spec.js b/components/src/molecules/cookie-message/CookieMessage.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index 614a91a2a..a8aa626ac 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -4,7 +4,7 @@ import ALink from '../../atoms/link/Link.vue'
 import ACookieMessage from './CookieMessage.vue'
 
 storiesOf('Molecules/CookieMessage', module)
-  // @vue/component
+  .addParameters({ info: true })
   .add('Default', () => ({
     components: { ACookieMessage, ALink },
     template: `

From 9c29255114bd044783b2ad8a31c40a8e5edf0f51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 15:15:06 +0200
Subject: [PATCH 06/23] #53585 - Add test for cookie message

---
 .../molecules/cookie-message/CookieMessage.js |  2 +-
 .../cookie-message/CookieMessage.spec.js      | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index dc96c2d1e..1e6fa7bbe 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -13,7 +13,7 @@ export default {
      */
     dataType: {
       type: String,
-      required: true
+      default: null
     },
     /**
      * Icon for close button
diff --git a/components/src/molecules/cookie-message/CookieMessage.spec.js b/components/src/molecules/cookie-message/CookieMessage.spec.js
index e69de29bb..466227996 100644
--- a/components/src/molecules/cookie-message/CookieMessage.spec.js
+++ b/components/src/molecules/cookie-message/CookieMessage.spec.js
@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import ACookieMessage from './CookieMessage.vue'
+
+describe('Cookie message', () => {
+  it('has default structure', () => {
+    const wrapper = mount(ACookieMessage)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('a-cookie-message')
+  })
+
+  it('renders slots content when passed', () => {
+    const wrapper = mount(ACookieMessage, {
+      slots: {
+        default: `<span>Sample content</span>`,
+        button: `<button>Sample button</button>`
+      }
+    })
+
+    const span = wrapper.find('.a-cookie-message span')
+    expect(span.exists()).toBe(true)
+    expect(span.text()).toEqual('Sample content')
+    expect(wrapper.find('button').text()).toBe('Sample button')
+  })
+
+  it('close cookie message info', () => {
+    const wrapper = mount(ACookieMessage)
+    const closeBtn = wrapper.find('.a-cookie-message__close')
+    expect(wrapper.classes().length).toBe(2)
+    closeBtn.trigger('click')
+    expect(wrapper.classes().length).toBe(1)
+  })
+})

From 8931516865eddd0fd55b0d36ee3cace65faccb8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 15:18:26 +0200
Subject: [PATCH 07/23] #53585 - Change text color to increase contrast for
 a11y

---
 components/src/molecules/cookie-message/CookieMessage.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 78fc0abc9..391734691 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -4,7 +4,7 @@ $cookie-message__width                 : 100% !default;
 $cookie-message__background-color      : $gray-lightest !default;
 $cookie-message__font-size             : $font-size-small !default;
 $cookie-message__font-family           : $font-family-base !default;
-$cookie-message__text-color            : $gray !default;
+$cookie-message__text-color            : #444471 !default;
 $cookie-message__text-padding          : $spacer--medium $spacer--medium 0 $spacer--medium !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
 $cookie-message__link-color            : $blue !default;

From eef1c1dc7baa66f3b3aab4506aede3bd234bedc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Mon, 20 May 2019 16:41:03 +0200
Subject: [PATCH 08/23] #53585 - Use color variable

---
 components/src/molecules/cookie-message/CookieMessage.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 391734691..0d3985358 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -4,7 +4,7 @@ $cookie-message__width                 : 100% !default;
 $cookie-message__background-color      : $gray-lightest !default;
 $cookie-message__font-size             : $font-size-small !default;
 $cookie-message__font-family           : $font-family-base !default;
-$cookie-message__text-color            : #444471 !default;
+$cookie-message__text-color            : $gray-dark !default;
 $cookie-message__text-padding          : $spacer--medium $spacer--medium 0 $spacer--medium !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
 $cookie-message__link-color            : $blue !default;

From 38314bbdf874effea55c1caff65968a374b7ff61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 17:59:00 +0200
Subject: [PATCH 09/23] #53585 - Move arialabels to story

---
 components/src/molecules/cookie-message/CookieMessage.js | 9 +++++----
 .../molecules/cookie-message/CookieMessage.stories.js    | 4 ++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index 1e6fa7bbe..a37a93e0c 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -34,14 +34,14 @@ export default {
      */
     ariaLabel: {
       type: String,
-      default: 'Cookie policy message'
+      default: null
     },
     /**
      * Aria label for close button
      */
     closeAriaLabel: {
       type: String,
-      default: 'Close cookie message'
+      default: null
     }
   },
   data: () => {
@@ -56,9 +56,10 @@ export default {
   },
   methods: {
     closeBar () {
-      const focusable = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
-
       this.isOpen = false
+
+      const focusable = this.$root.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
+
       localStorage.setItem(this.dataType, 'closed')
       // after closing message box move focus on first focusable element on the page
       if (focusable.length) {
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index a8aa626ac..cb9834c57 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -12,6 +12,8 @@ storiesOf('Molecules/CookieMessage', module)
         closeIcon="close"
         dataType="cookie"
         closeButton="Close"
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
       >
         <a-link href='#'>
           Example link
@@ -27,6 +29,8 @@ storiesOf('Molecules/CookieMessage', module)
         closeIcon="close"
         dataType="cookie"
         closeButton="Close"
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
       >
         <a-link href='#'>
           Example link

From 5aef2dfba10c4d20915f10e97b75e81aec2cd9ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 17:59:46 +0200
Subject: [PATCH 10/23] #53585 - Remove closeIcon props

---
 components/src/molecules/cookie-message/CookieMessage.html | 2 +-
 components/src/molecules/cookie-message/CookieMessage.js   | 7 -------
 .../src/molecules/cookie-message/CookieMessage.stories.js  | 2 --
 3 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index 561f79d7d..e011368e2 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -21,7 +21,7 @@
       >
         {{ closeButton }}
         <a-icon
-          :icon="closeIcon"
+          icon="close"
           class="a-cookie-message__close-icon"
         />
       </a-button>
diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index a37a93e0c..cb9cb44ff 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -15,13 +15,6 @@ export default {
       type: String,
       default: null
     },
-    /**
-     * Icon for close button
-     */
-    closeIcon: {
-      type: String,
-      default: null
-    },
     /**
      * Text for close button
      */
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index cb9834c57..9e3695dd7 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -9,7 +9,6 @@ storiesOf('Molecules/CookieMessage', module)
     components: { ACookieMessage, ALink },
     template: `
       <a-cookie-message
-        closeIcon="close"
         dataType="cookie"
         closeButton="Close"
         aria-label="Cookie policy message"
@@ -26,7 +25,6 @@ storiesOf('Molecules/CookieMessage', module)
     components: { ACookieMessage, ALink },
     template: `
       <a-cookie-message
-        closeIcon="close"
         dataType="cookie"
         closeButton="Close"
         aria-label="Cookie policy message"

From e7106f9d1826f68637d3056c75e4355893bcd204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 18:03:58 +0200
Subject: [PATCH 11/23] #53585 - Move dataType to data

---
 .../src/molecules/cookie-message/CookieMessage.js      | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index cb9cb44ff..b46ddce6b 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,13 +8,6 @@ export default {
     AButton
   },
   props: {
-    /**
-     * Data typeQuantity value (used with v-model)
-     */
-    dataType: {
-      type: String,
-      default: null
-    },
     /**
      * Text for close button
      */
@@ -39,7 +32,8 @@ export default {
   },
   data: () => {
     return {
-      isOpen: false
+      isOpen: false,
+      dataType: 'cookie'
     }
   },
   mounted () {

From 011dae890baf8af461d4a2dec4578796f2400ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 18:07:50 +0200
Subject: [PATCH 12/23] #53585 - Add knobs for custom button

---
 .../molecules/cookie-message/CookieMessage.stories.js  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index 9e3695dd7..55e30e23d 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue'
+import { text } from '@storybook/addon-knobs'
 
 import ALink from '../../atoms/link/Link.vue'
 import ACookieMessage from './CookieMessage.vue'
@@ -23,6 +24,11 @@ storiesOf('Molecules/CookieMessage', module)
   }))
   .add('With slots', () => ({
     components: { ACookieMessage, ALink },
+    props: {
+      textKnobs: {
+        default: text('Text', 'Custom button')
+      }
+    },
     template: `
       <a-cookie-message
         dataType="cookie"
@@ -35,7 +41,9 @@ storiesOf('Molecules/CookieMessage', module)
         </a-link> 
           Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
         <template #button="{ closeBar }">
-           <button @click="closeBar">Custom button</button>
+          <button @click="closeBar">
+            {{ textKnobs }}
+          </button>
         </template>
       </a-cookie-message>
     `

From 3dd67c723c3b986068fb6113bab42f9289dfe936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 18:09:50 +0200
Subject: [PATCH 13/23] #53585 - Add knobs for default button

---
 .../src/molecules/cookie-message/CookieMessage.stories.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index 55e30e23d..f7b50f57f 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -8,10 +8,15 @@ storiesOf('Molecules/CookieMessage', module)
   .addParameters({ info: true })
   .add('Default', () => ({
     components: { ACookieMessage, ALink },
+    props: {
+      textKnobs: {
+        default: text('Text', 'Close')
+      }
+    },
     template: `
       <a-cookie-message
         dataType="cookie"
-        closeButton="Close"
+        :closeButton="textKnobs"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
       >
@@ -32,7 +37,6 @@ storiesOf('Molecules/CookieMessage', module)
     template: `
       <a-cookie-message
         dataType="cookie"
-        closeButton="Close"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
       >

From a3873df82e275386c1f076cd65cd6321325e5713 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 21 May 2019 18:12:31 +0200
Subject: [PATCH 14/23] #53585 - Remove unnecessary brackets

---
 components/src/molecules/cookie-message/CookieMessage.html | 2 +-
 cookbook/src/app/App.vue                                   | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index e011368e2..998bd5bd0 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -17,7 +17,7 @@
       <a-button
         :aria-label="closeAriaLabel"
         class="a-cookie-message__close"
-        @click.native="closeBar()"
+        @click.native="closeBar"
       >
         {{ closeButton }}
         <a-icon
diff --git a/cookbook/src/app/App.vue b/cookbook/src/app/App.vue
index 4b34ea4fb..e9a1cccea 100644
--- a/cookbook/src/app/App.vue
+++ b/cookbook/src/app/App.vue
@@ -1,3 +1,5 @@
 <template src="./App.html" />
+
 <script src="./App.js" />
+
 <style lang="scss" src="./App.scss" />

From c0acf8803e945a6438b63b497a076652295bec56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Wed, 22 May 2019 15:34:16 +0200
Subject: [PATCH 15/23] #53585 - Add knobs,default value for storageName

---
 .../cookie-message/CookieMessage.html         |  2 +-
 .../molecules/cookie-message/CookieMessage.js | 14 +++++++---
 .../cookie-message/CookieMessage.stories.js   | 28 +++++++++++++------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index 998bd5bd0..a698da93c 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -1,6 +1,6 @@
 <div
   :class="['a-cookie-message', isOpen && 'a-cookie-message--open']"
-  :data-type="dataType"
+  :data-type="storageName"
   :aria-label="ariaLabel"
   tabindex="0"
 >
diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index b46ddce6b..afee0e9ee 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,6 +8,13 @@ export default {
     AButton
   },
   props: {
+    /**
+     * Storage name
+     */
+    storageName: {
+      type: String,
+      default: 'cookie'
+    },
     /**
      * Text for close button
      */
@@ -32,12 +39,11 @@ export default {
   },
   data: () => {
     return {
-      isOpen: false,
-      dataType: 'cookie'
+      isOpen: false
     }
   },
   mounted () {
-    if (localStorage.getItem(this.dataType) !== 'closed') {
+    if (localStorage.getItem(this.storageName) !== 'closed') {
       this.isOpen = true
     }
   },
@@ -47,7 +53,7 @@ export default {
 
       const focusable = this.$root.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
 
-      localStorage.setItem(this.dataType, 'closed')
+      localStorage.setItem(this.storageName, 'closed')
       // after closing message box move focus on first focusable element on the page
       if (focusable.length) {
         let firstFocusable = [...focusable].find(el => el.offsetParent !== null)
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index f7b50f57f..144031878 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -10,20 +10,25 @@ storiesOf('Molecules/CookieMessage', module)
     components: { ACookieMessage, ALink },
     props: {
       textKnobs: {
-        default: text('Text', 'Close')
+        default: text('Button text', 'Button text')
+      },
+      linkText: {
+        default: text('Link text', 'Example link')
+      },
+      infoText: {
+        default: text('Info text', 'Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.')
       }
     },
     template: `
       <a-cookie-message
-        dataType="cookie"
-        :closeButton="textKnobs"
+        :close-button="textKnobs"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
       >
         <a-link href='#'>
-          Example link
+          {{ linkText }}
         </a-link> 
-          Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
+        {{ infoText }}
       </a-cookie-message>
     `
   }))
@@ -31,19 +36,24 @@ storiesOf('Molecules/CookieMessage', module)
     components: { ACookieMessage, ALink },
     props: {
       textKnobs: {
-        default: text('Text', 'Custom button')
+        default: text('Button text', 'Button text')
+      },
+      linkText: {
+        default: text('Link text', 'Link text')
+      },
+      infoText: {
+        default: text('Info text', 'Info text')
       }
     },
     template: `
       <a-cookie-message
-        dataType="cookie"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
       >
         <a-link href='#'>
-          Example link
+          {{ linkText }}
         </a-link> 
-          Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings."
+        {{ infoText }}
         <template #button="{ closeBar }">
           <button @click="closeBar">
             {{ textKnobs }}

From a95531c41b25e03eed7a8e0db930826ab9a23669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Wed, 22 May 2019 15:45:36 +0200
Subject: [PATCH 16/23] #53585 - Fix styles

---
 .../cookie-message/CookieMessage.scss         | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 0d3985358..ca0edc6cc 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -28,6 +28,10 @@ $cookie-message__close-icon-transition : $transition-base !default;
   font-family: $cookie-message__font-family;
   background-color: $cookie-message__background-color;
 
+  &--open {
+    display: flex;
+  }
+
   &__container {
     display: flex;
     flex-wrap: wrap;
@@ -74,34 +78,36 @@ $cookie-message__close-icon-transition : $transition-base !default;
     cursor: pointer;
 
     &:active,
-    &:hover {
+    &:hover,
+    &:focus {
       color: $cookie-message__close-color;
       background: none;
+
+      .a-cookie-message__close-icon {
+        transition: $cookie-message__close-icon-transition;
+        fill: $color-primary;
+      }
     }
 
     @include mq($screen-s) {
       padding: $cookie-message__close-padding--small;
     }
-  }
 
-  &__close-icon {
-    width: $cookie-message__close-icon-size;
-    height: $cookie-message__close-icon-size;
-    margin-left: $cookie-message__close-icon-margin-left;
-    fill: $cookie-message__close-color;
+    &-icon {
+      width: $cookie-message__close-icon-size;
+      height: $cookie-message__close-icon-size;
+      margin-left: $cookie-message__close-icon-margin-left;
+      fill: $cookie-message__close-color;
 
-    &:hover,
-    &:focus {
-      transition: $cookie-message__close-icon-transition;
-      fill: $color-primary;
+      &:hover,
+      &:focus {
+        transition: $cookie-message__close-icon-transition;
+        fill: $color-primary;
+      }
     }
   }
 
-  &--open {
-    display: flex;
+  &__text > a {
+    color: $cookie-message__link-color;
   }
 }
-
-.a-cookie-message__text > a {
-  color: $cookie-message__link-color;
-}

From b2a0f6ab11b1b9b5085ed6223f944a8f0247a128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 28 May 2019 04:43:53 +0200
Subject: [PATCH 17/23] #53585 - Revert style changes

---
 .../cookie-message/CookieMessage.scss         | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index ca0edc6cc..961c41702 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -92,18 +92,18 @@ $cookie-message__close-icon-transition : $transition-base !default;
     @include mq($screen-s) {
       padding: $cookie-message__close-padding--small;
     }
+  }
 
-    &-icon {
-      width: $cookie-message__close-icon-size;
-      height: $cookie-message__close-icon-size;
-      margin-left: $cookie-message__close-icon-margin-left;
-      fill: $cookie-message__close-color;
+  &__close-icon {
+    width: $cookie-message__close-icon-size;
+    height: $cookie-message__close-icon-size;
+    margin-left: $cookie-message__close-icon-margin-left;
+    fill: $cookie-message__close-color;
 
-      &:hover,
-      &:focus {
-        transition: $cookie-message__close-icon-transition;
-        fill: $color-primary;
-      }
+    &:hover,
+    &:focus {
+      transition: $cookie-message__close-icon-transition;
+      fill: $color-primary;
     }
   }
 

From 219c7521ce84223b325a9eef86d97905ce298734 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 28 May 2019 04:46:36 +0200
Subject: [PATCH 18/23] #53585 - Move transitions

---
 components/src/molecules/cookie-message/CookieMessage.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 961c41702..314c8fd0a 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -84,7 +84,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
       background: none;
 
       .a-cookie-message__close-icon {
-        transition: $cookie-message__close-icon-transition;
         fill: $color-primary;
       }
     }
@@ -98,11 +97,11 @@ $cookie-message__close-icon-transition : $transition-base !default;
     width: $cookie-message__close-icon-size;
     height: $cookie-message__close-icon-size;
     margin-left: $cookie-message__close-icon-margin-left;
+    transition: $cookie-message__close-icon-transition;
     fill: $cookie-message__close-color;
 
     &:hover,
     &:focus {
-      transition: $cookie-message__close-icon-transition;
       fill: $color-primary;
     }
   }

From d0e26d385b499ec8075d73203f4c310ed89ccf29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Fri, 31 May 2019 13:41:36 +0200
Subject: [PATCH 19/23] #53585 - Fix line-height

---
 components/src/molecules/cookie-message/CookieMessage.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 314c8fd0a..ad82a481d 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -7,6 +7,7 @@ $cookie-message__font-family           : $font-family-base !default;
 $cookie-message__text-color            : $gray-dark !default;
 $cookie-message__text-padding          : $spacer--medium $spacer--medium 0 $spacer--medium !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
+$cookie-message__text-line-height      : 1.5 !default;
 $cookie-message__link-color            : $blue !default;
 $cookie-message__close-color           : $cookie-message__text-color !default;
 $cookie-message__close-size            : 48px !default;
@@ -52,6 +53,7 @@ $cookie-message__close-icon-transition : $transition-base !default;
     color: $cookie-message__text-color;
     font-size: inherit;
     font-family: inherit;
+    line-height: $cookie-message__text-line-height;
     text-align: justify;
 
     @include mq($screen-s) {

From af79012b9386843d5f95b26c5ad83326bc6fba53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 4 Jun 2019 10:16:12 +0200
Subject: [PATCH 20/23] #53585 - Remove connect with localStorage

---
 .../cookie-message/CookieMessage.html         |  3 +-
 .../molecules/cookie-message/CookieMessage.js | 26 +++-------
 .../cookie-message/CookieMessage.scss         |  5 --
 .../cookie-message/CookieMessage.stories.js   | 50 ++++++++++---------
 4 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.html b/components/src/molecules/cookie-message/CookieMessage.html
index a698da93c..db6b15377 100644
--- a/components/src/molecules/cookie-message/CookieMessage.html
+++ b/components/src/molecules/cookie-message/CookieMessage.html
@@ -1,6 +1,5 @@
 <div
-  :class="['a-cookie-message', isOpen && 'a-cookie-message--open']"
-  :data-type="storageName"
+  class="a-cookie-message"
   :aria-label="ariaLabel"
   tabindex="0"
 >
diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index afee0e9ee..6d1ebb98f 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -8,13 +8,6 @@ export default {
     AButton
   },
   props: {
-    /**
-     * Storage name
-     */
-    storageName: {
-      type: String,
-      default: 'cookie'
-    },
     /**
      * Text for close button
      */
@@ -37,28 +30,21 @@ export default {
       default: null
     }
   },
-  data: () => {
-    return {
-      isOpen: false
-    }
-  },
-  mounted () {
-    if (localStorage.getItem(this.storageName) !== 'closed') {
-      this.isOpen = true
-    }
-  },
   methods: {
     closeBar () {
-      this.isOpen = false
-
       const focusable = this.$root.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
 
-      localStorage.setItem(this.storageName, 'closed')
       // after closing message box move focus on first focusable element on the page
       if (focusable.length) {
         let firstFocusable = [...focusable].find(el => el.offsetParent !== null)
         firstFocusable.focus()
       }
+
+      /**
+       * Triggered close button
+       * @type {Event}
+       */
+      this.$emit('close')
     }
   }
 }
diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index ad82a481d..728ec94a4 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -21,7 +21,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
 
 
 .a-cookie-message {
-  display: none;
   align-items: stretch;
   box-sizing: border-box;
   width: $cookie-message__width;
@@ -29,10 +28,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
   font-family: $cookie-message__font-family;
   background-color: $cookie-message__background-color;
 
-  &--open {
-    display: flex;
-  }
-
   &__container {
     display: flex;
     flex-wrap: wrap;
diff --git a/components/src/molecules/cookie-message/CookieMessage.stories.js b/components/src/molecules/cookie-message/CookieMessage.stories.js
index 144031878..3ed83b6bd 100644
--- a/components/src/molecules/cookie-message/CookieMessage.stories.js
+++ b/components/src/molecules/cookie-message/CookieMessage.stories.js
@@ -4,26 +4,39 @@ import { text } from '@storybook/addon-knobs'
 import ALink from '../../atoms/link/Link.vue'
 import ACookieMessage from './CookieMessage.vue'
 
+const data = {
+  props: {
+    textKnobs: {
+      default: text('Button text', 'Button text')
+    },
+    linkText: {
+      default: text('Link text', 'Example link')
+    },
+    infoText: {
+      default: text('Info text', 'Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.')
+    }
+  },
+  data: () => ({
+    isOpen: true
+  }),
+  methods: {
+    close () {
+      this.isOpen = false
+    }
+  }
+}
 storiesOf('Molecules/CookieMessage', module)
   .addParameters({ info: true })
   .add('Default', () => ({
     components: { ACookieMessage, ALink },
-    props: {
-      textKnobs: {
-        default: text('Button text', 'Button text')
-      },
-      linkText: {
-        default: text('Link text', 'Example link')
-      },
-      infoText: {
-        default: text('Info text', 'Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.')
-      }
-    },
+    ...data,
     template: `
       <a-cookie-message
+        v-if="isOpen"
         :close-button="textKnobs"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
+        @close="close"
       >
         <a-link href='#'>
           {{ linkText }}
@@ -34,19 +47,10 @@ storiesOf('Molecules/CookieMessage', module)
   }))
   .add('With slots', () => ({
     components: { ACookieMessage, ALink },
-    props: {
-      textKnobs: {
-        default: text('Button text', 'Button text')
-      },
-      linkText: {
-        default: text('Link text', 'Link text')
-      },
-      infoText: {
-        default: text('Info text', 'Info text')
-      }
-    },
+    ...data,
     template: `
       <a-cookie-message
+        v-if="isOpen"
         aria-label="Cookie policy message"
         close-aria-label="Close cookie message"
       >
@@ -55,7 +59,7 @@ storiesOf('Molecules/CookieMessage', module)
         </a-link> 
         {{ infoText }}
         <template #button="{ closeBar }">
-          <button @click="closeBar">
+          <button @click="() => { closeBar(); close(); }">
             {{ textKnobs }}
           </button>
         </template>

From a86980ee69d0aafe78c5ecb993768e1ee6d89436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 4 Jun 2019 10:17:23 +0200
Subject: [PATCH 21/23] #53585 - Change this.$root.$el on this.$el

---
 components/src/molecules/cookie-message/CookieMessage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.js b/components/src/molecules/cookie-message/CookieMessage.js
index 6d1ebb98f..44f049946 100644
--- a/components/src/molecules/cookie-message/CookieMessage.js
+++ b/components/src/molecules/cookie-message/CookieMessage.js
@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     closeBar () {
-      const focusable = this.$root.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
+      const focusable = this.$el.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]')
 
       // after closing message box move focus on first focusable element on the page
       if (focusable.length) {

From 8faab0b503bf17cc82a4b624760979363d688de1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 4 Jun 2019 10:30:26 +0200
Subject: [PATCH 22/23] #53585 - Fix styles

---
 .../cookie-message/CookieMessage.scss         | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.scss b/components/src/molecules/cookie-message/CookieMessage.scss
index 728ec94a4..20c41bc00 100644
--- a/components/src/molecules/cookie-message/CookieMessage.scss
+++ b/components/src/molecules/cookie-message/CookieMessage.scss
@@ -4,22 +4,26 @@ $cookie-message__width                 : 100% !default;
 $cookie-message__background-color      : $gray-lightest !default;
 $cookie-message__font-size             : $font-size-small !default;
 $cookie-message__font-family           : $font-family-base !default;
+$cookie-message__container-min-width  : 100% !default;
 $cookie-message__text-color            : $gray-dark !default;
 $cookie-message__text-padding          : $spacer--medium $spacer--medium 0 $spacer--medium !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
 $cookie-message__text-line-height      : 1.5 !default;
+$cookie-message__text-line-height      : 1.5 !default;
 $cookie-message__link-color            : $blue !default;
-$cookie-message__close-color           : $cookie-message__text-color !default;
 $cookie-message__close-size            : 48px !default;
+$cookie-message__close-color           : $cookie-message__text-color !default;
+$cookie-message__close-background      : none !default;
+$cookie-message__close-border          : none !default;
 $cookie-message__close-font-weight     : $font-weight-bold !default;
 $cookie-message__close-padding         : 0 $spacer--medium 0 0 !default;
 $cookie-message__close-padding--small  : 0 $spacer--medium 0 $spacer !default;
 $cookie-message__text-padding--small   : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
 $cookie-message__close-icon-size       : 14px !default;
 $cookie-message__close-icon-margin-left: $spacer !default;
+$cookie-message__close-icon-fill       : $color-primary !default;
 $cookie-message__close-icon-transition : $transition-base !default;
 
-
 .a-cookie-message {
   align-items: stretch;
   box-sizing: border-box;
@@ -33,8 +37,7 @@ $cookie-message__close-icon-transition : $transition-base !default;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
-    min-width: 100%;
-    text-align: center;
+    min-width: $cookie-message__container-min-width;
 
     @include mq($screen-s) {
       flex-wrap: nowrap;
@@ -46,8 +49,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
     flex-basis: 100%;
     padding: $cookie-message__text-padding;
     color: $cookie-message__text-color;
-    font-size: inherit;
-    font-family: inherit;
     line-height: $cookie-message__text-line-height;
     text-align: justify;
 
@@ -56,6 +57,10 @@ $cookie-message__close-icon-transition : $transition-base !default;
       padding: $cookie-message__text-padding--small;
       text-align: left;
     }
+
+    & > a {
+      color: $cookie-message__link-color;
+    }
   }
 
   &__close {
@@ -68,20 +73,18 @@ $cookie-message__close-icon-transition : $transition-base !default;
     padding: $cookie-message__close-padding;
     color: $cookie-message__close-color;
     font-weight: $cookie-message__close-font-weight;
-    font-size: inherit;
-    font-family: inherit;
-    background: none;
-    border: none;
+    background: $cookie-message__close-background;
+    border: $cookie-message__close-border;
     cursor: pointer;
 
     &:active,
     &:hover,
     &:focus {
       color: $cookie-message__close-color;
-      background: none;
+      background: $cookie-message__close-background;
 
       .a-cookie-message__close-icon {
-        fill: $color-primary;
+        fill: $cookie-message__close-icon-fill;
       }
     }
 
@@ -99,11 +102,7 @@ $cookie-message__close-icon-transition : $transition-base !default;
 
     &:hover,
     &:focus {
-      fill: $color-primary;
+      fill: $cookie-message__close-icon-fill;
     }
   }
-
-  &__text > a {
-    color: $cookie-message__link-color;
-  }
 }

From a995b3b8ab6c29a2a99add73ec56b4f91f3e4211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joanna=20Szcz=C4=99ch?= <joanna.szczech@snow.dog>
Date: Tue, 4 Jun 2019 10:57:28 +0200
Subject: [PATCH 23/23] #53585 - Remove unnecessary test, after changes in
 component

---
 .../src/molecules/cookie-message/CookieMessage.spec.js    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/src/molecules/cookie-message/CookieMessage.spec.js b/components/src/molecules/cookie-message/CookieMessage.spec.js
index 466227996..881c5f754 100644
--- a/components/src/molecules/cookie-message/CookieMessage.spec.js
+++ b/components/src/molecules/cookie-message/CookieMessage.spec.js
@@ -21,12 +21,4 @@ describe('Cookie message', () => {
     expect(span.text()).toEqual('Sample content')
     expect(wrapper.find('button').text()).toBe('Sample button')
   })
-
-  it('close cookie message info', () => {
-    const wrapper = mount(ACookieMessage)
-    const closeBtn = wrapper.find('.a-cookie-message__close')
-    expect(wrapper.classes().length).toBe(2)
-    closeBtn.trigger('click')
-    expect(wrapper.classes().length).toBe(1)
-  })
 })