Vue2: Add template components for sandbox

code/renderers/vue/template/components/Button.vue

@@ -0,0 +1,54 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'storybook-button': true,
+        'storybook-button--primary': this.primary,
+        'storybook-button--secondary': !this.primary,
+        [`storybook-button--${this.size}`]: true,
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/Pre.vue

@@ -0,0 +1,29 @@
+<template>
+  <pre data-testid="pre" :style="style">{{ finalText }}</pre>
+</template>
+
+<script>
+export default {
+  name: 'my-pre',
+
+  props: {
+    // deepscan-disable-next-line
+    style: {
+      type: Object,
+    },
+    object: {
+      type: Object,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    finalText() {
+      return props.object ? JSON.stringify(props.object, null, 2) : props.text;
+    },
+  },
+};
+</script>

code/renderers/vue/template/components/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

code/renderers/vue/template/components/index.js

@@ -0,0 +1,6 @@
+import globalThis from 'global';
+
+import Button from './Button.vue';
+import Pre from './Pre.vue';
+
+globalThis.Components = { Button, Pre };