Merge pull request #561 from rtibbles/new_logo_new_you

Update the kolibri logo.

CHANGELOG.md

@@ -4,6 +4,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 4.x.x (`release-v4` branch)
 
+- [#561]
+  - **Description:** Update KLogo for new branding guidelines
+  - **Products impact:** Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.
+  - **Addresses:** Updates logo to new logo, adds all permissible alternates, adds animated form.
+  - **Components:** KLogo
+  - **Breaking:** Yes
+  - **Impacts a11y:** No
+  - **Guidance:** Rendering the Kolibri logo can now be done using the KLogo component, as well as the loading animation.
+
+[#561]: https://github.com/learningequality/kolibri-design-system/pull/561
+
 - [#580]
   - **Description:** Remove use of KResponsiveWindowMixin internally
   - **Products impact:** - none

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -8,7 +8,7 @@
     >
       <template if="loaded">
         <h1 class="header">
-          <file-svg src="./kolibri-logo.svg" class="logo" />
+          <KLogo altText="Design System" size="60" :showBackground="true" />
           <span class="header-text">Design System</span>
         </h1>
 

docs/pages/klogo.vue

@@ -2,27 +2,150 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
+      <p><code>KLogo</code> displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <h3>Default display</h3>
       <p>Shows Kolibri logo.</p>
 
       <DocsShow>
         <KLogo
+          ref="defaultLogoNoBackground"
           altText="Kolibri Logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
         />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoNoBackground')">
+            Save SVG
+          </KButton>
+        </div>
       </DocsShow>
       <DocsShowCode language="html">
         <KLogo
           altText="Kolibri logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with backgrounds</h3>
+      <p>Shows Kolibri logo with background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithBackground"
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <p>Shows Kolibri logo with rectangular background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithRectBackground"
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithRectBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with animation</h3>
+      <p>Shows Kolibri logo with loading animation.</p>
+
+      <DocsShow>
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with different color schemes</h3>
+      <p>Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.</p>
+
+      <DocsShow>
+        <template
+          v-for="colorScheme in ['monoBlack', 'monoWhite', 'monoPrimary', 'monoSecondary', 'whiteGrey', 'blackGrey']"
+        >
+          <p :key="`text${colorScheme}`">
+            Color scheme: {{ colorScheme }}
+          </p>
+          <KLogo
+            :ref="`${colorScheme}LogoWithBackground`"
+            :key="colorScheme"
+            class="halfsquare-background"
+            :colorScheme="colorScheme"
+            altText="Kolibri Logo"
+            :showBackground="true"
+            :size="150"
+          />
+          <div 
+            :key="`button${colorScheme}`"
+            style="width: 100%; text-align: center; display: none;"
+          >
+            <KButton @click="saveSVG(`${colorScheme}LogoWithBackground`)">
+              Save SVG
+            </KButton>
+          </div>
+        </template>
+      </DocsShow>
+
+      <h3>Dimensions</h3>
+
+      <p>
+        You can apply the most common dimensions to the image container via the props <DocsInternalLink href="/kimg#prop:size">
+          <code>size</code>
+        </DocsInternalLink>, <DocsInternalLink href="/kimg#prop:maxSize">
+          <code>maxSize</code>
+        </DocsInternalLink>, and <DocsInternalLink href="/kimg#prop:minSize">
+          <code>minSize</code>
+        </DocsInternalLink>. Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: <code>%, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw</code>. If you don't provide a unit, <code>px</code> will be used by default.
+      </p>
+
+      <DocsShowCode language="html">
+        <KLogo
+          altText="A hummingbird logo"
+          size="250px"
+          maxSize="10vw"
+          :minSize="25"
         />
       </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>
@@ -32,20 +155,61 @@
       </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 {};
+  // Note for developers, to utilize the saveSVG method, select all of:
+  // style="width: 100%; text-align: center; display: none;"
+  // and replace with:
+  // style="width: 100%; text-align: center;"
+  // we keep this hidden for future usage, but it doesn't need to be here all the time.
+
+  export default {
+    methods: {
+      saveSVG(refName) {
+        const svgElement = this.$refs[refName].$el || this.$refs[refName][0].$el;
+        // Get the SVG data as a string
+        const svgData = svgElement.outerHTML;
+        // Create a Blob from the SVG data
+        const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        // Create a URL for the Blob
+        const url = URL.createObjectURL(blob);
+
+        // Create a temporary anchor (`<a>`) element
+        const downloadLink = document.createElement('a');
+        // Set the download attribute to the desired file name
+        downloadLink.download = `${refName}.svg`;
+        // Set the href to the Blob URL
+        downloadLink.href = url;
+        // Append the anchor to the document
+        document.body.appendChild(downloadLink);
+        // Programmatically click the anchor to trigger the download
+        downloadLink.click();
+        // Clean up by revoking the Blob URL and removing the anchor from the document
+        URL.revokeObjectURL(url);
+        downloadLink.remove();
+      },
+    },
+  };
 
 </script>
+
+
+<style scoped>
+
+  .halfsquare-background {
+    background-size: 10px 10px; /* size of the squares */
+    background-image: 
+      linear-gradient(45deg, #ffffff 50%, #F5F5F5 50%),
+      linear-gradient(45deg, #F5F5F5 50%, #ffffff 50%);
+    background-position:
+      0 0, /* this is the position of the first pattern */
+      5px 5px; /* this position offsets the second pattern to create the checker effect */
+    background-repeat: repeat;
+  }
+
+</style>

lib/KImg/index.vue

@@ -53,6 +53,8 @@
 
 <script>
 
+  import { validateAndFormatUnits } from './utils';
+
   const ScaleTypes = {
     CENTER_INSIDE: 'centerInside',
     CONTAIN: 'contain',
@@ -226,12 +228,12 @@
             backgroundColor,
             borderRadius,
             overflow: 'hidden',
-            height: this.validateAndFormatUnits(this.height),
-            width: this.validateAndFormatUnits(this.width),
-            maxHeight: this.validateAndFormatUnits(this.maxHeight),
-            minHeight: this.validateAndFormatUnits(this.minHeight),
-            maxWidth: this.validateAndFormatUnits(this.maxWidth),
-            minWidth: this.validateAndFormatUnits(this.minWidth),
+            height: validateAndFormatUnits(this.height),
+            width: validateAndFormatUnits(this.width),
+            maxHeight: validateAndFormatUnits(this.maxHeight),
+            minHeight: validateAndFormatUnits(this.minHeight),
+            maxWidth: validateAndFormatUnits(this.maxWidth),
+            minWidth: validateAndFormatUnits(this.minWidth),
           },
           ratioContainer: {
             display: 'block',
@@ -358,36 +360,6 @@
       }
     },
     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;
-            }
-          }
-        }
-      },
       onError(event) {
         /**
          * Emitted when the image fails to load. The DOM event that triggered the error is available in the payload.

lib/KImg/utils.js

@@ -0,0 +1,30 @@
+export function 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;
+      }
+    }
+  }
+}