Feature/53585 Migrate cookie message

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"
 >

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)

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;
-}

components/src/molecules/cookie-message/CookieMessage.stories.js

@@ -10,40 +10,50 @@ 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>
     `
   }))
   .add('With slots', () => ({
     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 }}