From 56b3639504a4e2afdc781ed2d379f9087b494f4a Mon Sep 17 00:00:00 2001
From: Andrew Noblet <andrewbnoblet@gmail.com>
Date: Fri, 2 Aug 2024 13:10:04 +0000
Subject: [PATCH] feat(cxl-ui): cxl-inline-notification add component

https://app.clickup.com/t/86b02c865
---
 .../cxl-ui/scss/cxl-inline-notification.scss  | 27 ++++++++++++++
 .../src/components/cxl-inline-notification.js | 29 +++++++++++++++
 .../cxl-ui/cxl-inline-notification.stories.js | 37 +++++++++++++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 packages/cxl-ui/scss/cxl-inline-notification.scss
 create mode 100644 packages/cxl-ui/src/components/cxl-inline-notification.js
 create mode 100644 packages/storybook/cxl-ui/cxl-inline-notification.stories.js

diff --git a/packages/cxl-ui/scss/cxl-inline-notification.scss b/packages/cxl-ui/scss/cxl-inline-notification.scss
new file mode 100644
index 000000000..ad99a894a
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-inline-notification.scss
@@ -0,0 +1,27 @@
+// stylelint-disable order/properties-order
+:host {
+  background-color: var(--lumo-contrast-5pct);
+  display: flex;
+  padding: var(--lumo-space-s) var(--lumo-space-l);
+
+  .wrap {
+    display: flex;
+    flex-grow: 1;
+    margin: 0 auto;
+    max-width: var(--cxl-content-max-width-wide);
+  }
+
+  #content {
+    flex-grow: 1;
+  }
+
+  vaadin-button {
+    background-color: inherit;
+    color: var(--cxl-brand-color-black);
+    cursor: pointer;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}
diff --git a/packages/cxl-ui/src/components/cxl-inline-notification.js b/packages/cxl-ui/src/components/cxl-inline-notification.js
new file mode 100644
index 000000000..eaef1b3a0
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-inline-notification.js
@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@conversionxl/cxl-lumo-styles';
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import cxlInlineNotificationStyles from '../styles/cxl-inline-notification-css.js';
+
+@customElement('cxl-inline-notification')
+export class CXLInlineNotification extends LitElement {
+  static get styles() {
+    return [cxlInlineNotificationStyles];
+  }
+
+  hide() {
+    this.hidden = true;
+  }
+
+  render() {
+    return html`
+      <div class="wrap">
+        <div id="content">
+          <slot></slot>
+        </div>
+        <vaadin-button @click=${this.hide} theme="icon" aria-label="Close">
+          <vaadin-icon icon="lumo:cross"></vaadin-icon>
+        </vaadin-button>
+      </div>
+    `;
+  }
+}
diff --git a/packages/storybook/cxl-ui/cxl-inline-notification.stories.js b/packages/storybook/cxl-ui/cxl-inline-notification.stories.js
new file mode 100644
index 000000000..a4409be36
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-inline-notification.stories.js
@@ -0,0 +1,37 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-inline-notification.js';
+
+export default {
+  title: 'CXL UI/cxl-inline-notification',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const CXLInlineNotification = () => html`
+  <cxl-inline-notification>
+    <p>
+      The <strong>Automation with Apps script course</strong> is part of the Technical Marketing
+      minidegree.
+    </p>
+    <p>
+      The <strong>Automation with Apps script course</strong> is part of the Technical Marketing
+      minidegree.
+    </p>
+    <p>
+      The <strong>Automation with Apps script course</strong> is part of the Technical Marketing
+      minidegree.
+    </p>
+    <p>
+      The <strong>Automation with Apps script course</strong> is part of the Technical Marketing
+      minidegree.
+    </p>
+    <p>
+      The <strong>Automation with Apps script course</strong> is part of the Technical Marketing
+      minidegree.
+    </p>
+  </cxl-inline-notification>
+`;
+
+CXLInlineNotification.storyName = 'cxl-inline-notification';
+CXLInlineNotification.args = {};