feat(#70): add message component

src/components/Message.stories.js

@@ -0,0 +1,38 @@
+import CTMessage from './Message.vue'
+
+export default {
+  title: 'CivicTheme/Organisms/Message',
+  component: CTMessage,
+  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: `<CTMessage v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTMessage>`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Message'
+Default.args = {
+  default: '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: 'The information on this page is currently being updated.',
+  type: 'information'
+}

src/components/Message.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="ct-message"
+    :class="{
+      [themeClass]: true,
+      [`ct-message--${type}`]: type
+    }"
+  >
+    <div class="ct-message__icon">
+      <CTIcon :symbol="icon" />
+    </div>
+
+    <div class="ct-message__content">
+      <div v-if="title" class="ct-message__title" v-text="title" />
+
+      <div class="ct-message__summary">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    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')
+  }
+}
+</script>

test/components/Message.cy.js

@@ -0,0 +1,24 @@
+/* global cy, describe, it */
+import Message from '../../src/components/Message.vue'
+import CTIcon from '../../src/components/Icon.vue'
+
+Message.components = { CTIcon }
+
+const propsData = {
+  title: 'The information on this page is currently being updated.',
+  type: 'information'
+}
+const slots = {
+  default: '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.',
+}
+
+describe('Organisms/Message', () => {
+  it('Default', () => {
+    cy.standardComponentTest(Message, {
+      mountOptions: {
+        propsData,
+        slots
+      }
+    })
+  })
+})