feat(a-modal): add new component

Author: linspw

src/components/atoms/a-card/a-card.vue

@@ -6,6 +6,7 @@
       [`a-card--variant-${variant}`]: variant,
       [`a-card--elevation-${elevation}`]: elevation,
     }"
+    v-on="$listeners"
   >
     <slot />
   </component>

src/components/atoms/a-icon/a-icon.vue

@@ -8,6 +8,7 @@
       [`a-icon--wrapper-${wrapper}`]: wrapper !== 'default',
     }"
     v-bind="$attrs"
+    v-on="$listeners"
   >
     <i :class="icon" />
   </component>

src/components/atoms/a-select/a-select_deprecated.vue

@@ -23,7 +23,7 @@
       :icon="icon"
       :color="iconColor"
       class="a-select__icon"
-      @click.native="open = !open"
+      @click="open = !open"
     />
 
     <ul

src/components/molecules/a-modal/a-modal.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta, ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions'
+import AModal from './a-modal.vue';
+import { AButton } from "@/components/atoms/a-button";
+
+<Meta title="Design System/Molecules/AModal" component={AModal} />
+
+## AModal
+
+### Default use:
+
+<Canvas>
+  <Story name="Default use">
+    {{
+      components: { AModal, AButton },
+      data() {
+        return { isOpen: false };
+      },
+      template: `<div>
+        <a-button @click="isOpen = !isOpen">Activing</a-button>
+        <a-modal :is-open="isOpen" @closing="isOpen = false">AModal</a-modal>
+      </div>`,
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable of={AModal} />

src/components/molecules/a-modal/a-modal.vue

@@ -0,0 +1,75 @@
+<template>
+  <transition
+    name="a-modal--fade"
+    mode="out-in"
+  >
+    <div
+      v-if="isOpen"
+      class="a-modal__mask"
+    >
+      <div class="a-modal__wrapper">
+        <a-icon
+          icon="fas fa-times"
+          tag="button"
+          class="a-modal__button-close"
+          color="inverse"
+          @click="$emit('closing')"
+        />
+        <a-card class="a-modal__container">
+          <slot />
+        </a-card>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { ACard } from '@/components/atoms/a-card';
+import { AIcon } from '@/components/atoms/a-icon';
+
+export default {
+  components: {
+    ACard,
+    AIcon,
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style>
+.a-modal__mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--colors-scale-grey-high);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.a-modal__wrapper {
+  position: relative;
+}
+
+.a-modal__button-close {
+  position: absolute;
+  right: 0;
+  top: -24px;
+}
+
+.a-modal--fade-enter-active, .a-modal--fade-leave-active {
+  transition: opacity 250ms;
+}
+
+.a-modal--fade-enter, .a-modal--fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/molecules/a-modal/index.js

@@ -0,0 +1,3 @@
+import AModal from './a-modal.vue';
+
+export { AModal };

src/components/molecules/a-toast/a-toast.vue

@@ -19,7 +19,7 @@
       :variant="item.variant"
       class="a-toast__item"
       tag="button"
-      @click.native="handleClick(index)"
+      @click="handleClick(index)"
     >
       <div class="a-toast__icon">
         <AIcon