From 03338bb5498628691a77b5efd5db7ca16f13ff51 Mon Sep 17 00:00:00 2001 From: shivangrawat30 Date: Mon, 2 Oct 2023 01:20:10 +0530 Subject: [PATCH 01/21] Made the kolibriFly prop Signed-off-by: shivangrawat30 --- lib/KImg.vue | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/KImg.vue b/lib/KImg.vue index 666d09abc..36b723cdb 100644 --- a/lib/KImg.vue +++ b/lib/KImg.vue @@ -2,7 +2,7 @@
@@ -14,6 +14,8 @@ + + + + + + + + + \ No newline at end of file diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js index 34e90b851..e19b8b4eb 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/KLogo/Index.vue b/lib/KLogo/Index.vue new file mode 100644 index 000000000..c42bd5b61 --- /dev/null +++ b/lib/KLogo/Index.vue @@ -0,0 +1,157 @@ + + + + + \ No newline at end of file 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 9434f09a0..fe1cd996c 100644 --- a/lib/KThemePlugin.js +++ b/lib/KThemePlugin.js @@ -31,6 +31,7 @@ import KTabsPanel from './tabs/KTabsPanel'; import KTextbox from './KTextbox'; import KTooltip from './KTooltip'; import KTransition from './KTransition'; +import KLogo from './KLogo'; import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme'; import globalThemeState from './styles/globalThemeState'; @@ -108,6 +109,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); From 1562e9ad38d106c75a2f974d6f0a8fe3a9c4cb39 Mon Sep 17 00:00:00 2001 From: shivangrawat30 Date: Tue, 3 Oct 2023 23:59:20 +0530 Subject: [PATCH 03/21] minor change Signed-off-by: shivangrawat30 --- lib/KImg.vue | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/lib/KImg.vue b/lib/KImg.vue index 36b723cdb..59efaee10 100644 --- a/lib/KImg.vue +++ b/lib/KImg.vue @@ -2,7 +2,7 @@
@@ -14,8 +14,6 @@ - + \ No newline at end of file From ff15d1a2d8a3ae82c61de82ede74caf8177a1c9d Mon Sep 17 00:00:00 2001 From: Shivang Rawat <114716075+ShivangRawat30@users.noreply.github.com> Date: Wed, 4 Oct 2023 00:03:27 +0530 Subject: [PATCH 04/21] Rename Index.vue to index.vue --- lib/KLogo/{Index.vue => index.vue} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename lib/KLogo/{Index.vue => index.vue} (99%) diff --git a/lib/KLogo/Index.vue b/lib/KLogo/index.vue similarity index 99% rename from lib/KLogo/Index.vue rename to lib/KLogo/index.vue index c42bd5b61..17fd20eb7 100644 --- a/lib/KLogo/Index.vue +++ b/lib/KLogo/index.vue @@ -154,4 +154,4 @@ - \ No newline at end of file + From b5774e0ecb9b0ec1e5b19deacea9933c7eaffca0 Mon Sep 17 00:00:00 2001 From: shivangrawat30 Date: Wed, 11 Oct 2023 13:45:48 +0530 Subject: [PATCH 05/21] isDecorative removed. Signed-off-by: shivangrawat30 --- docs/pages/KLogo.vue | 8 +++----- lib/KLogo/index.vue | 23 ++++++++--------------- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/docs/pages/KLogo.vue b/docs/pages/KLogo.vue index 1c225b4ef..d9f11ba1b 100644 --- a/docs/pages/KLogo.vue +++ b/docs/pages/KLogo.vue @@ -33,14 +33,12 @@
- requires alternative text that describes the image unless - isDecorative is true. In that case, any alt text provided will be overwritten to an - empty string. + requires alternative text that describes the image, or it will throw an error.
@@ -48,7 +46,7 @@
diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 17fd20eb7..0ab4d3c5d 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -1,18 +1,18 @@ From b198abaea9c7a0c7ca9fa05e6f36897aba6c5ffe Mon Sep 17 00:00:00 2001 From: shivangrawat30 Date: Thu, 19 Oct 2023 21:01:37 +0530 Subject: [PATCH 15/21] commit Signed-off-by: shivangrawat30 --- lib/KLogo/index.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 59fbe8ab9..77e9bdad1 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -17,7 +17,6 @@ - - - From db2d355b81cafe3267c764af26612ce60405b036 Mon Sep 17 00:00:00 2001 From: MisRob Date: Fri, 20 Oct 2023 14:42:34 +0200 Subject: [PATCH 17/21] Cleanup KLogo --- lib/KLogo/index.vue | 45 ++++++++++++++++++--------------------------- 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/lib/KLogo/index.vue b/lib/KLogo/index.vue index 36b6c9351..b178eef10 100644 --- a/lib/KLogo/index.vue +++ b/lib/KLogo/index.vue @@ -1,17 +1,15 @@ @@ -24,49 +22,50 @@ name: 'KLogo', props: { /** - * Alternate text for the image. This is required and will throw a warning when it's not provided (empty) + * Alternative text for the logo */ altText: { type: String, + required: true, default: '', }, /** - * Sets the height for the component + * Sets the height for the logo */ height: { type: [Number, String], default: undefined, }, /** - * Sets the width for the component + * Sets the width for the logo */ width: { type: [Number, String], default: undefined, }, /** - * Sets the maximum height for the component + * Sets the maximum height for the logo */ maxHeight: { type: [Number, String], default: undefined, }, /** - * Sets the minimum height for the component + * Sets the minimum height for the logo */ minHeight: { type: [Number, String], default: undefined, }, /** - * Sets the maximum width for the component + * Sets the maximum width for the logo */ maxWidth: { type: [Number, String], default: undefined, }, /** - * Sets the minimum width for the component + * Sets the minimum width for the logo */ minWidth: { type: [Number, String], @@ -78,14 +77,6 @@ return kolibriLogo; }, }, - created() { - if (!this.altText) { - throw new Error('Missing required prop - provide altText'); - } - }, }; - - - From 585985f2dedffa217a8a196581d88178a99fc6b2 Mon Sep 17 00:00:00 2001 From: MisRob Date: Fri, 20 Oct 2023 14:43:55 +0200 Subject: [PATCH 18/21] Use lowercase for docs page name --- docs/pages/{KLogo.vue => klogo.vue} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/pages/{KLogo.vue => klogo.vue} (100%) diff --git a/docs/pages/KLogo.vue b/docs/pages/klogo.vue similarity index 100% rename from docs/pages/KLogo.vue rename to docs/pages/klogo.vue From 56a795a20356a10323a04ce4a269709cb378e884 Mon Sep 17 00:00:00 2001 From: MisRob Date: Fri, 20 Oct 2023 15:23:43 +0200 Subject: [PATCH 19/21] Finalize KLogo docs page --- docs/pages/klogo.vue | 126 ++++++++++++------------------------------- 1 file changed, 33 insertions(+), 93 deletions(-) diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue index 43146fda6..79f5a053b 100644 --- a/docs/pages/klogo.vue +++ b/docs/pages/klogo.vue @@ -2,73 +2,42 @@ -
- Use component where the kolibri Logo is needed. - -

Sample implementations of including props:

- -
- Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g. px, - em, vh). -
- -
- - - - - - -
-
+

Shows Kolibri logo.

+ + + + + + + + -
- requires alternative text that describes the image, or it will throw an error. -
-
- - - -
- - - -
-
+ +

Alternative text

-
- If dimensions for the image are not specified, the size will default to the height and width of the source - image. - - - - - - +

Alternative text (altText) is always required for the logo image. When creating it, consider the following:

+
    +
  • If the logo is used as a flat image, you can use the string "Kolibri logo"
    • +
  • If the the logo is used as a link, then the alternative text needs to give the context where the link is leading (for example "Go to home page", or similar)
    • +
+ -
+ +
    +
  • + KLogo is derived from and provides a subset of KImg's API. +
    • +
@@ -80,32 +49,3 @@ export default {}; - - - - - - - - - \ No newline at end of file From f00125eadd2ad123dca5965fe5939574b33528cc Mon Sep 17 00:00:00 2001 From: MisRob Date: Mon, 23 Oct 2023 12:07:21 +0200 Subject: [PATCH 20/21] Improve guidance wording --- docs/pages/klogo.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue index 79f5a053b..cb09e6d8d 100644 --- a/docs/pages/klogo.vue +++ b/docs/pages/klogo.vue @@ -25,7 +25,7 @@

Alternative text

-

Alternative text (altText) is always required for the logo image. When creating it, consider the following:

+

Alternative text (altText) is required for the logo image. When creating it, consider the following:

  • If the logo is used as a flat image, you can use the string "Kolibri logo"
  • If the the logo is used as a link, then the alternative text needs to give the context where the link is leading (for example "Go to home page", or similar)
    • From 945c28118e1bb3f7fbd6842c0e07165721d193f3 Mon Sep 17 00:00:00 2001 From: MisRob Date: Mon, 23 Oct 2023 12:14:49 +0200 Subject: [PATCH 21/21] Update changelog --- CHANGELOG.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13a7146f5..bcc69113a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,19 @@ 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 @@ -50,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