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="dataType"
+  :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="closeIcon"
+          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,26 +8,37 @@ export default {
     AButton
   },
   props: {
-    text: {
-      type: String,
-      required: true
-    },
+    /**
+     * Data typeQuantity value (used with v-model)
+     */
     dataType: {
       type: String,
-      required: true
+      default: null
     },
+    /**
+     * 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'

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;
@@ -57,10 +57,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
     }
   }
 
-  &__link {
-    color: $cookie-message__link-color;
-  }
-
   &__close {
     display: flex;
     flex-basis: auto;
@@ -106,6 +102,6 @@ $cookie-message__close-icon-transition : $transition-base !default;
   }
 }
 
-.cookie-message__text > a {
-  @extend .cookie-message__link;
+.a-cookie-message__text > a {
+  color: $cookie-message__link-color;
 }

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,40 @@
+import { storiesOf } from '@storybook/vue'
+
+import ALink from '../../atoms/link/Link.vue'
+import ACookieMessage from './CookieMessage.vue'
+
+storiesOf('Molecules/CookieMessage', module)
+  .addParameters({ info: true })
+  .add('Default', () => ({
+    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."
+      </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>
+    `
+  }))