Merge pull request #414 from conversionxl/anoblet/feat/inline-notific…

…ation

packages/cxl-ui/scss/cxl-inline-notification.scss

@@ -0,0 +1,29 @@
+// stylelint-disable order/properties-order
+:host {
+  background-color: var(--lumo-contrast-5pct);
+  display: flex;
+
+  .wrap {
+    display: flex;
+    flex-grow: 1;
+    margin: 0 auto;
+    max-width: var(--cxl-content-max-width-wide, none);
+    padding-right: var(--cxl-wrap-padding, none);
+    padding-left: var(--cxl-wrap-padding, none);
+    position: relative;
+  }
+
+  #content {
+    flex-grow: 1;
+  }
+
+  vaadin-button {
+    background-color: inherit;
+    color: var(--cxl-brand-color-black);
+    cursor: pointer;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}

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

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

@@ -8,5 +8,6 @@ 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 { CXLInlineNotification } from './components/cxl-inline-notification.js';
 export { CXLNotificationCardElement } from './components/cxl-notification-card.js';
 export { CXLStatsElement } from './components/cxl-stats.js';

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 = {};