Merge branch 'learningequality:develop' into ktable-sort

.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 }}

.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,84 @@ 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

docs/pages/icons/index.vue

@@ -226,7 +226,7 @@
 <style lang="scss" scoped>
 
   // hack to simulate bad behavior
-  /deep/ .wrong-colors svg {
+  ::v-deep .wrong-colors svg {
     fill: blue !important;
   }
 

docs/pages/installation.vue

@@ -11,11 +11,16 @@
       </p>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin'; import trackInputModality
-        from 'kolibri-design-system/lib/styles/trackInputModality'; import trackMediaType from
-        'kolibri-design-system/lib/styles/trackMediaType'; Vue.use(KThemePlugin);
-        trackInputModality(); trackMediaType();
+        import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
+        import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
+        import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';
+
+        Vue.use(KThemePlugin);
+
+        trackInputModality();
+        trackMediaType();
       </DocsShowCode>
       <!-- eslint-enable -->
 

docs/pages/kcard.vue

@@ -402,8 +402,15 @@
       </DocsShowCode>
 
       <!-- eslint-disable -->
+      <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        export default { methods() { onClick() { console.log('Card clicked'); } }, };
+        export default {
+          methods() {
+            onClick() {
+              console.log('Card clicked');
+            }
+          },
+        };
       </DocsShowCode>
       <!-- eslint-enable -->
 

docs/pages/ktabslist.vue

@@ -72,8 +72,16 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        data() { return { activeTabId: 'tabLessons', tabs: [ { id: 'tabLessons', label: 'Lessons' },
-        { id: 'tabLearners', label: 'Learners' }, { id: 'tabGroups', label: 'Groups' }, ], }; },
+        data() {
+          return {
+            activeTabId: 'tabLessons',
+            tabs: [
+              { id: 'tabLessons', label: 'Lessons' },
+              { id: 'tabLearners', label: 'Learners' },
+              { id: 'tabGroups', label: 'Groups' },
+            ],
+          };
+        },
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>
@@ -96,9 +104,15 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        data() { return { tabs: [ { id: 'tabLessons', label: 'Lessons', to: { path: '/lessons' } },
-        { id: 'tabLearners', label: 'Learners', to: { path: '/learners' } }, { id: 'tabGroups',
-        label: 'Groups', to: { path: '/groups' } }, ], }; },
+        data() {
+          return {
+            tabs: [
+              { id: 'tabLessons', label: 'Lessons', to: { path: '/lessons' } },
+              { id: 'tabLearners', label: 'Learners', to: { path: '/learners' } },
+              { id: 'tabGroups', label: 'Groups', to: { path: '/groups' } },
+            ],
+          };
+        },
       </DocsShowCode>
       <!-- eslint-enable -->
 
@@ -343,7 +357,11 @@
       <!-- eslint-disable -->
       <!-- prettier-ignore -->
       <DocsShowCode language="javascript">
-        icons: { tabLessons: 'lesson', tabLearners: 'person', tabGroups: 'people', },
+        icons: {
+          tabLessons: 'lesson',
+          tabLearners: 'person',
+          tabGroups: 'people',
+        },
       </DocsShowCode>
       <!-- eslint-enable -->
     </DocsPageSection>

docs/pages/layout/index.vue

@@ -121,7 +121,7 @@
         Responsive layouts in the design system are built using reactive JavaScript state in Vue
         components rather than CSS media queries. This is done using
         <DocsLibraryLink component="useKResponsiveWindow" /> when reactive window's size information
-        is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's
+        is needed or <DocsLibraryLink component="useKResponsiveElement" /> when reactive component's
         size information is needed.
       </p>
     </DocsPageSection>

lib/KDateRange/KDateInput.vue

@@ -141,7 +141,7 @@
   }
 
   /* HIDES BROWSER NATIVE DATEPICKER */
-  /deep/ input[type='date'] {
+  ::v-deep input[type='date'] {
     width: 150px;
     text-align: left;
     text-transform: uppercase !important;

lib/KLogo/index.vue

@@ -81,22 +81,25 @@
         />
       </g>
       <g id="body">
+        <!-- eslint-disable max-len -->
+        <!-- eslint-disable vue/max-len -->
         <path
           d="M105 133.5C106.125 135.248 111.046 140.575 113.5 145.5C115.084 148.678 116.043
           151.879 115.5 154.5C114.566 159.01 110.376 162.409 106.255 159.3C104.108 157.681
           102.698 154.847 102.209 152.3C101.265 147.375 102.751 141.099 105 133.5ZM105 133.5C92
           121.5 80.5894 106.993 86.0001 88C87.8773 81.4102 91.5066 76.5374 92.5907 67.8576C92.9229
-          65.1979 92.0525 63.0863 92.5907 60.3303C93.1958 57.2315 95.7567 53.5948 99.6458 
-          2.8029C101.94 52.3358 104.538 52.8993 106.701 54.6847C108.251 55.9644 109.53 57.5443
-          109.801 59.5775C110.137 62.0918 109.848 65.8372 109.969 68.8091C110.064 71.1567 111.01
-          74.3275 111.846 76.5C123.727 101.615 117 110.5 105 133.5ZM102.455 52.7427C104.844 53.1793
-          107.316 54.5807 111.846 51.9511C117.52 46.8315 124.682 39.4836 129.898 34.0323C123.952
-          40.1759 122.341 41.8109 114.35 49.692C112.985 51.7283 111.085 54.0494 110.647
-          55.8138C110.089 58.0588 109.812 61.4633 109.967 63.8191"
+          65.1979 92.0525 63.0863 92.5907 60.3303C93.1958 57.2315 95.7567 53.5948 99.6458 52.8029C101.94
+          52.3358 104.538 52.8993 106.701 54.6847C108.251 55.9644 109.53 57.5443 109.801 59.5775C110.137
+          62.0918 109.848 65.8372 109.969 68.8091C110.064 71.1567 111.01 74.3275 111.846 76.5C123.727
+          101.615 117 110.5 105 133.5ZM102.455 52.7427C104.844 53.1793 107.316 54.5807 111.846
+          51.9511C117.52 46.8315 124.682 39.4836 129.898 34.0323C123.952 40.1759 122.341 41.8109
+          114.35 49.692C112.985 51.7283 111.085 54.0494 110.647 55.8138C110.089 58.0588 109.812
+          61.4633 109.967 63.8191"
           stroke-width="6"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
+        <!-- eslint-enable -->
       </g>
       <g id="right-wing-inner">
         <path

lib/KSelect/index.vue

@@ -1179,10 +1179,6 @@
     vertical-align: bottom;
   }
 
-  .ui-select-disabled /deep/ .ui-select__label-text.is-inline {
-    cursor: default;
-  }
-
   /* stylelint-disable csstree/validator */
 
   .ui-select-disabled {
@@ -1193,8 +1189,4 @@
 
   /* stylelint-enable */
 
-  /deep/ .ui-select__display-value {
-    line-height: 1.3;
-  }
-
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kolibri-design-system",
-  "version": "5.0.0-rc10",
+  "version": "5.0.0-rc11",
   "private": false,
   "description": "The Kolibri Design System defines common design patterns and code for use in Kolibri applications",
   "repository": {

yarn.lock

@@ -362,11 +362,6 @@
   dependencies:
     "@babel/types" "^7.24.5"
 
-"@babel/helper-string-parser@^7.24.1":
-  version "7.24.1"
-  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz"
-  integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
-
 "@babel/helper-string-parser@^7.25.9":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
@@ -437,12 +432,7 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.15.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.21.4", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.5", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
-  version "7.24.5"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz"
-  integrity sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==
-
-"@babel/parser@^7.23.5", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.15.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.23.5", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.5", "@babel/parser@^7.24.7", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
   integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
@@ -1239,16 +1229,7 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.15.0", "@babel/types@^7.15.4", "@babel/types@^7.21.4", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.6.1", "@babel/types@^7.9.6":
-  version "7.24.5"
-  resolved "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz"
-  integrity sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==
-  dependencies:
-    "@babel/helper-string-parser" "^7.24.1"
-    "@babel/helper-validator-identifier" "^7.24.5"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3":
+"@babel/types@^7.0.0", "@babel/types@^7.15.0", "@babel/types@^7.15.4", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.24.0", "@babel/types@^7.24.5", "@babel/types@^7.24.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.6.1", "@babel/types@^7.9.6":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
   integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
@@ -9140,9 +9121,9 @@ nan@^2.17.0:
   integrity sha512-nbajikzWTMwsW+eSsNm3QwlOs7het9gGJU5dDZzRTQGk03vyBOauxgI4VakDzE0PtsGTmXPsXTbbjVhRwR5mpw==
 
 nanoid@^3.1.23, nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -12808,11 +12789,6 @@ to-fast-properties@^1.0.3:
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz"
   integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
 
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz"
@@ -13330,12 +13306,12 @@ vue-client-only@^2.1.0:
   integrity sha512-vKl1skEKn8EK9f8P2ZzhRnuaRHLHrlt1sbRmazlvsx6EiC3A8oWF8YCBrMJzoN+W3OnElwIGbVjsx6/xelY1AA==
 
 vue-docgen-api@^4.56.4:
-  version "4.78.0"
-  resolved "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.78.0.tgz"
-  integrity sha512-RsZf+qzTttCCAN9v7AKmBykc2QWmO8csVk1c2aXeOktomSOu0NA7sgK4ObuRB5lpmtOvTnwuxssyYmxXxABr+A==
+  version "4.79.2"
+  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.79.2.tgz#de2c499601472f385dc28006742e2208ba927306"
+  integrity sha512-n9ENAcs+40awPZMsas7STqjkZiVlIjxIKgiJr5rSohDP0/JCrD9VtlzNojafsA1MChm/hz2h3PDtUedx3lbgfA==
   dependencies:
-    "@babel/parser" "^7.21.4"
-    "@babel/types" "^7.21.4"
+    "@babel/parser" "^7.24.7"
+    "@babel/types" "^7.24.7"
     "@vue/compiler-dom" "^3.2.0"
     "@vue/compiler-sfc" "^3.2.0"
     ast-types "^0.16.1"