Inital toast UI

js/views/toast_view.js

@@ -25,7 +25,7 @@
         )
       );
       this.$el.show();
-      setTimeout(this.close.bind(this), 2000);
+      setTimeout(this.close.bind(this), 2000000);
     },
   });
 

stylesheets/_session.scss

@@ -60,11 +60,19 @@ $session-color-black: #000;
 $session-color-danger: #ff4538;
 $session-color-primary: $session-shade-13;
 $session-color-secondary: $session-shade-16;
-$session-color-warning: $session-shade-17;
+
+$session-color-info: $session-shade-11;
+$session-color-success: #35d388;
+$session-color-error: #edd422;
+$session-color-warning: #e54e45;
 
 $session-shadow-opacity: 0.15;
 $session-overlay-opacity: 0.3;
 
+$session-margin-sm: 10px;
+$session-margin-md: 15px;
+$session-margin-lg: 20px;
+
 @mixin session-color-subtle($color) {
   color: rgba($color, 0.6);
 }
@@ -313,3 +321,82 @@ $session_message-container-border-radius: 5px;
   float: right;
   margin-top: 13.5px;
 }
+
+.session-toast {
+  position: fixed;
+  right: $session-margin-lg;
+  bottom: $session-margin-lg;
+
+  padding: $session-margin-md $session-margin-md;
+  z-index: 100;
+
+  background-color: rgba($session-shade-6, 0.8);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  .toast-icon,
+  .toast-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .toast-icon {
+    padding-right: $session-icon-size-md;
+  }
+  .toast-info {
+    margin-right: $session-icon-size-sm + $session-icon-size-sm;
+    width: 350px;
+
+    &-container {
+      display: block;
+    }
+  }
+
+  .title,
+  .description {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .title {
+    font-size: 15px;
+    line-height: 13px;
+    margin-bottom: $session-margin-sm;
+    color: $session-color-white;
+  }
+
+  .description {
+    font-size: 12px;
+    @include session-color-subtle($session-color-white);
+  }
+
+  .toast-close {
+    @include session-color-subtle($session-color-white);
+    position: absolute;
+    top: $session-margin-md;
+    right: $session-margin-md;
+
+    &:hover {
+      color: $session-color-white;
+    }
+  }
+
+  @mixin set-toast-theme($color) {
+    border-left: 4px solid $color;
+  }
+  &.info {
+    @include set-toast-theme($session-color-info);
+  }
+  &.success {
+    @include set-toast-theme($session-color-success);
+  }
+  &.warning {
+    @include set-toast-theme($session-color-warning);
+  }
+  &.error {
+    @include set-toast-theme($session-color-error);
+  }
+}

ts/components/session/SessionButton.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 
-//import { LocalizerType } from '../../types/Util';
-
 export enum SessionButtonType {
   Brand = 'brand',
   BrandOutline = 'brand-outline',
@@ -23,7 +21,6 @@ export enum SessionButtonColor {
 }
 
 interface Props {
-  //i18n: LocalizerType;
   text: string;
   buttonType: SessionButtonType;
   buttonColor: SessionButtonColor;

ts/components/session/SessionToast.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+  SessionIcon,
+  SessionIconButton,
+  SessionIconSize,
+  SessionIconType,
+} from './icon/';
+
+export enum SessionToastType {
+  Info = 'info',
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+}
+
+interface Props {
+  title: string;
+  description: string;
+  type: SessionToastType;
+}
+
+export class SessionToast extends React.PureComponent<Props> {
+  public static defaultProps = {
+    description: '',
+    type: SessionToastType.Info,
+  };
+
+  constructor(props: any) {
+    super(props);
+  }
+
+  public render() {
+    const { title, description, type } = this.props;
+
+    let toastIcon;
+    switch (type) {
+      case SessionToastType.Info:
+        toastIcon = SessionIconType.Eye;
+        break;
+      case SessionToastType.Success:
+        toastIcon = SessionIconType.Check;
+        break;
+      case SessionToastType.Error:
+        toastIcon = SessionIconType.Search;
+        break;
+      case SessionToastType.Warning:
+        toastIcon = SessionIconType.Globe;
+        break;
+      default:
+        toastIcon = SessionIconType.Globe;
+    }
+
+    return (
+      <div className={classNames('session-toast', type)}>
+        <div className="toast-icon">
+          <SessionIcon iconType={toastIcon} iconSize={SessionIconSize.Large} />
+        </div>
+        <div className="toast-info">
+          <div className="toast-info-container">
+            <h3 className="title">{title}</h3>
+            <p className="description">{description}</p>
+          </div>
+        </div>
+
+        <div className="toast-close">
+          <SessionIconButton
+            iconType={SessionIconType.Exit}
+            iconSize={SessionIconSize.Small}
+            onClick={this.closeToast}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  public closeToast() {
+    return;
+  }
+}