@loomhq/lens 10.88.0 → 10.89.0

package/dist/components/toast/toast.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
 declare const ToastWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ToastWrapperProps, object>;
-declare const Toast: ({ children, isOpen, onCloseClick, zIndex, duration, }: ToastProps & React.ComponentProps<typeof ToastWrapper>) => JSX.Element;
+declare const Toast: ({ children, isOpen, onCloseClick, zIndex, duration, platform, }: ToastProps & React.ComponentProps<typeof ToastWrapper>) => JSX.Element;
 declare type ToastProps = {
     children?: React.ReactNode;
     isOpen?: boolean;
     onCloseClick?: () => void;
     zIndex?: number;
     duration?: 'short' | 'long';
+    platform: 'web-app' | 'chrome-extension';
 };
 declare type ToastWrapperProps = {
     zIndex?: number;
     isOpen?: boolean;
     toastDuration?: number;
+    platform: 'web-app' | 'chrome-extension';
 };
 export default Toast;

package/dist/components/toast/toast.js

@@ -4,11 +4,13 @@ import IconButton from '../icon-button/icon-button';
 import { SvgClose } from '../icon/available-icons';
 import { keyframes } from '@emotion/core';
 import styled from '@emotion/styled';
+const WEBAPP = 'web-app';
+const CHROME_EXTENSION = 'chrome-extension';
 const toastDurations = { short: 3000, long: 8000 };
-const enter = toastDuration => keyframes `
+const enter = (toastDuration, platform) => keyframes `
   0% {
     opacity: 0;
-    transform: translate(-50%, ${u(8)});
+    transform: translate(-50%, ${u(platform === CHROME_EXTENSION ? -8 : 8)});
   }
   // (300 / toastDuration) * 100 evaluates to 10% for short. Longer durations will have the same speed of animation
   ${(300 / toastDuration) * 100}% {
@@ -23,12 +25,33 @@ const enter = toastDuration => keyframes `
     opacity: 0;
   }
 `;
+const getTop = platform => {
+    switch (platform) {
+        case WEBAPP:
+            return 'unset';
+        case CHROME_EXTENSION:
+            return u(4);
+        default:
+            return 'unset';
+    }
+};
+const getBottom = platform => {
+    switch (platform) {
+        case WEBAPP:
+            return u(4);
+        case CHROME_EXTENSION:
+            return 'unset';
+        default:
+            return u(4);
+    }
+};
 const ToastWrapper = styled.div `
-  animation: ${props => enter(props.toastDuration)}
+  animation: ${props => enter(props.toastDuration, props.platform)}
     ${props => props.toastDuration}ms forwards;
   background-color: ${getColorValue('background')};
   border-radius: 1.75rem; // Height of single line toast (56px) divided by 2 so one line toasts appear fully rounded
-  bottom: ${u(4)};
+  top: ${props => getTop(props.platform)};
+  bottom: ${props => getBottom(props.platform)};
   ${getShadow('large')};
   color: ${getColorValue('body')};
   display: grid;
@@ -47,7 +70,7 @@ const ToastWrapper = styled.div `
 const ChildrenSection = styled.div `
   align-self: center;
 `;
-const Toast = ({ children, isOpen, onCloseClick, zIndex = 1100, duration = 'short', }) => {
+const Toast = ({ children, isOpen, onCloseClick, zIndex = 1100, duration = 'short', platform = 'web-app', }) => {
     const toastDuration = toastDurations[duration];
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -57,7 +80,7 @@ const Toast = ({ children, isOpen, onCloseClick, zIndex = 1100, duration = 'shor
         }, toastDuration);
         return () => clearTimeout(timer);
     }, [isOpen]);
-    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, { "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen, toastDuration: toastDuration },
+    return (React.createElement(React.Fragment, null, isOpen && (React.createElement(ToastWrapper, { "data-lens-theme": "dark", onClick: e => e.stopPropagation(), zIndex: zIndex, isOpen: isOpen, toastDuration: toastDuration, platform: platform },
         React.createElement(ChildrenSection, { "aria-live": "polite" }, children),
         onCloseClick && (React.createElement(IconButton, { altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.88.0",
+  "version": "10.89.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",