fds-vue-core 2.3.2 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "main": "./dist/fds-vue-core.cjs.js",

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

@@ -6,7 +6,7 @@ const blockAlertTransform = (
   storyContext: {
     args?: {
       visible?: boolean
-      label?: string
+      heading?: string
       closeable?: boolean
       collapsable?: boolean
       expanded?: boolean
@@ -18,7 +18,7 @@ const blockAlertTransform = (
   const args = storyContext?.args || {}
   const attrs = []
 
-  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
   if (args.closeable) attrs.push(':closeable="true"')
   if (args.collapsable) attrs.push(':collapsable="true"')
   if (args.expanded) attrs.push(':expanded="true"')
@@ -49,7 +49,7 @@ const meta: Meta<typeof FdsBlockAlert> = {
     closeable: { control: { type: 'boolean' } },
     collapsable: { control: { type: 'boolean' } },
     expanded: { control: { type: 'boolean' } },
-    label: { control: { type: 'text' } },
+    heading: { control: { type: 'text' } },
     default: { control: { type: 'text' } },
     locale: { control: { type: 'select' }, options: ['sv', 'en'] },
   },
@@ -58,7 +58,7 @@ const meta: Meta<typeof FdsBlockAlert> = {
     closeable: false,
     collapsable: false,
     expanded: false,
-    label: 'About this component',
+    heading: 'About this component',
     default: 'This is an alert block with some important information.',
   },
 }
@@ -73,25 +73,25 @@ export const Default: Story = {
     template: `<FdsBlockAlert v-bind="args"><p>{{ args.default }}</p></FdsBlockAlert>`,
   }),
   args: {
-    label: 'About this component',
+    heading: 'About this component',
     default: 'This is an alert block with some important information.',
   },
 }
 
-export const WithLabel: Story = {
+export const WithHeading: Story = {
   render: () => ({
     components: { FdsBlockAlert },
     template: `
-      <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 heading="Information">
+        <p>This alert block has a <a href="test" class="link">test</a> heading and provides important information to the user.</p>
       </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>
+        transform: () => `<FdsBlockAlert heading="Information">
+  <p>This alert block has a <a href="test" class="link">test</a> heading and provides important information to the user.</p>
 </FdsBlockAlert>`,
       },
     },
@@ -102,7 +102,7 @@ export const Collapsable: Story = {
   render: () => ({
     components: { FdsBlockAlert },
     template: `
-      <FdsBlockAlert label="Collapsable Alert" collapsable>
+      <FdsBlockAlert heading="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>
@@ -111,7 +111,7 @@ export const Collapsable: Story = {
   parameters: {
     docs: {
       source: {
-        transform: () => `<FdsBlockAlert label="Collapsable Alert" collapsable>
+        transform: () => `<FdsBlockAlert heading="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

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<FdsAlertBlockProps>(), {
   closeable: false,
   collapsable: false,
   expanded: false,
-  label: '',
+  heading: '',
   locale: 'sv',
   dataTestid: undefined,
 })
@@ -73,7 +73,7 @@ defineSlots<{
     <div>
       <div>
         <div
-          v-if="label"
+          v-if="heading"
           class="font-bold w-full justify-between items-start flex gap-2"
           :class="{ 'mb-2': (isExpanded || !collapsable) && hasSlot }"
         >
@@ -81,7 +81,7 @@ defineSlots<{
             <div class="h-7 flex items-center">
               <FdsIcon name="alert" :size="24" class="fill-yellow-700" />
             </div>
-            <span class="leading-7">{{ label }}</span>
+            <span class="leading-7">{{ heading }}</span>
           </div>
           <div class="relative h-7">
             <FdsButtonIcon

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

@@ -6,7 +6,7 @@ export interface FdsAlertBlockProps extends /* @vue-ignore */ HTMLAttributes {
   closeable?: boolean
   collapsable?: boolean
   expanded?: boolean
-  label?: string
+  heading?: string
   locale?: 'sv' | 'en'
   icon?: keyof typeof icons
   dataTestid?: string

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

@@ -6,7 +6,7 @@ const blockExpanderTransform = (
   _src: string,
   storyContext: {
     args?: {
-      label?: string
+      heading?: string
       preIcon?: string
       open?: boolean
       disabled?: boolean
@@ -17,7 +17,7 @@ const blockExpanderTransform = (
   const args = storyContext?.args || {}
   const attrs = []
 
-  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
   if (args.preIcon) attrs.push(`preIcon="${args.preIcon}"`)
   if (args.open) attrs.push(':open="true"')
   if (args.disabled) attrs.push(':disabled="true"')
@@ -41,14 +41,14 @@ const meta: Meta<typeof FdsBlockExpander> = {
   argTypes: {
     disabled: { control: { type: 'boolean' } },
     open: { control: { type: 'boolean' } },
-    label: { control: { type: 'text' } },
+    heading: { control: { type: 'text' } },
     preIcon: { control: { type: 'select' }, options: Object.keys(icons) },
     default: { control: { type: 'text' } },
   },
   args: {
     disabled: false,
     open: false,
-    label: 'Expandable Content',
+    heading: 'Expandable Content',
     preIcon: undefined,
     default: 'This is the expandable content that shows when the block is opened.',
   },
@@ -64,7 +64,7 @@ export const Default: Story = {
     template: `<FdsBlockExpander v-bind="args"><p>{{ args.default }}</p></FdsBlockExpander>`,
   }),
   args: {
-    label: 'Expandable Content',
+    heading: 'Expandable Content',
     default: 'This is the expandable content that shows when the block is opened.',
   },
 }
@@ -73,7 +73,7 @@ export const WithIcon: Story = {
   render: () => ({
     components: { FdsBlockExpander },
     template: `
-      <FdsBlockExpander label="Settings" preIcon="settings">
+      <FdsBlockExpander heading="Settings" preIcon="settings">
         <div class="space-y-2">
           <p>This expander block has an icon in the header.</p>
           <p>Click to expand and see more content.</p>
@@ -87,7 +87,7 @@ export const Open: Story = {
   render: () => ({
     components: { FdsBlockExpander },
     template: `
-      <FdsBlockExpander label="Pre-opened Content" open>
+      <FdsBlockExpander heading="Pre-opened Content" open>
         <p>This expander block starts in the open state.</p>
         <p>You can still click the header to close it.</p>
       </FdsBlockExpander>
@@ -99,7 +99,7 @@ export const Disabled: Story = {
   render: () => ({
     components: { FdsBlockExpander },
     template: `
-      <FdsBlockExpander label="Disabled Block" disabled>
+      <FdsBlockExpander heading="Disabled Block" disabled>
         <p>This expander block is disabled and cannot be interacted with.</p>
       </FdsBlockExpander>
     `,
@@ -111,13 +111,13 @@ export const MultipleBlocks: Story = {
     components: { FdsBlockExpander },
     template: `
       <div class="space-y-4">
-        <FdsBlockExpander label="First Block" preIcon="information">
+        <FdsBlockExpander heading="First Block" preIcon="information">
           <p>Content for the first expander block.</p>
         </FdsBlockExpander>
-        <FdsBlockExpander label="Second Block" preIcon="settings">
+        <FdsBlockExpander heading="Second Block" preIcon="settings">
           <p>Content for the second expander block.</p>
         </FdsBlockExpander>
-        <FdsBlockExpander label="Third Block" preIcon="alert">
+        <FdsBlockExpander heading="Third Block" preIcon="alert">
           <p>Content for the third expander block.</p>
         </FdsBlockExpander>
       </div>

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

@@ -12,7 +12,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<FdsExpanderBlockProps>(), {
   disabled: false,
-  label: '',
+  heading: '',
   open: false,
   preIcon: undefined,
   stickerColor: undefined,
@@ -94,7 +94,7 @@ defineSlots<{
             </span>
             <span class="inline-flex items-center">
               <span class="font-bold font-heading text-lg leading-md" :class="{ 'text-gray-700': disabled }">
-                {{ label }}
+                {{ heading }}
               </span>
             </span>
           </span>

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

@@ -4,7 +4,7 @@ import type { FdsStickerProps } from '../../FdsSticker/types'
 
 export interface FdsExpanderBlockProps extends /* @vue-ignore */ HTMLAttributes {
   disabled?: boolean
-  label?: string
+  heading?: string
   open?: boolean
   preIcon?: FdsIconName
   stickerColor?: FdsStickerProps['variant']

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

@@ -49,7 +49,7 @@ const meta: Meta<typeof FdsBlockInfo> = {
   },
   argTypes: {
     heading: { control: { type: 'text' } },
-    size: { control: { type: 'select' }, options: ['small', 'large'] },
+    iconSize: { control: { type: 'select' }, options: ['small', 'large'] },
     icon: { control: { type: 'select' }, options: Object.keys(icons) },
     headerInfo: {
       control: { type: 'text' },
@@ -59,7 +59,7 @@ const meta: Meta<typeof FdsBlockInfo> = {
   },
   args: {
     heading: 'About this component',
-    size: 'small',
+    iconSize: 'small',
     icon: undefined,
     headerInfo: '',
     header: 'About this component',
@@ -94,7 +94,7 @@ export const WithIcon: Story = {
   render: () => ({
     components: { FdsBlockInfo },
     template: `
-      <FdsBlockInfo heading="About this component" icon="information" size="large">
+      <FdsBlockInfo heading="About this component" icon="information" iconSize="large">
         <p>The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
       </FdsBlockInfo>
     `,

package/src/components/Blocks/FdsBlockInfo/FdsBlockInfo.vue

@@ -6,7 +6,7 @@ import type { FdsBlockInfoProps } from './types'
 
 const props = withDefaults(defineProps<FdsBlockInfoProps>(), {
   icon: undefined,
-  size: 'small',
+  iconSize: 'small',
   heading: undefined,
   dataTestid: undefined,
 })
@@ -16,9 +16,9 @@ const hasSlot = useHasSlot()
 const contentClasses = computed(() => [
   'rounded-md bg-blue_t-100 mb-4',
   !hasSlot.value && 'mb-0!',
-  props.size === 'small' && 'p-4',
-  props.size === 'small' && hasSlot.value && 'pb-6',
-  props.size === 'large' && props.icon && 'p-6',
+  props.iconSize === 'small' && 'p-4',
+  props.iconSize === 'small' && hasSlot.value && 'pb-6',
+  props.iconSize === 'large' && props.icon && 'p-6',
 ])
 
 const smallIconSize = 24
@@ -45,7 +45,7 @@ defineSlots<{
 <template>
   <div :id="contentBlockId" :class="contentClasses" v-bind="rootAttrs">
     <!-- Large icon layout: icon left, header + content right -->
-    <div v-if="size === 'large' && icon" class="flex items-start gap-4">
+    <div v-if="iconSize === 'large' && icon" class="flex items-start gap-4">
       <FdsIcon :name="icon" :size="largeIconSize" class="fill-blue-500" />
       <div class="flex-1">
         <div v-if="heading" class="mb-1">
@@ -67,7 +67,7 @@ defineSlots<{
       <div v-if="heading" :class="{ 'mb-2': hasSlot }">
         <header class="flex items-start justify-between gap-4">
           <div class="flex items-center gap-3">
-            <FdsIcon v-if="icon && size === 'small'" :name="icon" :size="smallIconSize" class="fill-blue-500" />
+            <FdsIcon v-if="icon && iconSize === 'small'" :name="icon" :size="smallIconSize" class="fill-blue-500" />
             <h3 class="m-0 text-base font-main font-bold tracking-wide">{{ heading }}</h3>
           </div>
           <div class="flex items-start gap-3">

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

@@ -4,6 +4,6 @@ import type { FdsIconName } from '../../FdsIcon/types'
 export interface FdsBlockInfoProps extends /* @vue-ignore */ HTMLAttributes {
   heading?: string
   icon?: FdsIconName
-  size?: 'large' | 'small'
+  iconSize?: 'large' | 'small'
   dataTestid?: string
 }

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

@@ -7,7 +7,7 @@ const blockLinkTransform = (
   _src: string,
   storyContext: {
     args?: {
-      label?: string
+      heading?: string
       icon?: string
       arrow?: boolean
       disabled?: boolean
@@ -24,7 +24,7 @@ const blockLinkTransform = (
   const args = storyContext?.args || {}
   const attrs = []
 
-  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.heading) attrs.push(`heading="${args.heading}"`)
   if (args.icon) attrs.push(`icon="${args.icon}"`)
   if (args.arrow) attrs.push(':arrow="true"')
   if (args.disabled) attrs.push(':disabled="true"')
@@ -49,7 +49,7 @@ const meta: Meta<typeof FdsBlockLink> = {
     },
   },
   argTypes: {
-    label: { control: { type: 'text' } },
+    heading: { control: { type: 'text' } },
     arrow: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
     download: { control: { type: 'text' } },
@@ -62,7 +62,7 @@ const meta: Meta<typeof FdsBlockLink> = {
     as: { control: { type: 'select' }, options: ['button', 'a', 'router-link'] },
   },
   args: {
-    label: 'Enter some text',
+    heading: 'Enter some text',
     arrow: false,
     disabled: false,
     download: undefined,
@@ -86,7 +86,7 @@ export const Default: Story = {
     template: `<FdsBlockLink v-bind="args">{{ args.default }}</FdsBlockLink>`,
   }),
   args: {
-    label: 'Enter some text',
+    heading: 'Enter some text',
     default: 'Nothing will happen',
   },
 }
@@ -95,7 +95,7 @@ export const WithIcon: Story = {
   render: () => ({
     components: { FdsBlockLink },
     template: `
-      <FdsBlockLink label="Settings" icon="settings" href="/settings">
+      <FdsBlockLink heading="Settings" icon="settings" href="/settings">
         <p>Click to go to settings page.</p>
       </FdsBlockLink>
     `,
@@ -106,7 +106,7 @@ export const WithArrow: Story = {
   render: () => ({
     components: { FdsBlockLink },
     template: `
-      <FdsBlockLink label="Continue" arrow href="/next">
+      <FdsBlockLink heading="Continue" arrow href="/next">
         <p>This block has an arrow indicating it's clickable.</p>
       </FdsBlockLink>
     `,
@@ -117,7 +117,7 @@ export const WithSticker: Story = {
   render: () => ({
     components: { FdsBlockLink, FdsSticker },
     template: `
-      <FdsBlockLink label="New Feature" href="/feature">
+      <FdsBlockLink heading="New Feature" href="/feature">
         <p>Check out our latest feature!</p>
         <template #sticker>
           <FdsSticker variant="blue">New</FdsSticker>
@@ -131,7 +131,7 @@ export const Disabled: Story = {
   render: () => ({
     components: { FdsBlockLink },
     template: `
-      <FdsBlockLink label="Disabled Block" disabled>
+      <FdsBlockLink heading="Disabled Block" disabled>
         <p>This block is disabled and cannot be interacted with.</p>
       </FdsBlockLink>
     `,
@@ -142,7 +142,7 @@ export const NonInteractive: Story = {
   render: () => ({
     components: { FdsBlockLink },
     template: `
-      <FdsBlockLink label="Information Only" :interactive="false">
+      <FdsBlockLink heading="Information Only" :interactive="false">
         <p>This block is not interactive - it's just for display.</p>
       </FdsBlockLink>
     `,
@@ -154,7 +154,7 @@ export const ExternalLink: Story = {
     components: { FdsBlockLink },
     template: `
       <FdsBlockLink
-        label="External Link"
+        heading="External Link"
         href="https://example.com"
         target="_blank"
         rel="noreferrer noopener"
@@ -170,7 +170,7 @@ export const Download: Story = {
     components: { FdsBlockLink },
     template: `
       <FdsBlockLink
-        label="Download File"
+        heading="Download File"
         icon="download"
         href="/files/document.pdf"
         download="document.pdf"

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

@@ -121,7 +121,7 @@ defineSlots<{
       >
         <div class="flex items-center gap-4" :class="headerClasses">
           <h3 class="flex-1 font-heading text-lg tracking-normal m-0 leading-md" :class="headerTextClasses">
-            {{ label }}
+            {{ heading }}
           </h3>
         </div>
         <div :class="slotWrapperClasses">

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

@@ -5,7 +5,7 @@ export interface FdsInteractionBlockProps extends Omit<
   /* @vue-ignore */ HTMLAttributes,
   'href' | 'target' | 'rel' | 'download'
 > {
-  label: string
+  heading: string
   arrow?: boolean
   download?: string
   href?: string

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

@@ -14,8 +14,8 @@ const meta: Meta<typeof FdsButtonCopy> = {
           const push = (s: string) => attrs.push(s)
           if (typeof a.value === 'string') push(`value="${a.value}"`)
           if (typeof a.targetId === 'string') push(`target-id="${a.targetId}"`)
-          if (typeof a.label === 'string') push(`label="${a.label}"`)
-          if (typeof a.copiedLabel === 'string') push(`copied-label="${a.copiedLabel}"`)
+          if (typeof a.text === 'string') push(`text="${a.text}"`)
+          if (typeof a.copiedText === 'string') push(`copied-text="${a.copiedText}"`)
           if (typeof a.timeoutMs === 'number' && a.timeoutMs !== 1500) push(`:timeout-ms="${a.timeoutMs}"`)
           if (a.disabled) push(':disabled="true"')
           const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
@@ -27,15 +27,15 @@ const meta: Meta<typeof FdsButtonCopy> = {
   argTypes: {
     value: { control: { type: 'text' } },
     targetId: { control: { type: 'text' } },
-    label: { control: { type: 'text' } },
-    copiedLabel: { control: { type: 'text' } },
+    text: { control: { type: 'text' } },
+    copiedText: { control: { type: 'text' } },
     timeoutMs: { control: { type: 'number' } },
     disabled: { control: { type: 'boolean' } },
   },
   args: {
     value: 'Text att kopiera',
-    label: 'Kopiera',
-    copiedLabel: 'Kopierat!',
+    text: 'Kopiera',
+    copiedText: 'Kopierat!',
     timeoutMs: 800,
     disabled: false,
   },

package/src/components/Buttons/FdsButtonCopy/FdsButtonCopy.vue

@@ -6,8 +6,8 @@ import type { FdsCopyButtonProps } from './types'
 
 const props = withDefaults(defineProps<FdsCopyButtonProps>(), {
   value: '',
-  label: 'Kopiera',
-  copiedLabel: 'Kopierat!',
+  text: 'Kopiera',
+  copiedText: 'Kopierat!',
   timeoutMs: 800,
   disabled: false,
   dataTestid: undefined,
@@ -70,14 +70,14 @@ onMounted(() => {
 <template>
   <div v-if="isCopied" class="flex items-center gap-2 h-7">
     <FdsIcon name="bigSuccess" />
-    <span>{{ props.copiedLabel }}</span>
+    <span>{{ props.copiedText }}</span>
   </div>
   <FdsButtonMinor
     v-else
     type="button"
     :disabled="props.disabled"
     icon="copy"
-    :text="isCopied ? props.copiedLabel : props.label"
+    :text="isCopied ? props.copiedText : props.text"
     :dataTestid="dataTestid"
     @click="onClick"
   />

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

@@ -3,8 +3,8 @@ import type { HTMLAttributes } from 'vue'
 export interface FdsCopyButtonProps extends /* @vue-ignore */ HTMLAttributes {
   value?: string
   targetId?: string
-  label?: string
-  copiedLabel?: string
+  text?: string
+  copiedText?: string
   timeoutMs?: number
   disabled?: boolean
   dataTestid?: string

package/src/components/FdsDevMode/FdsDevModeStorage.vue

@@ -226,7 +226,7 @@ const deleteCookieEntry = () => {
       </FdsTabs>
 
       <!-- localStorage TAB -->
-      <FdsBlockInfo v-if="activeTab === 'local'" heading="localStorage" icon="information" size="small">
+      <FdsBlockInfo v-if="activeTab === 'local'" heading="localStorage" icon="information" iconSize="small">
         <div v-if="!localStorageEntries.length" class="text-sm text-gray-600">Inga värden i localStorage.</div>
         <div v-else class="max-h-72 overflow-auto border border-gray-200 rounded-md">
           <table class="w-full text-left text-xs border-collapse">
@@ -282,7 +282,7 @@ const deleteCookieEntry = () => {
       </FdsBlockInfo>
 
       <!-- sessionStorage TAB -->
-      <FdsBlockInfo v-else-if="activeTab === 'session'" heading="sessionStorage" icon="information" size="small">
+      <FdsBlockInfo v-else-if="activeTab === 'session'" heading="sessionStorage" icon="information" iconSize="small">
         <div v-if="!sessionStorageEntries.length" class="text-sm text-gray-600">Inga värden i sessionStorage.</div>
         <div v-else class="max-h-72 overflow-auto border border-gray-200 rounded-md">
           <table class="w-full text-left text-xs border-collapse">
@@ -338,7 +338,7 @@ const deleteCookieEntry = () => {
       </FdsBlockInfo>
 
       <!-- Cookies TAB -->
-      <FdsBlockInfo v-else-if="activeTab === 'cookies'" heading="Cookies" icon="information" size="small">
+      <FdsBlockInfo v-else-if="activeTab === 'cookies'" heading="Cookies" icon="information" iconSize="small">
         <div v-if="!cookieEntries.length" class="text-sm text-gray-600">Inga cookies satta för domänen.</div>
         <div v-else class="max-h-72 overflow-auto border border-gray-200 rounded-md">
           <table class="w-full text-left text-xs border-collapse">
@@ -398,7 +398,7 @@ const deleteCookieEntry = () => {
         v-else
         heading="Placeholder"
         icon="information"
-        size="small"
+        iconSize="small"
         class="min-h-[200px] flex items-center justify-center text-sm text-gray-500"
       >
         (Tom flik – reserverad för framtida DevMode-verktyg)