Add playground

dev_docs/03_how_to_update_library.md

@@ -4,7 +4,7 @@ The design system has two primary parts, the UI component library [`/lib`](../li
 
 ## Prerequisites
 
-Your development server is set up and running as described in [Getting started](./01_getting_started.md).
+Your development server is set up and running at http://localhost:4000/ as described in [Getting started](./01_getting_started.md).
 
 ## Add/update a component
 
@@ -33,7 +33,11 @@ The documentation development server can be used to visually test components upd
 
 **Playground page**
 
-TODO
+Open [/docs/pages/playground.vue](../docs/pages/playground.vue) and add a component you're working on there. Then, as you're developing, you will see it update live at http://localhost:4000/playground. See an example in the playground file.
+
+If you are working on a new component, make sure to register it first in `KThemePlugin`, as described in the "How to add a new component" section above, in order to make it available on the playground page.
+
+Please do not commit any updates to the playground file as it's meant as your local preview only. This will help other developers have it ready for their own work.
 
 **Components documentation pages**
 

dev_docs/04_how_to_update_docs.md

@@ -4,7 +4,7 @@ The design system has two primary parts, the UI component library [`/lib`](../li
 
 ## Prerequisites
 
-Your development server is set up and running as described in the [Getting started](./01_getting_started.md).
+Your development server is set up and running at http://localhost:4000/ as described in the [Getting started](./01_getting_started.md).
 
 ## Updating content
 

docs/pages/playground.vue

@@ -0,0 +1,50 @@
+<template>
+
+  <!--
+    Playground: A private page for components development
+    *****************************************************
+    Place a component you're working on here and see it
+    live on http://localhost:4000/playground
+
+    Please do not commit your local updates of this file.
+  -->
+  <div style="padding: 24px">
+    <!-- 
+      Example: Uncomment lines bellow, change something
+      in lib/KBreadcrumbs.vue and see the updates reflected
+      on this page
+    -->
+    <!-- <KBreadcrumbs
+      :items="[
+        { text: 'Global Digital Library', link: { path: '#' } },
+        { text: 'English', link: { path: '#' } },
+        { text: 'Level 2 ', link: { path: '#' } },
+      ]"
+    /> -->
+
+    <!-- Play around with your component here: -->
+
+
+
+
+  </div>
+
+</template>
+
+
+<script>
+
+  /*
+    Playground is a Vue component too,
+    so you can also use `data`, `methods`, etc.
+    as usual if helpful
+  */
+  export default {
+    name: 'Playground',
+    data() {
+      return {};
+    },
+    methods: {},
+  };
+
+</script>