resolved errors in DocsExample

learningequality · Dec 11, 2024 · fad3c15 · fad3c15
1 parent 8d2e301
commit fad3c15
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 deletions.
diff --git a/custom-icons/codeToggle.svg b/custom-icons/codeToggle.svg
diff --git a/docs/common/DocsExample.vue b/docs/common/DocsExample.vue
@@ -3,13 +3,15 @@
 
 
     <div class="code-toggle-button">
-      <button @click="toggleCodeVisibility">
-        <span>&lt;/&gt;</span>
-      </button>
-    </div>
+      <KIconButton  class="code-toggle"
+      :icon="isCodeVisible ? 'chevronUp' : 'codeToggle'"
+      tooltip="Toggle code visibility"
+      @click="toggleCodeVisibility"
+    />
+        </div>
 
         <!-- Toggle code  -->
-    <div v-if="isCodeVisible" class="code-container">
+    <div v-show="isCodeVisible" class="code-container">
       <slot name="code" />
     </div>
 
@@ -18,63 +20,67 @@
       <slot />
     </div>
 
-    
+
   </div>
 </template>
 
 
 <script>
+  import KIconButton from "../../lib/buttons-and-links/KIconButton.vue";
+
   export default {
     name: "DocsExample",
+    components: {
+    KIconButton
+  },
     data() {
       return {
-        isCodeVisible: false, 
+        isCodeVisible: false,
       };
     },
     methods: {
       toggleCodeVisibility() {
-        this.isCodeVisible = !this.isCodeVisible; 
+        this.isCodeVisible = !this.isCodeVisible;
       },
     },
   };
   </script>
-  
+
 
 
   <style scoped>
     .docs-example {
       margin-bottom: 24px;
       padding-top: 0;
       padding: 20px;
+
       /* border: 1px solid #ddd; */
       border-radius: 4px;
     }
-    
+
     .code-toggle-button {
       margin-bottom: 16px;
       display: flex;
       justify-content: flex-end;
     }
-    
-    button {
+
+    .code-toggle {
       padding: 8px 16px;
-      background-color: #007bff;
+      background-color: #f5d858;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
       transition: background-color 0.3s ease;
     }
-    
-    button:hover {
+
+    .code-toggle:hover {
       background-color: #0056b3;
     }
-    
-    
+
+
     .code-container {
      border: none;
-     transition: all 2s ease-in-out; /* Adjusted duration for smoother transition */
 
     }
     </style>
-
diff --git a/lib/KIcon/iconDefinitions.js b/lib/KIcon/iconDefinitions.js
@@ -25,6 +25,9 @@ import { themePalette, themeTokens } from '../styles/theme';
 
 const KolibriIcons = {
   // UI
+  codeToggle:{
+      icon: require('./precompiled-icons/le/codeToggle.vue').default,
+  } ,
   menu: { icon: require('./precompiled-icons/material-icons/menu/baseline.vue').default },
   dropdown: {
     icon: require('./precompiled-icons/material-icons/arrow_drop_down/baseline.vue').default,

diff --git a/lib/KIcon/precompiled-icons/le/codeToggle.vue b/lib/KIcon/precompiled-icons/le/codeToggle.vue
@@ -0,0 +1,12 @@
+<template>
+
+  <svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="#e8eaed"><path d="M320-240L80-480l240-240 57 57-184 184 183 183-56 56zm320 0l-57-57 184-184-183-183 56-56 240 240-240 240z"/></svg>
+
+</template>
+
+
+<script>
+
+  export default {"name":"icon-acc9ffc9ffc227bbc1a5234a3216c548"}
+
+</script>