feat(limel-banner): add component

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" />
+

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

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

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

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

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;