@imaginario27/air-ui-ds 1.0.16 → 1.0.17

package/components/layouts/Footer.vue

@@ -0,0 +1,104 @@
+<template>
+    <footer 
+        :class="[
+            'w-full',
+            'bg-background-surface',
+            'py-section-xs',
+            hasSidePadding && 'px-content-side-padding-mobile md:px-content-side-padding',
+        ]"
+    >
+        <MaxWidthContainer
+            :class="[!hasContentMaxWidth && '!max-w-full']"
+        >
+            <template v-if="!$slots['default']">
+                <div 
+                    :class="[
+                        'w-full',
+                        'flex',
+                        'flex-col',
+                        isMobileCentered &&'items-center text-center',
+                        'gap-10',
+                        'lg:flex-row',
+                        'lg:items-start',
+                        'lg:text-left',
+                        'lg:justify-between',
+                    ]"
+                >
+                    <span class="text-sm text-text-neutral-subtle">
+                        {{ credits }}
+                    </span>
+
+                    <nav v-if="menuItems?.length">
+                        <ul class="flex flex-col lg:flex-row gap-5">
+                            <li 
+                                v-for="(item, index) in menuItems" 
+                                :key="index"
+                            >
+                                <NuxtLink
+                                    :to="item.to"
+                                    :class="[
+                                        'text-sm',
+                                        'hover:text-text-primary-brand-hover',
+                                        'transition-colors',
+                                    ]"
+                                >
+                                    {{ item.text }}
+                                </NuxtLink>
+                            </li>
+                        </ul>
+                    </nav>
+
+                    <div v-if="socialNetworks?.length" class="flex gap-5">
+                        <a 
+                            v-for="(network, index) in socialNetworks" 
+                            :key="index"
+                            :href="network.link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            :class="[
+                                'text-text-neutral-subtle',
+                                'hover:text-text-primary-brand-hover',
+                                'transition-colors',
+                            ]"
+                            :aria-label="network.name"
+                        >
+                            <img 
+                                :src="network.icon"
+                                :alt="`${network.name} icon`"
+                                width="20"
+                                height="20"
+                                class="min-w-[20px] min-h-[20px]"
+                            />
+                        </a>
+                    </div>  
+                </div>
+            </template>
+            <template v-else>
+                <slot />    
+            </template>
+        </MaxWidthContainer>
+    </footer>
+</template>
+<script setup lang="ts">
+// Props
+defineProps({
+    credits: {
+        type: String as PropType<string>,
+        default: '© <year> <your-company>. All rights reserved.',
+    },
+    menuItems: Array as PropType<MenuItem[]>,
+    socialNetworks: Array as PropType<SocialNetwork[]>,
+    hasContentMaxWidth: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    hasSidePadding: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    isMobileCentered: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+})
+</script>

package/components/layouts/Heading.vue

@@ -3,26 +3,32 @@
         :class="[
             'w-full flex flex-col',
             alignmentClasses,
-            titleClass,
         ]"
     >
         <!-- Overtitle -->
-        <p
+        <span
             v-if="overtitle"
             :class="[
                 'font-semibold',
                 overtitleSizeClass,
                 'text-text-secondary-brand-default',
                 spaceOvertitleClass,
+                isOverTitleUppercase && 'uppercase',
+                overtitleClass,
             ]"
         >
             {{ overtitle }}
-        </p>
+        </span>
 
         <!-- Dynamic title -->
         <component
             :is="headingTag"
-            :class="[titleSizeClass, 'font-semibold', 'text-text-default']"
+            :class="[
+                titleSizeClass, 
+                'font-semibold', 
+                'text-text-default',
+                titleClass,
+            ]"
         >
             {{ title }}
         </component>
@@ -30,7 +36,12 @@
         <!-- Description -->
         <p
             v-if="description"
-            :class="[descriptionSizeClass, 'text-text-neutral-subtle', spaceDescriptionClass]"
+            :class="[
+                descriptionSizeClass, 
+                'text-text-neutral-subtle', 
+                spaceDescriptionClass,
+                descriptionClass,
+            ]"
         >
             {{ description }}
         </p>
@@ -41,6 +52,10 @@
 // Props
 const props = defineProps({
     overtitle: String as PropType<string>,
+    isOverTitleUppercase: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
     title: { 
         type: String as PropType<string>, 
         default: 'Heading title' 
@@ -64,15 +79,17 @@ const props = defineProps({
             Object.values(HeadingSpacing).includes(value as HeadingSpacing),
     },
     headingTag: {
-        type: [String, Number] as PropType<'h1' | 'h2' | 'h3'>,
+        type: [String, Number] as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>,
         default: 'h1',
-        validator: (value: string | number) => ['h1', 'h2', 'h3'].includes(value as string)
+        validator: (value: string | number) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
     },
     isMobileCentered: {
         type: Boolean as PropType<boolean>,
         default: false,
     },
+    overtitleClass: String as PropType<string>,
     titleClass: String as PropType<string>,
+    descriptionClass: String as PropType<string>,
 })
 
 // Computed classes
@@ -100,6 +117,8 @@ const alignmentClasses = computed(() => {
 
 const titleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-lg',
+        [HeadingSize.XS]: 'text-xl',
         [HeadingSize.SM]: 'text-2xl',
         [HeadingSize.MD]: 'text-3xl md:text-4xl',
         [HeadingSize.LG]: 'text-4xl md:text-5xl',
@@ -110,6 +129,8 @@ const titleSizeClass = computed(() => {
 
 const overtitleSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-xs',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-base',
         [HeadingSize.LG]: 'text-base',
@@ -120,6 +141,8 @@ const overtitleSizeClass = computed(() => {
 
 const descriptionSizeClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'text-sm',
+        [HeadingSize.XS]: 'text-sm',
         [HeadingSize.SM]: 'text-sm',
         [HeadingSize.MD]: 'text-lg',
         [HeadingSize.LG]: 'text-lg',
@@ -130,6 +153,8 @@ const descriptionSizeClass = computed(() => {
 
 const spaceOvertitleClass = computed(() => {
     const map = {
+        [HeadingSize.XXS]: 'mb-1',
+        [HeadingSize.XS]: 'mb-1',
         [HeadingSize.SM]: 'mb-1',
         [HeadingSize.MD]: 'mb-3',
         [HeadingSize.LG]: 'mb-3',
@@ -140,12 +165,16 @@ const spaceOvertitleClass = computed(() => {
 
 const spaceDescriptionClass = computed(() => {
     const normal = {
+        [HeadingSize.XXS]: 'mt-3',
+        [HeadingSize.XS]: 'mt-3',
         [HeadingSize.SM]: 'mt-3',
         [HeadingSize.MD]: 'mt-4',
         [HeadingSize.LG]: 'mt-6',
         [HeadingSize.XL]: 'mt-4',
     }
     const spaced = {
+        [HeadingSize.XXS]: 'mt-4',
+        [HeadingSize.XS]: 'mt-4',
         [HeadingSize.SM]: 'mt-4',
         [HeadingSize.MD]: 'mt-5',
         [HeadingSize.LG]: 'mt-9',

package/components/layouts/Overtitle.vue

@@ -1,7 +1,7 @@
 <template>
     <span 
         :class="[
-            'text-text-primary-brand-default',
+            colorClass,
             'text-sm',
             'font-medium',
             isUppercase && 'uppercase',
@@ -12,7 +12,7 @@
 </template>
 <script setup lang="ts">
 // Props
-defineProps({
+const props = defineProps({
     title: {
         type: String as PropType<string>,
         default: 'Overtitle'
@@ -20,6 +20,32 @@ defineProps({
     isUppercase: {
         type: Boolean as PropType<boolean>,
         default: true,
+    },
+    color: {
+        type: String as PropType<
+            ColorAccent.PRIMARY_BRAND
+            | ColorAccent.SECONDARY_BRAND
+            | ColorAccent.NEUTRAL
+        >,
+        default: ColorAccent.SECONDARY_BRAND,
+        validator: (value: unknown): value is ColorAccent => {
+            return typeof value === 'string' &&
+                [
+                    ColorAccent.PRIMARY_BRAND,
+                    ColorAccent.SECONDARY_BRAND,
+                    ColorAccent.NEUTRAL,
+                ].includes(value as ColorAccent)
+        },
+    },
+})
+
+const colorClass = computed(() => {
+    const variant: Partial<Record<ColorAccent, string>> = {
+        [ColorAccent.NEUTRAL]: 'text-text-default',
+        [ColorAccent.PRIMARY_BRAND]: 'text-text-primary-brand-default',
+        [ColorAccent.SECONDARY_BRAND]: 'text-text-secondary-brand-default',
     }
+
+    return variant[props.color as ColorAccent] || 'text-text-secondary-brand-default'
 })
 </script>

package/components/layouts/headers/ContentPageHeader.vue

@@ -67,7 +67,6 @@ defineProps({
         default: true,
     },
     description: String as PropType<string>,
-    
     hasGoBackLink: {
         type: Boolean as PropType<boolean>,
         default: false,

package/models/enums/headings.ts

@@ -1,4 +1,6 @@
 export enum HeadingSize {
+    XXS = 'xxs',
+    XS = 'xs',
     SM = 'sm',
     MD = 'md',
     LG = 'lg',

package/models/types/navigation.ts

@@ -3,9 +3,10 @@ export interface MenuItem {
     to: string
 }
 
-export interface FooterMenuItem {
-    text: string
-    to: string
+export interface SocialNetwork {
+    name: string
+    link: string
+    icon: any
 }
 
 export interface SidebarMenuItem {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.0.16",
+    "version": "1.0.17",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",

package/components/layouts/ContainerWrapper.vue

@@ -1,13 +0,0 @@
-<template>
-    <div
-        :class="[
-            'flex',
-            'flex-col',
-            'gap-6',
-            'bg-white',
-            'py-4 md:py-8'
-        ]"
-    >
-        <slot></slot>
-    </div>
-</template>

package/components/layouts/headers/WebAppHeader.vue

@@ -1,54 +0,0 @@
-<template>
-    <header 
-        :class="[
-            'flex',
-            'items-center',
-            'justify-between',
-            'pt-12',
-            'pb-8',
-            'gap-3',
-            'px-content-side-padding-mobile md:px-content-side-padding',
-        ]"
-    >
-        <div class="flex gap-4">
-            <ActionIconButton 
-                :icon="isMobileSidebarOpen ? 'mdiMenuOpen' : 'mdiMenuClose'"
-                class="lg:hidden shadow-sm"
-                @click="toggleMobileSidebar"
-            />
-            <PageTitle class="hidden lg:flex" :type="pageTitleType"/>
-        </div>
-        <div class="flex gap-3 items-center xs:w-auto">
-            <slot name="header-actions" />
-        </div>
-    </header>
-
-</template>
-
-<script setup lang="ts">
-// Imports
-import { useRoute } from 'vue-router'
-
-// Props
-defineProps({
-    pageTitleType: {
-        type: String as PropType<PageTitleType>,
-        default: PageTitleType.SIMPLE
-    }
-})
-
-// Page title
-const route = useRoute()
-const currentPageTitle = computed<string>(() => 
-    (route.meta.title as string) || 'Page title'
-)
-
-// Dynamically set the page title
-useHead(() => ({
-    title: pageTitle(currentPageTitle.value, App.NAME),
-}))
-
-// Composables
-const { isMobileSidebarOpen, toggleMobileSidebar } = useMobileSidebar()
-
-</script>