@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppButton/__tests__/app-button.spec.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppButton from '../AppButton.vue';
+
+import type ButtonIconSlot from '../ButtonIconSlot.vue';
+
+const leadingIconSelector = '[data-test-leading-icon]';
+const trailingIconSelector = '[data-test-trailing-icon]';
+
+describe('the AppButton component', () => {
+  it('should render a button element as root element', () => {
+    const wrapper = shallowMount(AppButton);
+    expect(wrapper.element).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it('should render a custom element as root element when provided', () => {
+    const wrapper = shallowMount(AppButton, {
+      props: { as: 'span' },
+    });
+
+    expect(wrapper.element).toBeInstanceOf(HTMLSpanElement);
+  });
+
+  it('should set the button type to \'button\' by default', () => {
+    const wrapper = shallowMount(AppButton);
+    expect(wrapper.attributes('type')).toBe('button');
+  });
+
+  it('can change the button type', () => {
+    const wrapper = shallowMount(AppButton, {
+      props: { type: 'submit' },
+    });
+
+    expect(wrapper.attributes('type')).toBe('submit');
+  });
+
+  it('can set the button disabled state', () => {
+    const wrapper = shallowMount(AppButton, {
+      props: { disabled: true },
+    });
+
+    expect(wrapper.attributes('disabled')).toBeDefined();
+  });
+
+  it('should not be disabled by default', () => {
+    const wrapper = shallowMount(AppButton);
+    expect(wrapper.attributes('disabled')).toBeUndefined();
+  });
+
+  it('should be disabled when setting the loading prop to true', () => {
+    const wrapper = shallowMount(AppButton, {
+      props: { loading: true },
+    });
+
+    expect(wrapper.attributes('disabled')).toBeDefined();
+  });
+
+  it('renders the default slot', () => {
+    const buttonText = 'Button text';
+    const wrapper = shallowMount(AppButton, {
+      slots: { default: buttonText },
+    });
+
+    expect(wrapper.text()).toBe(buttonText);
+  });
+
+  it('should not render text in the button by default', () => {
+    const wrapper = shallowMount(AppButton);
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('can set an icon before the button text', () => {
+    const iconSelector = 'data-test-leading-icon';
+    const leadingIcon = `<i ${iconSelector}>Icon</i>`;
+    const wrapper = shallowMount(AppButton, {
+      slots: { default: 'Button text', leadingIcon },
+    });
+
+    const leadingIconComponent = wrapper
+      .findComponent<typeof ButtonIconSlot>(leadingIconSelector);
+    expect(leadingIconComponent.exists()).toBe(true);
+    expect(leadingIconComponent.props('loading')).toBe(false);
+
+    const iconElement = leadingIconComponent.find('[data-test-leading-icon]');
+    expect(iconElement.exists()).toBe(true);
+  });
+
+  it('should set the ButtonIconSlot loading prop to true if button loading prop is true', () => {
+    const iconSelector = 'data-test-leading-icon';
+    const leadingIcon = `<i ${iconSelector}>Icon</i>`;
+    const wrapper = shallowMount(AppButton, {
+      slots: { default: 'Button text', leadingIcon },
+      props: { loading: true },
+    });
+
+    const leadingIconComponent = wrapper
+      .findComponent<typeof ButtonIconSlot>(leadingIconSelector);
+    expect(leadingIconComponent.exists()).toBe(true);
+    expect(leadingIconComponent.props('loading')).toBe(true);
+  });
+
+  it('can set an icon after the button text', () => {
+    const iconSelector = 'data-test-trailing-icon';
+    const trailingIcon = `<i ${iconSelector}>Icon</i>`;
+    const wrapper = shallowMount(AppButton, {
+      slots: { default: 'Button text', trailingIcon },
+      props: { loading: true },
+    });
+
+    const trailingIconComponent = wrapper
+      .findComponent<typeof ButtonIconSlot>(trailingIconSelector);
+    expect(trailingIconComponent.exists()).toBe(true);
+    expect(trailingIconComponent.props('loading')).toBe(false);
+
+    const iconElement = trailingIconComponent.find(`[${iconSelector}]`);
+    expect(iconElement.exists()).toBe(true);
+  });
+
+  it('should not render icons by default', () => {
+    const wrapper = shallowMount(AppButton);
+
+    const leadingIconComponent = wrapper
+      .findComponent<typeof ButtonIconSlot>(leadingIconSelector);
+    expect(leadingIconComponent.exists()).toBe(false);
+
+    const trailingIconComponent = wrapper
+      .findComponent<typeof ButtonIconSlot>(trailingIconSelector);
+    expect(trailingIconComponent.exists()).toBe(false);
+  });
+
+  it(
+    'should render the ButtonIconSlot when loading is true and no leadingIcon slot is provided',
+    () => {
+      const wrapper = shallowMount(AppButton, {
+        props: { loading: true },
+      });
+
+      const leadingIconComponent = wrapper
+        .findComponent<typeof ButtonIconSlot>(leadingIconSelector);
+      expect(leadingIconComponent.exists()).toBe(true);
+      expect(leadingIconComponent.props('loading')).toBe(true);
+      expect(leadingIconComponent.element.innerHTML).toBe('');
+    },
+  );
+});

package/src/modules/components/AppButton/__tests__/button-icon-slot.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import ButtonIconSlot from '../ButtonIconSlot.vue';
+import AppLoader from '../../AppLoader/AppLoader.vue';
+
+describe('the ButtonIconSlot component', () => {
+  it('should render the default slot by default', () => {
+    const icon = '<i>Icon</i>';
+    const wrapper = shallowMount(ButtonIconSlot, {
+      slots: { default: icon },
+    });
+
+    expect(wrapper.element.innerHTML).toBe(icon);
+  });
+
+  it('should render a loader when loading prop is true', () => {
+    const iconSelector = 'data-test-icon';
+    const icon = `<i ${iconSelector}>Icon</i>`;
+    const wrapper = shallowMount(ButtonIconSlot, {
+      props: { loading: true },
+      slots: { default: icon },
+    });
+
+    const loader = wrapper.findComponent(AppLoader);
+    expect(loader.exists()).toBe(true);
+
+    const iconElement = wrapper.find(`[${iconSelector}]`);
+    expect(iconElement.exists()).toBe(false);
+  });
+});

package/src/modules/components/AppButton/index.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes } from 'vue';
+
+export type ColorType = 'primary' | 'secondary' | 'white' | 'plain';
+export type Size = 'small' | 'medium' | 'large';
+export type Type = NonNullable<ButtonHTMLAttributes['type']>;
+
+export interface Props {
+  size?: Size;
+  type?: Type;
+  colorType?: ColorType;
+  disabled?: boolean;
+  loading?: boolean;
+  bordered?: boolean;
+  block?: boolean;
+  as?: string;
+}

package/src/modules/components/AppButton/index.ts

@@ -0,0 +1,57 @@
+import type { ColorType, Size } from './index.d';
+
+export const domClassesPerColorType: Record<ColorType, string[]> = {
+  plain: [
+    'text-primary',
+    'border-transparent',
+  ],
+  white: [
+    'text-secondary',
+    'bg-white',
+    'border-white',
+  ],
+  primary: [
+    'text-white',
+    'bg-primary',
+    'border-transparent',
+    'enabled:hover:bg-primary-active',
+  ],
+  secondary: [
+    'text-white',
+    'bg-secondary',
+    'border-transparent',
+    'enabled:hover:bg-secondary-active',
+  ],
+};
+
+export const domClassesPerColorBorderedType: Record<ColorType, string[]> = {
+  plain: [
+    'text-primary',
+    'border-transparent',
+  ],
+  white: [
+    'text-secondary',
+    'bg-white',
+    'border-secondary',
+  ],
+  primary: [
+    'text-primary',
+    'bg-transparent',
+    'border-primary',
+    'enabled:hover:text-white',
+    'enabled:hover:bg-primary',
+  ],
+  secondary: [
+    'text-secondary',
+    'bg-transparent',
+    'border-secondary',
+    'enabled:hover:text-white',
+    'enabled:hover:bg-secondary',
+  ],
+};
+
+export const domClassesPerSize: Record<Size, string[]> = {
+  small: ['px-5', 'py-1.5'],
+  medium: ['px-5', 'py-2.5', 'h-[42px]'],
+  large: ['px-5', 'py-3.5'],
+};

package/src/modules/components/AppCard/AppCard.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+  import { computed, useSlots } from 'vue';
+  import CardIconSlot from './CardIconSlot.vue';
+  import CardAction from './CardAction.vue';
+
+  import type { Component } from 'vue';
+  import type { Action } from './index.d';
+
+  const props = withDefaults(defineProps<{
+    title?: string;
+    description?: string;
+    actions?: Action[];
+    icon?: string | Component;
+    bordered?: boolean;
+    contentClasses?: string;
+    hoverTransition?: boolean;
+  }>(), {
+    title: undefined,
+    description: undefined,
+    actions: undefined,
+    icon: undefined,
+    bordered: false,
+    contentClasses: undefined,
+    hoverTransition: false,
+  });
+
+  const slots = useSlots();
+
+  const hasTitle = computed(() => !!slots.title || !!props.title);
+  const hasIcon = computed(() => !!slots.icon || !!props.icon);
+  const contentClasses = computed(() => `${props.contentClasses} ${hasTitle.value ? 'mt-4' : undefined}`);
+</script>
+
+<template>
+  <div
+    :class="{
+      'before:hidden': !bordered,
+      'cursor-pointer transition hover:drop-shadow-cardhighlight': (actions && actions.length > 0) || hoverTransition,
+    }"
+    class="group relative w-full overflow-hidden rounded-2xl bg-white px-6 py-5 text-zinc-600 drop-shadow-card
+      before:absolute before:left-0 before:top-0 before:h-full before:w-1.5 before:bg-primary"
+  >
+    <CardIconSlot
+      v-if="hasIcon"
+      :icon="icon"
+      :class="{ 'mt-1.5': hasTitle }"
+      data-test-icon
+    >
+      <slot name="icon"></slot>
+    </CardIconSlot>
+
+    <h3
+      v-if="hasTitle"
+      class="text-2xl font-bold text-zinc-900"
+      data-test-title
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+
+      <slot name="description">
+        <p
+          class="text-base font-normal text-zinc-600"
+          data-test-description
+        >
+          {{ description }}
+        </p>
+      </slot>
+    </h3>
+
+    <div
+      :class="contentClasses"
+      data-test-content
+    >
+      <slot></slot>
+    </div>
+
+    <slot name="actions">
+      <div
+        v-for="action in actions"
+        :key="action.name"
+        class="mt-2 flex w-full"
+      >
+        <CardAction :item="action" />
+      </div>
+    </slot>
+  </div>
+</template>

package/src/modules/components/AppCard/CardAction.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+  import { computed, h, ref } from 'vue';
+  import { useNavigation } from '~composables';
+  import { FontAwesomeIcon } from '~icons';
+  import { AppLoader } from '~components';
+  import { strokeClasses } from '.';
+
+  import type { Component } from 'vue';
+  import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+  import type { Action } from './index.d';
+
+  const props = defineProps<{ item: Action }>();
+
+  const { navigationComponent } = useNavigation();
+  const isLoading = ref(false);
+
+  const isFontAwesomeIcon = computed((): boolean => {
+    if (typeof props.item.icon === 'string') {
+      return false;
+    }
+
+    // @ts-expect-error prefix not always exists in type
+    return typeof props.item.icon?.prefix === 'string' || Array.isArray(props.item.icon);
+  });
+  const actionIcon = computed((): string | Component => {
+    if (isLoading.value) {
+      return AppLoader;
+    }
+
+    if (isFontAwesomeIcon.value) {
+      return h(FontAwesomeIcon, { icon: props.item.icon as FontAwesomeIconProps['icon'] });
+    }
+
+    return (props.item.icon as string | Component);
+  });
+  const iconIsComponent = computed((): boolean => isLoading.value || typeof props.item.icon !== 'string');
+  const iconClasses = computed(() => [
+    !iconIsComponent.value ? 'h-6!' : '',
+    strokeClasses[props.item.iconStroke ?? 3],
+  ]);
+  const isFontAwesomeNode = computed((): boolean => {
+    // @ts-expect-error props not always exists in type
+    return typeof props.item.icon === 'object' && props.item.icon?.props?.icon !== undefined;
+  });
+  const component = computed((): string | Component => {
+    if (isFontAwesomeIcon.value) {
+      return actionIcon.value;
+    }
+
+    if (typeof props.item.icon === 'string') {
+      return 'span';
+    }
+
+    return (props.item.icon as string | Component);
+  });
+
+  async function onClick(event: Event): Promise<void> {
+    if (!props.item?.onClick) {
+      return;
+    }
+
+    event.preventDefault();
+
+    isLoading.value = true;
+
+    await Promise.resolve(props.item?.onClick?.());
+
+    isLoading.value = false;
+  }
+</script>
+
+<template>
+  <Component
+    :is="navigationComponent"
+    :to="item.to"
+    :href="item.href"
+    :class="{ 'flex-row-reverse': item?.iconPosition === 'right' }"
+    class="app-card__action ml-auto flex items-center justify-center font-bold text-zinc-900 transition-colors group-hover:text-primary"
+    @click="onClick"
+  >
+    <Component
+      :is="component"
+      :class="iconClasses"
+      :size="isLoading ? 'extra-small' : undefined"
+      class="size-4"
+      data-test-icon
+      v-html="(isFontAwesomeIcon || isFontAwesomeNode) ? undefined : actionIcon"
+    />
+
+    <span
+      :class="{
+        'pl-2': item.icon && item?.iconPosition !== 'right',
+        'pr-2': item.icon && item?.iconPosition === 'right',
+      }"
+      class="text-sm"
+      data-test-name
+    >
+      {{ item.name }}
+    </span>
+  </Component>
+</template>

package/src/modules/components/AppCard/CardIconSlot.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+  import { computed, h } from 'vue';
+  import { FontAwesomeIcon } from '~icons';
+
+  import type { Component } from 'vue';
+  import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
+
+  const props = defineProps<{ icon?: string | Component | FontAwesomeIconProps['icon'] }>();
+
+  const isFontAwesomeIcon = computed((): boolean => {
+    if (typeof props.icon === 'string') {
+      return false;
+    }
+
+    // @ts-expect-error prefix not always exists in type
+    return typeof props.icon?.prefix === 'string';
+  });
+  const isFontAwesomeNode = computed((): boolean => {
+    // @ts-expect-error props not always exists in type
+    return typeof props.icon === 'object' && props.icon?.props?.icon !== undefined;
+  });
+  const cardIcon = computed((): string | Component => {
+    if (isFontAwesomeIcon.value) {
+      return h(FontAwesomeIcon, { icon: props.icon as FontAwesomeIconProps['icon'] });
+    }
+
+    return (props.icon as string | Component);
+  });
+  const component = computed((): string | Component => {
+    if (isFontAwesomeIcon.value) {
+      return cardIcon.value;
+    }
+
+    if (typeof props.icon === 'string') {
+      return 'span';
+    }
+
+    return (props.icon as string | Component);
+  });
+</script>
+
+<template>
+  <div
+    v-if="$slots.default || icon"
+    class="app-card__icon float-right text-primary"
+  >
+    <slot>
+      <Component
+        :is="component"
+        v-if="cardIcon"
+        :class="{ 'size-5': !isFontAwesomeIcon, 'size-4': isFontAwesomeIcon }"
+        data-test-icon-component
+        v-html="(isFontAwesomeIcon || isFontAwesomeNode) ? undefined : cardIcon"
+      />
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-card__icon > :deep(*) {
+    @apply h-full!;
+  }
+</style>

package/src/modules/components/AppCard/__tests__/app-card.spec.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppCard from '../AppCard.vue';
+import CardIconSlot from '../CardIconSlot.vue';
+
+describe('the AppCard component', () => {
+  it('should hide the optional elements by default', () => {
+    const wrapper = shallowMount(AppCard);
+
+    expect(wrapper.find('[data-test-title]').exists()).toBe(false);
+    expect(wrapper.find('[data-test-icon]').exists()).toBe(false);
+  });
+
+  it('should hide the left border by default', () => {
+    const wrapper = shallowMount(AppCard);
+
+    expect(wrapper.classes('before:hidden')).toBe(true);
+  });
+
+  it('should show the left border when enabled by prop', () => {
+    const wrapper = shallowMount(AppCard, {
+      props: { bordered: true },
+    });
+
+    expect(wrapper.classes('before:hidden')).toBe(false);
+  });
+
+  it('should render the default slot', () => {
+    const content = 'content';
+
+    const wrapper = shallowMount(AppCard, {
+      slots: { default: content },
+    });
+
+    const contentElement = wrapper.find('[data-test-content]');
+    expect(contentElement.exists()).toBe(true);
+    expect(contentElement.text()).toBe(content);
+  });
+
+  it('can set the title by prop', () => {
+    const wrapper = shallowMount(AppCard, {
+      props: { title: 'title' },
+    });
+
+    const titleElement = wrapper.find('[data-test-title]');
+    expect(titleElement.exists()).toBe(true);
+    expect(titleElement.text()).toBe('title');
+  });
+
+  it('can set the description by prop', () => {
+    const wrapper = shallowMount(AppCard, {
+      props: { title: 'title', description: 'description' },
+    });
+
+    const descriptionElement = wrapper.find('[data-test-description]');
+    expect(descriptionElement.exists()).toBe(true);
+    expect(descriptionElement.text()).toBe('description');
+  });
+
+  it('can set the title by slot', () => {
+    const wrapper = shallowMount(AppCard, {
+      slots: { title: 'title' },
+    });
+
+    const titleElement = wrapper.find('[data-test-title]');
+    expect(titleElement.exists()).toBe(true);
+    expect(titleElement.text()).toBe('title');
+  });
+
+  it('can set the description by slot', () => {
+    const wrapper = shallowMount(AppCard, {
+      slots: { title: 'title', description: '<p data-test-description>description</p>' },
+    });
+
+    const descriptionElement = wrapper.find('[data-test-description]');
+    expect(descriptionElement.exists()).toBe(true);
+    expect(descriptionElement.text()).toBe('description');
+  });
+
+  it('can set the icon by prop', () => {
+    const wrapper = shallowMount(AppCard, {
+      props: { icon: 'icon' },
+    });
+
+    const cardIconComponent = wrapper.findComponent(CardIconSlot);
+    expect(cardIconComponent.exists()).toBe(true);
+    expect(cardIconComponent.props('icon')).toBe('icon');
+  });
+
+  it('can set the icon by slot', () => {
+    const wrapper = shallowMount(AppCard, {
+      slots: { icon: 'icon' },
+    });
+
+    const cardIconComponent = wrapper.findComponent(CardIconSlot);
+    expect(cardIconComponent.exists()).toBe(true);
+    expect(cardIconComponent.text()).toBe('icon');
+  });
+
+  it('can set set additional content classes', () => {
+    const wrapper = shallowMount(AppCard, {
+      props: { contentClasses: 'content-class' },
+    });
+
+    const cardContent = wrapper.find('[data-test-content]');
+    expect(cardContent.exists()).toBe(true);
+    expect(cardContent.classes('content-class')).toBe(true);
+  });
+});

package/src/modules/components/AppCard/__tests__/card-action.spec.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { RouterLinkStub, shallowMount } from '@vue/test-utils';
+import { useNavigation } from '~/modules/composables';
+import CardAction from '../CardAction.vue';
+import { navigationItem as navigationItemMock } from '~composables/useNavigation/__mocks__/navigation';
+
+import type { HomeIcon } from '@heroicons/vue/24/outline';
+import type { VueWrapper } from '@vue/test-utils';
+import type { NavigationItem as NavigationItemType } from '~composables/useNavigation';
+
+function createWrapper(mockData: Partial<NavigationItemType> = {}): VueWrapper<InstanceType<typeof CardAction>> {
+  return shallowMount(CardAction, {
+    props: {
+      item: { ...navigationItemMock, ...mockData },
+    },
+  });
+}
+
+describe('the CardAction component', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it('should render an "a" element as root element based on useNavigation', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.element).toBeInstanceOf(HTMLAnchorElement);
+    expect(wrapper.attributes('href')).toBe(navigationItemMock.href);
+  });
+
+  it('should render an "router" element as root element based on useNavigation', () => {
+    const navigation = useNavigation();
+    navigation.setNavigationComponent(RouterLinkStub);
+
+    const wrapper = createWrapper();
+
+    const routerLink = wrapper.findComponent(RouterLinkStub);
+    expect(routerLink.exists()).toBe(true);
+    expect(routerLink.attributes('href')).toBe(navigationItemMock.href);
+    expect(routerLink.props('to')).toStrictEqual(navigationItemMock.to);
+  });
+
+  it('should render an icon', () => {
+    const wrapper = createWrapper();
+
+    const icon = wrapper.findComponent<typeof HomeIcon>('[data-test-icon]');
+    expect(icon.exists()).toBe(true);
+  });
+
+  it('should render the name', () => {
+    const wrapper = createWrapper();
+
+    const name = wrapper.find('[data-test-name]');
+    expect(name.text()).toBe(navigationItemMock.name);
+  });
+});