CLASSROOMIO-T-80: Replace sapper with sveltekit

src/lib/components/Expandable/index.svelte

@@ -0,0 +1,55 @@
+<script>
+  import { page } from '$app/stores';
+  import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
+  import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
+  import LinkIcon from 'carbon-icons-svelte/lib/Link.svelte';
+
+  export let id = '';
+  export let title = '';
+  export let titleClass = '';
+  export let disableContainerPadding = false;
+  export let rootClass = '';
+  export let supportsLink = false;
+
+  export let isExpanded = true;
+
+  function handleClick(e) {
+    e.stopPropagation();
+
+    isExpanded = !isExpanded;
+  }
+</script>
+
+<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
+  <div
+    class="w-full relative flex items-center justify-between {!disableContainerPadding &&
+      'p-5'}"
+    role="button"
+    tabindex="0"
+    on:click={handleClick}
+  >
+    <p class="dark:text-white font-bold flex items-center {titleClass}">
+      {title}
+      {#if supportsLink}
+        <a
+          class="ml-2"
+          href="{$page.url.pathname}#{id}"
+          on:click={(e) => e.stopPropagation()}
+        >
+          <LinkIcon size={24} class="carbon-icon" />
+        </a>
+      {/if}
+    </p>
+
+    {#if isExpanded}
+      <ChevronUpIcon size={24} class="carbon-icon" />
+    {:else}
+      <ChevronDownIcon size={24} class="carbon-icon" />
+    {/if}
+  </div>
+  {#if isExpanded}
+    <div class="flex flex-col p-5">
+      <slot />
+    </div>
+  {/if}
+</div>