[Release] HdTileSelect component #470

# Changelog

## Features
- ✨ HdTileSelect component (#465)

.nvmrc

@@ -1 +1 @@
-v10.20.1
+v10.21.0

main.js

@@ -10,6 +10,7 @@ export { default as HdResponsive } from './src/components/HdResponsive.vue';
 export { default as HdTable } from './src/components/HdTable.vue';
 export { default as HdTabsMenu } from './src/components/HdTabsMenu.vue';
 export { default as HdTagsList } from './src/components/HdTagsList.vue';
+export { default as HdTileSelect } from './src/components/HdTileSelect.vue';
 export { default as HdTimeslots } from './src/components/HdTimeslots.vue';
 export { default as HdToast } from './src/components/HdToast.vue';
 export { default as HdToggle } from './src/components/HdToggle.vue';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeday-blocks",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "description": "A Vue component library built by Homeday's frontend team.",
   "main": "main.js",
   "repository": {

src/components/HdTileSelect.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="field tile-select">
+    <div class="tile-select__items">
+      <hd-tile-select-item
+        v-for="item in itemsMapped"
+        :key="item.value"
+        :value="item.value"
+        :text="item.text"
+        :model="value"
+        @input="$emit('input', $event)"
+      />
+      <hd-tile-select-editable-item
+        v-if="acceptNewValue"
+        v-bind="$attrs"
+        v-model="customInputModel"
+        :text="customInputText"
+        :model="value"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * @typedef ItemEntryObject
+ * @type {Object}
+ * @property {string}                   text  - Text to be used in the tile
+ * @property {(string|number|boolean)}  value - Value associated with the tile
+ */
+
+import _get from 'lodash/get';
+import HdTileSelectItem from 'homeday-blocks/src/components/HdTileSelectItem.vue';
+import HdTileSelectEditableItem from 'homeday-blocks/src/components/HdTileSelectEditableItem.vue';
+
+export default {
+  name: 'HdTileSelect',
+  inheritAttrs: false,
+  components: {
+    HdTileSelectItem,
+    HdTileSelectEditableItem,
+  },
+  data() {
+    return {
+      customInputModel: '',
+    };
+  },
+  props: {
+    /** @type {(string|number|boolean|ItemEntryObject)[]} */
+    items: {
+      type: Array,
+      required: true,
+      validator(value) {
+        return value.length > 1;
+      },
+    },
+    value: {
+      type: [String, Number, Boolean],
+      default: '',
+    },
+    formatter: {
+      type: Function,
+      default: value => (String(value)),
+    },
+    acceptNewValue: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    customInputModel(newValue) {
+      this.$emit('input', newValue);
+    },
+  },
+  computed: {
+    itemsMapped() {
+      return this.items.map(item => ({
+        value: _get(item, 'value', item),
+        text: this.formatter(_get(item, 'text', item)),
+      }));
+    },
+    customInputText() {
+      if (this.customInputModel === '') {
+        return '+';
+      }
+
+      return this.formatter(this.customInputModel);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
+$item-min-size: 100px;
+$border-width: 1px;
+
+.tile-select {
+  @include font('text-xsmall');
+
+  &__items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax($item-min-size, 1fr));
+    grid-gap: $border-width;
+    background-color: getShade($quaternary-color, 60);
+    border: $border-width solid getShade($quaternary-color, 60);
+    border-radius: 4px;
+    font-weight: 600;
+    overflow: hidden;
+  }
+}
+</style>

src/components/HdTileSelectEditableItem.vue

@@ -0,0 +1,97 @@
+<template>
+  <hd-tile-select-item
+    v-if='!isEditing'
+    class="tile-select-editable-item"
+    :class="{
+      'tile-select-editable-item--selected': isSelected,
+    }"
+    v-bind="$attrs"
+    :value="value"
+    @input="enableEditing"
+  />
+  <input
+    v-else
+    class="tile-select-editable-item tile-select-editable-item--input"
+    :class="{
+      'tile-select-editable-item--selected': isSelected,
+    }"
+    ref="input"
+    :value="value"
+    v-bind="$attrs"
+    @input="$emit('input', $event.target.value)"
+    @focus="enableEditing"
+    @blur="disableEditing"
+    @keydown.enter.prevent.stop="disableEditing"
+  >
+</template>
+
+<script>
+import HdTileSelectItem from 'homeday-blocks/src/components/HdTileSelectItem.vue';
+
+export default {
+  name: 'HdTileSelectEditableItem',
+  inheritAttrs: false,
+  components: {
+    HdTileSelectItem,
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isEditing: false,
+    };
+  },
+  computed: {
+    isSelected() {
+      return this.$attrs.model === this.value;
+    },
+  },
+  methods: {
+    enableEditing() {
+      this.isEditing = true;
+
+      this.$nextTick(() => {
+        this.$refs.input.focus();
+      });
+    },
+    disableEditing() {
+      this.isEditing = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
+.tile-select-editable-item {
+  background-color: getShade($quaternary-color, 40);
+
+  &--selected {
+    background-color: getShade($secondary-color, 110);
+    color: white;
+  }
+
+  &--input{
+    height: 100%;
+    width: 100%;
+    border: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    text-align: center;
+
+    // Hide the browser's controls
+    -moz-appearance: textfield;
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+}
+</style>

src/components/HdTileSelectItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <button
+    class="tile-select-item"
+    type="button"
+    :class="{
+      'tile-select-item--selected': isSelected,
+    }"
+    @click="emitInput"
+    @keydown.enter.space.prevent="emitInput"
+  >
+    {{ text || value }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'HdTileSelectItem',
+  model: {
+    prop: 'model',
+  },
+  props: {
+    model: {
+      type: [String, Number, Boolean],
+      default: '',
+    },
+    value: {
+      type: [String, Number, Boolean],
+      required: true,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isSelected() {
+      return this.model === this.value;
+    },
+  },
+  methods: {
+    emitInput() {
+      this.$emit('input', this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/mixins.scss";
+
+.tile-select-item {
+  cursor: pointer;
+  width: 100%;
+  background-color: white;
+  border: 0;
+  padding: $inset-m;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+
+  &:hover {
+    color: $secondary-color;
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4);
+    z-index: 2;
+  }
+
+  &--selected {
+    background-color: getShade($secondary-color, 110);
+    color: white;
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4);
+    z-index: 1;
+
+    &:hover {
+      color: white;
+    }
+  }
+}
+</style>