Merge remote-tracking branch 'upstream/release-v1.5.x' into release-v…

…1.5.x
MisRob · Oct 12, 2023 · 3cf3e90 · 3cf3e90
2 parents 6d4f765 + a3fe298
commit 3cf3e90
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +43,15 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 ## Version 1.5.x
 
+- [#462]
+  - **Description:** Fix internal links in design system documentation
+  - **Products impact:** none
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/pull/423
+  - **Components:** none
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
 - [#453]
   - **Description:** Fix sidepanel opening in Kolibri Library page after resizing window
   - **Products impact:** bugfix

diff --git a/docs/common/DocsInternalLink.vue b/docs/common/DocsInternalLink.vue
@@ -26,6 +26,9 @@
       href: {
         type: String,
         required: true,
+        validator(value) {
+          return value.startsWith('/') || value.startsWith('#');
+        },
       },
       text: {
         type: String,

diff --git a/docs/pages/icons/index.vue b/docs/pages/icons/index.vue
@@ -34,7 +34,7 @@
 
     <DocsPageSection title="Color" anchor="#color">
       <p>
-        Many of these icons also are used with <DocsInternalLink href="colors" text="conventional colors" /> in the design system. For example, the <DocsInternalLink href="#tokens-coachContent" text="coachContent" code /> icon is often shown using the <DocsInternalLink href="/colors#tokens-coachContent" text="coachContent" code /> color, e.g. <KIcon icon="coachContent" />. Icons often have a default color associated with them, and this can be overridden as needed.
+        Many of these icons also are used with <DocsInternalLink href="/colors" text="conventional colors" /> in the design system. For example, the <DocsInternalLink href="#tokens-coachContent" text="coachContent" code /> icon is often shown using the <DocsInternalLink href="/colors#tokens-coachContent" text="coachContent" code /> color, e.g. <KIcon icon="coachContent" />. Icons often have a default color associated with them, and this can be overridden as needed.
       </p>
       <p>
         When inline with text, icons should usually be the same color as the text:

diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue
@@ -2,7 +2,7 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      See <DocsInternalLink href="icons" text="the page on icons" /> for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
+      See <DocsInternalLink href="/icons" text="the page on icons" /> for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image <KIcon icon="brokenImage" /> icon.
     </DocsPageSection>
   </DocsPageTemplate>
 

diff --git a/docs/pages/kmodal.vue b/docs/pages/kmodal.vue
@@ -2,7 +2,7 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      For design guidance, see the page on <DocsInternalLink href="modals" text="modals" />.
+      For design guidance, see the page on <DocsInternalLink href="/modals" text="modals" />.
     </DocsPageSection>
   </DocsPageTemplate>
 

diff --git a/docs/pages/kselect.vue b/docs/pages/kselect.vue
@@ -21,7 +21,7 @@
 
     <DocsPageSection title="Usage" anchor="#usage">
       <p>
-        Select dropdowns are used alongside form components such as text fields and radio selects. They can also be used to filter options in lists and tables. 
+        Select dropdowns are used alongside form components such as text fields and radio selects. They can also be used to filter options in lists and tables.
       </p>
     </DocsPageSection>
 
@@ -49,7 +49,7 @@
         Hiding is better than disabling in this case because there is no condition where it would benefit the user experience to be selectable for that object.
       </p>
       <h3>Filters</h3>
-      <p>For design guidance on using selects for filtering, see the <DocsInternalLink href="filters" text="Filters page" />.</p>
+      <p>For design guidance on using selects for filtering, see the <DocsInternalLink href="/filters" text="Filters page" />.</p>
     </DocsPageSection>
 
   </DocsPageTemplate>

diff --git a/docs/pages/ktextbox.vue b/docs/pages/ktextbox.vue
@@ -2,7 +2,7 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
-      For design guidance, see the page on <DocsInternalLink href="textfields" text="text fields" />.
+      For design guidance, see the page on <DocsInternalLink href="/textfields" text="text fields" />.
     </DocsPageSection>
   </DocsPageTemplate>