fds-vue-core 2.0.88 → 2.1.0

package/src/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+
+interface FdsButtonMinorProps extends FdsButtonBaseProps {
+  invert?: boolean
+}
+
+const props = withDefaults(defineProps<FdsButtonMinorProps>(), {
+  loading: false,
+  disabled: false,
+  block: false,
+  state: undefined,
+  icon: undefined,
+  iconPos: 'left',
+  textSelection: false,
+  as: 'button',
+  href: undefined,
+  target: undefined,
+  rel: undefined,
+  type: 'button',
+  invert: false,
+})
+
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const rootClasses = computed(() => [
+  'inline-block transition-opacity duration-200',
+  props.disabled && 'opacity-20 pointer-events-none',
+  props.block && 'block w-full',
+])
+
+const elBase =
+  'box-border appearance-none inline-flex items-start justify-center w-fit cursor-pointer shadow-none p-0.5 text-base select-none m-0 rounded-md text-left align-start no-underline transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
+
+const variantClasses = computed(() =>
+  props.invert
+    ? 'border-0 font-normal text-white bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white hover:bg-white-100 active:bg-white-200'
+    : 'border-0 font-normal text-blue-600 bg-transparent focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500 hover:bg-blue_t-100 active:bg-blue_t-200',
+)
+
+const blockElClasses = computed(() => props.block && 'w-full justify-center')
+
+const iconOrderClasses = computed(() =>
+  props.icon && props.iconPos === 'right' ? 'order-2 ml-2 mr-0' : props.icon && 'mr-2',
+)
+
+const buttonClasses = computed(() => [
+  elBase,
+  variantClasses.value,
+  blockElClasses.value,
+  props.textSelection && 'select-text',
+])
+
+const iconFillClass = computed(() => (props.invert ? 'fill-white' : 'fill-blue-500'))
+
+function onClick(ev: MouseEvent) {
+  if (props.disabled || props.loading) {
+    ev.preventDefault()
+    return
+  }
+  emit('click', ev)
+}
+
+const linkAttrs = computed(() => {
+  if (props.as === 'a') return { href: props.href }
+  if (props.as === 'router-link') return { to: props.href }
+  return {}
+})
+
+const componentAttrs = computed(() => ({
+  ...linkAttrs.value,
+  ...attrs,
+}))
+</script>
+
+<template>
+  <div
+    :class="rootClasses"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <component
+      :is="as"
+      v-bind="componentAttrs"
+      :type="as === 'button' ? type : undefined"
+      :disabled="as === 'button' ? disabled : undefined"
+      :target="as === 'a' ? target : undefined"
+      :rel="as === 'a' ? rel : undefined"
+      :class="buttonClasses"
+      @click="onClick"
+    >
+      <template v-if="loading">
+        <FdsSpinner
+          class="mr-2"
+          size="24px"
+          color="inherit"
+        />
+      </template>
+      <template v-else-if="icon">
+        <span
+          :class="iconOrderClasses"
+          aria-hidden="true"
+        >
+          <FdsIcon
+            :class="iconFillClass"
+            :name="icon"
+            :size="24"
+          />
+        </span>
+      </template>
+      <span class="pt-0.5">
+        {{ text }}
+      </span>
+    </component>
+  </div>
+</template>

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

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonPrimary from './FdsButtonPrimary.vue'
+import icons from '@/assets/icons'
+
+const meta: Meta<typeof FdsButtonPrimary> = {
+  title: 'FDS/Buttons/FdsButtonPrimary',
+  component: FdsButtonPrimary,
+  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.text === 'string') push(`text="${a.text}"`)
+          if (typeof a.size === 'string' && a.size !== 'm') push(`size="${a.size}"`)
+          if (typeof a.icon === 'string') push(`icon="${a.icon}"`)
+          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
+          if (a.loading) push(':loading="true"')
+          if (a.disabled) push(':disabled="true"')
+          if (a.block) push(':block="true"')
+          if (typeof a.as === 'string' && a.as !== 'button') push(`as="${a.as}"`)
+          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
+          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonPrimary${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    text: { control: { type: 'text' } },
+    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    iconPos: { control: { type: 'inline-radio' }, options: ['left', 'right'] },
+    loading: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    block: { control: { type: 'boolean' } },
+    textSelection: { control: { type: 'boolean' } },
+    as: { control: { type: 'select' }, options: ['button', 'a'] },
+    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
+    href: { control: { type: 'text' } },
+  },
+  args: {
+    text: 'Primary',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    block: false,
+    textSelection: false,
+    icon: undefined,
+    iconPos: 'left',
+    as: 'button',
+    type: 'button',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonPrimary },
+    setup: () => ({ args }),
+    template: '<FdsButtonPrimary v-bind="args" />',
+  }),
+}
+
+export const WithIcon: Story = {
+  args: { icon: 'arrowRight', text: 'With icon' },
+  render: (args) => ({
+    components: { FdsButtonPrimary },
+    setup: () => ({ args }),
+    template: '<FdsButtonPrimary v-bind="args" />',
+  }),
+}
+
+export const Sizes: Story = {
+  render: (args) => ({
+    components: { FdsButtonPrimary },
+    setup: () => ({ args }),
+    template:
+      '<div class="flex gap-3 flex-wrap">\n  <FdsButtonPrimary v-bind="args" size="s" text="Small" />\n  <FdsButtonPrimary v-bind="args" size="m" text="Medium" />\n  <FdsButtonPrimary v-bind="args" size="l" text="Large" />\n</div>',
+  }),
+}

package/src/components/Buttons/FdsButtonPrimary/FdsButtonPrimary.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+
+const props = withDefaults(defineProps<FdsButtonBaseProps>(), {
+  loading: false,
+  disabled: false,
+  block: false,
+  state: undefined,
+  icon: undefined,
+  iconPos: 'left',
+  size: 'md',
+  textSelection: false,
+  as: 'button',
+  href: undefined,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const rootClasses = computed(() => [
+  'inline-block transition-opacity duration-200',
+  props.disabled && 'opacity-20 pointer-events-none',
+  props.block && 'block w-full',
+])
+
+const elBase =
+  'box-border appearance-none inline-flex items-center justify-center cursor-pointer select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
+
+const sizeClasses: Record<string, string> = {
+  sm: 'text-sm h-7 px-3',
+  md: 'text-base h-12 px-4',
+  lg: 'text-lg h-[68px] px-6',
+}
+
+const variantClasses =
+  'bg-red-600 border border-red-700 text-white hover:bg-red-700 active:bg-red-800 active:border-red-800'
+
+const blockElClasses = computed(() => props.block && 'w-full justify-center')
+
+const iconOrderClasses = computed(() => (props.icon && props.iconPos === 'right' ? 'order-2' : ''))
+
+const buttonClasses = computed(() => [
+  elBase,
+  sizeClasses[props.size || 'm'],
+  variantClasses,
+  blockElClasses.value,
+  props.textSelection && 'select-text',
+  (props.icon || props.text) && 'gap-2',
+])
+
+const iconFillClass = 'fill-white'
+
+function onClick(ev: MouseEvent) {
+  if (props.disabled || props.loading) {
+    ev.preventDefault()
+    return
+  }
+  emit('click', ev)
+}
+
+const linkAttrs = computed(() => {
+  if (props.as === 'a') return { href: props.href }
+  if (props.as === 'router-link') return { to: props.href }
+  return {}
+})
+</script>
+
+<template>
+  <div
+    :class="rootClasses"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <component
+      :is="as"
+      v-bind="linkAttrs"
+      :type="as === 'button' ? type : undefined"
+      :disabled="as === 'button' ? disabled : undefined"
+      :class="buttonClasses"
+      @click="onClick"
+    >
+      <template v-if="loading">
+        <FdsSpinner
+          size="24px"
+          color="inherit"
+        />
+      </template>
+      <template v-else-if="icon">
+        <span
+          :class="iconOrderClasses"
+          aria-hidden="true"
+        >
+          <FdsIcon
+            :class="iconFillClass"
+            :name="icon"
+            :size="24"
+          />
+        </span>
+      </template>
+      <span v-if="text">{{ text }}</span>
+    </component>
+  </div>
+</template>

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsButtonSecondary from './FdsButtonSecondary.vue'
+import icons from '@/assets/icons'
+
+const meta: Meta<typeof FdsButtonSecondary> = {
+  title: 'FDS/Buttons/FdsButtonSecondary',
+  component: FdsButtonSecondary,
+  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.text === 'string') push(`text="${a.text}"`)
+          if (typeof a.size === 'string' && a.size !== 'm') push(`size="${a.size}"`)
+          if (typeof a.icon === 'string') push(`icon="${a.icon}"`)
+          if (typeof a.iconPos === 'string' && a.iconPos !== 'left') push(`icon-pos="${a.iconPos}"`)
+          if (a.loading) push(':loading="true"')
+          if (a.disabled) push(':disabled="true"')
+          if (a.block) push(':block="true"')
+          if (typeof a.as === 'string' && a.as !== 'button') push(`as="${a.as}"`)
+          if (typeof a.type === 'string' && a.type !== 'button') push(`type="${a.type}"`)
+          if (typeof a.href === 'string' && a.href) push(`href="${a.href}"`)
+          const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
+          return `<FdsButtonSecondary${attrsStr} />`
+        },
+      },
+    },
+  },
+  argTypes: {
+    text: { control: { type: 'text' } },
+    size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
+    icon: { control: { type: 'select' }, options: Object.keys(icons) },
+    iconPos: { control: { type: 'inline-radio' }, options: ['left', 'right'] },
+    loading: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    block: { control: { type: 'boolean' } },
+    textSelection: { control: { type: 'boolean' } },
+    as: { control: { type: 'select' }, options: ['button', 'a'] },
+    type: { control: { type: 'select' }, options: ['button', 'submit', 'reset'] },
+    href: { control: { type: 'text' } },
+  },
+  args: {
+    text: 'Secondary',
+    size: 'md',
+    loading: false,
+    disabled: false,
+    block: false,
+    textSelection: false,
+    icon: undefined,
+    iconPos: 'left',
+    as: 'button',
+    type: 'button',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsButtonSecondary },
+    setup: () => ({ args }),
+    template: '<FdsButtonSecondary v-bind="args" />',
+  }),
+}

package/src/components/Buttons/FdsButtonSecondary/FdsButtonSecondary.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
+import FdsSpinner from '@/components/FdsSpinner/FdsSpinner.vue'
+import type { FdsButtonBaseProps } from '@/components/Buttons/ButtonBaseProps'
+
+const props = withDefaults(defineProps<FdsButtonBaseProps>(), {
+  loading: false,
+  disabled: false,
+  block: false,
+  state: undefined,
+  icon: undefined,
+  iconPos: 'left',
+  size: 'md',
+  textSelection: false,
+  as: 'button',
+  href: undefined,
+  type: 'button',
+})
+
+const emit = defineEmits<{
+  (e: 'click', ev: MouseEvent): void
+}>()
+
+const rootClasses = computed(() => [
+  'inline-block transition-opacity duration-200',
+  props.disabled && 'opacity-20 pointer-events-none',
+  props.block && 'block w-full',
+])
+
+const elBase =
+  'box-border appearance-none inline-flex items-center justify-center cursor-pointer select-none w-full min-h-0 min-w-12 m-0 rounded-lg text-center align-middle whitespace-nowrap no-underline shadow-[0_2px_4px_rgba(12,72,153,0.12)] transition-[box-shadow,border-color,background-color] duration-200 font-main font-bold text-base leading-5 tracking-normal focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500'
+
+const sizeClasses: Record<string, string> = {
+  sm: 'text-sm h-7 px-3',
+  md: 'text-base h-12 px-4',
+  lg: 'text-lg h-[68px] px-6',
+}
+
+const variantClasses =
+  'bg-white border-2 border-blue-500 text-blue-600 hover:border-blue-600 active:bg-blue-600 active:border-blue-600 active:text-white'
+
+const blockElClasses = computed(() => props.block && 'w-full justify-center')
+
+const iconOrderClasses = computed(() => (props.icon && props.iconPos === 'right' ? 'order-2' : ''))
+
+const buttonClasses = computed(() => [
+  elBase,
+  sizeClasses[props.size || 'm'],
+  variantClasses,
+  blockElClasses.value,
+  props.textSelection && 'select-text',
+  (props.icon || props.text) && 'gap-2',
+])
+
+const iconFillClass = 'fill-blue-500'
+
+function onClick(ev: MouseEvent) {
+  if (props.disabled || props.loading) {
+    ev.preventDefault()
+    return
+  }
+  emit('click', ev)
+}
+
+const linkAttrs = computed(() => {
+  if (props.as === 'a') return { href: props.href }
+  if (props.as === 'router-link') return { to: props.href }
+  return {}
+})
+</script>
+
+<template>
+  <div
+    :class="rootClasses"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <component
+      :is="as"
+      v-bind="linkAttrs"
+      :type="as === 'button' ? type : undefined"
+      :disabled="as === 'button' ? disabled : undefined"
+      :class="buttonClasses"
+      @click="onClick"
+    >
+      <template v-if="loading">
+        <FdsSpinner
+          size="24px"
+          color="inherit"
+        />
+      </template>
+      <template v-else-if="icon">
+        <span
+          :class="iconOrderClasses"
+          aria-hidden="true"
+        >
+          <FdsIcon
+            :class="iconFillClass"
+            :name="icon"
+            :size="24"
+          />
+        </span>
+      </template>
+      <span v-if="text">{{ text }}</span>
+    </component>
+  </div>
+</template>

package/src/components/FdsIcon/FdsIcon.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { computed, ref } from 'vue'
+import icons from '@/assets/icons'
+import FdsIcon from './FdsIcon.vue'
+import type { FdsIconName } from './types'
+
+const meta: Meta<typeof FdsIcon> = {
+  title: 'FDS/FdsIcon',
+  component: FdsIcon,
+  tags: ['autodocs'],
+  parameters: {},
+  argTypes: {
+    name: { control: { type: 'select' }, options: Object.keys(icons) },
+    size: { control: { type: 'text' } },
+    title: { control: { type: 'text' } },
+  },
+  args: {
+    name: (Object.keys(icons)[0] || '') as FdsIconName,
+    size: 24,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic: Story = {
+  render: (args) => ({
+    components: { FdsIcon },
+    setup: () => ({ args }),
+    template: '<FdsIcon v-bind="args" />',
+  }),
+}
+
+export const IconGallery: Story = {
+  parameters: {},
+  render: (args: { name?: string; size?: number | string; title?: string }) => ({
+    components: { FdsIcon },
+    setup() {
+      const iconEntries = ref(Object.keys(icons))
+      const selectedName = ref(args.name || iconEntries.value[0] || '')
+      function onPick(n: string) {
+        selectedName.value = n
+      }
+      const codeSnippet = computed(() => `<FdsIcon name="${selectedName.value}" size="${args.size}" />`)
+      return { args, iconEntries, onPick, codeSnippet, selectedName }
+    },
+    template: `
+      <div>
+        <div class="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-10 gap-4">
+          <button
+            v-for="n in iconEntries"
+            :key="n"
+            type="button"
+            class="flex flex-col items-center gap-2 p-3 rounded border hover:bg-blue-100 focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500"
+            @click="onPick(n)"
+            :aria-label="'Välj ikon ' + n"
+          >
+            <FdsIcon :name="n" :size="28" />
+            <span class="text-[11px] text-gray-700 truncate max-w-[90px]">{{ n }}</span>
+          </button>
+        </div>
+        <div class="mt-4 text-sm">Vald ikon: <code class="px-1 py-0.5 bg-gray-100 rounded">{{ selectedName }}</code></div>
+        <div class="mt-2">
+          <FdsIcon :name="selectedName" :size="args.size" :title="args.title" />
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/components/FdsIcon/FdsIcon.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import icons, { type IconMap } from '@/assets/icons'
+import { computed } from 'vue'
+import type { FdsIconProps } from './types'
+
+const props = withDefaults(defineProps<FdsIconProps>(), {
+  size: 24,
+  title: undefined,
+})
+
+function normalizeSvg(svg: string): string {
+  // Replace explicit width/height with 100% to allow container sizing
+  return svg.replace(/width="(.*?)"/g, 'width="100%"').replace(/height="(.*?)"/g, 'height="100%"')
+}
+
+const svgHtml = computed(() => {
+  const map = icons as IconMap
+  const entry = map[props.name]
+  if (!entry) return ''
+  const raw = typeof entry === 'function' ? entry() : entry
+  const withTitle = props.title ? raw.replace('<svg', `<svg aria-label="${props.title}" role="img"`) : raw
+  return normalizeSvg(withTitle)
+})
+
+const pixelSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center justify-center align-middle"
+    :style="{ width: pixelSize, height: pixelSize }"
+    v-html="svgHtml"
+  ></span>
+</template>

package/src/components/FdsIcon/types.ts

@@ -0,0 +1,9 @@
+import type icons from '@/assets/icons'
+
+export type FdsIconName = keyof typeof icons
+
+export interface FdsIconProps {
+  name: FdsIconName
+  size?: number | string
+  title?: string | undefined
+}