fix: apply background pattern to card (#53)

* fix: apply bacground pattern to card

* fix: ops console.log

* test: fix card test

src/components/credential-card/d-credential-card.css

@@ -1,5 +1,5 @@
 :host {
-  @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-primary;
+  @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-primary bg-no-repeat bg-cover;
 }
 
 .between {

src/components/credential-card/d-credential-card.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, Prop, h } from '@stencil/core';
+import { Component, Host, Prop, getAssetPath, h } from '@stencil/core';
 
 const verifiedUser = (
   <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -43,9 +43,9 @@ export class DCredentialCard {
   @Prop() expirationDate?: string;
 
   render() {
-    // const imageSrc = getAssetPath(`./assets/Rectangle.png`);
+    const imageSrc = getAssetPath('./assets/rect-dark.png');
     return (
-      <Host>
+      <Host style={{ 'background-image': `url(${imageSrc})` }}>
         <div class="between">
           <div class="info">
             <div class="heading">

src/components/credential-card/test/d-credential-card.spec.tsx

@@ -8,7 +8,7 @@ describe('d-credential-card', () => {
       html: `<d-credential-card></d-credential-card>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-credential-card>
+      <d-credential-card style="background-image: url(/assets/rect-dark.png);">
         <mock:shadow-root>
           <div class="between">
             <div class="info">

stencil.config.ts

@@ -30,6 +30,13 @@ export const config: Config = {
     },
     {
       type: 'dist-custom-elements',
+      copy: [
+        {
+          src: '**/*.{jpg,png}',
+          dest: 'dist/didroom-components/assets',
+          warn: true,
+        }
+      ],
       generateTypeDeclarations: true,
     },
     {