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

.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/[email protected]"
+    src-sm="/path/to/image-768.jpg"
+    src-sm-2x="/path/to/[email protected]"
+    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="[email protected]"
+    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/[email protected]"
+    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="[email protected]"
+    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>

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

@@ -0,0 +1,26 @@
+<script type="module" src="pf-background-image.js"></script>
+
+<pf-background-image
+  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/[email protected]"
+  src-lg="/components/background-image/demo/pfbg_1200.jpg"
+></pf-background-image>
+
+<section>
+  <h1>Sibling Content</h1>
+  <pf-button>Button</pf-button>
+</section>
+
+
+<style>
+  /* override demo chrome styles */
+  html, body {
+    background-color: transparent;
+  }
+  section {
+    color: var(--pf-theme--color--ui-base--text, #fff);
+    padding: var(--pf-global--spacer--xl, 2rem);
+  }
+</style>

elements/pf-background-image/docs/pf-background-image.md

@@ -0,0 +1,65 @@
+{% renderOverview %}
+  {% htmlexample class="pf-background-image" %}
+  <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/[email protected]"
+      src-lg="/components/background-image/demo/pfbg_1200.jpg"
+  ></pf-background-image>
+  {% endhtmlexample %}
+
+  View the [full screen demo](/components/background-image/demo/).
+
+{% endrenderOverview %}
+
+{% band header="Usage" %}
+  ### Sibling content w/ no filter
+  {% htmlexample class="pf-background-image" %}
+  <pf-background-image 
+      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/[email protected]"
+      src-lg="/components/background-image/demo/pfbg_1200.jpg"
+  ></pf-background-image>
+  <p>Sibling Content</p>
+  <pf-button>Button</pf-button>
+  {% endhtmlexample %}
+
+  View the [full screen demo](/components/background-image/demo/sibling-content/). 
+
+  ### Override SVG Filter
+
+  [MDN documentation for `<filter>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter)
+
+  {% htmlexample class="pf-background-image" %}
+  <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/[email protected]"
+      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>
+  {% endhtmlexample %} 
+
+  View the [full screen demo](/components/background-image/demo/filter-override/).
+
+{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}

elements/pf-background-image/pf-background-image.css

@@ -0,0 +1,66 @@
+:host {
+  display: flex;
+
+  --_background-image: var(--pf-c-background-image--BackgroundImage);
+}
+
+#outer-container {
+  display: contents;
+}
+
+#container {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+}
+
+#container::after {
+  display: block;
+  position: fixed;
+  top:  0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  content: "";
+  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
+  background-image: var(--_background-image);
+  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));
+  background-repeat:  no-repeat;
+  background-size: cover;
+}
+
+slot[name="filter"] {
+  display: none;
+}
+
+slot[part="content"] {
+  display: block;
+  position: relative;
+  z-index: 1;
+  color: white;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 576px) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #container::after {
+    background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
+  }
+}