Add background image component

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -49,6 +49,7 @@
       "heading",
       "text",
       "image",
+      "backgroundimage",
       "link",
       "icon",
       "embed"

packages/standard-components/manifest.json

@@ -294,6 +294,19 @@
       }
     ]
   },
+  "backgroundimage": {
+    "name": "Background Image",
+    "description": "A background image",
+    "icon": "ri-image-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "URL",
+        "key": "url"
+      }
+    ]
+  },
   "icon": {
     "name": "Icon",
     "description": "A basic component for displaying icons",
@@ -394,6 +407,11 @@
         "type": "boolean",
         "label": "New Tab",
         "key": "openInNewTab"
+      },
+      {
+        "type": "boolean",
+        "label": "External",
+        "key": "external"
       }
     ]
   },

packages/standard-components/src/BackgroundImage.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  export let url = ""
+  $: style = url ? `background-image: url("${url}")` : ""
+</script>
+
+<div class="outer" use:styleable={$component.styles}>
+  <div class="inner" {style} />
+</div>
+
+<style>
+  .outer {
+    position: relative;
+  }
+
+  .inner {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: top center;
+  }
+</style>

packages/standard-components/src/index.js

@@ -31,5 +31,6 @@ export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as icon } from "./Icon.svelte"
 export { default as search } from "./Search.svelte"
+export { default as backgroundimage } from "./BackgroundImage.svelte"
 export * from "./charts"
 export * from "./forms"