From 9ec63704fbf4d7568e3d6986043a036355787724 Mon Sep 17 00:00:00 2001
From: Cesar <cesargb@gmail.com>
Date: Thu, 30 May 2024 15:21:13 +0200
Subject: [PATCH] Add the *as* property in the CFoooter component to use
 semantic tag

---
 .../src/components/footer/CFooter.ts          |  9 ++++++++-
 .../footer/__tests__/CFooter.spec.ts          | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts
index 81de0158..3f0d5fd2 100644
--- a/packages/coreui-vue/src/components/footer/CFooter.ts
+++ b/packages/coreui-vue/src/components/footer/CFooter.ts
@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CFooter = defineComponent({
   name: 'CFooter',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Place footer in non-static positions.
      *
@@ -18,7 +25,7 @@ const CFooter = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['footer', { [`footer-${props.position}`]: props.position }] },
         slots.default && slots.default(),
       )
diff --git a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
index 4a5ba536..35b914ca 100644
--- a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
+++ b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts
@@ -19,6 +19,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'footer',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('footer-fixed')).toBe(true)
   })
 })
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('FOOTER')
+  })
+})