fds-vue-core 2.1.4 → 2.1.6

package/src/components/FdsModal/FdsModal.stories.ts

@@ -0,0 +1,241 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsButtonPrimary from '@/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue'
+import FdsButtonSecondary from '@/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
+import FdsModal from './FdsModal.vue'
+
+const meta: Meta<typeof FdsModal> = {
+  title: 'FDS/FdsModal',
+  component: FdsModal,
+  tags: ['autodocs'],
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg', 'xl'] },
+    alignTop: { control: { type: 'boolean' } },
+    alignLeftFooter: { control: { type: 'boolean' } },
+    stickyFooter: { control: { type: 'boolean' } },
+    strict: { control: { type: 'boolean' } },
+    lockScroll: { control: { type: 'boolean' } },
+    info: { control: { type: 'select' }, options: ['valid', 'invalid', 'warning'] },
+    locale: { control: { type: 'select' }, options: ['sv', 'en'] },
+    open: { control: { type: 'boolean' } },
+  },
+  args: {
+    heading: 'Modal heading',
+    size: 'md',
+    alignTop: false,
+    alignLeftFooter: false,
+    stickyFooter: false,
+    strict: false,
+    lockScroll: false,
+    info: undefined,
+    locale: 'sv',
+    open: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Helper to create modal story setup with reactive open state
+const createModalStory = (args: any) => {
+  const open = ref(args.open ?? false)
+  const handleClose = () => {
+    open.value = false
+  }
+  const handleOpen = () => {
+    open.value = true
+  }
+  return { args, open, handleClose, handleOpen }
+}
+
+const modalTransform = (storyContext: {
+  args?: {
+    heading?: string
+    size?: string
+    open?: boolean
+    lockScroll?: boolean
+    info?: string
+    locale?: string
+    strict?: boolean
+  }
+}) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
+  if (args.size && args.size !== 'md') attrs.push(`size="${args.size}"`)
+  if (args.open) attrs.push(':open="true"')
+  if (args.lockScroll) attrs.push('lockScroll')
+  if (args.info) attrs.push(`info="${args.info}"`)
+  if (args.locale && args.locale !== 'sv') attrs.push(`locale="${args.locale}"`)
+  if (args.strict) attrs.push('strict')
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+
+  return `<FdsModal${attrsStr} @close="handleClose">
+  <p>This is the modal content. You can add any content here.</p>
+  <template #modal-footer>
+    <FdsButtonSecondary text="Cancel" @click="handleClose" />
+    <FdsButtonPrimary text="Confirm" />
+  </template>
+</FdsModal>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>This is the modal content. You can add any content here.</p>
+          <template #modal-footer>
+            <FdsButtonSecondary text="Cancel" @click="handleClose" />
+            <FdsButtonPrimary text="Confirm" />
+          </template>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: modalTransform,
+      },
+    },
+  },
+}
+
+export const WithFooter: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>This is the modal content with a footer.</p>
+          <template #modal-footer>
+            <FdsButtonSecondary text="Cancel" @click="handleClose" />
+            <FdsButtonPrimary text="Confirm" />
+          </template>
+        </FdsModal>
+      </div>
+    `,
+  }),
+}
+
+export const Strict: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>This is a strict modal. You cannot close it by clicking the backdrop or pressing Escape.</p>
+          <template #modal-footer>
+            <FdsButtonSecondary text="Close" @click="handleClose" />
+          </template>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  args: {
+    strict: true,
+  },
+}
+
+export const ValidInfo: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>Your changes have been saved successfully.</p>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  args: {
+    info: 'valid',
+  },
+}
+
+export const WarningInfo: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>Are you sure you want to continue? This action cannot be undone.</p>
+          <template #modal-footer>
+            <FdsButtonSecondary text="Cancel" @click="handleClose" />
+            <FdsButtonPrimary text="Confirm" />
+          </template>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  args: {
+    info: 'warning',
+  },
+}
+
+export const LargeSize: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>This is a large modal with more space for content.</p>
+          <p>You can add multiple paragraphs and other content here.</p>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  args: {
+    size: 'xl',
+  },
+}
+
+export const LongContentWithStickyFooter: Story = {
+  render: (args) => ({
+    components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
+    setup: () => createModalStory(args),
+    template: `
+      <div>
+        <FdsButtonPrimary text="Open Modal" @click="handleOpen" />
+        <FdsModal v-bind="args" :open="open" @close="handleClose">
+          <p>This is the first paragraph of content.</p>
+          <p>This is the second paragraph with more information about the topic at hand.</p>
+          <p>Here is a third paragraph that provides additional context and details.</p>
+          <p>And yet another paragraph to demonstrate the scrolling behavior.</p>
+          <p>This paragraph continues to show how the content flows in the modal.</p>
+          <p>More content is added here to make the modal longer and more scrollable.</p>
+          <p>Another paragraph to show the sticky footer functionality in action.</p>
+          <p>This content should be long enough to require scrolling.</p>
+          <p>The footer should remain sticky at the bottom as you scroll through the content.</p>
+          <p>This is the final paragraph to complete the long content example.</p>
+          <template #modal-footer>
+            <FdsButtonSecondary text="Cancel" @click="handleClose" />
+            <FdsButtonPrimary text="Save Changes" />
+          </template>
+        </FdsModal>
+      </div>
+    `,
+  }),
+  args: {
+    heading: 'Long Content Modal',
+    size: 'md',
+    stickyFooter: true,
+    lockScroll: true,
+  },
+}

package/src/components/FdsModal/FdsModal.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { FdsModalProps } from './types'
+
+const props = withDefaults(defineProps<FdsModalProps>(), {
+  open: false,
+  heading: '',
+  size: 'md',
+  alignTop: false,
+  alignLeftFooter: false,
+  stickyFooter: false,
+  strict: false,
+  lockScroll: false,
+  info: undefined,
+  locale: 'sv',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'update:open', value: boolean): void
+}>()
+
+const isOpen = ref(props.open)
+let cleanupFocusTrap: (() => void) | null = null
+const previouslyFocusedElement = ref<HTMLElement | null>(null)
+
+const hasFooterSlot = useHasSlot('modal-footer')
+
+const modalOuterClasses = computed(() => ['fixed top-0 left-0 w-full h-full overflow-auto z-100'])
+
+const modalInnerClasses = computed(() => [
+  'relative min-w-[288px] w-[calc(100%-5rem)] bg-white rounded-lg overflow-auto z-[99999] shadow-lg px-6 pt-6.5 left-1/2',
+  'max-h-[80%] top-1/2 translate-x-[-50%]',
+  props.alignTop ? 'top-[10rem]' : 'translate-y-[-50%]',
+  props.stickyFooter ? 'pb-0' : 'pb-8',
+  {
+    'max-w-[480px]': props.size === 'sm',
+    'max-w-[588px]': props.size === 'md',
+    'max-w-[768px]': props.size === 'lg',
+    'max-w-[1200px]': props.size === 'xl',
+  },
+])
+
+const headerTitleClasses = computed(() => ['m-0'])
+
+const iconName = computed(() => {
+  if (props.info === 'valid') return 'check'
+  if (props.info === 'invalid' || props.info === 'warning') return 'alert'
+  return null
+})
+
+const iconClasses = computed(() => [
+  'inline mr-2 float-left',
+  {
+    'fill-green-600': props.info === 'valid',
+    'fill-red-600': props.info === 'invalid',
+    'fill-yellow-600': props.info === 'warning',
+  },
+])
+
+const closeLabel = computed(() => (props.locale === 'sv' ? 'Stäng dialogruta' : 'Close modal window'))
+
+const footerClasses = computed(() => [
+  'mt-6 flex flex-col gap-4 left-0 right-0',
+  {
+    'sm:flex-row sm:justify-end': !props.alignLeftFooter,
+    'sm:flex-row sm:justify-start': props.alignLeftFooter,
+    'sticky bg-white bottom-0 shadow-[0px_-8px_16px_0px_rgba(255,255,255,0.59)] z-[2] -mx-6 px-6 pb-6':
+      props.stickyFooter,
+  },
+])
+
+const setHtmlOverflow = (value: 'auto' | 'hidden') => {
+  if (typeof document === 'undefined') return
+  const htmlEl = document.documentElement
+  if (htmlEl) {
+    htmlEl.style.overflow = value
+  }
+}
+
+const handleBackdropClick = () => {
+  handleClose('backdrop')
+}
+
+const handleClose = (context: 'backdrop' | 'icon' | 'keydown') => {
+  if (props.strict && context === 'icon') {
+    return
+  }
+  isOpen.value = false
+  setHtmlOverflow('auto')
+
+  // Restore focus to the element that opened the modal
+  nextTick(() => {
+    if (previouslyFocusedElement.value) {
+      previouslyFocusedElement.value.focus()
+      previouslyFocusedElement.value = null
+    }
+  })
+
+  emit('close')
+  emit('update:open', false)
+}
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (isOpen.value && e.code === 'Escape') {
+    handleClose('keydown')
+  }
+}
+
+const getTabList = (modal: Element) =>
+  modal.querySelectorAll(
+    'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])',
+  )
+
+const trapFocus = () => {
+  if (!isOpen.value) return
+
+  nextTick(() => {
+    const modal = document.querySelector('.fds-modal-inner')
+    if (!modal) return
+
+    const tabList = getTabList(modal)
+
+    if (tabList.length > 0) {
+      ;(tabList[0] as HTMLElement).focus()
+    }
+
+    const handleTabKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+
+      const currentTabList = getTabList(modal)
+      if (currentTabList.length === 0) return
+
+      const firstFocusableEl = currentTabList[0] as HTMLElement
+      const lastFocusableEl = currentTabList[currentTabList.length - 1] as HTMLElement
+      const isTabOrderReversed = e.shiftKey
+
+      // Prevent leaving modal
+      if (isTabOrderReversed && document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus()
+        e.preventDefault()
+      } else if (!isTabOrderReversed && document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus()
+        e.preventDefault()
+      }
+    }
+
+    // Add event listener to the modal element
+    modal.addEventListener('keydown', handleTabKey as EventListener, true)
+
+    cleanupFocusTrap = () => {
+      modal.removeEventListener('keydown', handleTabKey as EventListener, true)
+    }
+  })
+}
+
+watch(
+  () => props.open,
+  (newValue) => {
+    isOpen.value = newValue
+    if (newValue) {
+      // Save the currently focused element before opening the modal
+      previouslyFocusedElement.value = document.activeElement as HTMLElement
+      if (props.lockScroll) {
+        setHtmlOverflow('hidden')
+      }
+      trapFocus()
+    } else {
+      setHtmlOverflow('auto')
+      if (cleanupFocusTrap) {
+        cleanupFocusTrap()
+        cleanupFocusTrap = null
+      }
+
+      // Restore focus to the element that opened the modal
+      nextTick(() => {
+        if (previouslyFocusedElement.value) {
+          previouslyFocusedElement.value.focus()
+          previouslyFocusedElement.value = null
+        }
+      })
+    }
+  },
+)
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown, true)
+
+  if (props.open) {
+    // Save the currently focused element before opening the modal
+    previouslyFocusedElement.value = document.activeElement as HTMLElement
+
+    if (props.lockScroll) {
+      setHtmlOverflow('hidden')
+    }
+    trapFocus()
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', handleKeyDown, true)
+  setHtmlOverflow('auto')
+  if (cleanupFocusTrap) {
+    cleanupFocusTrap()
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      @click="handleBackdropClick"
+      :class="modalOuterClasses"
+    >
+      <!-- Backdrop -->
+      <div class="fixed top-0 left-0 w-full h-full bg-black/34 z-99"></div>
+
+      <!-- Modal Inner -->
+      <div
+        class="fds-modal-inner"
+        :class="modalInnerClasses"
+        role="alertdialog"
+        aria-modal="true"
+        @click.stop
+      >
+        <!-- Header -->
+        <div class="flex justify-between mb-4">
+          <h3
+            tabindex="-1"
+            :class="headerTitleClasses"
+          >
+            <FdsIcon
+              v-if="iconName"
+              :name="iconName"
+              :size="24"
+              :class="iconClasses"
+            />
+            {{ heading }}
+          </h3>
+          <FdsButtonIcon
+            v-if="!strict"
+            icon="cross"
+            :size="28"
+            @click="handleClose('icon')"
+            :ariaLabel="closeLabel"
+            class="ml-4"
+          />
+        </div>
+
+        <!-- Content -->
+        <div class="mb-0-last-child">
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <div
+          v-if="hasFooterSlot"
+          :class="footerClasses"
+        >
+          <slot name="modal-footer" />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/FdsModal/types.ts

@@ -0,0 +1,12 @@
+export interface FdsModalProps {
+  open?: boolean
+  heading?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  alignTop?: boolean
+  alignLeftFooter?: boolean
+  stickyFooter?: boolean
+  strict?: boolean
+  lockScroll?: boolean
+  info?: 'valid' | 'invalid' | 'warning'
+  locale?: 'sv' | 'en'
+}

package/src/components/FdsPagination/FdsPagination.stories.ts

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+import FdsPagination from './FdsPagination.vue'
+
+const meta: Meta<typeof FdsPagination> = {
+  title: 'FDS/FdsPagination',
+  component: FdsPagination,
+  tags: ['autodocs'],
+  argTypes: {
+    current: { control: { type: 'number' } },
+    max: { control: { type: 'number' } },
+    loading: { control: { type: 'boolean' } },
+  },
+  args: {
+    current: 1,
+    max: 10,
+    loading: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsPagination },
+    setup: () => {
+      const current = ref((args.current ?? 1) as number)
+      const handlePaginate = (page: number) => {
+        current.value = page
+      }
+      return { args, current, handlePaginate }
+    },
+    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
+  }),
+}
+
+export const MiddlePage: Story = {
+  render: (args) => ({
+    components: { FdsPagination },
+    setup: () => {
+      const current = ref((args.current ?? 1) as number)
+      const handlePaginate = (page: number) => {
+        current.value = page
+      }
+      return { args, current, handlePaginate }
+    },
+    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
+  }),
+  args: {
+    current: 5,
+    max: 10,
+  },
+}
+
+export const LastPage: Story = {
+  render: (args) => ({
+    components: { FdsPagination },
+    setup: () => {
+      const current = ref((args.current ?? 1) as number)
+      const handlePaginate = (page: number) => {
+        current.value = page
+      }
+      return { args, current, handlePaginate }
+    },
+    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
+  }),
+  args: {
+    current: 10,
+    max: 10,
+  },
+}
+
+export const LargeMax: Story = {
+  render: (args) => ({
+    components: { FdsPagination },
+    setup: () => {
+      const current = ref((args.current ?? 1) as number)
+      const handlePaginate = (page: number) => {
+        current.value = page
+      }
+      return { args, current, handlePaginate }
+    },
+    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
+  }),
+  args: {
+    current: 1,
+    max: 100,
+  },
+}
+
+export const WithLoading: Story = {
+  render: (args) => ({
+    components: { FdsPagination },
+    setup: () => {
+      const current = ref((args.current ?? 1) as number)
+      const handlePaginate = (page: number) => {
+        current.value = page
+      }
+      return { args, current, handlePaginate }
+    },
+    template: `<FdsPagination :current="current" :max="args.max" :loading="args.loading" @paginate="handlePaginate" />`,
+  }),
+  args: {
+    current: 1,
+    max: 10,
+    loading: true,
+  },
+}