KCardGrid part 2: Add KCardGrid with the base layouts + Add selection controls + Final documentation for KCard and KCardGrid + Few KCard bugfixes and improvements

dev_docs/04_how_to_update_docs.md

@@ -19,20 +19,33 @@ Layout:
 * `<DocsPageTemplate />` - the main page template used by all pages
 * `<DocsPageSection />` - sections within the page template with auto-generated anchor links
 
+Navigation:
+
+* `<DocsSubNav />` - for showing sub-navigation as a list of links
+
 Links:
 
 * `<DocsAnchorTarget />` - for creating anchor link targets
 * `<DocsExternalLink />` - links to an external website
 * `<DocsInternalLink />` - links to pages within the design system
 * `<DocsLibraryLink />` - links to library components with `<code>` formatting
 
+Content:
+
+* `<DocsToggleButton />` with `<DocsToggleContent />` - toggles visibility of content
+* `<DocsTable />` - for showing styled table
+
 Illustration:
 
-* `<DocsShow />` - for showing a component
+* `<DocsShow />` - for showing live examples
+* `<DocsShowCode />` - for showing code
 * `<DocsDoNot />` - for showing side-by-side "Do" and "Do not" illustrations
 * `<DocsColorBlock />` - for showing a theme color
 * `<DocsIconBlock />` - for showing an icon
 
+
+
+
 All Kolibri shared components (for example `KButton`) are also available to be used within content. However, this should be limited to using them for _examples of usage_ only.
 
 ## Updating the library components documentation

docs/common/DocsPageSection.vue

@@ -36,7 +36,7 @@
     },
     computed: {
       style() {
-        return this.fullwidth ? {} : { maxWidth: '700px' };
+        return this.fullwidth ? {} : { maxWidth: '900px' };
       },
     },
     mounted() {

docs/common/DocsSubNav.vue

@@ -0,0 +1,48 @@
+<template>
+
+  <nav class="nav">
+    <ol>
+      <li
+        v-for="(item, key) in items"
+        :key="key"
+      >
+        <a :href="item.href">{{ item.text }}</a>
+      </li>
+    </ol>
+  </nav>
+
+</template>
+
+
+<script>
+
+  /**
+   * Displays sub-navigation as a list of links
+   */
+  export default {
+    name: 'DocsSubNav',
+    props: {
+      /**
+       * List of navigation items { text, href}
+       */
+      items: {
+        type: Array,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  ol {
+    padding-left: 22px;
+  }
+
+  .nav {
+    margin: 12px 0;
+  }
+
+</style>

docs/common/DocsTable.vue

@@ -0,0 +1,37 @@
+<template>
+
+  <table>
+    <slot></slot>
+  </table>
+
+</template>
+
+
+<script>
+
+  /**
+   * A table component
+   */
+  export default {
+    name: 'DocsTable',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~/assets/definitions';
+
+  table {
+    border-collapse: collapse;
+  }
+
+  th,
+  td {
+    padding: 8px;
+    text-align: left;
+    border: 1px solid $border-color;
+  }
+
+</style>

docs/common/DocsToggleButton.vue

@@ -0,0 +1,91 @@
+<template>
+
+  <button class="toggle" @click="onClick">
+    <span v-if="show">{{ hideText }}<KIcon icon="dropup" /></span>
+    <span v-else>{{ showText }}<KIcon icon="dropdown" /></span>
+  </button>
+
+</template>
+
+
+<script>
+
+  /**
+   * Button that toggles the content of 'DocsToggleContent'
+   */
+  export default {
+    name: 'DocsToggleButton',
+    props: {
+      /**
+       * id of the corresponding 'DocsToggleContent'
+       */
+      contentId: {
+        type: String,
+        required: true,
+      },
+      /**
+       * Label for the toggle button
+       * for showing the content
+       */
+      showText: {
+        type: String,
+        required: false,
+        default: 'Show more',
+      },
+      /**
+       * Label for the toggle button
+       * for hiding the content
+       */
+      hideText: {
+        type: String,
+        required: false,
+        default: 'Hide',
+      },
+    },
+    data() {
+      return {
+        show: false,
+      };
+    },
+    methods: {
+      onClick() {
+        this.show = !this.show;
+        if (this.show) {
+          document.getElementById(this.contentId).style.display = 'block';
+        } else {
+          document.getElementById(this.contentId).style.display = 'none';
+        }
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~/assets/definitions';
+
+  .toggle {
+    display: inline-block; // prevents trailing spaces
+    color: $link-color;
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    transition: $basic-transition;
+
+    svg {
+      fill: $link-color !important;
+      transition: $basic-transition;
+    }
+
+    &:hover {
+      color: $link-hover-color;
+      svg {
+        fill: $link-hover-color;
+      }
+    }
+  }
+
+</style>

docs/common/DocsToggleContent.vue

@@ -0,0 +1,45 @@
+<template>
+
+  <div class="content">
+    <slot></slot>
+  </div>
+
+</template>
+
+
+<script>
+
+  /**
+   * `DocsToggleButton` toggles the visibility
+   * of content provided via the default slot
+   * of its corresponding `DocsToggleContent`
+   *
+   * These two components are linked with `id`
+   * set on the `DocsToggleContent`. This `id`
+   * is then provided to `DocsToggleButton`
+   * via its `contentId` prop.
+   */
+  export default {
+    name: 'DocsToggleContent',
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~/assets/definitions';
+
+  .content {
+    display: none;
+    padding: 16px 24px;
+    margin: 12px 0;
+    border: 1px solid $border-color;
+
+    ul,
+    ol {
+      padding-left: 20px;
+    }
+  }
+
+</style>