@iamproperty/components 7.7.1--beta20 → 7.7.1--beta21

package/package.json

@@ -5,7 +5,7 @@
     "name": "iamproperty"
   },
   "private": false,
-  "version": "7.7.1--beta20",
+  "version": "7.7.1--beta21",
   "scripts": {
     "reload": "vite --host",
     "dev": "npm run copy && node local_modules/delete-assets.cjs && npm run compile && npm run watch",

package/src/components/Banner/Banner.vue

@@ -1,35 +1,20 @@
 <script setup>
-  const props = defineProps({
-    title: {
-      type: String,
-      required: true,
-    },
-    image: {
-      type: String,
-      required: false,
-    },
-    background: {
-      type: String,
-      default: 'light',
-      required: false,
-    },
+  import { onMounted } from 'vue';
+
+  onMounted(() => {
+    import(`../../../assets/js/components/banner/banner.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-banner`))
+          window.customElements.define(`iam-banner`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   });
 </script>
 
 <template>
-  <div class="container">
-    <div :class="'bg-' + background + ' mb-4'">
-      <div class="row">
-        <div class="col-sm-6">
-          <div class="pt-5 pb-3 px-4">
-            <h2>{{ title }}</h2>
-            <slot></slot>
-          </div>
-        </div>
-        <div class="col-sm-6 col-md-5 ms-auto">
-          <img v-if="image" :src="image" alt="" class="h-100 w-100 object-cover" />
-        </div>
-      </div>
-    </div>
-  </div>
+  <iam-banner ref="wrapper">
+    <slot></slot>
+  </iam-banner>
 </template>

package/src/components/Banner/Banner.spec.js

@@ -1,26 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import Header from './Banner.vue';
-
-describe('Banner component', () => {
-  const test = shallowMount(Header, {
-    propsData: {
-      title: 'Banner title',
-      image: '/img/src/img.png',
-    },
-    slots: {
-      default: '<p>Hello</p>',
-    },
-  });
-
-  it('renders the banner title', () => {
-    expect(test.html()).toContain('<h2>Banner title</h2>');
-  });
-
-  it('renders the banner content', () => {
-    expect(test.html()).toContain('<p>Hello</p>');
-  });
-
-  it('renders the image', () => {
-    expect(test.html()).toContain('<img src="/img/src/img.png" alt="" class="h-100 w-100 object-cover">');
-  });
-});