fds-vue-core 2.1.4 → 2.1.6

package/src/components/FdsTruncatedText/FdsTruncatedText.stories.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import FdsTruncatedText from './FdsTruncatedText.vue'
+
+const meta: Meta<typeof FdsTruncatedText> = {
+  title: 'FDS/FdsTruncatedText',
+  component: FdsTruncatedText,
+  tags: ['autodocs'],
+  argTypes: {
+    open: { control: { type: 'boolean' } },
+    content: { control: { type: 'text' } },
+    btnExpand: { control: { type: 'text' } },
+    btnCollapse: { control: { type: 'text' } },
+  },
+  args: {
+    open: false,
+    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
+    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
+    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+     anim id est laborum.`,
+    btnExpand: 'Visa mer',
+    btnCollapse: 'Visa mindre',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { FdsTruncatedText },
+    setup: () => {
+      const open = ref(args.open)
+      const handleToggle = (data: { open: boolean }) => {
+        open.value = data.open
+      }
+      return { args: { ...args, open }, handleToggle }
+    },
+    template: `<FdsTruncatedText v-bind="args" @toggleHandler="handleToggle" />`,
+  }),
+}
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { FdsTruncatedText },
+    setup: () => {
+      const open = ref(args.open)
+      const handleToggle = (data: { open: boolean }) => {
+        open.value = data.open
+      }
+      return { args: { ...args, open }, handleToggle }
+    },
+    template: `
+      <FdsTruncatedText v-bind="args" @toggleHandler="handleToggle">
+        Additional content that can be collapsed. This is a longer paragraph with more text to demonstrate the truncation functionality. It should be long enough to require the expand/collapse button.
+      </FdsTruncatedText>
+    `,
+  }),
+}
+
+export const Open: Story = {
+  render: (args) => ({
+    components: { FdsTruncatedText },
+    setup: () => {
+      const open = ref(args.open)
+      const handleToggle = (data: { open: boolean }) => {
+        open.value = data.open
+      }
+      return { args: { ...args, open }, handleToggle }
+    },
+    template: `<FdsTruncatedText v-bind="args" @toggleHandler="handleToggle" />`,
+  }),
+  args: {
+    open: true,
+  },
+}

package/src/components/FdsTruncatedText/FdsTruncatedText.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed, onMounted, ref, watch } from 'vue'
+import FdsButtonMinor from '@/components/Buttons/FdsButtonMinor/FdsButtonMinor.vue'
+import type { FdsTruncatedTextProps } from './types'
+
+const props = withDefaults(defineProps<FdsTruncatedTextProps>(), {
+  open: false,
+  btnExpand: 'Visa mer',
+  btnCollapse: 'Visa mindre',
+})
+
+const emit = defineEmits<{
+  (e: 'toggleHandler', data: { open: boolean }): void
+}>()
+
+const isOpen = ref(props.open)
+const contentRef = ref<HTMLDivElement | null>(null)
+const hasSlotContent = useHasSlot()
+const containerWidth = ref(0)
+const truncated = ref(false)
+const slotContentRef = ref<HTMLDivElement | null>(null)
+
+const shouldShowButton = computed(() => {
+  if (hasSlotContent.value) return true
+  return truncated.value
+})
+
+const toggleComponent = () => {
+  isOpen.value = !isOpen.value
+  emit('toggleHandler', { open: isOpen.value })
+}
+
+watch(
+  () => props.open,
+  (newValue) => {
+    isOpen.value = newValue
+  },
+)
+
+onMounted(() => {
+  if (hasSlotContent.value && slotContentRef.value?.parentElement) {
+    containerWidth.value = slotContentRef.value.parentElement.offsetWidth
+    const threshold = slotContentRef.value.offsetWidth / 8
+    const slotText = slotContentRef.value.textContent || ''
+    if (threshold <= slotText.length) {
+      truncated.value = true
+    }
+  } else if (contentRef.value?.parentElement) {
+    containerWidth.value = contentRef.value.parentElement.offsetWidth
+    const threshold = contentRef.value.offsetWidth / 8
+    if (threshold <= props.content.length) {
+      truncated.value = true
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="block mb-4">
+    <div
+      v-if="hasSlotContent"
+      ref="slotContentRef"
+      :class="['content', { open: isOpen }]"
+      :style="{ maxWidth: `${containerWidth}px` }"
+    >
+      <slot />
+    </div>
+    <div
+      v-else
+      ref="contentRef"
+      :class="['content', { open: isOpen }]"
+      :style="{ maxWidth: `${containerWidth}px` }"
+    >
+      {{ content }}
+    </div>
+    <FdsButtonMinor
+      v-if="shouldShowButton"
+      :icon="isOpen ? 'arrowUp' : 'arrowDown'"
+      iconPos="right"
+      :text="isOpen ? btnCollapse : btnExpand"
+      @click="toggleComponent"
+    />
+  </div>
+</template>

package/src/components/FdsTruncatedText/types.ts

@@ -0,0 +1,6 @@
+export interface FdsTruncatedTextProps {
+  open?: boolean
+  content: string
+  btnExpand?: string
+  btnCollapse?: string
+}

package/src/components/Form/FdsCheckbox/FdsCheckbox.stories.ts

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import FdsCheckbox from './FdsCheckbox.vue'
+
+const meta: Meta<typeof FdsCheckbox> = {
+  title: 'FDS/Form/FdsCheckbox',
+  component: FdsCheckbox,
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: { type: 'text' } },
+    checked: { control: { type: 'boolean' } },
+    indeterminate: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    value: { control: { type: 'text' } },
+    name: { control: { type: 'text' } },
+    id: { control: { type: 'text' } },
+  },
+  args: {
+    label: 'Checkbox label',
+    checked: false,
+    indeterminate: false,
+    disabled: false,
+    required: false,
+    value: undefined,
+    name: 'checkbox-name',
+    id: 'checkbox-id',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    label: 'Checkbox label',
+  },
+  render: (args) => ({
+    components: { FdsCheckbox },
+    setup() {
+      const checked = ref(args.checked)
+      const handleChange = (value: boolean) => {
+        checked.value = value
+      }
+      // Watch for args changes from controls
+      watch(
+        () => args.checked,
+        (newValue) => {
+          checked.value = newValue
+        },
+      )
+      return { args, checked, handleChange }
+    },
+    template: `
+      <FdsCheckbox 
+        v-bind="args"
+        @change="handleChange"
+      />
+    `,
+  }),
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+  render: (args) => ({
+    components: { FdsCheckbox },
+    setup() {
+      const checked = ref(args.checked)
+      const handleChange = (value: boolean) => {
+        checked.value = value
+      }
+      // Watch for args changes from controls
+      watch(
+        () => args.checked,
+        (newValue) => {
+          checked.value = newValue
+        },
+      )
+      return { args, checked, handleChange }
+    },
+    template: `
+      <FdsCheckbox 
+        v-bind="args"
+        :checked="checked" 
+        @change="handleChange"
+      >
+        Checked checkbox
+      </FdsCheckbox>
+    `,
+  }),
+}
+
+export const Indeterminate: Story = {
+  args: {
+    indeterminate: true,
+  },
+  render: (args) => ({
+    components: { FdsCheckbox },
+    setup() {
+      const checked = ref(args.checked)
+      const handleChange = (value: boolean) => {
+        checked.value = value
+      }
+      // Watch for args changes from controls
+      watch(
+        () => args.checked,
+        (newValue) => {
+          checked.value = newValue
+        },
+      )
+      return { args, checked, handleChange }
+    },
+    template: `
+      <FdsCheckbox 
+        v-bind="args"
+        :checked="checked" 
+        @change="handleChange"
+      >
+        Indeterminate checkbox
+      </FdsCheckbox>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+  },
+  render: (args) => ({
+    components: { FdsCheckbox },
+    setup() {
+      const checked = ref(args.checked)
+      const handleChange = (value: boolean) => {
+        checked.value = value
+      }
+      // Watch for args changes from controls
+      watch(
+        () => args.checked,
+        (newValue) => {
+          checked.value = newValue
+        },
+      )
+      return { args, checked, handleChange }
+    },
+    template: `
+      <FdsCheckbox 
+        v-bind="args"
+        :checked="checked" 
+        @change="handleChange"
+      >
+        Disabled checkbox
+      </FdsCheckbox>
+    `,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: { FdsCheckbox },
+    setup() {
+      const checked1 = ref(false)
+      const checked2 = ref(true)
+      const checked3 = ref(false)
+      const checked4 = ref(false)
+      const checked5 = ref(true)
+      const handleChange1 = (value: boolean) => {
+        checked1.value = value
+      }
+      const handleChange2 = (value: boolean) => {
+        checked2.value = value
+      }
+      const handleChange3 = (value: boolean) => {
+        checked3.value = value
+      }
+      const handleChange4 = (value: boolean) => {
+        checked4.value = value
+      }
+      const handleChange5 = (value: boolean) => {
+        checked5.value = value
+      }
+      return {
+        checked1,
+        checked2,
+        checked3,
+        checked4,
+        checked5,
+        handleChange1,
+        handleChange2,
+        handleChange3,
+        handleChange4,
+        handleChange5,
+      }
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex items-center space-x-4">
+          <FdsCheckbox :checked="checked1" @change="handleChange1">
+            Unchecked
+          </FdsCheckbox>
+        </div>
+        <div class="flex items-center space-x-4">
+          <FdsCheckbox :checked="checked2" @change="handleChange2">
+            Checked
+          </FdsCheckbox>
+        </div>
+        <div class="flex items-center space-x-4">
+          <FdsCheckbox :checked="checked3" @change="handleChange3" indeterminate>
+            Indeterminate
+          </FdsCheckbox>
+        </div>
+        <div class="flex items-center space-x-4">
+          <FdsCheckbox :checked="checked4" @change="handleChange4" disabled>
+            Disabled unchecked
+          </FdsCheckbox>
+        </div>
+        <div class="flex items-center space-x-4">
+          <FdsCheckbox :checked="checked5" @change="handleChange5" disabled>
+            Disabled checked
+          </FdsCheckbox>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const WithForm: Story = {
+  render: () => ({
+    components: { FdsCheckbox },
+    setup() {
+      const terms = ref(false)
+      const newsletter = ref(false)
+      const marketing = ref(true)
+      const handleTermsChange = (value: boolean) => {
+        terms.value = value
+      }
+      const handleNewsletterChange = (value: boolean) => {
+        newsletter.value = value
+      }
+      const handleMarketingChange = (value: boolean) => {
+        marketing.value = value
+      }
+      return {
+        terms,
+        newsletter,
+        marketing,
+        handleTermsChange,
+        handleNewsletterChange,
+        handleMarketingChange,
+      }
+    },
+    template: `
+      <form class="space-y-4">
+        <div>
+          <FdsCheckbox :checked="terms" @change="handleTermsChange" name="terms" id="terms" required>
+            I agree to the terms and conditions
+          </FdsCheckbox>
+        </div>
+        <div>
+          <FdsCheckbox :checked="newsletter" @change="handleNewsletterChange" name="newsletter" id="newsletter">
+            Subscribe to newsletter
+          </FdsCheckbox>
+        </div>
+        <div>
+          <FdsCheckbox :checked="marketing" @change="handleMarketingChange" name="marketing" id="marketing">
+            Receive marketing emails
+          </FdsCheckbox>
+        </div>
+      </form>
+    `,
+  }),
+}

package/src/components/Form/FdsCheckbox/FdsCheckbox.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { useHasSlot } from '@/composables/useHasSlots'
+import { computed, nextTick, watch } from 'vue'
+import type { FdsCheckboxProps } from './types'
+
+// Support v-model as boolean (single checkbox) or array (checkbox group)
+// Also support :checked prop for backward compatibility
+const modelValue = defineModel<boolean | Array<string | number>>({
+  default: undefined,
+  required: false,
+})
+
+const props = withDefaults(defineProps<FdsCheckboxProps>(), {
+  label: undefined,
+  checked: false,
+  indeterminate: false,
+  disabled: false,
+  value: undefined,
+  name: undefined,
+  id: undefined,
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void
+  (e: 'input', value: boolean): void
+  (e: 'update:checked', value: boolean): void
+}>()
+
+const wrapperClasses = computed(() => ['block relative flex items-center mb-2 last:mb-0'])
+const innerWrapperClasses = computed(() => [
+  'flex p-0.5 items-start rounded-md',
+  'hover:bg-blue_t-100 active:bg-blue_t-200',
+  '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-dashed [&:has(:focus-visible)]:-outline-offset-2 [&:has(:focus-visible)]:outline-blue-500',
+  props.disabled && 'hover:bg-transparent active:bg-transparent',
+])
+
+const checkboxClasses = computed(() => [
+  'rounded-md transition-colors duration-200 accent-blue-500 m-[3px]',
+  'peer z-2 bg-white min-w-[18px] min-h-[18px] focus-visible:outline-none',
+  props.disabled && 'cursor-not-allowed',
+])
+
+const autoId = `fds-checkbox-${Math.random().toString(36).slice(2, 9)}`
+const inputId = computed(() => props.id ?? autoId)
+
+const hasLabelSlot = useHasSlot()
+
+// Bridge for v-model (boolean or array) or :checked prop
+const internalChecked = computed<boolean>({
+  get: () => {
+    if (modelValue.value === undefined) {
+      return props.checked
+    }
+    // If modelValue is an array, check if this checkbox's value is in it
+    if (Array.isArray(modelValue.value)) {
+      return props.value !== undefined && modelValue.value.includes(props.value)
+    }
+    // Otherwise treat as boolean
+    return modelValue.value as boolean
+  },
+  set: (checked: boolean) => {
+    if (modelValue.value === undefined) {
+      emit('update:checked', checked)
+      emit('change', checked)
+      emit('input', checked)
+      return
+    }
+
+    // If modelValue is an array, add/remove this checkbox's value
+    if (Array.isArray(modelValue.value)) {
+      if (props.value === undefined) {
+        emit('update:checked', checked)
+        emit('change', checked)
+        emit('input', checked)
+        return
+      }
+
+      const newArray = [...modelValue.value]
+      if (checked) {
+        // Add value if not already present
+        if (!newArray.includes(props.value)) {
+          newArray.push(props.value)
+        }
+      } else {
+        // Remove value if present
+        const index = newArray.indexOf(props.value)
+        if (index > -1) {
+          newArray.splice(index, 1)
+        }
+      }
+      modelValue.value = newArray
+      emit('update:checked', checked)
+      emit('change', checked)
+      emit('input', checked)
+    } else {
+      // Boolean mode
+      modelValue.value = checked
+      emit('update:checked', checked)
+      emit('change', checked)
+      emit('input', checked)
+    }
+  },
+})
+
+// Set indeterminate state when prop changes
+function setIndeterminate() {
+  const checkbox = document.getElementById(inputId.value) as HTMLInputElement
+  if (checkbox) {
+    checkbox.indeterminate = props.indeterminate
+  }
+}
+
+// Watch for indeterminate prop changes
+watch(
+  () => props.indeterminate,
+  () => {
+    nextTick(() => setIndeterminate())
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <label
+      :for="inputId"
+      :class="[innerWrapperClasses, { 'cursor-not-allowed': disabled }]"
+      v-bind="$attrs"
+    >
+      <input
+        :id="inputId"
+        :name="name"
+        :value="value"
+        v-model="internalChecked"
+        :disabled="disabled"
+        :required="required"
+        type="checkbox"
+        :class="[checkboxClasses]"
+      />
+      <span
+        v-if="hasLabelSlot || label"
+        class="relative inline-block leading-6 pl-1 select-none"
+        :class="{ 'cursor-not-allowed': disabled }"
+      >
+        <template v-if="hasLabelSlot">
+          <slot></slot>
+        </template>
+        <template v-else-if="label">
+          {{ label }}
+        </template>
+      </span>
+    </label>
+  </div>
+</template>

package/src/components/Form/FdsCheckbox/types.ts

@@ -0,0 +1,10 @@
+export interface FdsCheckboxProps {
+  label?: string
+  checked?: boolean
+  indeterminate?: boolean
+  disabled?: boolean
+  value?: string | number | undefined
+  name?: string | undefined
+  id?: string | undefined
+  required?: boolean
+}