fds-vue-core 2.1.11 → 2.1.15

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
 }