diff --git a/CHANGELOG.md b/CHANGELOG.md index 853788aa3..bcc69113a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,30 @@ Changelog is rather internal in nature. See release notes for the public overvie ## Upcoming version - + +## Version 2.0.0 + +- [#460] + - **Description:** Implement KLogo + - **Products impact:** new API + - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/373 + - **Components:** KLogo + - **Breaking:** no + - **Impacts a11y:** no + - **Guidance:** - + +[#460]: https://github.com/learningequality/kolibri-design-system/pull/460 + +- [#470] + - **Description:** Fix bug and add test guard in MediaQuery implementation + - **Products impact:** none + - **Addresses:** - + - **Components:** none + - **Breaking:** no + - **Impacts a11y:** no + - **Guidance:** - + +[#470]: https://github.com/learningequality/kolibri-design-system/pull/470 - [#469] - **Description:** Throttle the resize listener handler @@ -39,8 +62,6 @@ Changelog is rather internal in nature. See release notes for the public overvie [#463]: https://github.com/learningequality/kolibri-design-system/pull/463 -## Version 2.0.0-beta0 (released - do not add new items) - - [#462] - **Description:** Fix internal links in design system documentation - **Products impact:** none diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue new file mode 100644 index 000000000..cb09e6d8d --- /dev/null +++ b/docs/pages/klogo.vue @@ -0,0 +1,51 @@ + + + + diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js index cb96b09ba..55d4d5670 100644 --- a/docs/tableOfContents.js +++ b/docs/tableOfContents.js @@ -270,6 +270,11 @@ export default [ isCode: true, keywords: ['image', 'img'], }), + new Page({ + path: '/klogo', + title: 'KLogo', + isCode: true, + }), new Page({ path: '/klabeledicon', title: 'KLabeledIcon', diff --git a/lib/KImg.vue b/lib/KImg.vue index 666d09abc..59efaee10 100644 --- a/lib/KImg.vue +++ b/lib/KImg.vue @@ -158,4 +158,4 @@ - + \ No newline at end of file diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue new file mode 100644 index 000000000..b178eef10 --- /dev/null +++ b/lib/KLogo/index.vue @@ -0,0 +1,82 @@ + + + + diff --git a/lib/KLogo/kolibri-logo.svg b/lib/KLogo/kolibri-logo.svg new file mode 100644 index 000000000..f26d5bdfc --- /dev/null +++ b/lib/KLogo/kolibri-logo.svg @@ -0,0 +1,178 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js index 2606b9676..7c7315ba1 100644 --- a/lib/KThemePlugin.js +++ b/lib/KThemePlugin.js @@ -32,6 +32,7 @@ import KTextbox from './KTextbox'; import KTooltip from './KTooltip'; import KTransition from './KTransition'; import KTextTruncator from './KTextTruncator'; +import KLogo from './KLogo'; import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme'; import globalThemeState from './styles/globalThemeState'; @@ -109,6 +110,7 @@ export default function KThemePlugin(Vue) { Vue.component('KImg', KImg); Vue.component('KLabeledIcon', KLabeledIcon); Vue.component('KLinearLoader', KLinearLoader); + Vue.component('KLogo', KLogo); Vue.component('KModal', KModal); Vue.component('KOptionalText', KOptionalText); Vue.component('KPageContainer', KPageContainer); diff --git a/lib/useKResponsiveWindow/MediaQuery.js b/lib/useKResponsiveWindow/MediaQuery.js index 239310cb1..627bab61b 100644 --- a/lib/useKResponsiveWindow/MediaQuery.js +++ b/lib/useKResponsiveWindow/MediaQuery.js @@ -10,13 +10,17 @@ export default class MediaQuery { constructor(query, eventHandler) { this.query = query; this.eventHandler = eventHandler; + this._mediaQueryList = null; } /** * @returns {Object} Media query list */ get mediaQueryList() { - return window.matchMedia(this.query); + if (!this._mediaQueryList) { + this._mediaQueryList = window.matchMedia(this.query); + } + return this._mediaQueryList; } /** @@ -32,8 +36,8 @@ export default class MediaQuery { * @returns {Object} Containing mediaQueryList, eventHandler, and stopListening */ startListening() { - //Prevent function execution if Nuxt is server side rendering - if (this.isNuxtServerSideRendering()) { + // Prevent function execution if Nuxt is server side rendering + if (this.isNuxtServerSideRendering() || !window.matchMedia) { return; } @@ -48,6 +52,10 @@ export default class MediaQuery { * Stop listening for media query events */ stopListening() { + // Prevent function execution if Nuxt is server side rendering + if (this.isNuxtServerSideRendering() || !window.matchMedia) { + return; + } if (this.mediaQueryList.removeEventListener) { this.mediaQueryList.removeEventListener('change', this.eventHandler); } else {