From 8955a69f7b66dbe926a061b8d402d046f82ca888 Mon Sep 17 00:00:00 2001
From: Katja Bregenzer <katja.bregenzer@lime.tech>
Date: Thu, 8 Aug 2019 16:35:56 +0200
Subject: [PATCH] feat(limel-banner): add component

---
 src/components/banner/banner.mdx  | 14 ++++++
 src/components/banner/banner.scss | 47 +++++++++++++++++++
 src/components/banner/banner.tsx  | 75 +++++++++++++++++++++++++++++++
 src/examples/banner/banner.scss   | 17 +++++++
 src/examples/banner/banner.tsx    | 67 +++++++++++++++++++++++++++
 src/style/variables.scss          |  4 ++
 6 files changed, 224 insertions(+)
 create mode 100644 src/components/banner/banner.mdx
 create mode 100644 src/components/banner/banner.scss
 create mode 100644 src/components/banner/banner.tsx
 create mode 100644 src/examples/banner/banner.scss
 create mode 100644 src/examples/banner/banner.tsx

diff --git a/src/components/banner/banner.mdx b/src/components/banner/banner.mdx
new file mode 100644
index 0000000000..3f484517b1
--- /dev/null
+++ b/src/components/banner/banner.mdx
@@ -0,0 +1,14 @@
+---
+name: Banner
+route: /banner
+menu: Components
+---
+
+# Banner
+
+<limel-props name="limel-banner" />
+
+## Example
+
+<limel-example name="limel-example-banner" />
+
diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
new file mode 100644
index 0000000000..378101ddd9
--- /dev/null
+++ b/src/components/banner/banner.scss
@@ -0,0 +1,47 @@
+@import '@limetech/mdc-elevation/mixins';
+@import '@limetech/mdc-theme/mixins';
+@import '../../style/variables';
+@import '../../style/functions.scss';
+
+.lime-banner {
+    min-height: $lime-banner-height;
+    @include mdc-theme-prop(background-color, surface);
+    @include mdc-elevation(1);
+    display: none;
+    &.lime-banner--open {
+        display: block;
+        .lime-banner__surface {
+            opacity: 1;
+        }
+    }
+    .lime-banner__surface {
+        display: flex;
+        justify-content: center;
+        box-sizing: border-box;
+        opacity: 0;
+    }
+
+    .lime-banner__content {
+        display: flex;
+        align-items: center;
+        align-content: stretch;
+        padding: pxToRem(16);
+        flex-wrap: wrap;
+    }
+
+    .lime-banner__icon {
+        margin: 0 pxToRem(10);
+        align-self: flex-start;
+    }
+
+    .lime-banner__actions {
+        margin-left: pxToRem(50);
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    limel-icon {
+        color: white;
+        background-color: var(--icon-background-color, var(--lime-dark-grey));
+    }
+}
diff --git a/src/components/banner/banner.tsx b/src/components/banner/banner.tsx
new file mode 100644
index 0000000000..c2dedf45f1
--- /dev/null
+++ b/src/components/banner/banner.tsx
@@ -0,0 +1,75 @@
+import { Component, h, Method, Prop, State } from '@stencil/core';
+
+@Component({
+    tag: 'limel-banner',
+    shadow: true,
+    styleUrl: 'banner.scss',
+})
+export class Banner {
+    /**
+     * The text to show on the banner.
+     */
+    @Prop({ reflectToAttr: true })
+    public message: string;
+
+    /**
+     * Set icon for the banner
+     */
+    @Prop({ reflectToAttr: true })
+    public icon: string;
+
+    @State()
+    private isOpen = false;
+
+    // tslint:disable-next-line:valid-jsdoc
+    /**
+     * Open the banner
+     */
+    @Method()
+    public async open() {
+        this.isOpen = true;
+    }
+
+    // tslint:disable-next-line:valid-jsdoc
+    /**
+     * Close the banner
+     */
+    @Method()
+    public async close() {
+        this.isOpen = false;
+    }
+
+    public render() {
+        return (
+            <div
+                class={`lime-banner ${this.isOpen ? 'lime-banner--open' : ''}`}
+            >
+                <div class="lime-banner__surface">
+                    <div class="lime-banner__content">
+                        {this.renderIcon()}
+                        <div class="mdc-typography--body2">{this.message}</div>
+                        <div class="lime-banner__actions">
+                            <slot name="buttons" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Render the icon for the button
+     *
+     * @returns {HTMLElement} the icon
+     */
+    private renderIcon() {
+        if (!this.icon) {
+            return;
+        }
+        return (
+            <div class="lime-banner__icon">
+                <limel-icon name={this.icon} badge={true} size="large" />
+            </div>
+        );
+    }
+}
diff --git a/src/examples/banner/banner.scss b/src/examples/banner/banner.scss
new file mode 100644
index 0000000000..b529531895
--- /dev/null
+++ b/src/examples/banner/banner.scss
@@ -0,0 +1,17 @@
+@import '../../style/functions.scss';
+
+limel-banner {
+    --icon-background-color: var(--lime-deep-red);
+    position: fixed;
+    right: 0;
+    top: 0;
+    left: 0;
+
+    @media (max-width: 720px) {
+        position: absolute;
+    }
+
+    limel-button:not(last-child) {
+        margin-right: pxToRem(10);
+    }
+}
diff --git a/src/examples/banner/banner.tsx b/src/examples/banner/banner.tsx
new file mode 100644
index 0000000000..c161ff191d
--- /dev/null
+++ b/src/examples/banner/banner.tsx
@@ -0,0 +1,67 @@
+import { Component, Element, h, State } from '@stencil/core';
+
+@Component({
+    tag: 'limel-example-banner',
+    shadow: true,
+    styleUrl: 'banner.scss',
+})
+export class BannerExample {
+    @Element()
+    private host: HTMLElement;
+
+    @State()
+    private disabled = false;
+
+    private message = 'This is a non-blocking but also non-transient message';
+
+    private banner: HTMLLimelBannerElement;
+
+    constructor() {
+        this.openBanner = this.openBanner.bind(this);
+        this.closeBanner = this.closeBanner.bind(this);
+        this.someCustomAction = this.someCustomAction.bind(this);
+    }
+
+    public componentDidLoad() {
+        this.banner = this.host.shadowRoot.querySelector('limel-banner');
+    }
+
+    public render() {
+        return [
+            <limel-button
+                primary={true}
+                disabled={this.disabled}
+                label="Show Banner"
+                onClick={this.openBanner}
+            />,
+            <limel-banner message={this.message} icon="exclamation_mark">
+                <limel-flex-container
+                    justify="end"
+                    align="stretch"
+                    slot="buttons"
+                >
+                    <limel-button
+                        label="Some Action"
+                        onClick={this.someCustomAction}
+                    />
+                    <limel-button label="Close" onClick={this.closeBanner} />
+                </limel-flex-container>
+            </limel-banner>,
+        ];
+    }
+
+    private openBanner() {
+        this.banner.open();
+        this.disabled = true;
+    }
+
+    private closeBanner() {
+        this.banner.close();
+        this.disabled = false;
+    }
+
+    private someCustomAction() {
+        alert('Triggered an action of some sort');
+        this.closeBanner();
+    }
+}
diff --git a/src/style/variables.scss b/src/style/variables.scss
index 3dc401da0a..605134fbb9 100644
--- a/src/style/variables.scss
+++ b/src/style/variables.scss
@@ -93,3 +93,7 @@ $mdc-typography-styles-overline: (
 );
 
 @import "@limetech/mdc-typography/mdc-typography";
+
+@import "@limetech/mdc-animation/variables";
+
+$lime-banner-height: pxToRem(52) !default;