CLASSROOMIO-T-32: Landing page with editor v1

src/components/Expandable/index.svelte

@@ -1,66 +1,57 @@
 <script>
-  import CaretSortDown20 from "carbon-icons-svelte/lib/CaretSortDown20";
+  import { stores } from '@sapper/app';
+  import ChevronDown24 from 'carbon-icons-svelte/lib/ChevronDown24';
+  import ChevronUp24 from 'carbon-icons-svelte/lib/ChevronUp24';
+  import Link24 from 'carbon-icons-svelte/lib/Link24';
 
-  let isExpanded = true;
-  export let handleClick = () => {};
-  export let label = "";
-  export let hideSortIcon = false;
-  export let isGroupActive = false;
-  // export let subMenuItems = [];
+  export let id = '';
+  export let title = '';
+  export let titleClass = '';
+  export let disableContainerPadding = false;
+  export let rootClass = '';
+  export let supportsLink = false;
 
-  function onClick() {
-    // isExpanded = !isExpanded;
-    handleClick();
+  export let isExpanded = true;
+
+  const { page } = stores();
+
+  function handleClick(e) {
+    e.stopPropagation();
+
+    isExpanded = !isExpanded;
   }
 </script>
 
-<div>
+<div {id} class="w-full bg-white {rootClass}">
   <div
-    class="item relative flex items-center {isGroupActive && 'active'}"
+    class="w-full relative flex items-center justify-between {!disableContainerPadding &&
+      'p-5'}"
     role="button"
     tabindex="0"
-    on:click={onClick}
+    on:click={handleClick}
   >
-    {#if !hideSortIcon}
-      <CaretSortDown20
-        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
-      />
+    <p class="font-bold flex items-center {titleClass}">
+      {title}
+      {#if supportsLink}
+        <a
+          class="ml-2"
+          href="{$page.path}#{id}"
+          on:click={(e) => e.stopPropagation()}
+        >
+          <Link24 class="carbon-icon" />
+        </a>
+      {/if}
+    </p>
+
+    {#if isExpanded}
+      <ChevronUp24 class="carbon-icon" />
+    {:else}
+      <ChevronDown24 class="carbon-icon" />
     {/if}
-    <span class="font-bold">{label}</span>
   </div>
   {#if isExpanded}
-    <div class="flex flex-col">
+    <div class="flex flex-col p-5">
       <slot />
     </div>
   {/if}
 </div>
-
-<style>
-  :global(svg.carbon-icon-sort) {
-    position: absolute;
-    top: 8px;
-    left: 0;
-  }
-  :global(svg.carbon-icon-minimize) {
-    transform: rotate(270deg);
-    top: 13px;
-    left: -6px;
-  }
-
-  .active {
-    background-color: #cae2f9;
-    border-left: 3px solid var(--main-primary-color);
-  }
-
-  .active span {
-    padding-left: 1.3rem;
-  }
-
-  .item span {
-    padding: 12px 24px;
-  }
-
-  .item:hover {
-    background-color: #cae2f9;
-  }
-</style>