fds-vue-core 2.1.4 → 2.1.6

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

@@ -0,0 +1,247 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTabs from '@/components/Tabs/FdsTabs/FdsTabs.vue'
+import FdsTabsItem from '@/components/Tabs/FdsTabsItem/FdsTabsItem.vue'
+
+const meta: Meta<typeof FdsTabs> = {
+  title: 'FDS/FdsTabs',
+  component: FdsTabs,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: { type: 'select' }, options: ['primary', 'secondary'] },
+    block: { control: { type: 'boolean' } },
+  },
+  args: {
+    variant: 'primary',
+    block: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tabsTransform = (storyContext: { args?: { block?: boolean; variant?: string } }) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+  if (args.block) attrs.push(':block="true"')
+  if (args.variant && args.variant !== 'primary') attrs.push(`variant="${args.variant}"`)
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  return `<FdsTabs${attrsStr}>
+  <FdsTabsItem label="Tab 1" />
+  <FdsTabsItem label="Tab 2" active />
+  <FdsTabsItem label="Tab 3" />
+</FdsTabs>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Tab 1" />
+        <FdsTabsItem label="Tab 2" active />
+        <FdsTabsItem label="Tab 3" />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: tabsTransform,
+      },
+    },
+  },
+}
+
+export const Secondary: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Tab 1" />
+        <FdsTabsItem label="Tab 2" active />
+        <FdsTabsItem label="Tab 3" />
+      </FdsTabs>
+    `,
+  }),
+  args: {
+    variant: 'secondary',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs variant="secondary">
+  <FdsTabsItem label="Tab 1" />
+  <FdsTabsItem label="Tab 2" active />
+  <FdsTabsItem label="Tab 3" />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}
+
+export const Block: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Tab 1" />
+        <FdsTabsItem label="Tab 2" active />
+        <FdsTabsItem label="Tab 3" />
+      </FdsTabs>
+    `,
+  }),
+  args: {
+    block: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs :block="true">
+  <FdsTabsItem label="Tab 1" />
+  <FdsTabsItem label="Tab 2" active />
+  <FdsTabsItem label="Tab 3" />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}
+
+export const WithDisabled: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Tab 1" />
+        <FdsTabsItem label="Tab 2" active />
+        <FdsTabsItem label="Tab 3" disabled />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    slots: {
+      default: {
+        template: `
+        <FdsTabsItem label="Tab 1" />
+        <FdsTabsItem label="Tab 2" active />
+        <FdsTabsItem label="Tab 3" disabled />
+        `,
+      },
+    },
+  },
+}
+
+export const WithRouterLinks: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Home" to="/" />
+        <FdsTabsItem label="About" to="/about" />
+        <FdsTabsItem label="Contact" to="/contact" />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs>
+  <FdsTabsItem label="Home" to="/" />
+  <FdsTabsItem label="About" to="/about" />
+  <FdsTabsItem label="Contact" to="/contact" />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}
+
+export const WithExactMatch: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Home" to="/" exact />
+        <FdsTabsItem label="About" to="/about" exact />
+        <FdsTabsItem label="Contact" to="/contact" exact />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs>
+  <FdsTabsItem label="Home" to="/" exact />
+  <FdsTabsItem label="About" to="/about" exact />
+  <FdsTabsItem label="Contact" to="/contact" exact />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}
+
+export const WithAnchorLinks: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Home" href="/" />
+        <FdsTabsItem label="About" href="/about" />
+        <FdsTabsItem label="Contact" href="/contact" />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs>
+  <FdsTabsItem label="Home" href="/" />
+  <FdsTabsItem label="About" href="/about" />
+  <FdsTabsItem label="Contact" href="/contact" />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}
+
+export const WithButtons: Story = {
+  render: (args) => ({
+    components: { FdsTabs, FdsTabsItem },
+    setup: () => ({ args }),
+    template: `
+      <FdsTabs v-bind="args">
+        <FdsTabsItem label="Tab 1" as="button" />
+        <FdsTabsItem label="Tab 2" as="button" active />
+        <FdsTabsItem label="Tab 3" as="button" />
+      </FdsTabs>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<FdsTabs>
+  <FdsTabsItem label="Tab 1" as="button" />
+  <FdsTabsItem label="Tab 2" as="button" active />
+  <FdsTabsItem label="Tab 3" as="button" />
+</FdsTabs>
+        `,
+      },
+    },
+  },
+}

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { FdsTabsProps } from './types'
+
+const props = withDefaults(defineProps<FdsTabsProps>(), {
+  block: false,
+  variant: 'primary',
+})
+
+const tabsClasses = computed(() => [
+  'inline-flex overflow-auto max-w-full p-0.5 gap-0.5',
+  {
+    'flex justify-between w-full': props.block,
+    'bg-blue_t-100 rounded-[10px] mb-8': props.variant === 'primary',
+    'gap-2 mb-4': props.variant === 'secondary',
+  },
+])
+
+provide('tabsVariant', props.variant)
+provide('tabsBlock', props.block)
+</script>
+
+<template>
+  <div :class="tabsClasses">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,4 @@
+export interface FdsTabsProps {
+  block?: boolean
+  variant?: 'primary' | 'secondary'
+}

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

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, inject, useAttrs } from 'vue'
+import type { FdsTabsItemProps } from './types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+// Try to get route from vue-router if available
+const instance = getCurrentInstance()
+const route = computed(() => {
+  try {
+    // Check if vue-router is available via app context
+    const router = instance?.appContext.config.globalProperties.$router
+    if (router && router.currentRoute) {
+      return router.currentRoute.value
+    }
+  } catch {
+    // vue-router not available
+  }
+  return null
+})
+
+const props = withDefaults(defineProps<FdsTabsItemProps>(), {
+  to: undefined,
+  href: undefined,
+  as: undefined,
+  active: undefined,
+  exact: false,
+  disabled: false,
+  label: undefined,
+})
+
+const variant = inject<'primary' | 'secondary'>('tabsVariant', 'primary')
+const block = inject<boolean>('tabsBlock', false)
+
+// Auto-detect active state from router if to/href is provided
+const isActive = computed(() => {
+  if (props.active !== undefined) return props.active
+  const currentRoute = route.value
+  if (!currentRoute) return false
+
+  const currentPath = currentRoute.path
+
+  if (props.exact) {
+    // Exact matching
+    if (props.to && currentPath === props.to) return true
+    if (props.href && currentPath === props.href) return true
+  } else {
+    // Include matching - check if current path includes to/href
+    if (props.to && currentPath.includes(props.to)) return true
+    if (props.href && currentPath.includes(props.href)) return true
+  }
+
+  return false
+})
+
+const componentType = computed(() => {
+  if (props.as) return props.as
+  if (props.href) return 'a'
+  if (props.to) return 'router-link'
+  return 'router-link' // Default to router-link
+})
+
+const linkAttrs = computed(() => {
+  if (componentType.value === 'a') return { href: props.href || props.to }
+  if (componentType.value === 'router-link') {
+    // If no to/href provided, use current path or empty string
+    return { to: props.to || props.href || route.value?.path || '#' }
+  }
+  return {}
+})
+
+const componentAttrs = computed(() => ({
+  ...linkAttrs.value,
+  ...attrs,
+}))
+
+const baseClasses = computed(() => {
+  const blockClasses = block ? 'flex flex-1' : ''
+  return [
+    'text-center',
+    blockClasses,
+    'flex justify-center w-full cursor-pointer font-bold text-base leading-6 m-0 select-none no-underline whitespace-nowrap',
+  ]
+})
+
+const variantClasses = computed(() => {
+  if (variant === 'primary') {
+    return [
+      'bg-transparent py-2 px-4 rounded-lg border-2 border-transparent text-inherit',
+      isActive.value
+        ? 'border-transparent bg-white shadow-md'
+        : 'hover:bg-white/59 hover:outline-none active:border-transparent active:bg-white/80',
+      'focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-blue-500 focus-visible:outline-offset-[-2px]',
+    ]
+  } else {
+    return [
+      'text-blue-700 py-1 px-2 rounded-md border-none',
+      isActive.value ? 'bg-blue-500 text-white' : 'hover:bg-blue_t-100 active:bg-blue_t-200',
+      'focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-blue-500',
+      'tracking-[0.002em]',
+    ]
+  }
+})
+
+const disabledClasses = computed(() => (props.disabled ? 'cursor-not-allowed pointer-events-none opacity-35' : ''))
+
+const buttonClasses = computed(() => [...baseClasses.value, ...variantClasses.value, disabledClasses.value])
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    v-bind="componentAttrs"
+    :class="buttonClasses"
+    :disabled="componentType === 'button' ? disabled : undefined"
+    :aria-disabled="disabled"
+    :aria-current="isActive ? 'page' : undefined"
+  >
+    <slot>{{ label }}</slot>
+  </component>
+</template>

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

@@ -0,0 +1,16 @@
+export interface FdsTabsItemProps {
+  /** Link destination (for router-link or anchor) */
+  to?: string
+  /** Link destination (for anchor tag) */
+  href?: string
+  /** Component type: 'router-link', 'a', or 'button' */
+  as?: 'router-link' | 'a' | 'button'
+  /** Manually set active state (if not using router) */
+  active?: boolean
+  /** Use exact path matching (default: false, matches if path includes to/href) */
+  exact?: boolean
+  /** Disable the tab */
+  disabled?: boolean
+  /** Tab label text */
+  label?: string
+}

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsHeading from './FdsHeading.vue'
+
+const meta: Meta<typeof FdsHeading> = {
+  title: 'FDS/Typography/FdsHeading',
+  component: FdsHeading,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: { type: 'select' }, options: ['h1', 'h2', 'h3'] },
+    size: { control: { type: 'select' }, options: ['xl', 'lg', 'md', 'sm', 'responsive'] },
+    text: { control: { type: 'text' } },
+  },
+  args: {
+    type: 'h1',
+    size: 'responsive',
+    text: 'Heading',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const headingTransform = (storyContext: { args?: { type?: string; size?: string; text?: string } }) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  attrs.push(`type="${args.type || 'h1'}"`)
+  if (args.size && args.size !== 'responsive') attrs.push(`size="${args.size}"`)
+  attrs.push(`text="${args.text || 'Heading'}"`)
+
+  const attrsStr = ` ${attrs.join(' ')}`
+  return `<FdsHeading${attrsStr} />`
+}
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        transform: headingTransform,
+      },
+    },
+  },
+}
+
+export const H1: Story = {
+  args: {
+    type: 'h1',
+    text: 'H1 Heading',
+  },
+}
+
+export const H2: Story = {
+  args: {
+    type: 'h2',
+    text: 'H2 Heading',
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: headingTransform,
+      },
+    },
+  },
+}
+
+export const H3: Story = {
+  args: {
+    type: 'h3',
+    text: 'H3 Heading',
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: headingTransform,
+      },
+    },
+  },
+}
+
+export const Responsive: Story = {
+  args: {
+    type: 'h1',
+    size: 'responsive',
+    text: 'Responsive Heading',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<FdsHeading type="h1" text="Responsive Heading" />`,
+      },
+    },
+  },
+}

package/src/components/Typography/FdsHeading/FdsHeading.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FdsHeadingProps } from './types'
+
+const props = withDefaults(defineProps<FdsHeadingProps>(), {
+  size: 'responsive',
+})
+
+const headingClasses = computed(() => {
+  const baseClasses = 'font-raleway leading-tight m-0'
+
+  if (props.type === 'h1') {
+    return [baseClasses, 'mb-3', getResponsiveSize('h1', props.size)].filter(Boolean).join(' ')
+  }
+  if (props.type === 'h2') {
+    return [baseClasses, 'mt-4 mb-2', getResponsiveSize('h2', props.size)].filter(Boolean).join(' ')
+  }
+  if (props.type === 'h3') {
+    return [baseClasses, 'mt-4 mb-2', getResponsiveSize('h3', props.size)].filter(Boolean).join(' ')
+  }
+
+  return baseClasses
+})
+
+function getResponsiveSize(element: 'h1' | 'h2' | 'h3', size: string) {
+  if (size !== 'responsive') {
+    const sizeMap: Record<typeof element, Record<string, string>> = {
+      h1: { xl: 'text-6xl', lg: 'text-5xl', md: 'text-4xl', sm: 'text-2xl' },
+      h2: { xl: 'text-5xl', lg: 'text-4xl', md: 'text-3xl', sm: 'text-xl' },
+      h3: { xl: 'text-3xl', lg: 'text-2xl', md: 'text-xl', sm: 'text-lg' },
+    }
+    return sizeMap[element][size]
+  }
+
+  const responsiveMap: Record<typeof element, string> = {
+    h1: 'text-2xl sm:text-4xl md:text-5xl lg:text-6xl',
+    h2: 'text-xl sm:text-3xl md:text-4xl lg:text-5xl',
+    h3: 'text-lg sm:text-xl md:text-2xl lg:text-3xl',
+  }
+  return responsiveMap[element]
+}
+</script>
+
+<template>
+  <component
+    :is="type"
+    :class="headingClasses"
+  >
+    {{ text }}
+  </component>
+</template>

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

@@ -0,0 +1,5 @@
+export interface FdsHeadingProps {
+  type: 'h1' | 'h2' | 'h3'
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'responsive'
+  text: string
+}

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsListHeading from './FdsListHeading.vue'
+
+const meta: Meta<typeof FdsListHeading> = {
+  title: 'FDS/Typography/FdsListHeading',
+  component: FdsListHeading,
+  tags: ['autodocs'],
+  argTypes: {
+    loading: { control: { type: 'boolean' } },
+    loadingText: { control: { type: 'text' } },
+    total: { control: { type: 'number' } },
+    unfiltered: { control: { type: 'number' } },
+    text: { control: { type: 'text' } },
+    language: { control: { type: 'select' }, options: ['sv', 'en'] },
+  },
+  args: {
+    loading: false,
+    text: 'resultat',
+    total: 10,
+    unfiltered: 100,
+    language: 'sv',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+}
+
+export const Filtered: Story = {
+  args: {
+    total: 25,
+    unfiltered: 100,
+    text: 'resultat',
+  },
+}
+
+export const Unfiltered: Story = {
+  args: {
+    total: 100,
+    text: 'resultat',
+  },
+}
+
+export const English: Story = {
+  args: {
+    total: 25,
+    unfiltered: 100,
+    text: 'results',
+    language: 'en',
+  },
+}

package/src/components/Typography/FdsListHeading/FdsListHeading.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import type { FdsListHeadingProps } from './types'
+
+const props = withDefaults(defineProps<FdsListHeadingProps>(), {
+  loading: false,
+  language: 'sv',
+})
+
+const separatorText = () => (props.language === 'sv' ? 'av' : 'of')
+
+const headingText = computed(() => {
+  // If total is falsy, show "0 separator unfiltered text"
+  if (!props.total) {
+    let result = '0'
+    if (props.unfiltered) {
+      result += ` ${separatorText()} ${props.unfiltered}`
+    }
+    if (props.text) {
+      result += ` ${props.text}`
+    }
+    return result
+  }
+
+  // If no text, just show total
+  if (!props.text) return String(props.total)
+
+  // If unfiltered exists and differs from total, show "total separator unfiltered text"
+  if (props.unfiltered && props.total !== props.unfiltered) {
+    return `${props.total} ${separatorText()} ${props.unfiltered} ${props.text}`
+  }
+
+  // Default: show "total text"
+  return `${props.total} ${props.text}`
+})
+
+const handleLoadingText = () => {
+  if (props.loadingText && props.loadingText.length > 0) {
+    return props.loadingText
+  }
+  return props.language === 'sv' ? 'Laddar...' : 'Loading...'
+}
+</script>
+
+<template>
+  <div class="inline-block mb-3 h-7 font-bold text-xl">
+    <FdsSpinner
+      v-if="loading"
+      size="24px"
+      color="blue"
+      :label="handleLoadingText()"
+      label-position="right"
+    />
+    <h3
+      v-else
+      class="heading font-heading text-xl m-0"
+    >
+      {{ headingText }}
+    </h3>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+export interface FdsListHeadingProps {
+  loading?: boolean
+  loadingText?: string
+  total?: number
+  unfiltered?: number
+  text?: string
+  language?: 'sv' | 'en'
+}