fds-vue-core 2.1.11 → 2.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.1.11",
+  "version": "2.1.16",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",
@@ -70,13 +70,12 @@
     "vue-imask": "^7.6.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-controls": "^9.0.8",
-    "@storybook/addon-docs": "^9.1.11",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/addon-vitest": "^9.1.10",
-    "@storybook/vue3-vite": "^9.1.10",
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/vue3-vite": "^10.1.10",
     "@tailwindcss/vite": "^4.1.18",
     "@tsconfig/node22": "^22.0.5",
     "@types/node": "^22.16.5",
@@ -90,14 +89,13 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",
     "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-storybook": "^10.1.10",
     "eslint-plugin-vue": "~10.6.2",
     "lit": "^3.3.1",
     "playwright": "^1.57.0",
     "prettier": "3.7.4",
     "sass": "^1.96.0",
-    "storybook": "^9.1.10",
-    "storybook-vue-slots": "^9.1.5",
+    "storybook": "^10.1.10",
     "typescript": "~5.9.3",
     "vite": "^7.2.7",
     "vite-plugin-dts": "^4.5.4",

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

@@ -1,10 +1,50 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsBlockAlert from './FdsBlockAlert.vue'
 
+const blockAlertTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      visible?: boolean
+      label?: string
+      closeable?: boolean
+      collapsable?: boolean
+      expanded?: boolean
+      locale?: string
+      default?: string
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.closeable) attrs.push(':closeable="true"')
+  if (args.collapsable) attrs.push(':collapsable="true"')
+  if (args.expanded) attrs.push(':expanded="true"')
+  if (args.locale && args.locale !== 'sv') attrs.push(`locale="${args.locale}"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  let content = ''
+
+  if (args.default) {
+    content = `\n  <p>${args.default}</p>\n`
+  }
+
+  return `<FdsBlockAlert${attrsStr}>${content}</FdsBlockAlert>`
+}
+
 const meta: Meta<typeof FdsBlockAlert> = {
   title: 'FDS/Blocks/FdsBlockAlert',
   component: FdsBlockAlert,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockAlertTransform,
+      },
+    },
+  },
   argTypes: {
     closeable: { control: { type: 'boolean' } },
     collapsable: { control: { type: 'boolean' } },
@@ -26,44 +66,12 @@ const meta: Meta<typeof FdsBlockAlert> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockAlertTransform = (storyContext: {
-  args?: {
-    visible?: boolean
-    label?: string
-    closeable?: boolean
-    collapsable?: boolean
-    expanded?: boolean
-    locale?: string
-    default?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.closeable) attrs.push(':closeable="true"')
-  if (args.collapsable) attrs.push(':collapsable="true"')
-  if (args.expanded) attrs.push(':expanded="true"')
-  if (args.locale && args.locale !== 'sv') attrs.push(`locale="${args.locale}"`)
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockAlert${attrsStr}>${content}</FdsBlockAlert>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsBlockAlert },
     setup: () => ({ args }),
     template: `<FdsBlockAlert v-bind="args"><p>{{ args.default }}</p></FdsBlockAlert>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockAlertTransform,
-      },
-    },
-  },
   args: {
     label: 'About this component',
     default: 'This is an alert block with some important information.',
@@ -79,6 +87,15 @@ export const WithLabel: Story = {
       </FdsBlockAlert>
     `,
   }),
+  parameters: {
+    docs: {
+      source: {
+        transform: () => `<FdsBlockAlert label="Information">
+  <p>This alert block has a <a href="test" class="link">test</a> label and provides important information to the user.</p>
+</FdsBlockAlert>`,
+      },
+    },
+  },
 }
 
 export const Collapsable: Story = {
@@ -91,4 +108,14 @@ export const Collapsable: Story = {
       </FdsBlockAlert>
     `,
   }),
+  parameters: {
+    docs: {
+      source: {
+        transform: () => `<FdsBlockAlert label="Collapsable Alert" collapsable>
+  <p>This alert block can be collapsed and expanded. The content below is only visible when expanded.</p>
+  <p>Additional details about the alert can be shown here.</p>
+</FdsBlockAlert>`,
+      },
+    },
+  },
 }

package/src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
 import FdsButtonIcon from '../../Buttons/FdsButtonIcon/FdsButtonIcon.vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
@@ -54,6 +54,10 @@ function handleToggle() {
   isExpanded.value = !isExpanded.value
   emit('toggle')
 }
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>

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

@@ -1,10 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsBlockContent from './FdsBlockContent.vue'
 
+const blockContentTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      heading?: string
+      headerInfo?: string
+      default?: string
+      tight?: boolean
+      color?: string
+      borderLeft?: boolean
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
+  if (args.tight) attrs.push(`:tight="true"`)
+  if (args.color && args.color !== 'blue') attrs.push(`color="${args.color}"`)
+  if (args.borderLeft) attrs.push(`:borderLeft="true"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  let content = ''
+
+  if (args.headerInfo || args.default) {
+    content = '\n'
+    if (args.headerInfo) {
+      content += `  <template #headerInfo>\n    <div v-html='${args.headerInfo}' />\n  </template>\n`
+    }
+    if (args.default) {
+      content += `  <p>${args.default}</p>\n`
+    }
+  }
+
+  return `<FdsBlockContent${attrsStr}>${content}</FdsBlockContent>`
+}
+
 const meta: Meta<typeof FdsBlockContent> = {
   title: 'FDS/Blocks/FdsBlockContent',
   component: FdsBlockContent,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockContentTransform,
+      },
+    },
+  },
   argTypes: {
     heading: { control: { type: 'text' } },
     borderLeft: { control: { type: 'radio' }, options: ['', 'green', 'yellow', 'red'] },
@@ -28,41 +71,8 @@ const meta: Meta<typeof FdsBlockContent> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockContentTransform = (storyContext: {
-  args?: {
-    heading?: string
-    headerInfo?: string
-    default?: string
-    tight?: boolean
-    color?: string
-    borderLeft?: boolean
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-  if (args.heading) attrs.push(`heading="${args.heading}"`)
-  if (args.tight) attrs.push(':tight="true"')
-  if (args.color && args.color !== 'blue') attrs.push(`color="${args.color}"`)
-  if (args.borderLeft) attrs.push(':borderLeft="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  let content = ''
-
-  if (args.headerInfo || args.default) {
-    content = '\n'
-    if (args.headerInfo) {
-      content += `  <template #headerInfo>\n    <div v-html="${args.headerInfo}" />\n  </template>\n`
-    }
-    if (args.default) {
-      content += `  <p>${args.default}</p>\n`
-    }
-  }
-
-  return `<FdsBlockContent${attrsStr}>${content}</FdsBlockContent>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsBlockContent },
     setup: () => ({ args }),
     template: `
@@ -73,13 +83,6 @@ export const Default: Story = {
       <p>{{ args.default }}</p>
     </FdsBlockContent>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockContentTransform,
-      },
-    },
-  },
   args: {
     heading: 'About this component',
     default:

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

@@ -2,10 +2,42 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import icons from '../../../assets/icons'
 import FdsBlockExpander from './FdsBlockExpander.vue'
 
+const blockExpanderTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      label?: string
+      preIcon?: string
+      open?: boolean
+      disabled?: boolean
+      default?: string
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.preIcon) attrs.push(`preIcon="${args.preIcon}"`)
+  if (args.open) attrs.push(':open="true"')
+  if (args.disabled) attrs.push(':disabled="true"')
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
+  return `<FdsBlockExpander${attrsStr}>${content}</FdsBlockExpander>`
+}
+
 const meta: Meta<typeof FdsBlockExpander> = {
   title: 'FDS/Blocks/FdsBlockExpander',
   component: FdsBlockExpander,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockExpanderTransform,
+      },
+    },
+  },
   argTypes: {
     disabled: { control: { type: 'boolean' } },
     open: { control: { type: 'boolean' } },
@@ -25,41 +57,12 @@ const meta: Meta<typeof FdsBlockExpander> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockExpanderTransform = (storyContext: {
-  args?: {
-    label?: string
-    preIcon?: string
-    open?: boolean
-    disabled?: boolean
-    default?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.preIcon) attrs.push(`preIcon="${args.preIcon}"`)
-  if (args.open) attrs.push(':open="true"')
-  if (args.disabled) attrs.push(':disabled="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockExpander${attrsStr}>${content}</FdsBlockExpander>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsBlockExpander },
     setup: () => ({ args }),
     template: `<FdsBlockExpander v-bind="args"><p>{{ args.default }}</p></FdsBlockExpander>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockExpanderTransform,
-      },
-    },
-  },
   args: {
     label: 'Expandable Content',
     default: 'This is the expandable content that shows when the block is opened.',

package/src/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue

@@ -1,21 +1,35 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, useAttrs, watch, type Slot } from 'vue'
+import { useHasSlot } from '../../../composables/useHasSlots'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsExpanderBlockProps } from './types'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
 const props = withDefaults(defineProps<FdsExpanderBlockProps>(), {
   disabled: false,
   label: '',
   open: false,
   preIcon: undefined,
+  id: undefined,
+  dataTestid: undefined,
 })
 
+const hasExtraRowSlot = useHasSlot('extra-row')
+
 const emit = defineEmits<{
   (e: 'toggle'): void
 }>()
 
 const isOpen = ref(props.open)
 
+const autoId = `fds-block-expander-${Math.random().toString(36).slice(2, 9)}`
+const blockExpanderId = computed(() => props.id ?? autoId)
+
 // Watch for changes to the open prop
 watch(
   () => props.open,
@@ -30,37 +44,58 @@ const expanderClasses = computed(() => [
 ])
 
 const headerClasses = computed(() => [
-  'flex w-full items-start text-left justify-between bg-white text-blue-600 rounded-2xl p-[calc(1rem-2px)] border-2 border-white transition-colors border-2 border-white hover:border-blue-500 active:bg-blue_t-100 active:border-white focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0',
+  'flex w-full flex-col text-left  bg-white text-blue-600 rounded-2xl p-[calc(1rem-2px)] border-2 border-white transition-colors border-2 border-white hover:border-blue-500 active:bg-blue_t-100 active:border-white focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0',
   props.disabled ? 'cursor-not-allowed hover:border-2 hover:border-transparent  active:bg-white' : 'cursor-pointer',
   isOpen.value ? 'rounded-b-none' : 'rounded-b-2xl',
+  hasExtraRowSlot.value ? '' : '',
 ])
 
+const buttonRowClasses = computed(() => ['flex justify-between items-start w-full', hasExtraRowSlot.value ? '' : ''])
+
+const buttonAttrs = computed(() => ({
+  ...attrs,
+  'data-testid': props.dataTestid,
+  id: blockExpanderId.value,
+}))
+
 function handleToggle() {
   if (props.disabled) return
   isOpen.value = !isOpen.value
   emit('toggle')
 }
+
+defineSlots<{
+  default?: Slot
+  'extra-row'?: Slot
+}>()
 </script>
 
 <template>
   <div :class="expanderClasses">
-    <button type="button" :class="headerClasses" @click="handleToggle">
-      <span class="inline-flex items-center">
-        <span v-if="preIcon" class="flex items-center mr-4">
-          <FdsIcon :name="preIcon" :size="24" class="fill-blue-500" :class="{ 'fill-gray-500': disabled }" />
-        </span>
-        <span class="inline-flex items-center">
-          <span class="font-bold font-heading text-lg leading-md" :class="{ 'text-gray-500': disabled }">
-            {{ label }}
+    <button v-bind="buttonAttrs" type="button" :class="headerClasses" @click="handleToggle">
+      <span :class="buttonRowClasses">
+        <span class="w-full flex justify-between items-start">
+          <span class="inline-flex items-center">
+            <span v-if="preIcon" class="flex items-center mr-4">
+              <FdsIcon :name="preIcon" :size="24" class="fill-blue-500" :class="{ 'fill-gray-500': disabled }" />
+            </span>
+            <span class="inline-flex items-center">
+              <span class="font-bold font-heading text-lg leading-md" :class="{ 'text-gray-500': disabled }">
+                {{ label }}
+              </span>
+            </span>
           </span>
+          <FdsIcon
+            name="arrowDown"
+            :size="24"
+            class="ml-4 transition-transform duration-200 fill-blue-500 min-w-6 min-h-6"
+            :class="{ 'rotate-180': isOpen, 'fill-gray-500': disabled }"
+          />
         </span>
       </span>
-      <FdsIcon
-        name="arrowDown"
-        :size="24"
-        class="ml-4 transition-transform duration-200 fill-blue-500 min-w-6 min-h-6"
-        :class="{ 'rotate-180': isOpen, 'fill-gray-500': disabled }"
-      />
+      <span v-if="hasExtraRowSlot && !isOpen" class="w-full flex mt-2">
+        <slot name="extra-row" />
+      </span>
     </button>
     <div :aria-hidden="!isOpen" class="mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white" v-show="isOpen">
       <slot />

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

@@ -5,4 +5,6 @@ export interface FdsExpanderBlockProps {
   label?: string
   open?: boolean
   preIcon?: FdsIconName
+  id?: string
+  dataTestid?: string
 }

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

@@ -2,10 +2,51 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import icons from '../../../assets/icons'
 import FdsBlockInfo from './FdsBlockInfo.vue'
 
+const blockInfoTransform = (
+  _src: string,
+  storyContext: {
+    args?: {
+      heading?: string
+      headerInfo?: string
+      default?: string
+      icon?: string
+      tight?: boolean
+    }
+  },
+) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.icon) attrs.push(`icon="${args.icon}"`)
+  if (args.tight) attrs.push(`:tight="true"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  let content = ''
+
+  if (args.headerInfo || args.default) {
+    content = '\n'
+    if (args.headerInfo) {
+      content += `  <template #headerInfo>\n    <div v-html='${args.headerInfo}' />\n  </template>\n`
+    }
+    if (args.default) {
+      content += `  <p>${args.default}</p>\n`
+    }
+  }
+
+  return `<FdsBlockInfo${attrsStr}>${content}</FdsBlockInfo>`
+}
+
 const meta: Meta<typeof FdsBlockInfo> = {
   title: 'FDS/Blocks/FdsBlockInfo',
   component: FdsBlockInfo,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: blockInfoTransform,
+      },
+    },
+  },
   argTypes: {
     heading: { control: { type: 'text' } },
     size: { control: { type: 'select' }, options: ['small', 'large'] },
@@ -30,39 +71,8 @@ const meta: Meta<typeof FdsBlockInfo> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const blockInfoTransform = (storyContext: {
-  args?: {
-    heading?: string
-    headerInfo?: string
-    default?: string
-    icon?: string
-    tight?: boolean
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.icon) attrs.push(`icon="${args.icon}"`)
-  if (args.tight) attrs.push(':tight="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  let content = ''
-
-  if (args.headerInfo || args.default) {
-    content = '\n'
-    if (args.headerInfo) {
-      content += `  <template #headerInfo>\n    <div v-html="${args.headerInfo}" />\n  </template>\n`
-    }
-    if (args.default) {
-      content += `  <p>${args.default}</p>\n`
-    }
-  }
-
-  return `<FdsBlockInfo${attrsStr}>${content}</FdsBlockInfo>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: NonNullable<Story['args']>) => ({
     components: { FdsBlockInfo },
     setup: () => ({ args }),
     template: `
@@ -73,13 +83,6 @@ export const Default: Story = {
       <p>{{ args.default }}</p>
     </FdsBlockInfo>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockInfoTransform,
-      },
-    },
-  },
   args: {
     heading: 'About this component',
     default: