fds-vue-core 2.1.10 → 2.1.15

package/src/components/Table/FdsTable/FdsTable.stories.ts

@@ -56,7 +56,7 @@ const sampleData = [
 ]
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `
@@ -93,7 +93,7 @@ export const Default: Story = {
 
 export const Bordered: Story = {
   args: { bordered: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `
@@ -130,7 +130,7 @@ export const Bordered: Story = {
 
 export const Compact: Story = {
   args: { compact: true },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTable, FdsTableHead },
     setup: () => ({ args, sampleData }),
     template: `

package/src/components/Table/FdsTableHead/FdsTableHead.stories.ts

@@ -21,7 +21,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -42,7 +42,7 @@ export const Default: Story = {
 }
 
 export const Sortable: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -64,7 +64,7 @@ export const Sortable: Story = {
 
 export const SortedAsc: Story = {
   args: { icon: 'ascending' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -86,7 +86,7 @@ export const SortedAsc: Story = {
 
 export const SortedDesc: Story = {
   args: { icon: 'descending' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -108,7 +108,7 @@ export const SortedDesc: Story = {
 
 export const CenterAligned: Story = {
   args: { align: 'center' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `
@@ -130,7 +130,7 @@ export const CenterAligned: Story = {
 
 export const RightAligned: Story = {
   args: { align: 'right' },
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
     template: `

package/src/components/Table/FdsTableHead/FdsTableHead.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, type Slot } from 'vue'
 import { useHasSlot } from '../../../composables/useHasSlots'
-import { computed } from 'vue'
 import FdsIcon from '../../FdsIcon/FdsIcon.vue'
 import type { FdsTableHeadProps } from './types'
 
@@ -25,28 +25,22 @@ const iconName = computed(() => props.icon)
 
 defineEmits<{
   (e: 'sort'): void
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+defineSlots<{
+  default?: Slot
 }>()
 </script>
 
 <template>
   <th class="fds-table-head">
-    <button
-      v-if="iconName"
-      :class="headerClasses"
-      @click="$emit('sort')"
-    >
+    <button v-if="iconName" :class="headerClasses" @click="$emit('sort')">
       <span v-if="hasSlot"><slot /></span>
       <span v-else>{{ heading }}</span>
-      <FdsIcon
-        :name="iconName"
-        size="24px"
-        class="fill-blue-500"
-      />
+      <FdsIcon :name="iconName" size="24px" class="fill-blue-500" />
     </button>
-    <div
-      v-else
-      :class="headerClasses"
-    >
+    <div v-else :class="headerClasses">
       <span v-if="hasSlot"><slot /></span>
       <span v-else>{{ heading }}</span>
     </div>

package/src/components/Table/FdsTableHead/types.ts

@@ -2,4 +2,5 @@ export interface FdsTableHeadProps {
   heading?: string
   align?: 'left' | 'center' | 'right'
   icon?: 'sort' | 'ascending' | 'descending'
+  onClick?: () => void
 }

package/src/components/Tabs/FdsTabs/FdsTabs.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsTabs from './FdsTabs.vue'
 import FdsTabsItem from '../FdsTabsItem/FdsTabsItem.vue'
+import FdsTabs from './FdsTabs.vue'
 
 const meta: Meta<typeof FdsTabs> = {
   title: 'FDS/FdsTabs',
@@ -33,7 +33,7 @@ const tabsTransform = (storyContext: { args?: { block?: boolean; variant?: strin
 }
 
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -54,7 +54,7 @@ export const Default: Story = {
 }
 
 export const Secondary: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -84,7 +84,7 @@ export const Secondary: Story = {
 }
 
 export const Block: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -114,7 +114,7 @@ export const Block: Story = {
 }
 
 export const WithDisabled: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -139,7 +139,7 @@ export const WithDisabled: Story = {
 }
 
 export const WithRouterLinks: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -166,7 +166,7 @@ export const WithRouterLinks: Story = {
 }
 
 export const WithExactMatch: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -193,7 +193,7 @@ export const WithExactMatch: Story = {
 }
 
 export const WithAnchorLinks: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `
@@ -220,7 +220,7 @@ export const WithAnchorLinks: Story = {
 }
 
 export const WithButtons: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsTabs, FdsTabsItem },
     setup: () => ({ args }),
     template: `

package/src/components/Tabs/FdsTabs/FdsTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, provide, type Slot } from 'vue'
 import type { FdsTabsProps } from './types'
 
 const props = withDefaults(defineProps<FdsTabsProps>(), {
@@ -18,6 +18,10 @@ const tabsClasses = computed(() => [
 
 provide('tabsVariant', props.variant)
 provide('tabsBlock', props.block)
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>

package/src/components/Tabs/FdsTabsItem/FdsTabsItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, useAttrs } from 'vue'
+import { computed, getCurrentInstance, inject, useAttrs, type Slot } from 'vue'
 import type { FdsTabsItemProps } from './types'
 
 defineOptions({
@@ -8,6 +8,24 @@ defineOptions({
 
 const attrs = useAttrs()
 
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const onClick = (ev: MouseEvent) => {
+  if (props.disabled) {
+    ev.preventDefault()
+    return
+  }
+  emit('click', ev)
+}
+
+const handleClick = (ev: MouseEvent) => {
+  if (componentType.value === 'button' && !props.disabled) {
+    onClick(ev)
+  }
+}
+
 // Try to get route from vue-router if available
 const instance = getCurrentInstance()
 const route = computed(() => {
@@ -109,6 +127,10 @@ const variantClasses = computed(() => {
 const disabledClasses = computed(() => (props.disabled ? 'cursor-not-allowed pointer-events-none opacity-35' : ''))
 
 const buttonClasses = computed(() => [...baseClasses.value, ...variantClasses.value, disabledClasses.value])
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
@@ -119,7 +141,9 @@ const buttonClasses = computed(() => [...baseClasses.value, ...variantClasses.va
     :disabled="componentType === 'button' ? disabled : undefined"
     :aria-disabled="disabled"
     :aria-current="isActive ? 'page' : undefined"
+    @click="handleClick"
   >
-    <slot>{{ label }}</slot>
+    {{ label }}
+    <slot></slot>
   </component>
 </template>

package/src/components/Tabs/FdsTabsItem/types.ts

@@ -13,4 +13,6 @@ export interface FdsTabsItemProps {
   disabled?: boolean
   /** Tab label text */
   label?: string
+  /** Click handler */
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
 }

package/src/components/Typography/FdsText/FdsText.stories.ts

@@ -1,10 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import FdsText from './FdsText.vue'
 
+const textTransform = (_src: string, storyContext: { args?: { type?: string } }) => {
+  const args = storyContext?.args || {}
+  const attrsStr = args.type && args.type !== 'default' ? ` type="${args.type}"` : ''
+  return `<FdsText${attrsStr}>Text content</FdsText>`
+}
+
 const meta: Meta<typeof FdsText> = {
   title: 'FDS/Typography/FdsText',
   component: FdsText,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: textTransform,
+      },
+    },
+  },
   argTypes: {
     type: { control: { type: 'radio' }, options: ['default', 'lead', 'meta'] },
   },
@@ -16,25 +29,12 @@ const meta: Meta<typeof FdsText> = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const textTransform = (storyContext: { args?: { type?: string } }) => {
-  const args = storyContext?.args || {}
-  const attrsStr = args.type && args.type !== 'default' ? ` type="${args.type}"` : ''
-  return `<FdsText${attrsStr}>Text content</FdsText>`
-}
-
 export const Default: Story = {
-  render: (args) => ({
+  render: (args: Story['args']) => ({
     components: { FdsText },
     setup: () => ({ args }),
     template: `<FdsText :type="args.type">Text content</FdsText>`,
   }),
-  parameters: {
-    docs: {
-      source: {
-        transform: textTransform,
-      },
-    },
-  },
 }
 
 export const Lead: Story = {

package/src/components/Typography/FdsText/FdsText.vue

@@ -1,9 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useAttrs, type Slot } from 'vue'
 import type { FdsTextProps } from './types'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
 const props = withDefaults(defineProps<FdsTextProps>(), {
   type: 'default',
+  dataTestid: undefined,
 })
 
 const textClasses = computed(() => {
@@ -19,10 +26,19 @@ const textClasses = computed(() => {
 
   return baseClasses
 })
+
+const spanAttrs = computed(() => ({
+  ...attrs,
+  'data-testid': props.dataTestid,
+}))
+
+defineSlots<{
+  default?: Slot
+}>()
 </script>
 
 <template>
-  <span :class="textClasses">
+  <span v-bind="spanAttrs" :class="textClasses">
     <slot />
   </span>
 </template>

package/src/components/Typography/FdsText/types.ts

@@ -1,3 +1,4 @@
 export interface FdsTextProps {
   type?: 'default' | 'lead' | 'meta'
+  dataTestid?: string
 }

package/src/index.ts

@@ -129,6 +129,7 @@ export type { FdsNodeShape, FdsTreeNode, FdsTreeViewProps, FdsTreeViewStyles } f
 // Button component types
 export type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
 export type { FdsCopyButtonProps } from './components/Buttons/FdsButtonCopy/types'
+export type { DownloadOptions, FdsButtonDownloadProps } from './components/Buttons/FdsButtonDownload/types'
 export type { FdsIconButtonProps } from './components/Buttons/FdsButtonIcon/types'
 
 // Button components that use FdsButtonBaseProps
@@ -136,7 +137,6 @@ import type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
 export type FdsButtonPrimaryProps = FdsButtonBaseProps
 export type FdsButtonSecondaryProps = FdsButtonBaseProps
 export type FdsButtonMinorProps = FdsButtonBaseProps
-export type FdsButtonDownloadProps = FdsButtonBaseProps
 
 // Form component types
 export type { FdsCheckboxProps } from './components/Form/FdsCheckbox/types'