@loomhq/lens 10.77.2 → 10.79.0

package/dist/colors.d.ts

@@ -7,7 +7,7 @@ declare type HslaColor = {
 declare const BaseColors: readonly ["red", "blurpleLight", "blurpleMedium", "blurple", "blurpleDark", "offWhite", "blueLight", "blue", "blueDark", "orangeLight", "orange", "orangeDark", "tealLight", "teal", "tealDark", "yellowLight", "yellow", "yellowDark"];
 declare const GreyColors: readonly ["grey8", "grey7", "grey6", "grey5", "grey4", "grey3", "grey2", "grey1", "white"];
 declare const SharedColors: readonly ["focusRing", "record", "recordHover", "recordActive", "info", "success", "warning", "danger", "dangerHover", "dangerActive", "backdrop", "backdropDark", "disabledContent", "highlight"];
-declare const SemanticColors: readonly ["primary", "primaryHover", "primaryActive", "body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight"];
+declare const SemanticColors: readonly ["primary", "primaryHover", "primaryActive", "body", "bodyDimmed", "background", "backgroundHover", "backgroundActive", "backgroundSecondary", "backgroundSecondary2", "overlay", "border", "disabledBackground", "formFieldBorder", "formFieldBackground", "buttonBorder", "upgrade", "upgradeHover", "upgradeActive", "tabBackground", "discoveryBackground", "discoveryLightBackground", "discoveryTitle", "discoveryHighlight", "internalAlert"];
 declare type ThemesColorVariant = Record<typeof SharedColors[number] | typeof SemanticColors[number], HslaColor>;
 declare type ThemesColors = {
     light: ThemesColorVariant;

package/dist/colors.js

@@ -70,6 +70,7 @@ const SemanticColors = [
     'discoveryLightBackground',
     'discoveryTitle',
     'discoveryHighlight',
+    'internalAlert',
 ];
 const percent = (number, percentage) => Math.round((number * percentage) / 100);
 export const darken = (color, percentage) => (Object.assign(Object.assign({}, color), { l: color.l - percent(color.l, percentage) }));
@@ -138,8 +139,8 @@ const themeSharedColors = {
 };
 // This object has a specific spread order for documentation purposes
 export const themeColors = {
-    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey8, bodyDimmed: hslaGreys.grey6, background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
-    dark: Object.assign(Object.assign({ primary: { h: 242, s: 87, l: 73, a: 1 }, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey1, bodyDimmed: hslaGreys.grey5, background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
+    light: Object.assign(Object.assign({ primary: hslaBaseColors.blurple, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey8, bodyDimmed: hslaGreys.grey6, background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }, internalAlert: { h: 134, s: 29, l: 36, a: 1 } }),
+    dark: Object.assign(Object.assign({ primary: { h: 242, s: 87, l: 73, a: 1 }, primaryHover: darken(hslaBaseColors.blurple, hoverIncrease), primaryActive: darken(hslaBaseColors.blurple, activeIncrease), body: hslaGreys.grey1, bodyDimmed: hslaGreys.grey5, background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 }, internalAlert: { h: 132, s: 32, l: 67, a: 1 } }),
 };
 export const hslaColors = Object.assign(Object.assign({}, hslaBaseColors), hslaGreys);
 export const colorsNames = [

package/dist/components/container/container.js

@@ -71,5 +71,6 @@ export const availableHtmlTags = [
     'footer',
     'main',
     'span',
+    'form',
 ];
 export default Container;

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export { default as Link } from "./link/link";
 export { default as Textarea } from "./textarea/textarea";
 export { default as Dropdown } from "./dropdown/dropdown";
 export { default as FormField } from "./form-field/form-field";
+export { default as NotificationBar } from "./notification-bar/notification-bar";
 export { default as Toast } from "./toast/toast";
 export { default as Switch } from "./switch/switch";
 export { default as Logo } from "./logo/logo";

package/dist/components/index.js

@@ -23,6 +23,7 @@ export { default as Link } from './link/link';
 export { default as Textarea } from './textarea/textarea';
 export { default as Dropdown } from './dropdown/dropdown';
 export { default as FormField } from './form-field/form-field';
+export { default as NotificationBar } from './notification-bar/notification-bar';
 export { default as Toast } from './toast/toast';
 export { default as Tooltip } from './tooltip/tooltip';
 export { TooltipBox } from './tooltip/tooltip';

package/dist/components/notification-bar/notification-bar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SeverityLevels } from './types';
+declare const NotificationBarOuterWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, NotificationBarWrapperProps, object>;
+declare const NotificationBar: ({ children, onCloseClick, isOpen, severity, ...props }: NotificationBarProps & React.ComponentProps<typeof NotificationBarOuterWrapper>) => JSX.Element;
+declare type NotificationBarProps = {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    onCloseClick: () => void;
+    severity: SeverityLevels;
+};
+declare type NotificationBarWrapperProps = {
+    children?: React.ReactNode;
+    isOpen?: boolean;
+    severity: SeverityLevels;
+    button: React.ReactNode;
+};
+export default NotificationBar;

package/dist/components/notification-bar/notification-bar.js

@@ -0,0 +1,107 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect } from 'react';
+import styled from '@emotion/styled';
+import { SvgClose, SvgAlertTriangle, SvgInfo, SvgWarningAlert, } from '../icon/available-icons';
+import Align from '../align/align';
+import Arrange from '../arrange/arrange';
+import Container from '../container/container';
+import Icon from '../icon/icon';
+import IconButton from '../icon-button/icon-button';
+import { usePushPageDown } from '../../hooks';
+const severityStyles = {
+    info: {
+        bgColor: 'var(--lns-color-blurple)',
+        icon: React.createElement(SvgInfo, null),
+        color: 'var(--lns-color-white)',
+        fontFamily: 'inherit',
+    },
+    warning: {
+        bgColor: 'var(--lns-color-warning)',
+        icon: React.createElement(SvgWarningAlert, null),
+        color: 'var(--lns-color-grey8)',
+        fontFamily: 'inherit',
+    },
+    error: {
+        bgColor: 'var(--lns-color-danger)',
+        icon: React.createElement(SvgAlertTriangle, null),
+        color: 'var(--lns-color-white)',
+        fontFamily: 'inherit',
+    },
+    internal: {
+        icon: React.createElement("span", { role: "img" }, "\uD83D\uDD14"),
+        color: 'var(--lns-color-teal)',
+        bgColor: 'var(--lns-color-grey8)',
+        fontFamily: 'Roboto Mono, Lucida Mono, monospace',
+    },
+};
+const DURATION = 350;
+const NotificationBarOuterWrapper = styled.aside `
+  display: grid;
+  align-content: center;
+  ${props => `background-color: ${severityStyles[props.severity].bgColor}`};
+  ${props => `font-family: ${severityStyles[props.severity].fontFamily}`};
+
+  ${props => `color: ${severityStyles[props.severity].color}`};
+  position: fixed;
+  padding: var(--lns-space-medium) 0;
+  top: 0;
+  left: 0;
+  transition: ${DURATION}ms box-shadow, ${DURATION}ms transform;
+  width: 100vw;
+  z-index: 1100;
+  opacity: ${props => (props.isOpen ? '1' : '0')};
+  transform: ${props => props.isOpen ? 'translateY(0px)' : 'translateY(-100%)'};
+`;
+const NotificationBarInnerWrapper = styled.div `
+  --responsive-padding: var(--lns-space-small);
+  margin: 0 auto;
+  max-width: 1600px;
+  padding-left: var(--responsive-padding);
+  padding-right: var(--responsive-padding);
+  width: calc(100% - (2 * var(--responsive-padding)));
+  @media (min-width: 800px) {
+    --responsive-padding: var(--lns-space-medium);
+  }
+`;
+const NotificationBar = (_a) => {
+    var _b, _c, _d;
+    var { children, onCloseClick, isOpen, severity = 'info' } = _a, props = __rest(_a, ["children", "onCloseClick", "isOpen", "severity"]);
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        const keyListener = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onCloseClick();
+            }
+        };
+        window.addEventListener('keydown', keyListener);
+        return () => {
+            window.removeEventListener('keydown', keyListener);
+        };
+    }, [isOpen, onCloseClick]);
+    usePushPageDown(isOpen);
+    return isOpen ? (React.createElement(NotificationBarOuterWrapper, Object.assign({ isOpen: isOpen, severity: severity }, props),
+        React.createElement(NotificationBarInnerWrapper, null,
+            React.createElement(Arrange, { alignItems: { default: 'start', small: 'center' }, justifyContent: "space-between", columns: ['1fr auto'] },
+                React.createElement(Container, { paddingY: { default: 'xsmall', xsmall: 0 }, width: "100%" },
+                    React.createElement(Arrange, { autoFlow: "column", gap: "small", justifyContent: "center" },
+                        ((_b = severityStyles[severity]) === null || _b === void 0 ? void 0 : _b.icon) ? (React.createElement(Align, { alignment: "topLeft" },
+                            React.createElement(Icon, { icon: severityStyles[severity].icon, color: (_c = severityStyles[severity].color) !== null && _c !== void 0 ? _c : 'var(--lns-color-white)' }))) : null,
+                        ' ',
+                        children),
+                    props.button),
+                React.createElement(IconButton, { iconColor: (_d = severityStyles[severity].color) !== null && _d !== void 0 ? _d : 'var(--lns-color-white)', tabIndex: 0, altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))))) : null;
+};
+export default NotificationBar;

package/dist/components/notification-bar/types.d.ts

@@ -0,0 +1 @@
+export declare type SeverityLevels = 'warning' | 'info' | 'error' | 'internal';

package/dist/components/notification-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { default as useMedia } from "./use-media.js";
 export { default as useOnClickOutside } from "./use-on-click-outside.js";
 export { default as useFocusedElement } from "./use-focused-element";
 export { default as usePreventScroll } from "./use-prevent-scroll";
+export { default as usePushPageDown } from "./use-push-page-down";

package/dist/hooks/index.js

@@ -2,3 +2,4 @@ export { default as useMedia } from './use-media.js';
 export { default as useOnClickOutside } from './use-on-click-outside.js';
 export { default as useFocusedElement } from './use-focused-element';
 export { default as usePreventScroll } from './use-prevent-scroll';
+export { default as usePushPageDown } from './use-push-page-down';

package/dist/hooks/use-push-page-down.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Usage:
+ * usePreventScroll(<boolean-condition>);
+ **/
+declare function usePushPageDown(enabled?: boolean): void;
+export default usePushPageDown;

package/dist/hooks/use-push-page-down.js

@@ -0,0 +1,24 @@
+import { useLayoutEffect } from 'react';
+/**
+ * Usage:
+ * usePreventScroll(<boolean-condition>);
+ **/
+function usePushPageDown(enabled) {
+    const safeDocument = document;
+    useLayoutEffect(() => {
+        const html = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.documentElement;
+        const body = safeDocument === null || safeDocument === void 0 ? void 0 : safeDocument.body;
+        if (safeDocument == undefined || !html || !body) {
+            return;
+        }
+        if (enabled) {
+            body.style.setProperty('padding-top', '3.25rem');
+            body.style.setProperty('transition', 'padding-top 350ms');
+            /* [1] */
+        }
+        return () => {
+            body.style.removeProperty('padding-top');
+        };
+    }, [safeDocument, enabled]);
+}
+export default usePushPageDown;

package/package.json

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