Update all linting for latest version of kolibri-format.

.eslintrc.js

@@ -1,18 +1,23 @@
 const esLintConfig = require('kolibri-format/.eslintrc');
 
-// Vuetify's helper attributes use hyphens and they would
-// not be recognized if auto-formatted to camel case
-esLintConfig.rules['vue/attribute-hyphenation'] = 0;
-
-// This rule conflicts with Nuxt page naming
-esLintConfig.rules['kolibri/vue-filename-and-component-name-match'] = 0;
+const nuxtDocsRules = {
+  // Vuetify's helper attributes use hyphens and they would
+  // not be recognized if auto-formatted to camel case
+  'vue/attribute-hyphenation': 0,
+  // This rule conflicts with Nuxt page naming
+  'vue/no-reserved-component-names': 0,
+  // This rule conflicts with Nuxt page naming
+  'kolibri/vue-filename-and-component-name-match': 0,
+  // max-len rules are unhelpful for documentation
+  'max-len': 0,
+  'vue/max-len': 0,
+};
 
-// This rule is currently disabled in kolibri-format/.eslintrc
-esLintConfig.rules['vue/require-default-prop'] = 1;
+esLintConfig.overrides.push({
+  files: ['docs/**/*.vue'],
+  rules: nuxtDocsRules,
+});
 
-// max-len rules are unhelpful for documentation
-esLintConfig.rules['max-len'] = 0;
-esLintConfig.rules['vue/max-len'] = 0;
 
 // Allow nuxt resources to be found
 esLintConfig.settings['import/resolver'].nuxt = {

.prettierrc.js

@@ -1 +1 @@
-module.exports = require('kolibri-tools/.prettierrc');
+module.exports = require('kolibri-format/.prettierrc');

docs/assets/definitions.scss

@@ -4,5 +4,6 @@ $code-color: #696680;
 $link-color: #368d74;
 $link-hover-color: #26614d;
 $selection-color: #badbd2;
-$basic-transition: color 0.25s ease, fill 0.25s ease;
+$basic-transition: color 0.25s ease,
+  fill 0.25s ease;
 $nav-width: 260px;

docs/common/DocsAnchorTarget.vue

@@ -14,7 +14,11 @@
       />
     </DocsInternalLink>
     <!-- hidden target to account for variable height of header -->
-    <a :id="anchorId" :href="anchor" class="offset-target">#</a>
+    <a
+      :id="anchorId"
+      :href="anchor"
+      class="offset-target"
+    >#</a>
   </div>
 
 </template>

docs/common/DocsColorBlock.vue

@@ -1,9 +1,15 @@
 <template>
 
   <div class="block-wrapper">
-    <div class="color-block" :style="{ backgroundColor: value }"></div>
+    <div
+      class="color-block"
+      :style="{ backgroundColor: value }"
+    ></div>
     <div class="code name">
-      <code>{{ name }}</code><DocsAnchorTarget v-if="definition" :anchor="anchor" />
+      <code>{{ name }}</code><DocsAnchorTarget
+        v-if="definition"
+        :anchor="anchor"
+      />
     </div>
     <div class="code value">
       <DocsInternalLink
@@ -15,7 +21,10 @@
       <code v-else-if="isToken">{{ tokenSource }}</code>
       <code v-else>{{ value }}</code>
     </div>
-    <p v-if="$slots.default" class="description">
+    <p
+      v-if="$slots.default"
+      class="description"
+    >
       <slot></slot>
     </p>
   </div>

docs/common/DocsDoNot.vue

@@ -1,18 +1,20 @@
 <template>
 
   <div>
-    <div v-if="$slots.do" class="show">
-      <div class="header">
-        <span class="do mark">✔</span> Do
-      </div>
+    <div
+      v-if="$slots.do"
+      class="show"
+    >
+      <div class="header"><span class="do mark">✔</span> Do</div>
       <div class="content">
         <slot name="do"></slot>
       </div>
     </div>
-    <div v-if="$slots.not" class="show">
-      <div class="header">
-        <span class="mark not">✘</span> Don't
-      </div>
+    <div
+      v-if="$slots.not"
+      class="show"
+    >
+      <div class="header"><span class="mark not">✘</span> Don't</div>
       <div class="content">
         <slot name="not"></slot>
       </div>

docs/common/DocsExternalLink.vue

@@ -2,7 +2,16 @@
 
   <!-- eslint-disable -->
   <!-- prevent line from wrapping so that icon displays correctly -->
-  <a :href="href" target="_blank"><template v-if="text">{{ text }}</template><template v-else><slot></slot></template><KIcon icon="openNewTab" class="pop" disableColor /></a>
+  <a
+    :href="href"
+    target="_blank"
+    ><template v-if="text">{{ text }}</template
+    ><template v-else><slot></slot></template
+    ><KIcon
+      icon="openNewTab"
+      class="pop"
+      disableColor
+  /></a>
   <!-- eslint-enable -->
 
 </template>

docs/common/DocsGithubLink.vue

@@ -1,15 +1,19 @@
 <template>
 
-  <a :href="linkUrl" target="_blank">
+  <a
+    :href="linkUrl"
+    target="_blank"
+  >
     <svg
       class="logo"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title>GitHub</title>
-      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-    </svg><span>{{ linkText }}</span>
+      <path
+        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+      /></svg><span>{{ linkText }}</span>
   </a>
 
 </template>

docs/common/DocsPageSection.vue

@@ -1,9 +1,15 @@
 <template>
 
-  <section :style="style" class="section-wrapper">
+  <section
+    :style="style"
+    class="section-wrapper"
+  >
     <h2 v-if="title">
       {{ title }}
-      <DocsAnchorTarget v-if="anchor" :anchor="anchor" />
+      <DocsAnchorTarget
+        v-if="anchor"
+        :anchor="anchor"
+      />
     </h2>
     <slot></slot>
   </section>

docs/common/DocsPageTemplate/BranchLink.vue

@@ -6,11 +6,12 @@
       :href="linkUrl"
       :text="linkText"
     />
-    <span v-else>
-      Local environment
-    </span>
+    <span v-else> Local environment </span>
     <span>|</span>
-    <DocsGithubLink text="Release notes" href="https://github.com/learningequality/kolibri-design-system/releases" />
+    <DocsGithubLink
+      text="Release notes"
+      href="https://github.com/learningequality/kolibri-design-system/releases"
+    />
   </div>
 
 </template>

docs/common/DocsPageTemplate/Header.vue

@@ -1,10 +1,16 @@
 <template>
 
-  <div class="header" :class="{ scrolled }">
+  <div
+    class="header"
+    :class="{ scrolled }"
+  >
     <div>
       <h1 class="header-text">
         <span :class="{ code: codeStyle }">{{ title }}</span>
-        <a href="#" @click="scrollToTop">
+        <a
+          href="#"
+          @click="scrollToTop"
+        >
           <file-svg
             src="../../assets/link.svg"
             class="icon-link"
@@ -15,10 +21,20 @@
       </h1>
       <BranchLink style="float: right" />
     </div>
-    <div style="clear: both;"></div>
-    <ul v-if="sections.length" class="nav">
-      <li v-for="(section, i) in sections" :key="i" class="nav-item">
-        <DocsInternalLink :href="section.anchor" :text="section.title" />
+    <div style="clear: both"></div>
+    <ul
+      v-if="sections.length"
+      class="nav"
+    >
+      <li
+        v-for="(section, i) in sections"
+        :key="i"
+        class="nav-item"
+      >
+        <DocsInternalLink
+          :href="section.anchor"
+          :text="section.title"
+        />
       </li>
     </ul>
   </div>

docs/common/DocsPageTemplate/SideNav/NavLink.vue

@@ -11,7 +11,7 @@
     v-else
     class="block enabled-link"
     :href="page.path"
-    :class="{ currentPage, code: page.isCode }"
+    :class="{ 'current-page': currentPage, code: page.isCode }"
   >
     {{ page.title }}
   </a>
@@ -74,7 +74,7 @@
     }
   }
 
-  .currentPage {
+  .current-page {
     color: black;
     background-color: $border-color;
 

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -8,7 +8,11 @@
     >
       <template if="loaded">
         <h1 class="header">
-          <KLogo altText="Design System" size="60" :showBackground="true" />
+          <KLogo
+            altText="Design System"
+            size="60"
+            :showBackground="true"
+          />
           <span class="header-text">Design System</span>
         </h1>
 
@@ -22,7 +26,6 @@
           />
         </div>
       </template>
-
     </nav>
 
     <!-- used to help indicate that there is more to see if one scrolls down -->
@@ -64,7 +67,7 @@
           // otherwise, check for matching pages by title and keywords
           else {
             const matchingPages = section.pages.filter(page =>
-              matches(this.terms, page.title + page.keywords.join(' '))
+              matches(this.terms, page.title + page.keywords.join(' ')),
             );
             if (matchingPages.length) {
               toc.push(section.clone({ pages: matchingPages }));

docs/common/DocsPageTemplate/index.vue

@@ -14,7 +14,7 @@
         :sections="pageSections"
         :title="page.title"
         :codeStyle="page.isCode"
-        style="visibility: hidden;"
+        style="visibility: hidden"
       />
 
       <div class="content">
@@ -26,7 +26,10 @@
           :anchor="section.anchor"
           fullwidth
         >
-          <component :is="section.component" :api="api[section.key]" />
+          <component
+            :is="section.component"
+            :api="api[section.key]"
+          />
         </DocsPageSection>
       </div>
     </div>
@@ -57,7 +60,7 @@
         node =>
           node.componentOptions &&
           node.componentOptions.tag === DocsPageSection.name &&
-          node.componentOptions.propsData.anchor
+          node.componentOptions.propsData.anchor,
       )
       .map(node => node.componentOptions.propsData);
   }

docs/common/DocsPageTemplate/jsdocs/EventsTable.vue

@@ -4,19 +4,23 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(event, i) in publicApi" :key="i">
+      <tr
+        v-for="(event, i) in publicApi"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ event.name }}</code>
           <DocsAnchorTarget :anchor="`#event:${event.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="event.description" :source="event.description" />
+          <vue-simple-markdown
+            v-if="event.description"
+            :source="event.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
       </tr>

docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue

@@ -4,19 +4,23 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">
-          Description
-        </th>
+        <th class="stretch">Description</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(method, i) in api" :key="i">
+      <tr
+        v-for="(method, i) in api"
+        :key="i"
+      >
         <td class="first-col">
           <code>{{ method.name }}</code>
           <DocsAnchorTarget :anchor="`#method:${method.name}`" />
         </td>
         <td>
-          <vue-simple-markdown v-if="method.description" :source="method.description" />
+          <vue-simple-markdown
+            v-if="method.description"
+            :source="method.description"
+          />
           <KEmptyPlaceholder v-else />
         </td>
       </tr>