fds-vue-core 2.1.11 → 2.1.16

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(() => {
@@ -31,6 +49,7 @@ const props = withDefaults(defineProps<FdsTabsItemProps>(), {
   exact: false,
   disabled: false,
   label: undefined,
+  dataTestid: undefined,
 })
 
 const variant = inject<'primary' | 'secondary'>('tabsVariant', 'primary')
@@ -76,6 +95,7 @@ const linkAttrs = computed(() => {
 const componentAttrs = computed(() => ({
   ...linkAttrs.value,
   ...attrs,
+  'data-testid': props.dataTestid,
 }))
 
 const baseClasses = computed(() => {
@@ -109,6 +129,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 +143,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,8 @@ export interface FdsTabsItemProps {
   disabled?: boolean
   /** Tab label text */
   label?: string
+  /** Click handler */
+  onClick?: ((ev: MouseEvent) => void) | Array<(ev: MouseEvent) => void>
+  /** Data test ID for testing */
+  dataTestid?: string
 }

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
 }