Merge pull request #100 from Realityloop/feature/99-alert

feat(#99): add alert component

src/components/Alert.stories.js

@@ -0,0 +1,38 @@
+import CTAlert from './Alert.vue'
+
+export default {
+  title: 'CivicTheme/Organisms/Alert',
+  component: CTAlert,
+  argTypes: {
+    theme: {
+      options: ['dark', 'light'],
+      control: 'select'
+    },
+    type: {
+      options: ['error', 'information', 'warning', 'success'],
+      control: 'select'
+    }
+  },
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTAlert v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTAlert>`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Alert'
+Default.args = {
+  default: 'Alert description filium morte multavit si sine causa, nollem me tamen laudandis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel elit laoreet, dignissim arcu sit amet, vulputate risus.',
+  title: 'Site information',
+  type: 'information'
+}

src/components/Alert.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="ct-alert"
+    :class="{
+      [themeClass]: true,
+      [`ct-alert--${type}`]: type
+    }"
+    :data-alert-id="id"
+    :data-alert-type="type"
+    data-component-name="ct-alert"
+    role="alert"
+  >
+    <div class="container">
+      <div class="row">
+        <div class="ct-alert__title col-xxs-12 col-m-3">
+          <span class="ct-alert__icon">
+            <CTIcon :symbol="icon" />
+          </span>
+          {{ title }}
+        </div>
+
+        <div class="ct-alert__summary col-xxs-12 col-m-9">
+          <slot />
+
+          <CTButton
+            class="ct-alert__dismiss-button"
+            data-alert-dismiss-trigger=""
+            :id="`dismiss-alert-${id}`"
+            icon="close"
+            type="tertiary"
+            :title="`close ${type} alert`"
+            data-button="true"
+            @click.native.prevent="onClick"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from "../mixins/theme";
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    id: {
+      type: String,
+      default: '0'
+    },
+    title: {
+      type: String,
+      default: undefined,
+    },
+    type: {
+      type: String,
+      default: 'information',
+    },
+  },
+
+  computed: {
+    icon: ({ type }) =>
+      ({
+        error: 'close-outline',
+        information: 'information-mark',
+        warning: 'exclamation-mark-1',
+        success: 'approve',
+      }[type] || 'information-mark'),
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('close', this.id)
+    }
+  }
+}
+</script>