Made the KLogo component

docs/pages/KLogo.vue

@@ -0,0 +1,111 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <div>
+        Use <DocsLibraryLink component="KLogo" /> component where the kolibri Logo is needed.
+
+        <h3>Sample implementations of <DocsLibraryLink component="KLogo" /> including props:</h3>
+
+        <div>
+          Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g. <code>px</code>,
+          <code>em</code>, <code>vh</code>).
+        </div>
+
+        <div class="img-example-1">
+          <DocsShow>
+            <KLogo
+              altText="KolibriLogo"
+              :height="'250.2px'"
+              :width="225.5"
+              :maxHeight="600"
+              :minWidth="25"
+            />
+          </DocsShow>
+          <DocsShowCode language="html">
+            <KLogo
+              altText="KolibriLogo"
+              :height="'250.2px'"
+              :width="225.5"
+            />
+          </DocsShowCode>
+        </div>
+      </div>
+
+      <div class="img-example-2">
+        <DocsLibraryLink component="KLogo" /> requires alternative text that describes the image, or it will throw an error.
+        <div>
+          <div>
+            <DocsShow>
+              <KLogo
+                altText="kolibriLogo"
+                :height="50"
+                :width="50"
+              />
+            </DocsShow>
+          </div>
+          <DocsShowCode language="html">
+            <KLogo
+              altText="kolibriLogo"
+              :height="50"
+              :width="50"
+            />
+          </DocsShowCode>
+        </div>
+      </div>
+
+      <div>
+        If dimensions for the image are not specified, the size will default to the height and width of the source
+        image.
+        <DocsShow>
+          <KLogo
+            altText="KolibriLogo"
+          />
+        </DocsShow>
+        <DocsShowCode language="html">
+          <KLogo
+            altText="KolibriLogo"
+          />
+        </DocsShowCode>
+
+      </div>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
+
+
+  <script>
+
+  export default {};
+
+</script>
+
+
+  <style lang="scss" scoped>
+
+  .img-example-1 {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .img-example-2 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .img-example-2 > div {
+    display: flex;
+  }
+
+  .img-example-2 > div > div {
+    margin-top: 30px;
+  }
+
+</style>
+
+
+
+
+
+

docs/tableOfContents.js

@@ -270,6 +270,11 @@ export default [
         isCode: true,
         keywords: ['image', 'img'],
       }),
+      new Page({
+        path: '/klogo',
+        title: 'KLogo',
+        isCode: true,
+      }),
       new Page({
         path: '/klabeledicon',
         title: 'KLabeledIcon',

lib/KImg.vue

@@ -158,4 +158,4 @@
 </script>
 
 
-<style scoped></style>
+<style scoped></style>

lib/KLogo/index.vue

@@ -0,0 +1,150 @@
+<template>
+
+  <div>
+    <KImg
+      :src="logo"
+      :altText="alternateText"
+      :style="styleObject"
+    />
+  </div>
+
+</template>
+
+<script>
+
+  import KImg from '../KImg.vue';
+  import kolibriLogo from './kolibri-logo.svg';
+
+  export default {
+    name: 'KLogo',
+    props: {
+      /**
+       * Alternate text for the image. This is required and will throw a warning when it's not provided (empty) unless isDecorative is true
+       */
+      altText: {
+        type: String,
+        default: '',
+      },
+      /**
+       * Sets the height for the component
+       */
+      height: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the width for the component
+       */
+      width: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the maximum height for the component
+       */
+      maxHeight: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the minimum height for the component
+       */
+      minHeight: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the maximum width for the component
+       */
+      maxWidth: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * 	Sets the minimum width for the component
+       */
+      minWidth: {
+        type: [Number, String],
+        default: undefined,
+      },
+    },
+    data() {
+      return {
+        styleObject: {
+          height: this.imgHeight,
+          width: this.imgWidth,
+          maxHeight: this.imgMaxHeight,
+          minHeight: this.imgMinHeight,
+          maxWidth: this.imgMaxWidth,
+          minWidth: this.imgMinWidth,
+        },
+      };
+    },
+    computed: {
+      alternateText() {
+        return this.altText;
+      },
+      imgHeight() {
+        return this.validateAndFormatUnits(this.height);
+      },
+      imgWidth() {
+        return this.validateAndFormatUnits(this.width);
+      },
+      imgMaxHeight() {
+        return this.validateAndFormatUnits(this.maxHeight);
+      },
+      imgMinHeight() {
+        return this.validateAndFormatUnits(this.minHeight);
+      },
+      imgMaxWidth() {
+        return this.validateAndFormatUnits(this.maxWidth);
+      },
+      imgMinWidth() {
+        return this.validateAndFormatUnits(this.minWidth);
+      },
+      logo() {
+        return kolibriLogo;
+      },
+    },
+    created() {
+      console.log(this.altText);
+      if (!this.altText) {
+        throw new Error('Missing required prop - provide altText');
+      }
+    },
+    methods: {
+      validateAndFormatUnits(propValue) {
+        if (propValue) {
+          if (!isNaN(propValue)) {
+            return `${propValue}px`;
+          } else {
+            // split numbers apart from units
+            const [, ...arr] = propValue.match(/(\d*\.?\d+)([a-zA-Z | %]*)/);
+            const validUnits = [
+              '%',
+              'cm',
+              'em',
+              'ex',
+              'ch',
+              'in',
+              'lh',
+              'mm',
+              'px',
+              'rem',
+              'rlh',
+              'vh',
+              'vw',
+            ];
+            // if made up of valid numbers and valid units
+            if (!isNaN(arr[0]) && validUnits.includes(arr[1])) {
+              return propValue;
+            }
+          }
+        }
+      },
+    },
+  };
+
+</script>
+
+<style scoped></style>