fds-vue-core 2.1.10 → 2.1.15

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.stories.ts

@@ -3,10 +3,51 @@ import icons from '../../../assets/icons'
 import FdsSticker from '../../FdsSticker/FdsSticker.vue'
 import FdsBlockLink from './FdsBlockLink.vue'
 
+const blockLinkTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      label?: string
+      icon?: string
+      arrow?: boolean
+      disabled?: boolean
+      href?: string
+      interactive?: boolean
+      default?: string
+      as?: 'router-link' | 'a' | 'button'
+      target?: string
+      rel?: string
+      download?: string
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.icon) attrs.push(`icon="${args.icon}"`)
+  if (args.arrow) attrs.push(':arrow="true"')
+  if (args.disabled) attrs.push(':disabled="true"')
+  if (args.href) attrs.push(`href="${args.href}"`)
+  if (!args.interactive) attrs.push(':interactive="false"')
+  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
+  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
+}
+
 const meta: Meta<typeof FdsBlockLink> = {
   title: 'FDS/Blocks/FdsBlockLink',
   component: FdsBlockLink,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockLinkTransform,
+      },
+    },
+  },
   argTypes: {
     label: { control: { type: 'text' } },
     arrow: { control: { type: 'boolean' } },
@@ -38,50 +79,12 @@ const meta: Meta<typeof FdsBlockLink> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockLinkTransform = (storyContext: {
-  args?: {
-    label?: string
-    icon?: string
-    arrow?: boolean
-    disabled?: boolean
-    href?: string
-    interactive?: boolean
-    default?: string
-    as?: 'router-link' | 'a' | 'button'
-    target?: string
-    rel?: string
-    download?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.icon) attrs.push(`icon="${args.icon}"`)
-  if (args.arrow) attrs.push(':arrow="true"')
-  if (args.disabled) attrs.push(':disabled="true"')
-  if (args.href) attrs.push(`href="${args.href}"`)
-  if (!args.interactive) attrs.push(':interactive="false"')
-  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsBlockLink },
     setup: () => ({ args }),
     template: `<FdsBlockLink v-bind="args">{{ args.default }}</FdsBlockLink>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockLinkTransform,
-      },
-    },
-  },
   args: {
     label: 'Enter some text',
     default: 'Nothing will happen',

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsInteractionBlockProps } from './types'
@@ -11,6 +11,7 @@ defineOptions({
 const attrs = useAttrs()
 
 const props = withDefaults(defineProps<FdsInteractionBlockProps>(), {
+  id: undefined,
   arrow: false,
   disabled: false,
   download: undefined,
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<FdsInteractionBlockProps>(), {
   rel: undefined,
   icon: undefined,
   interactive: true,
+  dataTestid: undefined,
   as: 'router-link',
 })
 
@@ -29,6 +31,9 @@ const emit = defineEmits<{
   (e: 'click', event: Event): void
 }>()
 
+const autoId = `fds-block-link-${Math.random().toString(36).slice(2, 9)}`
+const blockLinkId = computed(() => props.id ?? autoId)
+
 const innerClasses = computed(() => [
   props.disabled ? 'cursor-not-allowed shadow-none hover:border-transparent active:bg-transparent' : 'cursor-pointer',
   !props.interactive && 'cursor-auto',
@@ -77,18 +82,25 @@ const linkAttrs = computed(() => {
 const componentAttrs = computed(() => ({
   ...linkAttrs.value,
   ...attrs,
+  'data-testid': props.dataTestid,
 }))
 
 const componentType = computed(() => {
   if (props.as) return props.as
   return props.href ? 'a' : 'button'
 })
+
+defineSlots<{
+  default?: Slot
+  sticker?: Slot
+}>()
 </script>
 
 <template>
   <component
     :is="componentType"
     v-bind="componentAttrs"
+    :id="blockLinkId"
     class="box-border appearance-none text-left w-full flex items-start bg-white p-[calc(1rem-2px)] mb-3 text-blue-600 shadow-lg shadow-blue-200 rounded-2xl no-underline border-2 border-transparent transition-all duration-200 hover:border-blue-600 hover:border-2 active:border-transparent active:shadow-none active:bg-blue_t-100 focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0"
     :class="innerClasses"
     :target="componentType === 'a' ? target : undefined"

package/src/components/Blocks/FdsBlockLink/types.ts

@@ -2,6 +2,7 @@ import type { FdsIconName } from '../../FdsIcon/types'
 
 export interface FdsInteractionBlockProps {
   label: string
+  id?: string
   arrow?: boolean
   disabled?: boolean
   download?: string
@@ -10,5 +11,6 @@ export interface FdsInteractionBlockProps {
   rel?: string
   icon?: FdsIconName
   interactive?: boolean
+  dataTestid?: string
   as?: 'button' | 'a' | 'router-link'
 }

package/src/components/Buttons/ButtonBaseProps.ts

@@ -15,4 +15,9 @@ export interface FdsButtonBaseProps {
   target?: string
   rel?: string
   type?: 'button' | 'submit' | 'reset'
+  invert?: boolean
+  dataTestid?: string
+  ariaLabel?: string
+  ariaExpanded?: boolean
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Buttons/FdsButtonCopy/FdsButtonCopy.stories.ts

@@ -45,7 +45,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonCopy },
     setup: () => ({ args }),
     template: '<FdsButtonCopy v-bind="args" />',

package/src/components/Buttons/FdsButtonCopy/types.ts

@@ -5,4 +5,5 @@ export interface FdsCopyButtonProps {
   copiedLabel?: string
   timeoutMs?: number
   disabled?: boolean
+  onClick?: (() => void) | Array<() => void>
 }

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.stories.ts

@@ -53,7 +53,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -67,7 +67,7 @@ export const Default: Story = {
 }
 
 export const WithText: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -81,7 +81,7 @@ export const WithText: Story = {
 }
 
 export const Loading: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }
@@ -96,7 +96,7 @@ export const Loading: Story = {
 }
 
 export const Disabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonDownload },
     setup() {
       return { args }

package/src/components/Buttons/FdsButtonDownload/FdsButtonDownload.vue

@@ -1,24 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useAttrs } from 'vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
-import type { FdsButtonBaseProps } from '../ButtonBaseProps'
+import type { FdsButtonDownloadProps } from './types'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-interface DownloadOptions {
-  token: string
-  accept?: string
-  headerAuthKey?: string
-  headerAuthValuePrefix?: string
-  errorHandler?: (error: unknown) => void
-  onFinishCallback?: () => void
-}
-
-type FdsButtonDownloadProps = Omit<FdsButtonBaseProps, 'as' | 'icon'> & {
-  downloadOptions?: DownloadOptions
-}
+const attrs = useAttrs()
 
 const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
   loading: false,
@@ -26,6 +15,9 @@ const props = withDefaults(defineProps<FdsButtonDownloadProps>(), {
   iconPos: 'left',
   href: undefined,
   downloadOptions: undefined,
+  text: '',
+  ariaLabel: undefined,
+  dataTestid: undefined,
 })
 
 const emit = defineEmits<{
@@ -62,6 +54,12 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = computed(() => (isDownloading.value ? 'fill-gray-500' : 'fill-blue-500'))
 
+const buttonAttrs = computed(() => ({
+  ...attrs,
+  'data-testid': props.dataTestid,
+  'aria-label': props.ariaLabel,
+}))
+
 async function handleDownload(ev: MouseEvent) {
   if (props.disabled || props.loading || isDownloading.value) {
     ev.preventDefault()
@@ -146,7 +144,7 @@ async function handleDownload(ev: MouseEvent) {
   }
 }
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.downloadOptions) {
     handleDownload(ev)
   } else {
@@ -162,7 +160,7 @@ function onClick(ev: MouseEvent) {
 <template>
   <div :class="rootClasses" :aria-disabled="disabled ? 'true' : undefined">
     <button
-      v-bind="$attrs"
+      v-bind="buttonAttrs"
       :class="buttonClasses"
       :disabled="disabled || loading || isDownloading"
       type="button"

package/src/components/Buttons/FdsButtonDownload/types.ts

@@ -0,0 +1,22 @@
+type IconPos = 'left' | 'right'
+
+export interface FdsButtonDownloadProps {
+  loading?: boolean
+  disabled?: boolean
+  iconPos?: IconPos
+  href?: string
+  downloadOptions?: DownloadOptions | undefined
+  text: string
+  ariaLabel?: string
+  dataTestid?: string
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
+}
+
+export interface DownloadOptions {
+  token: string
+  accept?: string
+  headerAuthKey?: string
+  headerAuthValuePrefix?: string
+  errorHandler?: (error: unknown) => void
+  onFinishCallback?: () => void
+}

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonIcon from './FdsButtonIcon.vue'
 import icons from '../../../assets/icons'
+import FdsButtonIcon from './FdsButtonIcon.vue'
 
 const meta: Meta<typeof FdsButtonIcon> = {
   title: 'FDS/Buttons/FdsButtonIcon',
@@ -47,7 +47,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonIcon },
     setup: () => ({ args }),
     template: '<FdsButtonIcon v-bind="args" />',

package/src/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue

@@ -23,7 +23,7 @@ const buttonClasses = computed(() => [
   props.disabled ? 'opacity-20 cursor-not-allowed' : 'cursor-pointer',
 ])
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/Buttons/FdsButtonIcon/types.ts

@@ -9,4 +9,5 @@ export interface FdsIconButtonProps {
   ariaLabel?: string
   id?: string
   ariaDisabled?: boolean
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonMinor from './FdsButtonMinor.vue'
 import icons from '../../../assets/icons'
+import FdsButtonMinor from './FdsButtonMinor.vue'
 
 const meta: Meta<typeof FdsButtonMinor> = {
   title: 'FDS/Buttons/FdsButtonMinor',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonMinor },
     setup: () => ({ args }),
     template: '<FdsButtonMinor v-bind="args" />',

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue

@@ -28,6 +28,9 @@ const props = withDefaults(defineProps<FdsButtonMinorProps>(), {
   rel: undefined,
   type: 'button',
   invert: false,
+  ariaLabel: undefined,
+  dataTestid: undefined,
+  ariaExpanded: undefined,
 })
 
 const emit = defineEmits<{
@@ -64,7 +67,7 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = computed(() => (props.invert ? 'fill-white' : 'fill-blue-500'))
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonPrimary from './FdsButtonPrimary.vue'
 import icons from '../../../assets/icons'
+import FdsButtonPrimary from './FdsButtonPrimary.vue'
 
 const meta: Meta<typeof FdsButtonPrimary> = {
   title: 'FDS/Buttons/FdsButtonPrimary',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template: '<FdsButtonPrimary v-bind="args" />',
@@ -69,7 +69,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   args: { icon: 'arrowRight', text: 'With icon' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template: '<FdsButtonPrimary v-bind="args" />',
@@ -77,7 +77,7 @@ export const WithIcon: Story = {
 }
 
 export const Sizes: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonPrimary },
     setup: () => ({ args }),
     template:

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsButtonSecondary from './FdsButtonSecondary.vue'
 import icons from '../../../assets/icons'
+import FdsButtonSecondary from './FdsButtonSecondary.vue'
 
 const meta: Meta<typeof FdsButtonSecondary> = {
   title: 'FDS/Buttons/FdsButtonSecondary',
@@ -60,7 +60,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsButtonSecondary },
     setup: () => ({ args }),
     template: '<FdsButtonSecondary v-bind="args" />',

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue

@@ -55,7 +55,7 @@ const buttonClasses = computed(() => [
 
 const iconFillClass = 'fill-blue-500'
 
-function onClick(ev: MouseEvent) {
+const onClick = (ev: MouseEvent) => {
   if (props.disabled || props.loading) {
     ev.preventDefault()
     return

package/src/components/FdsIcon/FdsIcon.stories.ts

@@ -24,7 +24,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsIcon },
     setup: () => ({ args }),
     template: '<FdsIcon v-bind="args" />',

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

@@ -82,7 +82,7 @@ const modalTransform = (storyContext: {
 }
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -108,7 +108,7 @@ export const Default: Story = {
 }
 
 export const WithFooter: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -127,7 +127,7 @@ export const WithFooter: Story = {
 }
 
 export const Strict: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -148,7 +148,7 @@ export const Strict: Story = {
 }
 
 export const ValidInfo: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary },
     setup: () => createModalStory(args),
     template: `
@@ -166,7 +166,7 @@ export const ValidInfo: Story = {
 }
 
 export const WarningInfo: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `
@@ -188,7 +188,7 @@ export const WarningInfo: Story = {
 }
 
 export const LargeSize: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary },
     setup: () => createModalStory(args),
     template: `
@@ -207,7 +207,7 @@ export const LargeSize: Story = {
 }
 
 export const LongContentWithStickyFooter: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsModal, FdsButtonPrimary, FdsButtonSecondary },
     setup: () => createModalStory(args),
     template: `

package/src/components/FdsModal/FdsModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Slot } from 'vue'
 import { useHasSlot } from '../../composables/useHasSlots'
 import FdsButtonIcon from '../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsIcon from '../FdsIcon/FdsIcon.vue'
@@ -207,6 +207,11 @@ onBeforeUnmount(() => {
     cleanupFocusTrap()
   }
 })
+
+defineSlots<{
+  default?: Slot
+  'modal-footer'?: Slot
+}>()
 </script>
 
 <template>

package/src/components/FdsModal/types.ts

@@ -9,4 +9,5 @@ export interface FdsModalProps {
   lockScroll?: boolean
   info?: 'valid' | 'invalid' | 'warning'
   locale?: 'sv' | 'en'
+  onClose?: (value: boolean) => void
 }

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

@@ -22,7 +22,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -36,7 +36,7 @@ export const Default: Story = {
 }
 
 export const MiddlePage: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -54,7 +54,7 @@ export const MiddlePage: Story = {
 }
 
 export const LastPage: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -72,7 +72,7 @@ export const LastPage: Story = {
 }
 
 export const LargeMax: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)
@@ -90,7 +90,7 @@ export const LargeMax: Story = {
 }
 
 export const WithLoading: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsPagination },
     setup: () => {
       const current = ref((args.current ?? 1) as number)

package/src/components/FdsPagination/types.ts

@@ -3,4 +3,7 @@ export interface FdsPaginationProps {
   current: number
   max: number
   loading?: boolean
+  onPaginate?:
+    | ((payload: { target: { id: string }; detail: number }) => void)
+    | Array<(payload: { target: { id: string }; detail: number }) => void>
 }