feat: change panel clickbox

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.75
+
+- Change clickbox for `Panel` toggle
+
 ## v2.0.74
 
 - Add `Repeat` to the `Icon` component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.74",
+  "version": "2.0.75",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/assets/styles/main.scss

@@ -42,13 +42,6 @@
     @apply text-lg;
   }
 
-  .uic-panel-container {
-    @apply rounded-md;
-    @apply border-line-grey border;
-    @apply bg-white;
-    @apply w-full p-4;
-  }
-
   // TODO Move to `@layer components` when that works
   .tile-container {
     @apply rounded-2xl;

src/components/Panel/Panel.vue

@@ -1,7 +1,7 @@
 <template>
   <Panel
+    v-model:collapsed="collapsed"
     class="uic-panel-container"
-    :collapsed
     data-testid="uic-panel"
     :pt="{
       transition: {
@@ -15,28 +15,25 @@
         leaveToClass: 'max-h-0'
       }
     }"
-    :toggleable="collapsible"
-    @update:collapsed="$emit('update:collapsed', $event)"
   >
     <template #header>
-      <component
-        :is="headerComponent"
-        class="type-base-600 flex flex-row gap-2 items-center"
-      >
-        <slot name="header">
-          {{ header }}
-        </slot>
-        <LoadingSpinnerIcon v-if="loading" />
-      </component>
-    </template>
-
-    <template #togglericon="{ collapsed: iconCollapsed }">
-      <Icon
-        :class="['toggle-icon', { collapsed: iconCollapsed }]"
-        data-testid="uic-panel-toggle-icon"
-        icon="Collapse"
-        size="lg"
-      />
+      <button class="uic-panel-header-button" @click="collapsed = !collapsed">
+        <component
+          :is="headerComponent"
+          class="type-base-600 flex flex-row gap-2 items-center"
+        >
+          <slot name="header">
+            {{ header }}
+          </slot>
+          <LoadingSpinnerIcon v-if="loading" />
+        </component>
+        <Icon
+          :class="['toggle-icon', { collapsed }]"
+          data-testid="uic-panel-toggle-icon"
+          icon="Collapse"
+          size="lg"
+        />
+      </button>
     </template>
 
     <template #default>
@@ -52,41 +49,49 @@ import { LoadingSpinnerIcon } from '../LoadingSpinnerIcon';
 
 withDefaults(
   defineProps<{
-    collapsed?: boolean;
-    collapsible?: boolean;
     header?: string;
     headerComponent?: string;
     loading?: boolean;
   }>(),
   {
-    collapsed: false,
-    collapsible: false,
     header: undefined,
     headerComponent: 'h2',
     loading: false
   }
 );
 
 defineEmits<{
-  (e: 'update:collapsed', collapsed: boolean): void; // eslint-disable-line no-unused-vars
+  (e: 'update:collapsed'): void; // eslint-disable-line no-unused-vars
 }>();
+
+const collapsed = defineModel<boolean>('collapsed', { default: false });
 </script>
 
 <style scoped="scss">
 .uic-panel-container {
-  :deep([data-pc-section='header']) {
+  @apply flex flex-col;
+  @apply w-full p-4;
+  @apply rounded-md;
+  @apply border-line-grey border;
+  @apply bg-white;
+
+  .uic-panel-header-button {
     @apply flex flex-row gap-2 items-center justify-between;
-  }
+    width: calc(100% + 1rem);
+    @apply -m-2 p-2;
+    @apply rounded-md;
+    @apply transition-colors;
 
-  :deep([data-pc-section='icons']) {
-    @apply flex flex-row items-center justify-center;
+    &:hover {
+      @apply bg-gray-25;
+    }
+  }
 
-    .toggle-icon {
-      transition: transform 0.3s;
+  .toggle-icon {
+    transition: transform 0.3s;
 
-      &:not(.collapsed) {
-        transform: rotate(180deg);
-      }
+    &:not(.collapsed) {
+      transform: rotate(180deg);
     }
   }