@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/Select/Select.test.ts

@@ -0,0 +1,315 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import NexxtSelect from './Select.vue'
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+const stringOptions = ['Optie 1', 'Optie 2', 'Optie 3']
+const objectOptions = [
+  { label: 'Amsterdam', value: 'ams' },
+  { label: 'Rotterdam', value: 'rot' },
+]
+
+const open = async (wrapper: ReturnType<typeof mount>) => {
+  await wrapper.find('[role="combobox"]').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+describe('NexxtSelect', () => {
+  it('renders label and placeholder', () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, label: 'Keuze', placeholder: 'Kies een optie' },
+    })
+    expect(wrapper.text()).toContain('Keuze')
+    expect(wrapper.text()).toContain('Kies een optie')
+  })
+
+  it('opens dropdown and shows options on click', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await open(wrapper)
+    const items = wrapper.findAll('[role="option"]')
+    expect(items).toHaveLength(stringOptions.length)
+    expect(items[0].text()).toBe('Optie 1')
+  })
+
+  it('emits update:modelValue when an option is selected', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions, modelValue: null } })
+    await open(wrapper)
+    await wrapper.find('[role="option"]').trigger('click')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Optie 1'])
+  })
+
+  it('works with object options', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: objectOptions, modelValue: null } })
+    await open(wrapper)
+    const items = wrapper.findAll('[role="option"]')
+    expect(items[0].text()).toBe('Amsterdam')
+    await items[1].trigger('click')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['rot'])
+  })
+
+  it('displays the selected label when a value is set', () => {
+    const wrapper = mount(NexxtSelect, { props: { options: objectOptions, modelValue: 'ams' } })
+    expect(wrapper.text()).toContain('Amsterdam')
+  })
+
+  // The width itself is only measurable in a browser (see the Narrow story);
+  // jsdom can check the structure the ellipsis depends on.
+  it('renders the field text in an element of its own, so it can be truncated', () => {
+    const wrapper = mount(NexxtSelect, { props: { options: objectOptions, modelValue: 'ams' } })
+    const text = wrapper.find('[role="combobox"] .truncate')
+    expect(text.text()).toBe('Amsterdam')
+    expect(text.element.children).toHaveLength(0)
+  })
+
+  it('shows error ring and error message', () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, error: true, errorMessage: 'Verplicht veld' },
+    })
+    expect(wrapper.find('.ring-brick-400').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Verplicht veld')
+  })
+
+  it('renders required asterisk when required is true', () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, label: 'Keuze', required: true },
+    })
+    const asterisk = wrapper.find('.text-brick-500')
+    expect(asterisk.exists()).toBe(true)
+    expect(asterisk.text()).toBe('*')
+  })
+
+  it('shows the selected option icon in the field', () => {
+    const wrapper = mount(NexxtSelect, {
+      props: {
+        options: [
+          { label: 'Heading 1', value: 'h1', icon: 'h1' as const },
+          { label: 'Heading 2', value: 'h2', icon: 'h2' as const },
+        ],
+        modelValue: 'h2',
+      },
+    })
+
+    expect(wrapper.find('[role="combobox"] i').classes()).toContain('fa-h2')
+  })
+
+  it('lets an explicit leftIcon win over the selected option icon', () => {
+    const wrapper = mount(NexxtSelect, {
+      props: {
+        options: [{ label: 'Heading 1', value: 'h1', icon: 'h1' as const }],
+        modelValue: 'h1',
+        leftIcon: 'location-dot',
+      },
+    })
+
+    const icons = wrapper.find('[role="combobox"]').findAll('i')
+    expect(icons.some((icon) => icon.classes().includes('fa-location-dot'))).toBe(true)
+    expect(icons.some((icon) => icon.classes().includes('fa-h1'))).toBe(false)
+  })
+
+  it('marks the selected option with aria-selected', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: objectOptions, modelValue: 'rot' } })
+    await open(wrapper)
+    const selected = wrapper.find('[aria-selected="true"]')
+    expect(selected.text()).toBe('Rotterdam')
+  })
+})
+
+const combobox = (wrapper: ReturnType<typeof mount>) => wrapper.find('[role="combobox"]')
+
+const press = async (wrapper: ReturnType<typeof mount>, key: string) => {
+  await combobox(wrapper).trigger('keydown', { key })
+  await flushPromises()
+  await nextTick()
+}
+
+// Resolves aria-activedescendant to the option element it points at, so assertions
+// can be made about *which option* is highlighted rather than about an attribute.
+const highlighted = (wrapper: ReturnType<typeof mount>) => {
+  const id = combobox(wrapper).attributes('aria-activedescendant')
+  if (!id) return null
+  return wrapper.findAll('[role="option"]').find((o) => o.attributes('id') === id) ?? null
+}
+
+const isOpen = (wrapper: ReturnType<typeof mount>) => wrapper.find('[role="listbox"]').exists()
+
+describe('NexxtSelect keyboard navigation', () => {
+  it('has no active descendant while closed', () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+
+    expect(combobox(wrapper).attributes('aria-activedescendant')).toBeUndefined()
+  })
+
+  it('opens on ArrowDown and highlights the first option', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+
+    expect(isOpen(wrapper)).toBe(true)
+    expect(highlighted(wrapper)?.text()).toBe('Optie 1')
+  })
+
+  it('opens on ArrowUp and highlights the first option when nothing is selected', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowUp')
+
+    expect(isOpen(wrapper)).toBe(true)
+    expect(highlighted(wrapper)?.text()).toBe('Optie 1')
+  })
+
+  it('opens with the already selected option highlighted', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: objectOptions, modelValue: 'rot' },
+    })
+    await press(wrapper, 'ArrowDown')
+
+    expect(highlighted(wrapper)?.text()).toBe('Rotterdam')
+  })
+
+  it('moves down through the options with ArrowDown', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    expect(highlighted(wrapper)?.text()).toBe('Optie 2')
+
+    await press(wrapper, 'ArrowDown')
+    expect(highlighted(wrapper)?.text()).toBe('Optie 3')
+  })
+
+  it('wraps from the last option back to the first on ArrowDown', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+
+    expect(highlighted(wrapper)?.text()).toBe('Optie 1')
+  })
+
+  it('wraps from the first option to the last on ArrowUp', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowUp')
+
+    expect(highlighted(wrapper)?.text()).toBe('Optie 3')
+  })
+
+  it('moves up through the options with ArrowUp', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowUp')
+
+    expect(highlighted(wrapper)?.text()).toBe('Optie 1')
+  })
+
+  it('jumps to the first option on Home and the last on End', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'End')
+    expect(highlighted(wrapper)?.text()).toBe('Optie 3')
+
+    await press(wrapper, 'Home')
+    expect(highlighted(wrapper)?.text()).toBe('Optie 1')
+  })
+
+  it('selects the highlighted option on Enter and closes', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: objectOptions, modelValue: null },
+    })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    expect(highlighted(wrapper)?.text()).toBe('Rotterdam')
+
+    await press(wrapper, 'Enter')
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['rot'])
+    expect(isOpen(wrapper)).toBe(false)
+  })
+
+  it('selects the first option on Enter straight after opening with ArrowDown', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: objectOptions, modelValue: null },
+    })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'Enter')
+
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['ams'])
+  })
+
+  it('still opens on Enter from a closed state without selecting anything', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, modelValue: null },
+    })
+    await press(wrapper, 'Enter')
+
+    expect(isOpen(wrapper)).toBe(true)
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
+  })
+
+  it('closes on Escape without selecting', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, modelValue: null },
+    })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'Escape')
+
+    expect(isOpen(wrapper)).toBe(false)
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
+    expect(combobox(wrapper).attributes('aria-activedescendant')).toBeUndefined()
+  })
+
+  it('still toggles open and shut on Space without selecting', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: stringOptions, modelValue: null },
+    })
+    await press(wrapper, ' ')
+    expect(isOpen(wrapper)).toBe(true)
+
+    await press(wrapper, ' ')
+    expect(isOpen(wrapper)).toBe(false)
+    expect(wrapper.emitted()['update:modelValue']).toBeUndefined()
+  })
+
+  it('points aria-controls at the listbox it opens', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+
+    const controls = combobox(wrapper).attributes('aria-controls')
+    expect(controls).toBeTruthy()
+    expect(wrapper.find('[role="listbox"]').attributes('id')).toBe(controls)
+  })
+
+  it('gives every option a unique id for the highlight to reference', async () => {
+    const wrapper = mount(NexxtSelect, { props: { options: stringOptions } })
+    await press(wrapper, 'ArrowDown')
+
+    const ids = wrapper.findAll('[role="option"]').map((o) => o.attributes('id'))
+    expect(ids.every(Boolean)).toBe(true)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it('keeps aria-selected on the model value, independent of the highlight', async () => {
+    const wrapper = mount(NexxtSelect, {
+      props: { options: objectOptions, modelValue: 'ams' },
+    })
+    await press(wrapper, 'ArrowDown')
+    await press(wrapper, 'ArrowDown')
+
+    expect(highlighted(wrapper)?.text()).toBe('Rotterdam')
+    expect(wrapper.find('[aria-selected="true"]').text()).toBe('Amsterdam')
+  })
+})

package/src/components/molecules/SidebarMenuItem/SidebarMenuItem.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SidebarMenuItem from './SidebarMenuItem.vue'
+
+export default {
+  title: 'Components/Molecules/Sidebar Menu Item',
+  component: SidebarMenuItem,
+  decorators: [
+    () => ({
+      template:
+        '<div class="group" style="background-color: oklch(58.312% 0.19293 256.79281); width: 240px;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof SidebarMenuItem>
+
+type Story = StoryObj<typeof SidebarMenuItem>
+
+export const Default: Story = {
+  args: {
+    icon: 'house',
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">Dashboard</SidebarMenuItem>',
+  }),
+}
+
+export const WithNotification: Story = {
+  args: {
+    icon: 'bell',
+    notificationCount: 5,
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">Notifications</SidebarMenuItem>',
+  }),
+}
+
+export const CurrentRoute: Story = {
+  args: {
+    icon: 'house',
+    isCurentRoute: true,
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">Dashboard</SidebarMenuItem>',
+  }),
+}
+
+export const WhatsApp: Story = {
+  args: {
+    icon: 'whatsapp',
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">WhatsApp</SidebarMenuItem>',
+  }),
+}
+
+export const Hubspot: Story = {
+  args: {
+    icon: 'hubspot',
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">HubSpot</SidebarMenuItem>',
+  }),
+}
+
+export const Danger: Story = {
+  args: {
+    icon: 'power-off',
+    variant: 'danger',
+  },
+  render: (args) => ({
+    components: { SidebarMenuItem },
+    setup: () => ({ args }),
+    template: '<SidebarMenuItem v-bind="args">Uitloggen</SidebarMenuItem>',
+  }),
+}

package/src/components/molecules/SidebarMenuItem/SidebarMenuItem.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SidebarMenuItem from './SidebarMenuItem.vue'
+
+const stubs = {
+  NexxtIcon: {
+    name: 'NexxtIcon',
+    template: '<span :data-name="name" :data-type="type" />',
+    props: ['name', 'type'],
+  },
+}
+
+const mountItem = (props = {}, slots = {}) =>
+  mount(SidebarMenuItem, {
+    props: { icon: 'house', ...props },
+    slots,
+    global: { stubs },
+  })
+
+describe('SidebarMenuItem', () => {
+  describe('rendering', () => {
+    it('renders a button element', () => {
+      const wrapper = mountItem()
+      expect(wrapper.element.tagName).toBe('BUTTON')
+    })
+
+    it('renders the icon', () => {
+      const wrapper = mountItem({ icon: 'bell' })
+      expect(wrapper.find('[data-name="bell"]').exists()).toBe(true)
+    })
+
+    it('renders slot content', () => {
+      const wrapper = mountItem({}, { default: 'Dashboard' })
+      expect(wrapper.text()).toContain('Dashboard')
+    })
+  })
+
+  describe('notification count', () => {
+    it('renders the notification badge when notificationCount is set', () => {
+      const wrapper = mountItem({ notificationCount: 3 })
+      expect(wrapper.find('span[aria-hidden]').text()).toBe('3')
+    })
+
+    it('does not render the notification badge when notificationCount is absent', () => {
+      const wrapper = mountItem()
+      expect(wrapper.find('span[class*="bg-red"]').exists()).toBe(false)
+    })
+
+    it('includes the notification count in an sr-only span for screen readers', () => {
+      const wrapper = mountItem({ notificationCount: 3 })
+      expect(wrapper.find('.sr-only').text()).toContain('3')
+    })
+
+    it('does not render an sr-only span when notificationCount is absent', () => {
+      const wrapper = mountItem()
+      expect(wrapper.find('.sr-only').exists()).toBe(false)
+    })
+  })
+
+  describe('current route', () => {
+    it('applies the active class when isCurentRoute is true', () => {
+      const wrapper = mountItem({ isCurentRoute: true })
+      expect(wrapper.classes()).toContain('bg-cornflower-blue-300/40')
+      expect(wrapper.classes()).toContain('shadow-[inset_4px_0_0_0_#fff]')
+    })
+
+    it('does not apply the active class when isCurentRoute is false', () => {
+      const wrapper = mountItem({ isCurentRoute: false })
+      expect(wrapper.classes()).not.toContain('shadow-[inset_4px_0_0_0_#fff]')
+    })
+
+    it('sets aria-current="page" when isCurentRoute is true', () => {
+      const wrapper = mountItem({ isCurentRoute: true })
+      expect(wrapper.attributes('aria-current')).toBe('page')
+    })
+
+    it('omits aria-current when isCurentRoute is false', () => {
+      const wrapper = mountItem({ isCurentRoute: false })
+      expect(wrapper.attributes('aria-current')).toBeUndefined()
+    })
+  })
+
+  describe('variant', () => {
+    it('applies cornflower blue hover by default', () => {
+      const wrapper = mountItem()
+      expect(wrapper.classes()).toContain('hover:bg-cornflower-blue-300/40')
+    })
+
+    it('applies brick red hover for danger variant', () => {
+      const wrapper = mountItem({ variant: 'danger' })
+      expect(wrapper.classes()).toContain('hover:bg-brick-500')
+      expect(wrapper.classes()).not.toContain('hover:bg-cornflower-blue-300/40')
+    })
+  })
+
+  describe('click emit', () => {
+    it('emits click when the button is clicked', async () => {
+      const wrapper = mountItem()
+      await wrapper.trigger('click')
+      expect(wrapper.emitted('click')).toHaveLength(1)
+    })
+  })
+})

package/src/components/molecules/SkeletonPropertyCard/SkeletonPropertyCard.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SkeletonPropertyCard from './SkeletonPropertyCard.vue'
+
+export default {
+  title: 'Components/Molecules/Skeleton property card',
+  component: SkeletonPropertyCard,
+} satisfies Meta<typeof SkeletonPropertyCard>
+
+type Story = StoryObj<typeof SkeletonPropertyCard>
+
+export const Default: Story = {}

package/src/components/molecules/SkeletonPropertyCard/SkeletonPropertyCard.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SkeletonPropertyCard from './SkeletonPropertyCard.vue'
+
+describe('SkeletonPropertyCard', () => {
+  it('renders skeleton card with status role', () => {
+    const wrapper = mount(SkeletonPropertyCard)
+
+    expect(wrapper.find('[role="status"]').exists()).toBe(true)
+  })
+
+  it('renders image skeleton placeholder', () => {
+    const wrapper = mount(SkeletonPropertyCard)
+
+    expect(wrapper.find('.h-40.w-full').exists()).toBe(true)
+  })
+
+  it('renders text skeleton placeholders', () => {
+    const wrapper = mount(SkeletonPropertyCard)
+    const skeletons = wrapper.findAll('.animate-pulse')
+
+    expect(skeletons.length).toBe(5)
+  })
+
+  it('has default aria-label', () => {
+    const wrapper = mount(SkeletonPropertyCard)
+
+    expect(wrapper.find('[aria-label="Woning wordt geladen..."]').exists()).toBe(true)
+  })
+
+  it('accepts custom aria-label', () => {
+    const wrapper = mount(SkeletonPropertyCard, {
+      props: { ariaLabel: 'Geen woningen gevonden' },
+    })
+
+    expect(wrapper.find('[aria-label="Geen woningen gevonden"]').exists()).toBe(true)
+  })
+})

package/src/components/molecules/SocialIcons/SocialIcons.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SocialIcons from './SocialIcons.vue'
+
+export default {
+  title: 'Components/Molecules/Social Icons',
+  component: SocialIcons,
+} satisfies Meta<typeof SocialIcons>
+
+type Story = StoryObj<typeof SocialIcons>
+
+export const Default: Story = {
+  args: {
+    facebook: true,
+    instagram: true,
+    linkedin: true,
+    x: true,
+    google: true,
+    tiktok: true,
+  },
+}
+
+export const Selective: Story = {
+  args: {
+    facebook: true,
+    linkedin: true,
+    instagram: true,
+  },
+}

package/src/components/molecules/SocialIcons/SocialIcons.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SocialIcons from './SocialIcons.vue'
+
+describe('SocialIcons', () => {
+  it('renders nothing when no props are set', () => {
+    const wrapper = mount(SocialIcons)
+    expect(wrapper.findAll('.rounded-full')).toHaveLength(0)
+  })
+
+  it('renders only the requested icons', () => {
+    const wrapper = mount(SocialIcons, {
+      props: {
+        facebook: true,
+        instagram: true,
+      },
+    })
+
+    const icons = wrapper.findAll('.rounded-full')
+    expect(icons).toHaveLength(2)
+
+    // Check for specific background colors to verify which icons are rendered
+    expect(icons[0]!.classes()).toContain('bg-brands-facebook')
+    expect(icons[1]!.classes()).toContain('bg-brands-instagram')
+  })
+
+  it('has correct accessibility attributes', () => {
+    const wrapper = mount(SocialIcons, {
+      props: {
+        facebook: true,
+      },
+    })
+
+    const list = wrapper.find('ul')
+    expect(list.exists()).toBe(true)
+    expect(list.attributes('aria-label')).toBe('Sociale media kanalen')
+
+    const item = wrapper.find('li')
+    expect(item.exists()).toBe(true)
+    expect(item.attributes('aria-label')).toBe('Facebook')
+    expect(item.findComponent({ name: 'NexxtIcon' }).attributes('aria-hidden')).toBe('true')
+  })
+
+  it('renders all icons when all props are true', () => {
+    const wrapper = mount(SocialIcons, {
+      props: {
+        facebook: true,
+        instagram: true,
+        linkedin: true,
+        x: true,
+        google: true,
+        tiktok: true,
+      },
+    })
+
+    expect(wrapper.findAll('.rounded-full')).toHaveLength(6)
+  })
+})

package/src/components/molecules/SocialMediaCustomTemplate/SocialMediaCustomTemplate.stories.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SocialMediaCustomTemplate from './SocialMediaCustomTemplate.vue'
+
+export default {
+  title: 'Components/Molecules/Social Media Custom Template',
+  component: SocialMediaCustomTemplate,
+} satisfies Meta<typeof SocialMediaCustomTemplate>
+
+type Story = StoryObj<typeof SocialMediaCustomTemplate>
+
+export const Default: Story = {}