feat(#83): add map component

src/components/Map.stories.js

@@ -0,0 +1,32 @@
+import CTMap from './Map.vue'
+
+export default {
+  title: 'CivicTheme/Molecules/Map',
+  component: CTMap,
+  argTypes: {
+    theme: {
+      options: ['dark', 'light'],
+      control: 'select'
+    },
+  },
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTMap v-bind="$props" v-on="$props" />`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Map'
+Default.args = {
+  address: 'Australia',
+  url: 'https://maps.google.com/maps?q=australia&t=&z=3&ie=UTF8&iwloc=&output=embed',
+  viewUrl: 'http://example.com/tublm'
+}

src/components/Map.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :class="`ct-map ${themeClass}`">
+    <div class="container">
+      <div class="row">
+        <div class="col-xxs-12">
+          <div class="ct-map__canvas">
+            <CTIFrame
+              class="ct-map__iframe"
+              :src="url"
+              :title="address"
+            />
+          </div>
+
+          <CTButton
+            v-if="viewUrl"
+            class="ct-map__link"
+            icon="upper-right-arrow"
+            kind="link"
+            text="View in Google Maps"
+            :theme="theme"
+            type="tertiary"
+            :url="viewUrl"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    url: {
+      address: String,
+      default: undefined
+    },
+    url: {
+      type: String,
+      required: true
+    },
+    viewUrl: {
+      type: String,
+      default: undefined
+    }
+  },
+
+  // computed: {
+  //   icon: ({ type }) => ({
+  //     error: 'close-outline',
+  //     information: 'information-mark',
+  //     warning: 'exclamation-mark-1',
+  //     success: 'approve'
+  //   }[type] || 'information-mark')
+  // }
+}
+</script>

test/components/Map.cy.js

@@ -0,0 +1,16 @@
+/* global cy, describe, it */
+import Button from '../../src/components/Map.vue'
+
+describe('Molecules/Map', () => {
+  it('Default', () => {
+    cy.standardComponentTest(Button, {
+      mountOptions: {
+        propsData: {
+          address: 'Australia',
+          url: 'https://maps.google.com/maps?q=australia&t=&z=3&ie=UTF8&iwloc=&output=embed',
+          viewUrl: 'http://example.com/tublm'
+        }
+      }
+    })
+  })
+})