feat(background-image): pf-background-image element (#2588)

* feat(background-image): pf-background-image element

* docs(background-image): impove property docs

* docs(background-image): update example demo text

* fix(background-image): styleMap and remove content wrapper

* fix(background-image): add missing lg size private css prop

* docs: htmlexample plugin support for class on parent container

* fix(background-image): remove content and slot adjust demo styles

* docs(background-image): update docs to reflect removal of content slot

* docs(background-image): fix demo image paths

* docs(background-image): remove support for container use case

* docs(background-image): fix image paths

* fix(background-image): align cssprop value with PFv4

* fix(background-image): align cssprop value with PFv4 missed one

* fix(background-image): correct css prop cascade

* docs(background-image): add screenshot

* chore(background-image): add changeset

* test(background-image): add spec tests

* docs(background-image): update readme

* docs(background-image): fix typo in readme

* docs: demos

* docs: changeset

* docs: demos

* docs: demos and readme

---------

Co-authored-by: Benny Powers <web@bennypowers.com>

Author: zeroedin

.changeset/neat-toes-guess.md

@@ -0,0 +1,15 @@
+---
+"@patternfly/elements": minor
+---
+
+✨ Added `<pf-background-image>`
+
+```html
+<pf-background-image
+    src="/path/to/image.jpg"
+    src-2x="/path/to/image@2x.jpg"
+    src-sm="/path/to/image-768.jpg"
+    src-sm-2x="/path/to/image-768@2x.jpg"
+    src-lg="/path/to/image-992.jpg"
+></pf-background-image>
+```

docs/_plugins/html-example.cjs

@@ -28,9 +28,7 @@ module.exports = function(eleventyConfig) {
       content = await renderFromFile.call(this, dedent(content), kwargs);
     }
     return /* html */`
-<div class="example-preview">
-  ${content}
-</div>
+<div class="example-preview ${kwargs?.class ?? ''}">${content.trim()}</div>
 <details class="html-example ${kwargs?.class ?? ''}"${!kwargs?.style ? '' : ` style="${kwargs.style}"`}>
   <summary>View HTML Source</summary>
 

docs/main.css

@@ -281,7 +281,36 @@ header.band h1 {
   padding: var(--pf-global--spacer--md, 1rem);
   background-color: var(--pf-global--BackgroundColor--100, #fff);
   border-bottom: var(--pf-global--BorderWidth--sm, 1px) solid var(--pf-global--BorderColor--300, #f0f0f0);
-  transition: width .2s ease-in-out;
+}
+
+.example-preview.pf-background-image {
+  position: relative;
+  z-index: 0;
+  height: 350px;
+  overflow: hidden;
+  color: var(--pf-theme--color--white, #fff);
+}
+
+.example-preview.pf-background-image pf-background-image {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+}
+
+.example-preview.pf-background-image pf-background-image::part(container) {
+  position: relative;
+}
+
+.example-preview.pf-background-image pf-background-image,
+.example-preview.pf-background-image pf-background-image::part(container) {
+  height: 100%;
+  width: 100%;
+}
+
+.example-preview.pf-background-image pf-background-image::part(container)::after {
+  position: absolute;
+  background-size: cover;
 }
 
 section.api.band.api-properties dl {
@@ -731,6 +760,7 @@ code {
 .html-example {
   display: flex;
   padding-block: 6px;
+  transition: width .2s ease-in-out;
 }
 
 .html-example:hover summary {

elements/package.json

@@ -18,6 +18,7 @@
     "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
     "./pf-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.js",
     "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
+    "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
     "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js",
     "./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js",
     "./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js",

elements/pf-background-image/README.md

@@ -0,0 +1,37 @@
+# Background Image
+
+A **background image** allows you to place an image in the background of your page or area of a page.
+
+
+##  Installation
+Load `<pf-background-image>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-background-image/pf-background-image.js"></script>
+
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-background-image/pf-background-image.js';
+```
+
+## Usage
+
+```html
+<pf-background-image
+    src="image.jpg"
+    src-2x="image-576.jpg"
+    src-sm="image-768.jpg"
+    src-sm-2x="image-768@2x.jpg"
+    src-lg="image-1200.jpg"
+></pf-background-image>
+```
+
+[docs]: https://patternflyelements.org/components/background-image

elements/pf-background-image/demo/filter-override.html

@@ -0,0 +1,23 @@
+<pf-background-image filter
+    src="/components/background-image/demo/pfbg.jpg"
+    src-2x="/components/background-image/demo/pfbg_576.jpg"
+    src-sm="/components/background-image/demo/pfbg_768.jpg"
+    src-sm-2x="/components/background-image/demo/pfbg_768@2x.jpg"
+    src-lg="/components/background-image/demo/pfbg_1200.jpg">
+  <svg slot="filter" xmlns="http://www.w3.org/2000/svg">
+    <filter id="image_overlay">
+      <feMorphology in="SourceGraphic" operator="dilate" radius="5"></feMorphology>
+    </filter>
+  </svg>
+</pf-background-image>
+
+<script type="module">
+  import '@patternfly/elements/pf-background-image/pf-background-image.js';
+</script>
+
+<style>
+  /* override demo chrome styles */
+  html, body {
+    background-color: transparent;
+  }
+</style>

elements/pf-background-image/demo/pf-background-image.html

@@ -0,0 +1,18 @@
+<pf-background-image filter
+    src="pfbg.jpg"
+    src-2x="pfbg_576.jpg"
+    src-sm="pfbg_768.jpg"
+    src-sm-2x="pfbg_768@2x.jpg"
+    src-lg="pfbg_1200.jpg"
+></pf-background-image>
+
+<script type="module">
+  import '@patternfly/elements/pf-background-image/pf-background-image.js';
+</script>
+
+<style>
+/* override demo chrome styles */
+html, body {
+  background-color: transparent;
+}
+</style>