@loomhq/lens 10.87.1 → 10.89.0

package/dist/components/icon/available-icons/index.d.ts

@@ -167,6 +167,7 @@ export { default as SvgStar } from "./star.js";
 export { default as SvgStarOutline } from "./star-outline.js";
 export { default as SvgStop } from "./stop.js";
 export { default as SvgTagFaces } from "./tag-faces.js";
+export { default as SvgTask } from "./task.js";
 export { default as SvgTimer } from "./timer.js";
 export { default as SvgTouchApp } from "./touch-app.js";
 export { default as SvgTrash } from "./trash.js";

package/dist/components/icon/available-icons/index.js

@@ -167,6 +167,7 @@ export { default as SvgStar } from './star.js';
 export { default as SvgStarOutline } from './star-outline.js';
 export { default as SvgStop } from './stop.js';
 export { default as SvgTagFaces } from './tag-faces.js';
+export { default as SvgTask } from './task.js';
 export { default as SvgTimer } from './timer.js';
 export { default as SvgTouchApp } from './touch-app.js';
 export { default as SvgTrash } from './trash.js';

package/dist/components/icon/available-icons/task.d.ts

@@ -0,0 +1,2 @@
+export default SvgTask;
+declare function SvgTask(): JSX.Element;

package/dist/components/icon/available-icons/task.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const SvgTask = () => (React.createElement("svg", { viewBox: "0 0 21 23", fill: "none" },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.5 20C15.7467 20 20 15.7467 20 10.5C20 5.25329 15.7467 1 10.5 1C5.25329 1 1 5.25329 1 10.5V20.6209C1 21.7814 2.44382 22.3155 3.19907 21.4344L5.59598 18.638C7.02754 19.5025 8.70568 20 10.5 20Z", fill: "var(--lns-color-grey8)" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21 10.5C21 16.299 16.299 21 10.5 21C8.82262 21 7.23509 20.606 5.82696 19.9051L3.95833 22.0852C2.59888 23.6712 0 22.7098 0 20.6209V10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5ZM5.59598 18.638L3.19907 21.4344C2.44382 22.3155 1 21.7814 1 20.6209V10.5C1 5.25329 5.25329 1 10.5 1C15.7467 1 20 5.25329 20 10.5C20 15.7467 15.7467 20 10.5 20C8.70568 20 7.02754 19.5025 5.59598 18.638Z", fill: "white", fillOpacity: "0.65" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6186 7.09759C15.8471 7.32614 15.8471 7.69669 15.6186 7.92524L9.18096 14.3629C8.95241 14.5914 8.58186 14.5914 8.35331 14.3629L5.42712 11.4367C5.19857 11.2081 5.19857 10.8376 5.42712 10.609C5.65567 10.3805 6.02622 10.3805 6.25477 10.609L8.76714 13.1214L14.7909 7.09759C15.0195 6.86904 15.39 6.86904 15.6186 7.09759Z", fill: "var(--lns-color-grey8)" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.76846 14.5343C8.76758 14.5343 8.7667 14.5343 8.76581 14.5343C8.61648 14.5339 8.46725 14.4768 8.35331 14.3629L5.42712 11.4367C5.19857 11.2081 5.19857 10.8376 5.42712 10.609C5.65567 10.3805 6.02622 10.3805 6.25477 10.609L8.76714 13.1214L14.7909 7.09759C15.0195 6.86904 15.39 6.86904 15.6186 7.09759C15.8471 7.32614 15.8471 7.69669 15.6186 7.92524L9.18096 14.3629M9.18096 14.3629C9.06703 14.4768 8.9178 14.5339 8.76846 14.5343Z", fill: "white" })));
+export default SvgTask;

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.87.1",
+  "version": "10.89.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",