Made the KLogo component

CHANGELOG.md

@@ -4,7 +4,19 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Upcoming version
 
-<!-- All new changelog items should come here -->
+
+## Version 2.0.0
+
+- [#460]
+  - **Description:** Implement KLogo
+  - **Products impact:** new API
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/373
+  - **Components:** KLogo
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#460]: https://github.com/learningequality/kolibri-design-system/pull/460
 
 - [#470]
   - **Description:** Fix bug and add test guard in MediaQuery implementation
@@ -50,8 +62,6 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#463]: https://github.com/learningequality/kolibri-design-system/pull/463
 
-## Version 2.0.0-beta0 (released - do not add new items)
-
 - [#462]
   - **Description:** Fix internal links in design system documentation
   - **Products impact:** none

docs/pages/klogo.vue

@@ -0,0 +1,51 @@
+<template>
+
+  <DocsPageTemplate apiDocs>
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>Shows Kolibri logo.</p>
+
+      <DocsShow>
+        <KLogo
+          altText="Kolibri Logo"
+          :height="150"
+          width="100%"
+          :maxWidth="150"
+        />
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri logo"
+          :height="150"
+          width="100%"
+          :maxWidth="150"
+        />
+      </DocsShowCode>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <h3>Alternative text</h3>
+
+      <p>Alternative text (<code>altText</code>) is required for the logo image. When creating it, consider the following:</p>
+      <ul>
+        <li>If the logo is used as a flat image, you can use the string "Kolibri logo"</li>
+        <li>If the the logo is used as a link, then the alternative text needs to give the context where the link is leading (for example "Go to home page", or similar)</li>
+      </ul>
+    </DocsPageSection>
+
+    <DocsPageSection title="Related" anchor="#related">
+      <ul>
+        <li>
+          <code>KLogo</code> is derived from <DocsLibraryLink component="KImg" /> and provides a subset of <code>KImg</code>'s API.
+        </li>
+      </ul>
+    </DocsPageSection>
+  </DocsPageTemplate>
+
+</template>
+
+
+<script>
+
+  export default {};
+
+</script>

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,82 @@
+<template>
+
+  <KImg
+    :src="logo"
+    :altText="altText"
+    :height="height"
+    :width="width"
+    :maxHeight="maxHeight"
+    :minHeight="minHeight"
+    :maxWidth="maxWidth"
+    :minWidth="minWidth"
+  />
+
+</template>
+
+
+<script>
+
+  import kolibriLogo from './kolibri-logo.svg';
+
+  export default {
+    name: 'KLogo',
+    props: {
+      /**
+       * Alternative text for the logo
+       */
+      altText: {
+        type: String,
+        required: true,
+        default: '',
+      },
+      /**
+       * Sets the height for the logo
+       */
+      height: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the width for the logo
+       */
+      width: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the maximum height for the logo
+       */
+      maxHeight: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the minimum height for the logo
+       */
+      minHeight: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * Sets the maximum width for the logo
+       */
+      maxWidth: {
+        type: [Number, String],
+        default: undefined,
+      },
+      /**
+       * 	Sets the minimum width for the logo
+       */
+      minWidth: {
+        type: [Number, String],
+        default: undefined,
+      },
+    },
+    computed: {
+      logo() {
+        return kolibriLogo;
+      },
+    },
+  };
+
+</script>

lib/KThemePlugin.js

@@ -31,6 +31,7 @@ import KTabsPanel from './tabs/KTabsPanel';
 import KTextbox from './KTextbox';
 import KTooltip from './KTooltip';
 import KTransition from './KTransition';
+import KLogo from './KLogo';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -108,6 +109,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KImg', KImg);
   Vue.component('KLabeledIcon', KLabeledIcon);
   Vue.component('KLinearLoader', KLinearLoader);
+  Vue.component('KLogo', KLogo);
   Vue.component('KModal', KModal);
   Vue.component('KOptionalText', KOptionalText);
   Vue.component('KPageContainer', KPageContainer);