Feature/53585 Migrate cookie message

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'

components/src/molecules/cookie-message/CookieMessage.html

@@ -0,0 +1,30 @@
+<div
+  :class="['a-cookie-message', isOpen && 'a-cookie-message--open']"
+  :data-type="storageName"
+  :aria-label="ariaLabel"
+  tabindex="0"
+>
+  <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"
+    >
+      <a-button
+        :aria-label="closeAriaLabel"
+        class="a-cookie-message__close"
+        @click.native="closeBar"
+      >
+        {{ closeButton }}
+        <a-icon
+          icon="close"
+          class="a-cookie-message__close-icon"
+        />
+      </a-button>
+    </slot>
+  </div>
+</div>

components/src/02-elements/cookie-message/CookieMessage.js → components/src/molecules/cookie-message/CookieMessage.js

@@ -8,29 +8,33 @@ export default {
     AButton
   },
   props: {
-    text: {
+    /**
+     * Storage name
+     */
+    storageName: {
       type: String,
-      required: true
-    },
-    dataType: {
-      type: String,
-      required: true
-    },
-    closeIcon: {
-      type: String,
-      default: null
+      default: 'cookie'
     },
+    /**
+     * Text for close button
+     */
     closeButton: {
       type: String,
       default: null
     },
+    /**
+     * Aria label for container
+     */
     ariaLabel: {
       type: String,
-      default: 'Cookie policy message'
+      default: null
     },
+    /**
+     * Aria label for close button
+     */
     closeAriaLabel: {
       type: String,
-      default: 'Close cookie message'
+      default: null
     }
   },
   data: () => {
@@ -39,16 +43,17 @@ export default {
     }
   },
   mounted () {
-    if (localStorage.getItem(this.dataType) !== 'closed') {
+    if (localStorage.getItem(this.storageName) !== 'closed') {
       this.isOpen = true
     }
   },
   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
-      localStorage.setItem(this.dataType, 'closed')
+
+      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)

components/src/02-elements/cookie-message/CookieMessage.scss → 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            : $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;
@@ -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;
@@ -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;
@@ -57,10 +61,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
     }
   }
 
-  &__link {
-    color: $cookie-message__link-color;
-  }
-
   &__close {
     display: flex;
     flex-basis: auto;
@@ -78,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;
   }
 }
-
-.cookie-message__text > a {
-  @extend .cookie-message__link;
-}

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)
+  })
+})

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

@@ -0,0 +1,64 @@
+import { storiesOf } from '@storybook/vue'
+import { text } from '@storybook/addon-knobs'
+
+import ALink from '../../atoms/link/Link.vue'
+import ACookieMessage from './CookieMessage.vue'
+
+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.')
+      }
+    },
+    template: `
+      <a-cookie-message
+        :close-button="textKnobs"
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
+      >
+        <a-link href='#'>
+          {{ linkText }}
+        </a-link> 
+        {{ infoText }}
+      </a-cookie-message>
+    `
+  }))
+  .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')
+      }
+    },
+    template: `
+      <a-cookie-message
+        aria-label="Cookie policy message"
+        close-aria-label="Close cookie message"
+      >
+        <a-link href='#'>
+          {{ linkText }}
+        </a-link> 
+        {{ infoText }}
+        <template #button="{ closeBar }">
+          <button @click="closeBar">
+            {{ textKnobs }}
+          </button>
+        </template>
+      </a-cookie-message>
+    `
+  }))

cookbook/src/app/App.vue

@@ -1,3 +1,5 @@
 <template src="./App.html" />
+
 <script src="./App.js" />
+
 <style lang="scss" src="./App.scss" />