From 6d4d43ac2598f69189111a2c5c1a934b42cff15c Mon Sep 17 00:00:00 2001
From: Stuart Clark <stu@rtclark.net>
Date: Thu, 10 Aug 2023 11:44:27 +1000
Subject: [PATCH] feat(#99): add alert component

---
 src/components/Alert.stories.js | 38 ++++++++++++++++
 src/components/Alert.vue        | 78 +++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/components/Alert.stories.js
 create mode 100644 src/components/Alert.vue

diff --git a/src/components/Alert.stories.js b/src/components/Alert.stories.js
new file mode 100644
index 0000000..5d08916
--- /dev/null
+++ b/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'
+}
diff --git a/src/components/Alert.vue b/src/components/Alert.vue
new file mode 100644
index 0000000..0be08b6
--- /dev/null
+++ b/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>