From ac0ca62cc0caef9b042d1e7f3753943284c59418 Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Thu, 13 Jun 2024 21:14:47 +0000
Subject: [PATCH] feat(cxl-ui): cxl-featured-image add component

https://app.clickup.com/t/86b0647n0
---
 packages/cxl-ui/scss/cxl-featured-image.scss  | 63 +++++++++++++++++++
 .../src/components/cxl-featured-image.js      | 20 ++++++
 packages/cxl-ui/src/index-core.js             |  1 +
 .../cxl-ui/cxl-featured-image.stories.js      | 17 +++++
 4 files changed, 101 insertions(+)
 create mode 100644 packages/cxl-ui/scss/cxl-featured-image.scss
 create mode 100644 packages/cxl-ui/src/components/cxl-featured-image.js
 create mode 100644 packages/storybook/cxl-ui/cxl-featured-image.stories.js

diff --git a/packages/cxl-ui/scss/cxl-featured-image.scss b/packages/cxl-ui/scss/cxl-featured-image.scss
new file mode 100644
index 000000000..bceed114f
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-featured-image.scss
@@ -0,0 +1,63 @@
+// stylelint-disable order/properties-order
+
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+  position: relative;
+  display: block;
+  height: 25vh;
+  min-width: 320px;
+
+  @media #{mq.$medium} {
+    display: none;
+  }
+
+  #container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 75%;
+    background-color: var(--cxl-brand-color-black, rgb(26, 26, 26));
+    border-radius: calc(3 * var(--lumo-border-radius-l));
+  }
+
+  #image {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: bottom;
+    background-size: contain;
+  }
+}
+
+:host(.black) {
+  #container {
+    background-color: var(--cxl-brand-color-black);
+  }
+}
+
+:host(.blue) {
+  #container {
+    background-color: var(--cxl-brand-color-blue);
+  }
+}
+
+:host(.green) {
+  #container {
+    background-color: var(--cxl-brand-color-green);
+  }
+}
+
+:host(.light-blue) {
+  #container {
+    background-color: var(--cxl-brand-color-light-blue);
+  }
+}
+
+:host(.red) {
+  #container {
+    background-color: var(--lumo-primary-color);
+  }
+}
diff --git a/packages/cxl-ui/src/components/cxl-featured-image.js b/packages/cxl-ui/src/components/cxl-featured-image.js
new file mode 100644
index 000000000..130f3f9e7
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-featured-image.js
@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import cxlFeaturedImageStyles from '../styles/cxl-featured-image-css.js';
+
+@customElement('cxl-featured-image')
+export class CXLFeaturedImage extends LitElement {
+  @property({ type: String }) src = '';
+
+  static get styles() {
+    return [cxlFeaturedImageStyles];
+  }
+
+  render() {
+    return html`
+      <div id="container"></div>
+      <div id="image" style="background-image: url(${this.src})"></div>
+    `;
+  }
+}
diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js
index 3763ab40b..401f1c565 100644
--- a/packages/cxl-ui/src/index-core.js
+++ b/packages/cxl-ui/src/index-core.js
@@ -28,6 +28,7 @@ export { CXLDashboardNotificationElement } from './components/cxl-dashboard-noti
 export { CxlDashboardTeamHeaderElement } from './components/cxl-dashboard-team-header.js';
 export { CxlDashboardTeamStatsElement } from './components/cxl-dashboard-team-stats.js';
 export { CXLFeaturedCourseCardElement } from './components/cxl-featured-course-card.js';
+export { CXLFeaturedImage } from './components/cxl-featured-image';
 export { CXLLightCardElement } from './components/cxl-light-card.js';
 export { CXLNotification } from './components/cxl-notification.js';
 export { CXLNotificationCardElement } from './components/cxl-notification-card.js';
diff --git a/packages/storybook/cxl-ui/cxl-featured-image.stories.js b/packages/storybook/cxl-ui/cxl-featured-image.stories.js
new file mode 100644
index 000000000..354bd6bcf
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-featured-image.stories.js
@@ -0,0 +1,17 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-featured-image.js';
+
+export default {
+  title: 'CXL UI/cxl-featured-image',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const CXLFeaturedImage = ({ src }) =>
+  html`<cxl-featured-image src=${src}></cxl-featured-image>`;
+
+CXLFeaturedImage.storyName = 'cxl-featured-image';
+CXLFeaturedImage.args = {
+  src: 'https://ebpyu8ye7bj.exactdn.com/institute/wp-content/uploads/2023/12/ben-labay_team_headshot-1x1-bw-min-fix-min-compressed.png?strip=all&lossy=1&fit=720%2C720&ssl=1',
+};