feat(home): services (#617)

* feat(home): services

resolves #604

* fix(heading): default h2 for sections

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

components/base/Avatar.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :class="classes" class="base-avatar d-inline-flex">
+    <!-- <v-avatar
+      v-if="outlined"
+      :color="color || 'grey lighten-3'"
+      :size="outlineSize"
+      :style="styles"
+      class="base-avatar__outline"
+      style="opacity: 0.4"
+    /> -->
+
+    <v-avatar
+      :color="color || 'white'"
+      :size="size"
+      class="base-avatar__avatar"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <base-icon v-if="icon" :dark="dark" :size="size / 2" :icon="icon">
+      </base-icon>
+    </v-avatar>
+  </div>
+</template>
+
+<script>
+import BaseIcon from '~/components/base/Icon.vue';
+export default {
+  name: 'BaseAvatar',
+
+  components: { BaseIcon },
+
+  props: {
+    color: { type: String, default: null },
+    dark: Boolean,
+    icon: { type: [String, Object], default: null },
+    outlined: Boolean,
+    size: {
+      type: [Number, String],
+      default: 56,
+    },
+  },
+
+  data: () => ({
+    multiply: 6,
+  }),
+
+  computed: {
+    classes() {
+      return [this.outlined && 'base-avatar--outlined'];
+    },
+    outlineSize() {
+      return Number(this.size) + this.size / this.multiply;
+    },
+    styles() {
+      const margin = this.size / (this.multiply * 2);
+
+      return {
+        // Aligns the outline content with the content
+        margin: `-${margin}px 0 0 -${margin}px`,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+// .base-avatar
+//   border-radius: 50%
+//   position: relative
+//   overflow: visible
+
+//   &__outline
+//     position: absolute !important
+//     left: 0
+//     top: 0
+
+//   &--outlined
+//     background-color: #FFFFFF
+
+//     .base-avatar__avatar
+//       border: thin solid rgba(0, 0, 0, .12) !important
+</style>

components/base/AvatarCard.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="classes" class="pt-2">
+    <base-avatar
+      v-if="icon"
+      :color="color"
+      :dark="dark"
+      :icon="icon"
+      :outlined="outlined"
+      :size="size"
+      class="mb-3"
+    />
+
+    <div :class="horizontal && title && 'ml-6'">
+      <base-title :title="title" class="text-uppercase" space="3" />
+
+      <base-body
+        v-if="text || $slots.default"
+        :space="horizontal ? 0 : undefined"
+        :text="text"
+        class="mx-auto"
+        max-width="700"
+      >
+        <slot />
+      </base-body>
+    </div>
+  </div>
+</template>
+
+<script>
+// Mixins
+import Heading from '@/mixins/heading';
+
+import BaseAvatar from '~/components/base/Avatar';
+import BaseBody from '~/components/base/Body';
+import BaseTitle from '~/components/base/Title';
+
+export default {
+  name: 'BaseAvatarCard',
+
+  components: { BaseBody, BaseAvatar, BaseTitle },
+
+  mixins: [Heading],
+
+  props: {
+    align: {
+      type: String,
+      default: 'left',
+    },
+    color: { type: String, default: null },
+    dark: Boolean,
+    horizontal: Boolean,
+    icon: { type: [String, Object], default: null },
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+    space: {
+      type: [Number, String],
+      default: 8,
+    },
+    size: {
+      type: [Number, String],
+      default: 72,
+    },
+    text: { type: String, default: null },
+    title: { type: String, default: null },
+  },
+
+  computed: {
+    classes() {
+      const classes = [`mb-${this.space}`];
+
+      if (this.horizontal) {
+        classes.push('d-flex');
+
+        if (!this.$slots.default && !this.text) {
+          classes.push('align-center');
+        }
+      }
+
+      return classes;
+    },
+  },
+};
+</script>

components/base/Body.vue

@@ -0,0 +1,59 @@
+<template>
+  <component
+    :is="tag"
+    :class="classes"
+    :style="styles"
+    class="base-body body-1"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </component>
+</template>
+
+<script>
+// Mixins
+import Heading from '@/mixins/heading';
+
+export default {
+  name: 'BaseBody',
+
+  mixins: [Heading],
+
+  inject: ['theme'],
+
+  props: {
+    maxWidth: {
+      type: [Number, String],
+      default: undefined,
+    },
+    space: {
+      type: [Number, String],
+      default: 10,
+    },
+    tag: {
+      type: String,
+      default: 'p',
+    },
+    text: { type: String, default: null },
+  },
+
+  computed: {
+    classes() {
+      return [
+        'grey--text',
+        this.theme.isDark ? 'text--lighten-1' : 'text--darken-1',
+        `text-${this.heading.align}`,
+        `mb-${this.space}`,
+      ];
+    },
+    styles() {
+      return {
+        maxWidth: `${this.maxWidth}px`,
+      };
+    },
+  },
+};
+</script>

components/base/Divider.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-responsive
+    :class="classes"
+    class="base-divider"
+    max-width="28"
+    min-height="3"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <!-- <v-divider /> -->
+  </v-responsive>
+</template>
+
+<script>
+// Mixins
+import Heading from '@/mixins/heading';
+
+export default {
+  name: 'BaseDivider',
+
+  mixins: [Heading],
+
+  props: {
+    color: { type: String, default: null },
+    dense: Boolean,
+    space: {
+      type: [Number, String],
+      default: 6,
+    },
+  },
+
+  computed: {
+    classes() {
+      return [
+        this.color,
+        this.margin,
+        `mb-${this.space}`,
+        // this.dense && 'base-divider--dense',
+      ];
+    },
+    margin() {
+      switch (this.align) {
+        case 'left':
+          return 'mr-auto';
+        case 'right':
+          return 'ml-auto';
+        default:
+          return 'mx-auto';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+// .base-divider .v-divider
+//   border-width: 3px 0 0 0 !important
+
+// .base-divider.base-divider--dense .v-divider
+//   border-width: 2px 0 0 0 !important
+</style>

components/base/Heading.vue

@@ -0,0 +1,91 @@
+<template>
+  <component :is="tag" :class="classes" v-bind="$attrs" v-on="$listeners">
+    <template v-if="title">
+      {{ title }}
+    </template>
+
+    <slot v-else />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'BaseHeading',
+
+  inject: {
+    theme: {
+      default: () => ({ isDark: false }),
+    },
+    heading: {
+      default: () => ({ align: 'left' }),
+    },
+  },
+
+  provide() {
+    return {
+      heading: {
+        align: this.align,
+      },
+    };
+  },
+
+  props: {
+    align: {
+      type: String,
+      default() {
+        return this.heading.align;
+      },
+    },
+    dense: {
+      type: Boolean,
+      default() {
+        return this.isDense;
+      },
+    },
+    size: {
+      type: String,
+      default: 'display-2',
+    },
+    space: {
+      type: [Number, String],
+      default: 4,
+    },
+    mobileSize: {
+      type: String,
+      default: 'display-1',
+    },
+    mobileBreakPoint: {
+      type: [Number, String],
+      default: 768,
+    },
+    tag: {
+      type: String,
+      default: 'h2',
+    },
+    title: { type: String, default: null },
+    weight: {
+      type: String,
+      default: 'black',
+    },
+  },
+
+  computed: {
+    classes() {
+      const classes = [
+        // this.fontSize,
+        // `font-weight-${this.weight}`,
+        `mb-${this.space}`,
+        `text-${this.align}`,
+        this.theme.isDark && 'white--text',
+      ];
+
+      return classes;
+    },
+    fontSize() {
+      return this.$vuetify.breakpoint.width >= this.mobileBreakPoint
+        ? this.size
+        : this.mobileSize;
+    },
+  },
+};
+</script>