feat(cxl-ui): cxl-featured-image add component

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);
+  }
+}

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>
+    `;
+  }
+}

packages/cxl-ui/src/index-core.js

@@ -18,6 +18,7 @@ export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
 export { CXLBaseCardElement } from './components/cxl-base-card.js';
 export { CXLCardElement } from './components/cxl-card.js';
 export { CXLCourseCardElement } from './components/cxl-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 { CXLSectionElement } from './components/cxl-section.js';

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',
+};