fds-vue-core 2.1.4 → 2.1.6

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

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import icons from '@/assets/icons'
+import FdsBlockInfo from './FdsBlockInfo.vue'
+
+const meta: Meta<typeof FdsBlockInfo> = {
+  title: 'FDS/Blocks/FdsBlockInfo',
+  component: FdsBlockInfo,
+  tags: ['autodocs'],
+  argTypes: {
+    heading: { control: { type: 'text' } },
+    size: { control: { type: 'select' }, options: ['small', 'large'] },
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    headerInfo: {
+      control: { type: 'text' },
+      description: 'Header info slot (HTML only in Storybook, supports Vue components when consumed)',
+    },
+    default: { control: { type: 'text' } },
+  },
+  args: {
+    heading: 'About this component',
+    size: 'small',
+    icon: undefined,
+    headerInfo: '',
+    header: 'About this component',
+    default:
+      'The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const blockInfoTransform = (storyContext: {
+  args?: {
+    heading?: string
+    headerInfo?: string
+    default?: string
+    icon?: string
+    tight?: boolean
+  }
+}) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.icon) attrs.push(`icon="${args.icon}"`)
+  if (args.tight) attrs.push(':tight="true"')
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  let content = ''
+
+  if (args.headerInfo || args.default) {
+    content = '\n'
+    if (args.headerInfo) {
+      content += `  <template #headerInfo>\n    <div v-html="${args.headerInfo}" />\n  </template>\n`
+    }
+    if (args.default) {
+      content += `  <p>${args.default}</p>\n`
+    }
+  }
+
+  return `<FdsBlockInfo${attrsStr}>${content}</FdsBlockInfo>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsBlockInfo },
+    setup: () => ({ args }),
+    template: `
+    <FdsBlockInfo v-bind="args">
+        <template #headerInfo>
+          <div v-if="args.headerInfo" v-html="args.headerInfo"></div>
+        </template>
+      <p>{{ args.default }}</p>
+    </FdsBlockInfo>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: blockInfoTransform,
+      },
+    },
+  },
+  args: {
+    heading: 'About this component',
+    default:
+      'The Info Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
+  },
+}
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { FdsBlockInfo },
+    template: `
+      <FdsBlockInfo heading="About this component" icon="information" size="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>
+    `,
+  }),
+}
+
+export const Secondary: Story = {
+  render: () => ({
+    components: { FdsBlockInfo },
+    template: `
+      <FdsBlockInfo heading="About this component" icon="alert" color="blue">
+        <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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed, type Slot } from 'vue'
+import type { FdsBlockInfoProps } from './types'
+
+const props = withDefaults(defineProps<FdsBlockInfoProps>(), {
+  icon: undefined,
+  size: 'small',
+  heading: undefined,
+  dataTestid: undefined,
+})
+
+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',
+])
+
+const smallIconSize = 24
+const largeIconSize = 48
+
+const autoId = `fds-content-block-${Math.random().toString(36).slice(2, 9)}`
+const contentBlockId = computed(() => props.id ?? autoId)
+
+defineSlots<{
+  default?: Slot
+  header?: Slot
+  headerInfo?: Slot
+}>()
+</script>
+
+<template>
+  <div :id="contentBlockId" :class="contentClasses">
+    <!-- Large icon layout: icon left, header + content right -->
+    <div v-if="size === '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">
+          <header class="flex items-start justify-between gap-4">
+            <h3 class="m-0 text-base font-main font-bold tracking-wide">{{ heading }}</h3>
+            <div class="flex items-start gap-3">
+              <slot name="headerInfo" />
+            </div>
+          </header>
+        </div>
+        <div v-if="hasSlot" class="mb-0-last-child">
+          <slot />
+        </div>
+      </div>
+    </div>
+
+    <!-- Small icon or no icon: icon in header only, content below -->
+    <div v-else>
+      <div v-if="heading" :class="{ 'mb-4': 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" />
+            <h3 class="m-0 text-base font-main font-bold tracking-wide">{{ heading }}</h3>
+          </div>
+          <div class="flex items-start gap-3">
+            <slot name="headerInfo" />
+          </div>
+        </header>
+      </div>
+      <div class="mb-0-last-child">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+import type { FdsIconName } from '@/components/FdsIcon/types'
+
+export interface FdsBlockInfoProps {
+  heading?: string
+  icon?: FdsIconName
+  size?: 'large' | 'small'
+  id?: string
+  dataTestid?: string
+}

package/src/components/Blocks/FdsBlockLink/FdsBlockLink.css

@@ -0,0 +1,9 @@
+/* Vanilla CSS version (for consuming repos) */
+.fds-interaction-block__inner__meta > * {
+  margin-bottom: 0 !important;
+}
+
+/* Vue :deep() version - only used when imported in Vue SFC */
+:deep(.fds-interaction-block__inner__meta > *) {
+  margin-bottom: 0 !important;
+}

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

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import icons from '@/assets/icons'
+import FdsSticker from '@/components/FdsSticker/FdsSticker.vue'
+import FdsBlockLink from './FdsBlockLink.vue'
+
+const meta: Meta<typeof FdsBlockLink> = {
+  title: 'FDS/Blocks/FdsBlockLink',
+  component: FdsBlockLink,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: { type: 'text' } },
+    arrow: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    download: { control: { type: 'text' } },
+    href: { control: { type: 'text' } },
+    target: { control: { type: 'select' }, options: ['', '_blank', '_self', '_parent', '_top'] },
+    rel: { control: { type: 'text' } },
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    interactive: { control: { type: 'boolean' } },
+    default: { control: { type: 'text' } },
+    as: { control: { type: 'select' }, options: ['button', 'a', 'router-link'] },
+  },
+  args: {
+    label: 'Enter some text',
+    arrow: false,
+    disabled: false,
+    download: undefined,
+    href: '/url',
+    target: undefined,
+    rel: undefined,
+    icon: undefined,
+    interactive: true,
+    default: 'Nothing will happen',
+    as: 'router-link',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const blockLinkTransform = (storyContext: {
+  args?: {
+    label?: string
+    icon?: string
+    arrow?: boolean
+    disabled?: boolean
+    href?: string
+    interactive?: boolean
+    default?: string
+    as?: 'router-link' | 'a' | 'button'
+    target?: string
+    rel?: string
+    download?: string
+  }
+}) => {
+  const args = storyContext?.args || {}
+  const attrs = []
+
+  if (args.label) attrs.push(`label="${args.label}"`)
+  if (args.icon) attrs.push(`icon="${args.icon}"`)
+  if (args.arrow) attrs.push(':arrow="true"')
+  if (args.disabled) attrs.push(':disabled="true"')
+  if (args.href) attrs.push(`href="${args.href}"`)
+  if (!args.interactive) attrs.push(':interactive="false"')
+  if (args.as && args.as !== 'router-link') attrs.push(`as="${args.as}"`)
+
+  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
+  return `<FdsBlockLink${attrsStr}>${content}</FdsBlockLink>`
+}
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsBlockLink },
+    setup: () => ({ args }),
+    template: `<FdsBlockLink v-bind="args">{{ args.default }}</FdsBlockLink>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        transform: blockLinkTransform,
+      },
+    },
+  },
+  args: {
+    label: 'Enter some text',
+    default: 'Nothing will happen',
+  },
+}
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink label="Settings" icon="settings" href="/settings">
+        <p>Click to go to settings page.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const WithArrow: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink label="Continue" arrow href="/next">
+        <p>This block has an arrow indicating it's clickable.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const WithSticker: Story = {
+  render: () => ({
+    components: { FdsBlockLink, FdsSticker },
+    template: `
+      <FdsBlockLink label="New Feature" href="/feature">
+        <p>Check out our latest feature!</p>
+        <template #sticker>
+          <FdsSticker variant="blue">New</FdsSticker>
+        </template>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink label="Disabled Block" disabled>
+        <p>This block is disabled and cannot be interacted with.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const NonInteractive: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink label="Information Only" :interactive="false">
+        <p>This block is not interactive - it's just for display.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const ExternalLink: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink
+        label="External Link"
+        href="https://example.com"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <p>This link opens in a new tab.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}
+
+export const Download: Story = {
+  render: () => ({
+    components: { FdsBlockLink },
+    template: `
+      <FdsBlockLink
+        label="Download File"
+        icon="download"
+        href="/files/document.pdf"
+        download="document.pdf"
+      >
+        <p>Click to download the PDF file.</p>
+      </FdsBlockLink>
+    `,
+  }),
+}

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed, useAttrs } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import type { FdsInteractionBlockProps } from './types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<FdsInteractionBlockProps>(), {
+  arrow: false,
+  disabled: false,
+  download: undefined,
+  href: undefined,
+  target: undefined,
+  rel: undefined,
+  icon: undefined,
+  interactive: true,
+  as: 'router-link',
+})
+
+const hasSlot = useHasSlot()
+const hasStickerSlot = useHasSlot('sticker')
+
+const emit = defineEmits<{
+  (e: 'click', event: Event): void
+}>()
+
+const innerClasses = computed(() => [
+  props.disabled ? 'cursor-not-allowed shadow-none hover:border-transparent active:bg-transparent' : 'cursor-pointer',
+  !props.interactive && 'cursor-auto',
+])
+
+const slotWrapperClasses = computed(() => [
+  'flex flex-col sm:flex-row justify-between h-fit gap-y-2 gap-x-4',
+  !hasSlot.value && 'justify-end',
+])
+
+const headerClasses = computed(() => [
+  !props.arrow && !props.icon && 'mb-2',
+  !hasSlot.value && 'mb-0!',
+  props.icon && 'flex-1',
+])
+
+const contentClasses = computed(() => [props.icon ? 'items-start gap-3' : 'flex-col'])
+const containerClasses = computed(() => [props.icon && 'flex-1'])
+const iconClasses = computed(() => [props.disabled && 'text-gray-700'])
+const arrowClasses = computed(() => [props.disabled && 'hidden'])
+const headerTextClasses = computed(() => [props.disabled ? 'text-gray-700' : 'text-blue-600'])
+
+function handleClick(event: Event) {
+  if (props.disabled || !props.interactive) {
+    event.preventDefault()
+    return
+  }
+  emit('click', event)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    handleClick(event)
+  }
+}
+
+const linkAttrs = computed(() => {
+  if (props.as === 'a') return { href: props.href }
+  if (props.as === 'router-link') return { to: props.href }
+  // Auto-detect: if href exists and no 'as' specified, use 'a'
+  if (props.href && !props.as) return { href: props.href }
+  return {}
+})
+
+const componentAttrs = computed(() => ({
+  ...linkAttrs.value,
+  ...attrs,
+}))
+
+const componentType = computed(() => {
+  if (props.as) return props.as
+  return props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="componentType"
+    v-bind="componentAttrs"
+    class="box-border appearance-none text-left w-full flex items-start bg-white p-[calc(1rem-2px)] mb-3 text-blue-600 shadow-lg shadow-blue-200 rounded-2xl no-underline border-2 border-transparent transition-all duration-200 hover:border-blue-600 hover:border-2 active:border-transparent active:shadow-none active:bg-blue_t-100 focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0"
+    :class="innerClasses"
+    :target="componentType === 'a' ? target : undefined"
+    :rel="componentType === 'a' ? rel : undefined"
+    :download="componentType === 'a' ? download : undefined"
+    :disabled="componentType === 'button' ? disabled : undefined"
+    :aria-disabled="disabled"
+    @click="handleClick"
+    @keydown="handleKeydown"
+  >
+    <div
+      class="flex w-full flex-1"
+      :class="contentClasses"
+    >
+      <FdsIcon
+        v-if="icon"
+        :name="icon"
+        :size="24"
+        class="flex items-center justify-center w-6 h-6 fill-blue-500"
+        :class="iconClasses"
+      />
+      <div
+        class="flex flex-col text-gray-700 font-normal text-base leading-6 tracking-normal"
+        :class="containerClasses"
+      >
+        <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 }}
+          </h3>
+        </div>
+        <div :class="slotWrapperClasses">
+          <div class="mb-0-last-child">
+            <slot />
+          </div>
+          <div
+            v-if="hasStickerSlot"
+            class="flex items-end"
+          >
+            <slot name="sticker" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <FdsIcon
+      v-if="arrow"
+      name="arrowRight"
+      :size="20"
+      class="ml-3 fill-blue-500"
+      :class="arrowClasses"
+    />
+  </component>
+</template>

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

@@ -0,0 +1,14 @@
+import type { FdsIconName } from '@/components/FdsIcon/types'
+
+export interface FdsInteractionBlockProps {
+  label: string
+  arrow?: boolean
+  disabled?: boolean
+  download?: string
+  href?: string
+  target?: string
+  rel?: string
+  icon?: FdsIconName
+  interactive?: boolean
+  as?: 'button' | 'a' | 'router-link'
+}

package/src/components/Buttons/ButtonBaseProps.ts

@@ -0,0 +1,18 @@
+import type { FdsIconName } from '@/components/FdsIcon/types'
+
+export interface FdsButtonBaseProps {
+  text: string
+  loading?: boolean
+  disabled?: boolean
+  block?: boolean
+  state?: 'hover' | 'focus' | 'active' | undefined
+  icon?: FdsIconName | undefined
+  iconPos?: 'right' | 'left'
+  size?: 'sm' | 'md' | 'lg'
+  textSelection?: boolean
+  as?: 'button' | 'a' | 'router-link'
+  href?: string | undefined
+  target?: string
+  rel?: string
+  type?: 'button' | 'submit' | 'reset'
+}

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonCopy from './FdsButtonCopy.vue'
+
+const meta: Meta<typeof FdsButtonCopy> = {
+  title: 'FDS/Buttons/FdsButtonCopy',
+  component: FdsButtonCopy,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      source: {
+        transform: (_code: string, ctx: { args?: Record<string, unknown> }) => {
+          const a = (ctx.args || {}) as Record<string, unknown>
+          const attrs: string[] = []
+          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.timeoutMs === 'number' && a.timeoutMs !== 1500) push(`:timeout-ms="${a.timeoutMs}"`)
+          if (a.disabled) push(':disabled="true"')
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonCopy${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    value: { control: { type: 'text' } },
+    targetId: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    copiedLabel: { control: { type: 'text' } },
+    timeoutMs: { control: { type: 'number' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  args: {
+    value: 'Text att kopiera',
+    label: 'Kopiera',
+    copiedLabel: 'Kopierat!',
+    timeoutMs: 800,
+    disabled: false,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonCopy },
+    setup: () => ({ args }),
+    template: '<FdsButtonCopy v-bind="args" />',
+  }),
+}