feat: feedback general, expanded dropList component

src/lib/components/dropList.svelte

@@ -7,6 +7,9 @@
     export let arrowPosition: 'start' | 'center' | 'end' = 'start';
     export let arrow = true;
     export let scrollable = false;
+    export let width: number = null;
+    export let xPadding: number = null;
+    export let yPadding: number = null;
     let parentElement: HTMLDivElement;
 
     const onBlur = (event: MouseEvent) => {
@@ -21,7 +24,14 @@
 
 <svelte:window on:click={onBlur} />
 
-<div class="drop-wrapper" class:is-open={show} bind:this={parentElement}>
+<div
+    class="drop-wrapper"
+    style={`
+    ${width ? `--drop-width-size-desktop:${width}rem;` : ''}
+    ${xPadding ? `--section-padding-horizontal:${xPadding}rem;` : ''}
+    ${yPadding ? `--section-padding-vertical:${yPadding}rem;` : ''}`}
+    class:is-open={show}
+    bind:this={parentElement}>
     <slot />
     {#if show}
         <div
@@ -32,14 +42,16 @@
             class:is-block-end={position === 'bottom'}
             class:is-inline-end={horizontal === 'left'}
             transition:slide={{ duration: 100 }}>
-            <section
-                class:u-overflow-y-auto={scrollable}
-                class:u-max-height-200={scrollable}
-                class="drop-section ">
-                <ul class="drop-list">
-                    <slot name="list" />
-                </ul>
-            </section>
+            {#if $$slots.list}
+                <section
+                    class:u-overflow-y-auto={scrollable}
+                    class:u-max-height-200={scrollable}
+                    class="drop-section ">
+                    <ul class="drop-list">
+                        <slot name="list" />
+                    </ul>
+                </section>
+            {/if}
             <slot name="other" />
         </div>
     {/if}

src/lib/components/feedbackGeneral.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { Form, FormList, InputTextarea, Button } from '$lib/elements/forms';
     import { createEventDispatcher } from 'svelte';
-    import Card from './card.svelte';
 
     export let show = false;
 
@@ -13,20 +12,21 @@
     };
 </script>
 
-<Form on:action={handleSubmit}>
-    <Card>
-        <section class="u-flex common-section">
-            <h3 class="body-text-1"><slot name="title" /></h3>
-            <button
-                type="button"
-                class="x-button u-margin-inline-start-auto"
-                aria-label="Close Modal"
-                title="Close Modal"
-                on:click={() => (show = false)}>
-                <span class="icon-x" aria-hidden="true" />
-            </button>
-        </section>
-        <div class="common-section"><slot /></div>
+<section class="drop-section">
+    <header class="u-flex u-main-space-between u-gap-16">
+        <h4 class="body-text-1"><slot name="title" /></h4>
+        <button
+            type="button"
+            class="x-button u-margin-inline-start-auto"
+            aria-label="Close Modal"
+            title="Close Modal"
+            on:click={() => (show = false)}>
+            <span class="icon-x" aria-hidden="true" />
+        </button>
+    </header>
+    <div class="u-margin-block-start-8 u-line-height-1-5"><slot /></div>
+
+    <Form on:action={handleSubmit}>
         <FormList>
             <InputTextarea
                 id="feedback"
@@ -36,9 +36,9 @@
                 bind:value={feedback} />
         </FormList>
 
-        <div class="u-flex u-main-end u-gap-12">
+        <div class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
             <Button text on:click={() => (show = false)}>Cancel</Button>
             <Button disabled={!feedback} secondary submit>Submit</Button>
         </div>
-    </Card>
-</Form>
+    </Form>
+</section>

src/lib/layout/header.svelte

@@ -34,7 +34,14 @@
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">
-        <DropList bind:show={showFeedback} position="bottom" horizontal="right" scrollable={true}>
+        <DropList
+            bind:show={showFeedback}
+            width={20}
+            xPadding={1.5}
+            yPadding={1.5}
+            position="bottom"
+            horizontal="right"
+            scrollable={true}>
             <button class="button is-small is-text" on:click={() => (showFeedback = !showFeedback)}>
                 <span class="text">Feedback</span>
             </button>