From a74b45136eddd08aec74b7b4412bf6f772926534 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 23 May 2021 20:21:29 +0100
Subject: [PATCH] Creates skeleton input and button form component

---
 src/components/FormElements/Button.vue | 52 ++++++++++++++++++
 src/components/FormElements/Input.vue  | 73 ++++++++++++++++++++++++++
 2 files changed, 125 insertions(+)
 create mode 100644 src/components/FormElements/Button.vue
 create mode 100644 src/components/FormElements/Input.vue

diff --git a/src/components/FormElements/Button.vue b/src/components/FormElements/Button.vue
new file mode 100644
index 00000000..c249ca25
--- /dev/null
+++ b/src/components/FormElements/Button.vue
@@ -0,0 +1,52 @@
+<template>
+  <button>
+    <slot name="text"></slot>
+    <slot name="icon"></slot>
+  </button>
+</template>
+
+<script>
+
+export default {
+  name: 'Button',
+  props: {
+    text: String,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+/* Layout settings */
+button {
+  display: flex;
+  justify-content: center;
+  flex-direction: row-reverse;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  margin: 0.5rem auto;
+  font-size: 1.2rem;
+  min-width: 10rem;
+  cursor: pointer;
+  svg {
+    width: 1.2rem;
+    margin: 0 0.5rem;
+    path, g {
+      fill: currentColor;
+    }
+  }
+}
+
+/* Default visual settings, can be overridden when needed */
+button {
+  color: var(--primary);
+  background: var(--background);
+  border: 1px solid var(--primary);
+  border-radius: var(--curve-factor);
+  &:hover {
+    color: var(--background);
+    background: var(--primary);
+    border-color: var(--background);
+  }
+}
+</style>
diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
new file mode 100644
index 00000000..1fd2678c
--- /dev/null
+++ b/src/components/FormElements/Input.vue
@@ -0,0 +1,73 @@
+<template>
+  <div :class="`input-container ${layout}`">
+    <label v-if="label" for="name">{{label}}</label>
+    <input
+      :type="type"
+      :value="value"
+      v-on:input="updateValue($event.target.value)"
+      :name="name"
+      :id="name"
+      :placeholder="placeholder"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Input',
+  props: {
+    value: String, // The value bound to v-model
+    label: String, // An optional label to display above
+    name: String, // Required unique ID value, for accessibility
+    placeholder: String, // Optional placeholder value
+    type: {
+      default: 'text', // Input type, e.g. text, password, number
+      type: String,
+    },
+    layout: { // Layout alignment direction, either horizonal or verical
+      validator: (value) => ['horizontal', 'vertical'].indexOf(value) !== -1,
+      type: String,
+      default: 'vertical',
+    },
+  },
+  methods: {
+    updateValue(value) {
+      this.$emit('input', value);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+div.input-container {
+  margin: 0.25rem auto;
+  display: flex;
+  align-items: baseline;
+  &.vertical {
+    flex-direction: column;
+  }
+  &.horizontal {
+    flex-direction: row;
+    justify-content: space-between;
+    label { margin-right: 0.25rem; }
+  }
+
+  input {
+    min-width: 10rem;
+    padding: 0.5rem 0.75rem;
+    margin: 0.5rem auto;
+    font-size: 1.2rem;
+    box-sizing: border-box;
+    color: var(--primary);
+    background: var(--background);;
+    border: 1px solid var(--primary);
+    border-radius: var(--curve-factor);
+    &:focus {
+      box-shadow: 1px 1px 6px var(--config-settings-color);
+      outline: none;
+    }
+  }
+}
+
+</style>