fds-vue-core 2.1.1 → 2.1.3

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

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsBlockAlert from './FdsBlockAlert.vue'
-
-const meta: Meta<typeof FdsBlockAlert> = {
-  title: 'FDS/Blocks/FdsBlockAlert',
-  component: FdsBlockAlert,
-  tags: ['autodocs'],
-  argTypes: {
-    closeable: { control: { type: 'boolean' } },
-    collapsable: { control: { type: 'boolean' } },
-    expanded: { control: { type: 'boolean' } },
-    label: { control: { type: 'text' } },
-    default: { control: { type: 'text' } },
-    locale: { control: { type: 'select' }, options: ['sv', 'en'] },
-  },
-  args: {
-    visible: true,
-    closeable: false,
-    collapsable: false,
-    expanded: false,
-    label: 'About this component',
-    default: 'This is an alert block with some important information.',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const blockAlertTransform = (storyContext: {
-  args?: {
-    visible?: boolean
-    label?: string
-    closeable?: boolean
-    collapsable?: boolean
-    expanded?: boolean
-    locale?: string
-    default?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.closeable) attrs.push(':closeable="true"')
-  if (args.collapsable) attrs.push(':collapsable="true"')
-  if (args.expanded) attrs.push(':expanded="true"')
-  if (args.locale && args.locale !== 'sv') attrs.push(`locale="${args.locale}"`)
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockAlert${attrsStr}>${content}</FdsBlockAlert>`
-}
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { FdsBlockAlert },
-    setup: () => ({ args }),
-    template: `<FdsBlockAlert v-bind="args"><p>{{ args.default }}</p></FdsBlockAlert>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockAlertTransform,
-      },
-    },
-  },
-  args: {
-    label: 'About this component',
-    default: 'This is an alert block with some important information.',
-  },
-}
-
-export const WithLabel: Story = {
-  render: () => ({
-    components: { FdsBlockAlert },
-    template: `
-      <FdsBlockAlert label="Information">
-        <p>This alert block has a <a href="test" class="link">test</a> label and provides important information to the user.</p>
-      </FdsBlockAlert>
-    `,
-  }),
-}
-
-export const Collapsable: Story = {
-  render: () => ({
-    components: { FdsBlockAlert },
-    template: `
-      <FdsBlockAlert label="Collapsable Alert" collapsable>
-        <p>This alert block can be collapsed and expanded. The content below is only visible when expanded.</p>
-        <p>Additional details about the alert can be shown here.</p>
-      </FdsBlockAlert>
-    `,
-  }),
-}

package/src/components/Blocks/FdsBlockAlert/FdsBlockAlert.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { useHasSlot } from '@/composables/useHasSlots'
-import { computed, ref, watch } from 'vue'
-import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import type { FdsAlertBlockProps } from './types'
-
-const props = withDefaults(defineProps<FdsAlertBlockProps>(), {
-  id: undefined,
-  visible: true,
-  closeable: false,
-  collapsable: false,
-  expanded: false,
-  label: '',
-  locale: 'sv',
-})
-
-const emit = defineEmits<{
-  (e: 'close'): void
-  (e: 'toggle'): void
-  (e: 'update:visible', value: boolean): void
-}>()
-
-const isExpanded = ref(props.expanded)
-const isVisible = ref<boolean>(props.visible)
-const expandLabel = computed(() => (props.locale === 'sv' ? 'Visa mer' : 'Show more'))
-const collapseLabel = computed(() => (props.locale === 'sv' ? 'Visa mindre' : 'Show less'))
-const closeLabel = computed(() => (props.locale === 'sv' ? 'Stäng' : 'Close'))
-
-const hasSlot = useHasSlot()
-
-watch(
-  () => props.visible,
-  (v) => {
-    isVisible.value = v
-  },
-)
-
-const alertClasses = computed(() => [
-  'bg-yellow-200 border-yellow-300 border-1 rounded-md p-4 mb-4',
-  (props.collapsable && !isExpanded.value) || !hasSlot.value ? 'pb-4' : 'pb-6',
-])
-
-const autoId = `fds-alert-${Math.random().toString(36).slice(2, 9)}`
-const alertId = computed(() => props.id ?? autoId)
-
-function handleClose() {
-  isVisible.value = false
-  emit('update:visible', false)
-  emit('close')
-}
-
-function handleToggle() {
-  isExpanded.value = !isExpanded.value
-  emit('toggle')
-}
-</script>
-
-<template>
-  <div
-    v-if="isVisible"
-    :id="alertId"
-    :class="alertClasses"
-  >
-    <div>
-      <div>
-        <div
-          v-if="label"
-          class="font-bold w-full justify-between items-center h-[24px] flex gap-2"
-          :class="{ 'mb-4': (isExpanded || !collapsable) && hasSlot }"
-        >
-          <div class="flex items-center gap-2">
-            <FdsIcon
-              name="alert"
-              :size="24"
-              class="fill-yellow-700"
-            />
-            <span>{{ label }}</span>
-          </div>
-          <div class="relative">
-            <FdsButtonIcon
-              v-if="closeable"
-              icon="cross"
-              :size="24"
-              @click="handleClose"
-              :ariaLabel="closeLabel"
-              :class="['fill-gray-900! hover:bg-gray-100 active:bg-gray-200']"
-            />
-            <FdsButtonIcon
-              v-if="collapsable"
-              icon="arrowDown"
-              :size="24"
-              @click="handleToggle"
-              :ariaLabel="isExpanded ? collapseLabel : expandLabel"
-              :class="[
-                'fill-gray-900! hover:bg-gray-100 active:bg-gray-200',
-                '[&_svg]:transition-transform [&_svg]:duration-200',
-                isExpanded ? '[&_svg]:-rotate-180' : '[&_svg]:rotate-0',
-              ]"
-            />
-          </div>
-        </div>
-        <div
-          v-if="isExpanded || !collapsable"
-          class="fds-block-alert-slot mb-0-last-child"
-        >
-          <slot />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,12 +0,0 @@
-import type icons from '@/assets/icons'
-
-export interface FdsAlertBlockProps {
-  id?: string
-  visible?: boolean
-  closeable?: boolean
-  collapsable?: boolean
-  expanded?: boolean
-  label?: string
-  locale?: 'sv' | 'en'
-  icon?: keyof typeof icons
-}

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

@@ -1,110 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import FdsBlockContent from './FdsBlockContent.vue'
-
-const meta: Meta<typeof FdsBlockContent> = {
-  title: 'FDS/Blocks/FdsBlockContent',
-  component: FdsBlockContent,
-  tags: ['autodocs'],
-  argTypes: {
-    heading: { control: { type: 'text' } },
-    borderLeft: { control: { type: 'radio' }, options: ['', 'green', 'yellow', 'red'] },
-    tight: { control: { type: 'boolean' } },
-    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',
-    borderLeft: undefined,
-    tight: false,
-    headerInfo: '',
-    default:
-      'The Content 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 blockContentTransform = (storyContext: {
-  args?: {
-    heading?: string
-    headerInfo?: string
-    default?: string
-    tight?: boolean
-    color?: string
-    borderLeft?: boolean
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-  if (args.heading) attrs.push(`heading="${args.heading}"`)
-  if (args.tight) attrs.push(':tight="true"')
-  if (args.color && args.color !== 'blue') attrs.push(`color="${args.color}"`)
-  if (args.borderLeft) attrs.push(':borderLeft="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 `<FdsBlockContent${attrsStr}>${content}</FdsBlockContent>`
-}
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { FdsBlockContent },
-    setup: () => ({ args }),
-    template: `
-    <FdsBlockContent v-bind="args">
-        <template #headerInfo>
-          <div v-if="args.headerInfo" v-html="args.headerInfo"></div>
-        </template>
-      <p>{{ args.default }}</p>
-    </FdsBlockContent>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockContentTransform,
-      },
-    },
-  },
-  args: {
-    heading: 'About this component',
-    default:
-      'The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.',
-  },
-}
-
-export const WithBorderLeft: Story = {
-  render: () => ({
-    components: { FdsBlockContent },
-    template: `
-      <FdsBlockContent heading="About this component" borderLeft="var(--color-green-600" icon="alert">
-        <p>The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
-      </FdsBlockContent>
-    `,
-  }),
-}
-
-export const Tight: Story = {
-  render: () => ({
-    components: { FdsBlockContent },
-    template: `
-      <FdsBlockContent heading="About this component" tight>
-        <p>The Content Block can contain various types and amounts of content. We recommend using multiple instances of it for grouping related content.</p>
-      </FdsBlockContent>
-    `,
-  }),
-}

package/src/components/Blocks/FdsBlockContent/FdsBlockContent.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { computed, type Slot } from 'vue'
-import type { FdsContentBlockProps } from './types'
-import { useHasSlot } from '@/composables/useHasSlots'
-
-const hasSlot = useHasSlot()
-
-const props = withDefaults(defineProps<FdsContentBlockProps>(), {
-  borderLeft: undefined,
-  tight: false,
-  heading: undefined,
-})
-
-const contentClasses = computed(() => [
-  'rounded-md p-4 bg-white mb-4',
-  props.tight && 'pb-2',
-  props.tight && 'p-4!',
-  props.borderLeft && 'border-l-4',
-  hasSlot.value ? 'pb-6' : 'pb-4',
-])
-
-const headerClasses = computed(() => ['mt-0 mb-4 text-lg font-bold tracking-wide', !hasSlot.value && 'mb-0!'])
-
-const borderLeftStyle = computed(() => {
-  if (!props.borderLeft) return {}
-
-  const colorMap: Record<string, string> = {
-    green: 'var(--color-green-600)',
-    yellow: 'var(--color-yellow-400)',
-    red: 'var(--color-red-500)',
-  }
-
-  return { 'border-left-color': colorMap[props.borderLeft] || props.borderLeft }
-})
-
-const autoId = `fds-content-block-${Math.random().toString(36).slice(2, 9)}`
-const contentBlockId = computed(() => props.id ?? autoId)
-
-defineSlots<{
-  default?: Slot
-  headerInfo?: Slot
-}>()
-</script>
-
-<template>
-  <div
-    :id="contentBlockId"
-    :class="contentClasses"
-    :style="borderLeftStyle"
-  >
-    <header
-      v-if="heading"
-      class="flex items-start justify-between gap-4"
-    >
-      <div class="flex items-center gap-3">
-        <h3 :class="headerClasses">{{ heading }}</h3>
-      </div>
-      <div class="flex items-start gap-3">
-        <slot name="headerInfo" />
-      </div>
-    </header>
-    <div class="mb-0-last-child">
-      <slot />
-    </div>
-  </div>
-</template>

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

@@ -1,6 +0,0 @@
-export interface FdsContentBlockProps {
-  heading?: string
-  borderLeft?: '' | 'green' | 'yellow' | 'red'
-  tight?: boolean
-  id?: string
-}

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

@@ -1,123 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import icons from '@/assets/icons'
-import FdsBlockExpander from './FdsBlockExpander.vue'
-
-const meta: Meta<typeof FdsBlockExpander> = {
-  title: 'FDS/Blocks/FdsBlockExpander',
-  component: FdsBlockExpander,
-  tags: ['autodocs'],
-  argTypes: {
-    disabled: { control: { type: 'boolean' } },
-    open: { control: { type: 'boolean' } },
-    label: { control: { type: 'text' } },
-    preIcon: { control: { type: 'select' }, options: Object.keys(icons) },
-    default: { control: { type: 'text' } },
-  },
-  args: {
-    disabled: false,
-    open: false,
-    label: 'Expandable Content',
-    preIcon: undefined,
-    default: 'This is the expandable content that shows when the block is opened.',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const blockExpanderTransform = (storyContext: {
-  args?: {
-    label?: string
-    preIcon?: string
-    open?: boolean
-    disabled?: boolean
-    default?: string
-  }
-}) => {
-  const args = storyContext?.args || {}
-  const attrs = []
-
-  if (args.label) attrs.push(`label="${args.label}"`)
-  if (args.preIcon) attrs.push(`preIcon="${args.preIcon}"`)
-  if (args.open) attrs.push(':open="true"')
-  if (args.disabled) attrs.push(':disabled="true"')
-
-  const attrsStr = attrs.length ? ` ${attrs.join(' ')}` : ''
-  const content = args.default ? `\n  <p>${args.default}</p>\n` : ''
-  return `<FdsBlockExpander${attrsStr}>${content}</FdsBlockExpander>`
-}
-
-export const Default: Story = {
-  render: (args) => ({
-    components: { FdsBlockExpander },
-    setup: () => ({ args }),
-    template: `<FdsBlockExpander v-bind="args"><p>{{ args.default }}</p></FdsBlockExpander>`,
-  }),
-  parameters: {
-    docs: {
-      source: {
-        transform: blockExpanderTransform,
-      },
-    },
-  },
-  args: {
-    label: 'Expandable Content',
-    default: 'This is the expandable content that shows when the block is opened.',
-  },
-}
-
-export const WithIcon: Story = {
-  render: () => ({
-    components: { FdsBlockExpander },
-    template: `
-      <FdsBlockExpander label="Settings" preIcon="settings">
-        <div class="space-y-2">
-          <p>This expander block has an icon in the header.</p>
-          <p>Click to expand and see more content.</p>
-        </div>
-      </FdsBlockExpander>
-    `,
-  }),
-}
-
-export const Open: Story = {
-  render: () => ({
-    components: { FdsBlockExpander },
-    template: `
-      <FdsBlockExpander label="Pre-opened Content" open>
-        <p>This expander block starts in the open state.</p>
-        <p>You can still click the header to close it.</p>
-      </FdsBlockExpander>
-    `,
-  }),
-}
-
-export const Disabled: Story = {
-  render: () => ({
-    components: { FdsBlockExpander },
-    template: `
-      <FdsBlockExpander label="Disabled Block" disabled>
-        <p>This expander block is disabled and cannot be interacted with.</p>
-      </FdsBlockExpander>
-    `,
-  }),
-}
-
-export const MultipleBlocks: Story = {
-  render: () => ({
-    components: { FdsBlockExpander },
-    template: `
-      <div class="space-y-4">
-        <FdsBlockExpander label="First Block" preIcon="information">
-          <p>Content for the first expander block.</p>
-        </FdsBlockExpander>
-        <FdsBlockExpander label="Second Block" preIcon="settings">
-          <p>Content for the second expander block.</p>
-        </FdsBlockExpander>
-        <FdsBlockExpander label="Third Block" preIcon="alert">
-          <p>Content for the third expander block.</p>
-        </FdsBlockExpander>
-      </div>
-    `,
-  }),
-}

package/src/components/Blocks/FdsBlockExpander/FdsBlockExpander.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import FdsIcon from '@/components/FdsIcon/FdsIcon.vue'
-import type { FdsExpanderBlockProps } from './types'
-
-const props = withDefaults(defineProps<FdsExpanderBlockProps>(), {
-  disabled: false,
-  label: '',
-  open: false,
-  preIcon: undefined,
-})
-
-const emit = defineEmits<{
-  (e: 'toggle'): void
-}>()
-
-const isOpen = ref(props.open)
-
-// Watch for changes to the open prop
-watch(
-  () => props.open,
-  (newValue) => {
-    isOpen.value = newValue
-  },
-)
-
-const expanderClasses = computed(() => [
-  'expander-root block w-full rounded-2xl mb-4 shadow-[0_4px_16px_0_rgba(59,130,246,0.2)] transition-colors',
-  props.disabled && 'shadow-none border-2 border-gray-200 border-dashed',
-])
-
-const headerClasses = computed(() => [
-  'flex w-full items-start text-left justify-between bg-white text-blue-600 rounded-2xl p-[calc(1rem-2px)] border-2 border-white transition-colors border-2 border-white hover:border-blue-500 active:bg-blue_t-100 active:border-white focus-visible:border-blue-500 focus-visible:border-dashed focus-visible:outline-0',
-  props.disabled ? 'cursor-not-allowed hover:border-2 hover:border-transparent  active:bg-white' : 'cursor-pointer',
-  isOpen.value ? 'rounded-b-none' : 'rounded-b-2xl',
-])
-
-function handleToggle() {
-  if (props.disabled) return
-  isOpen.value = !isOpen.value
-  emit('toggle')
-}
-</script>
-
-<template>
-  <div :class="expanderClasses">
-    <button
-      type="button"
-      :class="headerClasses"
-      @click="handleToggle"
-    >
-      <span class="inline-flex items-center">
-        <span
-          v-if="preIcon"
-          class="flex items-center mr-4"
-        >
-          <FdsIcon
-            :name="preIcon"
-            :size="24"
-            class="fill-blue-500"
-            :class="{ 'fill-gray-500': disabled }"
-          />
-        </span>
-        <span class="inline-flex items-center">
-          <span
-            class="font-bold font-heading text-lg leading-md"
-            :class="{ 'text-gray-500': disabled }"
-            >{{ label }}</span
-          >
-        </span>
-      </span>
-      <FdsIcon
-        name="arrowDown"
-        :size="24"
-        class="ml-4 transition-transform duration-200 fill-blue-500 min-w-6 min-h-6"
-        :class="{ 'rotate-180': isOpen, 'fill-gray-500': disabled }"
-      />
-    </button>
-    <div
-      :aria-hidden="!isOpen"
-      class="mb-0-last-child block px-4 pb-6 rounded-b-2xl bg-white"
-      v-show="isOpen"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

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

@@ -1,8 +0,0 @@
-import type { FdsIconName } from '@/components/FdsIcon/types'
-
-export interface FdsExpanderBlockProps {
-  disabled?: boolean
-  label?: string
-  open?: boolean
-  preIcon?: FdsIconName
-}