Renamed files and improved responsivity

package.json

@@ -65,5 +65,8 @@
     "vite": "^4.0.0",
     "vitest": "^0.31.4"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "svelte-select": "^5.6.1"
+  }
 }

src/lib/layout/hexagons/EventHexagon.stories.ts

@@ -0,0 +1,35 @@
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import EventHexagon from './EventHexagon.svelte';
+
+export default {
+  title: 'Atoms/Hexagons/EventHexagon',
+  component: EventHexagon,
+  parameters: {
+    layout: 'centered',
+    controls: { exclude: ['event'] }
+  }
+};
+
+export const EventPageHexagon = {
+  args: {
+    event: {
+      title: 'Jantar de Curso',
+      description: 'Muito fixe',
+      teamMemberIds: [],
+      registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
+      dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2023-12-05') },
+      location: 'Cervejaria Diu',
+      thumbnailPath: 'images/previews/bruno-rosendo.png'
+    }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Hover over hexagon', async () => {
+      await userEvent.hover(await canvas.findByTestId('event-hexagon'));
+      const role = canvas.queryByText('Co-Gestor de Projetos');
+      await expect(role).toBeTruthy();
+    });
+  }
+};

src/components/hexagons/HexagonEvent.svelte → src/lib/layout/hexagons/EventHexagon.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import Hexagon from '@/lib/layout/hexagons/Hexagon.svelte';
-  import type { Event } from '@/model/event';
+  import type { Event } from '@/model/Event';
 
   export let event: Event;
 </script>
 
 <Hexagon orientation="vertical">
-  <div class="group relative flex h-full w-full flex-col content-center justify-center">
+  <div
+    class="group relative flex h-full w-full flex-col content-center justify-center"
+    data-testid="event-hexagon"
+  >
     <p
-      class="font-400 group-hover:font-500 z-20 text-center text-xs leading-tight text-gray-100 sm:text-xs lg:text-sm xl:text-lg 2xl:text-xl"
+      class="xs:text-[0.5em] z-20 whitespace-nowrap text-center text-xs text-gray-100 sm:text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl"
     >
       {#if !event.dateInterval.endDate}
         {event.dateInterval.startDate
@@ -17,34 +20,33 @@
             month: 'long',
             year: 'numeric'
           })
-          .replaceAll(' de ', ' ')}
+          .replaceAll(/(de\s)|(\.)/gi, '')}
       {:else}
         {event.dateInterval.startDate
           .toLocaleString('pt', {
             day: 'numeric',
             month: 'short',
             year: '2-digit'
           })
-          .replaceAll(' de ', ' ') +
+          .replaceAll(/(de\s)|(\.)/gi, '') +
           ' - ' +
           event.dateInterval.endDate
             .toLocaleDateString('pt', {
               day: 'numeric',
               month: 'short',
               year: '2-digit'
             })
-            .replaceAll(' de ', ' ')}
+            .replaceAll(/(de\s)|(\.)/gi, '')}
       {/if}
     </p>
-
     <p
-      class="font-600 group-hover:font-700 z-20 mb-2 mt-2 w-full text-center text-sm font-bold leading-tight text-gray-100 outline-2 outline-offset-2 outline-light transition-colors ease-in group-hover:bg-light group-hover:text-darkText group-hover:outline sm:text-sm lg:text-base xl:text-xl 2xl:text-2xl"
+      class="xs:text-xs z-20 my-1.5 w-full px-8 text-center text-xs font-semibold text-gray-100 outline-2 outline-offset-2 outline-light transition-colors ease-in group-hover:bg-light group-hover:text-darkText group-hover:outline sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl"
     >
       {event.title}
     </p>
 
     <p
-      class="font-400 group-hover:font-50 z-20 text-center text-xs leading-tight text-gray-100 transition-all sm:text-xs lg:text-sm xl:text-lg 2xl:text-xl"
+      class="xs:text-[0.5em] z-20 whitespace-nowrap text-center text-xs text-gray-100 transition-all sm:text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl"
     >
       {event.location}
     </p>

src/lib/layout/hexagons/HexagonGrid.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type RedExampleHexagon from './RedExampleHexagon.svelte';
-  import type BlueExampleHexagon from './BlueExampleHexagon.svelte';
+  import type EventHexagon from './EventHexagon.svelte';
 
   // Inspired by https://github.com/sveltejs/svelte-virtual-list/blob/master/VirtualList.svelte
   type T = $$Generic;
@@ -10,7 +9,7 @@
 
   export let gap: 'small' | 'medium' | 'big' = 'medium';
   export let orientation: 'horizontal' | 'vertical';
-  export let component: typeof BlueExampleHexagon | typeof RedExampleHexagon;
+  export let component: typeof EventHexagon;
 
   const gridColumnsStyle =
     orientation === 'horizontal'

src/model/event.ts → src/model/Event.ts

@@ -1,4 +1,4 @@
-import type { DateInterval } from './dateInterval';
+import type { DateInterval } from './DateInterval';
 
 export type Event = {
   title: string;

src/routes/+page.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import HexagonEvent from '@/components/hexagons/HexagonEvent.svelte';
-  import HexagonGrid from '@/lib/layout/hexagons/HexagonGrid.svelte';
-  import type { Event } from '@/model/event';
-
-  const event: Event = {
-    title: 'Jantar de Curso',
-    description: 'Muito fixe',
-    teamMemberIds: [],
-    registerUrl: 'forms.com',
-    dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2023-12-05') },
-    location: 'Cervejaria Diu',
-    thumbnailPath: '/members/bruno-rosendo.png'
-  };
-</script>
-
-<div class="min-h-screen bg-gray-800 px-20 py-10">
-  <HexagonGrid
-    cols={5}
-    items={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}
-    orientation="vertical"
-    gap="small"
-    let:item
-    let:col
-    let:row
-  >
-    <HexagonEvent {event} />
-  </HexagonGrid>
-</div>