@imaginario27/air-ui-ds 1.0.0

package/components/cards/specific/FeatureCard.vue

@@ -0,0 +1,59 @@
+<template>
+    <Card 
+        :class="[
+            'lg:py-7 lg:px-8',
+        ]"
+    >
+        <CardHeader :class="['!flex-col', align === Align.CENTER && 'items-center']">
+            <ContainedIcon 
+                :icon
+                :shape="containedIconShape"
+                :styleType="containedIconStyleType"
+                :color="containedIconColor"
+            />
+            <CardTitle :title :class="[align === Align.CENTER && 'text-center']"/>
+        </CardHeader>
+        <CardBody>
+            <p :class="['text-sm', align === Align.CENTER && 'text-center']">
+                {{ description }}
+            </p>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Feature title'
+    },
+    description: {
+        type: String as PropType<string>,
+        default: 'Feature description'
+    },
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp'
+    },
+    containedIconShape: {
+        type: String as PropType<IconContainerShape>,
+        default: IconContainerShape.CIRCLE,
+        validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
+    },
+    containedIconStyleType: {
+        type: String as PropType<IconContainerStyleType>,
+        default: IconContainerStyleType.FILLED,
+        validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
+    },
+    containedIconColor: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.SECONDARY_BRAND, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    align: {
+        type: String as PropType<Align.LEFT | Align.CENTER>,
+        default: Align.LEFT,
+        validator: (value: Align) => [Align.LEFT, Align.CENTER].includes(value),
+    }
+})
+</script>

package/components/cards/specific/HelpTopicCard.vue

@@ -0,0 +1,62 @@
+<template>
+    <Card class="!py-6">
+        <CardHeader class="!justify-center items-center flex-col gap-4">
+            <!-- Icon -->
+            <ContainedIcon 
+                :icon
+                :color="ColorAccent.PRIMARY_BRAND"
+            />
+            
+            <!-- Title -->
+            <h4 class="font-semibold">
+                {{ title }}
+            </h4>
+        </CardHeader>
+        <CardBody>
+            <div class="flex flex-col w-full text-center items-center gap-6">
+                <p class="text-sm text-text-neutral-subtle">
+                    {{ description }}
+                </p>
+                <div class="w-full flex justify-center">
+                    <ActionButton 
+                        :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+                        :actionType="ButtonActionType.LINK"
+                        :iconPosition="IconPosition.RIGHT"
+                        :icon="buttonIcon"
+                        :to
+                        :text="buttonText"
+                    />
+                </div>
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    icon: {
+        type: String as PropType<any>,
+        default: 'mdiHelp'
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Title'
+    },
+    description: {
+        type: String as PropType<string>,
+        default: 'Description'
+    },
+    to: {
+        type: String as PropType<string>,
+        default: '/'
+    },
+    buttonText: {
+        type: String as PropType<string>,
+        default: 'Learn more' 
+    },
+    buttonIcon: {
+        type: String as PropType<any>,
+        default: 'mdiArrowRight'
+    },
+})
+</script>

package/components/cards/specific/MetricCard.vue

@@ -0,0 +1,42 @@
+<template>
+    <Card>
+        <CardHeader>
+            <CardTitle 
+                :title 
+                :class="[align === Align.CENTER && 'text-center']"
+            />
+        </CardHeader>
+        <CardBody>
+            <div :class="['flex flex-col', align === Align.CENTER && 'text-center']">
+                <span class="font-semibold text-2xl md:text-3xl">
+                    {{ value }}
+                </span>
+                <p 
+                    v-if="description"
+                    class="text-text-neutral-subtle text-sm"
+                >
+                    {{ description }}
+                </p>
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Card title'
+    },
+    value: {
+        type: [String, Number] as PropType<string | number>,
+        default: 0
+    },
+    description: String,
+    align: {
+        type: String as PropType<Align.LEFT | Align.CENTER>,
+        default: Align.LEFT,
+        validator: (value: Align) => [Align.LEFT, Align.CENTER].includes(value),
+    }
+})
+</script>

package/components/cards/specific/TestimonialCard.vue

@@ -0,0 +1,57 @@
+<template>
+    <Card class="px-0 py-5 shadow-xl">
+        <CardBody class="px-5">
+            <Rating 
+                :value="ratingValue" 
+                :color="ratingStarColor"
+            />
+            <p class="text-sm">
+                {{ text }}
+            </p>
+            <Author 
+                v-if="!isDivided" 
+                :name="displayName"
+                :role
+                :imgUrl
+            />
+        </CardBody>
+        <CardFooter 
+            v-if="isDivided"
+            class="px-5"
+        >
+            <Author 
+                :name="displayName"
+                :role
+                :imgUrl
+            />
+        </CardFooter>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    displayName: {
+        type: String as PropType<string>,
+        default: 'John Doe'
+    },
+    role: String as PropType<string>,
+    imgUrl: String as PropType<string>,
+    text: {
+        type: String as PropType<string>,
+        default: 'Text'
+    },
+    ratingValue: {
+        type: Number as PropType<number>,
+        default: 0
+    },
+    ratingStarColor: {
+        type: String as PropType<RatingItemColor>,
+        default: RatingItemColor.GOLD, 
+        validator: (value: RatingItemColor) => Object.values(RatingItemColor).includes(value),
+    },
+    isDivided: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+})
+</script>

package/components/cards/specific/subscription/CurrentActiveSubscriptionCard.vue

@@ -0,0 +1,105 @@
+<template>
+    <Card>
+        <CardHeader>
+            <CardTitle 
+                :title="!isPlanCancelled ? title : 'Plan canceled'" 
+                :class="{ 'text-text-danger': isPlanCancelled }"
+            />
+            <p 
+                v-if="!isPlanCancelled"
+                class="text-sm" 
+            >
+                Your next invoice is <strong>{{ nextPaymentAmount }}{{ currencySymbol }}</strong> 
+                and will be sent on {{ nextPaymentDate }}.
+            </p>
+            <p 
+                v-else-if="isPlanCancelled"
+                class="text-sm" 
+            >
+                Your plan will switch to FREE on {{ nextPaymentDate }}.
+            </p>
+        </CardHeader>
+        <CardBody>
+            <div class="flex gap-column-gap justify-between items-end">
+                <div class="flex flex-col">
+                    <span class="text-2xl font-semibold">{{ planName.toUpperCase() }}</span>
+                    <p 
+                        v-if="!isPlanCancelled"
+                        class="text-xs text-text-secondary"
+                    >
+                        {{ planDescription }}
+                    </p>
+                </div>
+                <div class="flex gap-3 flex-col md:flex-row">
+                    <ActionButton 
+                        :text="changePlanButtonText"
+                        :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
+                        :actionType="ButtonActionType.LINK"
+                        :to="changePlanLink"
+                        class="w-full md:w-auto"
+                    />
+                    <ActionButton 
+                        v-if="!isPlanCancelled"
+                        :text="cancelButtonText"
+                        class="w-full md:w-auto"
+                        @click="emit('cancel')"
+                    />
+                    <ActionButton 
+                        v-if="isPlanCancelled"
+                        text="Undo cancellation"
+                        class="w-full md:w-auto"
+                        @click="emit('undoCancellation')"
+                    />
+                </div>
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Current Active Plan'
+    },
+    nextPaymentAmount: {
+        type: Number as PropType<number>,
+        default: 0
+    },
+    nextPaymentDate: {
+        type: String as PropType<string>,
+        default: '_'
+    },
+    currencySymbol: {
+        type: String as PropType<string>,
+        default: '€'
+    },
+    planName: {
+        type: String as PropType<string>,
+        default: 'Plan name'
+    },
+    planDescription: {
+        type: String as PropType<string>,
+        default: 'Cancel whenever you want'
+    },
+    changePlanLink: {
+        type: String as PropType<string>,
+        default: '/'
+    },
+    changePlanButtonText: {
+        type: String as PropType<string>,
+        default: 'Change plan'
+    },
+    cancelButtonText: {
+        type: String as PropType<string>,
+        default: 'Cancel subscription'
+    },
+    isPlanCancelled: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    }   
+})
+
+// Emits
+const emit = defineEmits(['cancel', 'undoCancellation'])
+</script>

package/components/cards/specific/subscription/SubscriptionPlanCard.vue

@@ -0,0 +1,178 @@
+<template>
+    <Card 
+        :class="[
+            '!gap-5', 
+            'lg:py-7 lg:px-8',
+        ]"
+    >
+        <CardHeader class="!flex-col !justify-normal !gap-3 relative">
+            <template v-if="isFeatured && !isActive">
+                <div class="w-full flex justify-between gap-3">
+                    <CardTitle 
+                        :title="capitalizeFirstLetter(title)" 
+                        class="text-text-primary-brand-default"
+                    />
+                    <Badge 
+                        v-if="isFeatured" 
+                        :text="featuredBadgeText" 
+                        :color="ColorAccent.PRIMARY_BRAND"
+                    />
+                </div>
+            </template>
+
+            <template v-else>
+                <CardTitle :title="capitalizeFirstLetter(title)" class="text-text-primary-brand-default"/>
+            </template>     
+
+            <span class="text-4xl font-semibold">
+                {{ computedAmount }}{{ currencySymbol }}<span class="text-text-neutral-subtle font-normal text-lg">/{{ computedPeriodicity }}</span>
+            </span>
+
+            <MdiIcon 
+                v-if="isActive && !isFeatured"
+                icon="mdiCheckCircle"
+                size="24"
+                preserveAspectRatio="xMidYMid meet"
+                class="active-icon absolute top-0 right-0 text-icon-primary-brand-active"
+            />
+        </CardHeader>
+
+        <CardBody class="h-full">
+            <div class="flex flex-col gap-7 flex-grow mb-4">
+                <p v-if="description" class="text-sm">
+                    {{ description }}
+                </p>
+                <List 
+                    v-if="features.length" 
+                    :hasSeparator="hasFeatureListSeparator"
+                    :class="[!hasFeatureListSeparator && 'gap-5']"
+                >
+                    <ListItem 
+                        v-for="feature in features" :key="feature"
+                        icon="mdiCheck"
+                        :spaced="hasFeatureListSeparator"
+                    >
+                        {{ feature }}
+                    </ListItem>
+                </List>
+            </div>
+
+            <div 
+                :class="[
+                    'mt-auto flex',
+                    alignClass
+                ]"
+            >
+                <ActionButton 
+                    v-if="!isActive && showSelectButton"
+                    :text="selectButtonText"
+                    :styleType="isFeatured ? featuredButtonStyle : buttonStyle"
+                    class="w-full md:w-auto"
+                />
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    isActive: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isFeatured: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Plan name'
+    },
+    description: String as PropType<string>,
+    monthlyAmount: {
+        type: Number as PropType<number>,
+        default: 0
+    },
+    yearlyAmount: {
+        type: Number as PropType<number>,
+        default: 0
+    },
+    currencySymbol: {
+        type: String as PropType<string>,
+        default: '€'
+    },
+    featuredBadgeText: {
+        type: String as PropType<string>,
+        default: 'Recommended'
+    },
+    features: {
+        type: Array as PropType<Array<string>>,
+        default: () => [
+            'Feature 1',
+            'Feature 2', 
+            'Feature 3'
+        ]
+    },
+    hasFeatureListSeparator: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    isYearly: {
+        type: Boolean as PropType<boolean>,
+        default: false
+    },
+    monthlyText: {
+        type: String as PropType<string>,
+        default: 'monthly'
+    },
+    yearlyText: {
+        type: String as PropType<string>,
+        default: 'yearly'
+    },
+    showSelectButton: {
+        type: Boolean as PropType<boolean>,
+        default: true
+    },
+    selectButtonText: {
+        type: String as PropType<string>,
+        default: 'Get started today'
+    },
+    alignSelectButton: {
+        type: String as PropType<Align>,
+        default: Align.CENTER,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    buttonStyle: {
+        type: String as PropType<ButtonStyleType>,
+        default: ButtonStyleType.NEUTRAL_FILLED,
+        validator: (value: ButtonStyleType) => Object.values(ButtonStyleType).includes(value),
+    },
+    featuredButtonStyle: {
+        type: String as PropType<ButtonStyleType>,
+        default: ButtonStyleType.PRIMARY_BRAND_FILLED,
+        validator: (value: ButtonStyleType) => Object.values(ButtonStyleType).includes(value),
+    },
+})
+
+// Emits
+defineEmits(['update:modelValue'])
+
+// Computed classes
+const alignClass = computed(() => {
+    const alignVariant: Record<Align, string> = {
+        [Align.LEFT]: "justify-start",
+        [Align.CENTER]: "justify-center",
+        [Align.RIGHT]: "justify-end",
+    }
+
+    return alignVariant[props.alignSelectButton as Align] || "justify-center"
+})
+
+// Computed functions
+const computedAmount = computed(() => {
+    return props.isYearly 
+        ? props.yearlyAmount : props.monthlyAmount
+})
+
+const computedPeriodicity = computed(() => props.isYearly ? props.yearlyText : props.monthlyText)
+</script>

package/components/cards/specific/subscription/UniqueSubscriptionPlanCard.vue

@@ -0,0 +1,106 @@
+<template>
+    <Card
+        :class="[
+            'lg:py-7 lg:px-8',
+        ]"
+    >
+        <CardBody class="sm:flex-row">
+            <!-- Left column -->
+            <div class="w-full sm:w-1/2 md:w-2/3 flex flex-col gap-5">
+                <div class="w-full flex flex-col gap-3">
+                    <CardTitle :title class="text-2xl"/>
+                    <p>
+                        {{ description }}
+                    </p>
+                </div>
+
+                <List :layout="ListLayout.GRID" :cols="2">
+                    <ListItem 
+                        v-for="item in features" :key="item"
+                        icon="mdiCheck"
+                    >
+                        {{ item }}
+                    </ListItem>
+                </List>
+            </div>
+
+            <!-- Right column -->
+            <div 
+                :class="[
+                    'w-full sm:w-1/2 md:w-1/3',
+                    'bg-background-neutral-subtlest-on-container-surface',
+                    'flex flex-col gap-5 p-8',
+                    'justify-center',
+                    'items-center',
+                    'rounded-lg',
+                    'mt-4 md:mt-0',
+                ]"
+            >
+                <!-- Header -->
+                <div class="w-full flex flex-col gap-3 text-center">
+                    <span 
+                        v-if="overtitle"
+                        class="font-semibold"
+                    >
+                        {{ overtitle }}
+                    </span>
+
+                    <span class="text-4xl font-semibold">
+                        {{ price }}
+                    </span>
+                </div>
+
+                <!-- CTA -->
+                <div class="w-full flex justify-center">
+                    <ActionButton 
+                        :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
+                        :text="buttonText"
+                        @click="emit('click')"
+                    />
+                </div>
+
+                <!-- Extra info -->
+                <div class="text-neutral-subtle text-xs">
+                    <slot name="additionalInfo" />
+                </div>         
+            </div>
+        </CardBody>
+    </Card>
+</template>
+<script setup lang="ts">
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Plan name'
+    },
+    description: {
+        type: String as PropType<string>,
+        default: 'Plan description'
+    },
+    features: {
+        type: Array as PropType<Array<string>>,
+        default: () => [
+            'Feature 1',
+            'Feature 2',
+            'Feature 3',
+            'Feature 4',
+            'Feature 5',
+            'Feature 6',
+            'Feature 7',
+            'Feature 8'
+        ],
+    },
+    overtitle: String as PropType<string>,
+    price: {
+        type: String as PropType<string>,
+        default: '0€'
+    },
+    buttonText: {
+        type: String as PropType<string>,
+        default: 'Get started today'
+    },
+})
+
+// Emits
+const emit = defineEmits(['click'])
+</script>

package/components/collapsibles/Collapsible.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="w-full flex flex-col gap-2 py-3">
+        <div class="collapsible-header flex justify-between gap-4 hover:cursor-pointer" @click="toggle">
+            <span class="font-semibold mt-1">
+                {{ title }}
+            </span>
+            
+            <!-- This button does not have click event because the toggle is being controlled by the accordeon header div-->
+            <ActionIconButton 
+                :icon="isOpen ? 'mdiUnfoldLessHorizontal' : 'mdiUnfoldMoreHorizontal'"
+                :styleType="ButtonStyleType.NEUTRAL_OUTLINED"
+                :size="ButtonSize.MD" 
+            />
+        </div>
+
+        <VerticalExpansionTransition v-show="isOpen">
+            <slot />
+        </VerticalExpansionTransition>
+    </div>
+</template>
+
+<script setup lang="ts">
+// Props
+defineProps({
+    title: {
+        type: String as PropType<string>,
+        default: 'Item title'
+    },
+})
+
+// Composables
+const { isOpen, toggle } = useAccordion()
+</script>