Merge branch 'new-change3' of github.com:shruti862/kolibri-design-sys…

…tem into new-change3

.eslintrc.js

@@ -1,18 +1,23 @@
-const esLintConfig = require('kolibri-tools/.eslintrc');
+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-tools/.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 = {

.git-blame-ignore-revs

@@ -0,0 +1,5 @@
+# Run this command to always ignore formatting commits in `git blame`
+# git config blame.ignoreRevsFile .git-blame-ignore-revs
+
+# Applied updated linting for kolibri-format to codebase
+cf75a89979022d1f30666613d1a324e9a8da189a

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 10.x
+          node-version: 18.x
 
       - name: Cache Node.js modules
         uses: actions/cache@v4

.github/workflows/notify_team_new_comment.yml

@@ -6,30 +6,6 @@ on:
 
 jobs:
   contributor_issue_comment:
-    name: Contributor issue comment
-
-    if: >-
-      ${{
-        !github.event.issue.pull_request &&
-        github.event.comment.author_association != 'MEMBER' &&
-        github.event.comment.author_association != 'OWNER'
-      }}
-
-    runs-on: ubuntu-latest
-    steps:
-      - name: Escape title double quotes
-        id: escape_title
-        env:
-          ISSUE_TITLE: ${{ github.event.issue.title }}
-        run: echo "ISSUE_TITLE=${ISSUE_TITLE//\"/\\\"}" >> "$GITHUB_OUTPUT"
-
-      - name: Send message to Slack channel
-        env:
-            SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-            SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-        uses: slackapi/[email protected]
-        with:
-          payload: |
-            {
-              "text": "*[KDS] New comment on issue: <${{ github.event.issue.html_url }}#issuecomment-${{ github.event.comment.id }}|${{ steps.escape_title.outputs.ISSUE_TITLE }} by ${{ github.event.comment.user.login }}>*"
-            }
+    uses: learningequality/.github/.github/workflows/notify_team_new_comment.yml@main
+    secrets:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.github/workflows/npm-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '10.x'
+          node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
       - run: npm publish
         env:

.github/workflows/tests.yml

@@ -25,7 +25,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        node-version: '10.x'
+        node-version: '18.x'
     - name: Cache Node.js modules
       uses: actions/cache@v4
       with:

.gitignore

@@ -21,4 +21,10 @@ docs/jsdocs.js
 # IDE
 .idea
 kolibri-design-system.iml
+
+# dev playground
 docs/pages/playground.vue
+
+# env
+.envrc
+.python-version

.prettierrc.js

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

.stylelintrc.js

@@ -1 +1,5 @@
-module.exports = require('kolibri-tools/.stylelintrc');
+const stylelintConfig = require('kolibri-format/.stylelintrc');
+
+stylelintConfig['rules']['selector-pseudo-element-no-unknown'] = [true, { ignorePseudoElements: ['v-deep'] }];
+
+module.exports = stylelintConfig;

CHANGELOG.md

@@ -7,6 +7,121 @@ Changelog is rather internal in nature. See release notes for the public overvie
 <!-- [DO NOT REMOVE-USED BY GH ACTION] PASTE CHANGELOG -->
 
 
+- [#868]
+  - **Description:** Revert regression in KLogo display
+  - **Products impact:** bugfix
+  - **Addresses:** -
+  - **Components:** KLogo
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#868]: https://github.com/learningequality/kolibri-design-system/pull/868
+
+
+
+- [#849]
+  - **Description:** A Reusable action is added to .github repo. This PR makes use of it.
+  - **Products impact:** none
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#849]: https://github.com/learningequality/kolibri-design-system/pull/849
+
+
+
+- [#866]
+  - **Description:** Bump vue-docgen-api from 4.78.0 to 4.79.2
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#866]: https://github.com/learningequality/kolibri-design-system/pull/866
+
+
+
+- [#864]
+  - **Description:** Bump nanoid from 3.3.7 to 3.3.8
+  - **Products impact:** Dev Dependency upgrade
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#864]: https://github.com/learningequality/kolibri-design-system/pull/864
+
+
+
+- [#863]
+  - **Description:** Updates KDS version to 5.0.0-rc11
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#863]: https://github.com/learningequality/kolibri-design-system/pull/863
+
+
+
+- [#504]
+  - **Description:** Remove use of /deep/ in favour of ::v-deep
+  - **Products impact:** none
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#504]: https://github.com/learningequality/kolibri-design-system/pull/504
+
+
+
+- [#645]
+  - **Description:** Upgrades Node.js to v18, along with Kolibri-Tools to v0.16, Jest to v29 and Nuxt to v2.15
+  - **Products impact:** none
+  - **Addresses:** #439
+  - **Components:** none
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Netlify configuration needs to be updated to use v18 as well
+
+[#645]: https://github.com/learningequality/kolibri-design-system/pull/645
+
+- [#645]
+  - **Description:** Component error handling now use `@error` listener to avoid polluting test output, nor suppressing `console.*` in tests
+  - **Products impact:** any
+  - **Addresses:** n/a
+  - **Components:** `KImg`, `KTabs`, `KTabsList`
+  - **Breaking:** yes
+  - **Impacts a11y:** no
+  - **Guidance:** The `KImg` component may now emit an `Error` object in its `@error` listener when incorrectly configured, in addition to an `UiEvent|Event` when an image fails to load. Consumers should type check the value.
+
+[#645]: https://github.com/learningequality/kolibri-design-system/pull/645
+
+
+
+- [#851]
+  - **Description:** Prepends all internal `KCard` class names with `k`
+  - **Products impact:** bugfix
+  - **Addresses:** Prevent from aggressive overrides from global Vuetify styles in Studio, for example when `KCard`'s `.title` styles were changed unexpectedly by the Vuetify's `.title` styles, causing text being cut off and incorrectly styled overall. Reported in https://github.com/learningequality/studio/pull/4803.
+  - **Components:** `KCard`
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#851]: https://github.com/learningequality/kolibri-design-system/pull/851
+
+
+
 - [#838]
   - **Description:** Re-organizes `KCard` styles to improve content tolerance and simplify styles, and fixes the thumbnail overflow problems in horizontal layout with small thumbnail
   - **Products impact:** bugfix

dev_docs/01_getting_started.md

@@ -4,8 +4,8 @@ The design system has two primary parts, the UI component library [`/lib`](../li
 
 ## Prerequisites
 
-- Node.js 10.x (see [Node Version Manager](https://github.com/nvm-sh/nvm))
-- Yarn 1.x
+- Node.js 18.x (see [Node Version Manager](https://github.com/nvm-sh/nvm))
+- Yarn >=1.22.22
 
 ## Troubleshooting
 

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/assets/main.scss

@@ -26,6 +26,7 @@ code {
 
 a code {
   color: $link-color;
+
   &:hover {
     color: $link-hover-color;
   }
@@ -43,6 +44,7 @@ a {
 
   &:hover {
     color: $link-hover-color;
+
     svg {
       fill: $link-hover-color;
     }
@@ -70,6 +72,7 @@ html {
 html {
   box-sizing: border-box;
 }
+
 *,
 *::before,
 *::after {

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>
@@ -30,10 +34,12 @@
         required: true,
         validator(value) {
           if (!value.startsWith('#')) {
+            // eslint-disable-next-line no-console
             console.error(`'anchor' prop value '${value}' must start with a '#'`);
             return false;
           }
           if (!value.match(/^#[\w\-.:]*$/)) {
+            // eslint-disable-next-line no-console
             console.error(`'anchor' prop value '${value}' invalid`);
             return false;
           }

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>