@loomhq/lens 10.82.3 → 10.83.0

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ 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 SkeletonText } from "./skeleton-text/skeleton-text";
 export { default as Logo } from "./logo/logo";
 export { default as Radio } from "./radio/radio";
 export { default as Pill } from "./pill/pill";

package/dist/components/index.js

@@ -28,6 +28,7 @@ export { default as Toast } from './toast/toast';
 export { default as Tooltip } from './tooltip/tooltip';
 export { TooltipBox } from './tooltip/tooltip';
 export { default as Switch } from './switch/switch';
+export { default as SkeletonText } from './skeleton-text/skeleton-text';
 export { default as Logo } from './logo/logo';
 export { default as Radio } from './radio/radio';
 export { default as List } from './list/list';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SeverityLevels } from './types';
 declare const NotificationBarWrapper: 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 NotificationBarWrapper>) => JSX.Element;
+declare const NotificationBar: ({ children, onCloseClick, isOpen, severity, id, }: NotificationBarProps & React.ComponentProps<typeof NotificationBarWrapper>) => JSX.Element;
 declare type NotificationBarProps = {
     children?: React.ReactNode;
     isOpen?: boolean;
@@ -12,6 +12,5 @@ declare type NotificationBarWrapperProps = {
     children?: React.ReactNode;
     isOpen?: boolean;
     severity: SeverityLevels;
-    button: React.ReactNode;
 };
 export default NotificationBar;

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

@@ -1,14 +1,3 @@
-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 { u } from '../../utilities';
 import styled from '@emotion/styled';
@@ -72,9 +61,8 @@ const NotificationBarWrapper = styled.aside `
     --alignItems: center;
   }
 `;
-const NotificationBar = (_a) => {
-    var _b, _c, _d;
-    var { children, onCloseClick, isOpen, severity = 'info' } = _a, props = __rest(_a, ["children", "onCloseClick", "isOpen", "severity"]);
+const NotificationBar = ({ children, onCloseClick, isOpen, severity = 'info', id, }) => {
+    var _a, _b, _c;
     useEffect(() => {
         if (!isOpen) {
             return;
@@ -93,16 +81,16 @@ const NotificationBar = (_a) => {
     usePushPageDown(isOpen);
     // NOTE: The UI for internal alert is slightly different.
     const isInternalAlert = severity === 'internal';
-    return isOpen ? (React.createElement(NotificationBarWrapper, Object.assign({ isOpen: isOpen, severity: severity }, props),
+    return isOpen ? (React.createElement(NotificationBarWrapper, { isOpen: isOpen, severity: severity, id: id },
         React.createElement(Arrange, { alignItems: { default: 'start', small: 'center' }, justifyContent: "space-between", autoFlow: isInternalAlert ? 'column' : undefined, columns: !isInternalAlert ? ['1fr auto'] : undefined },
             React.createElement(Container, { paddingY: { default: 'xsmall', xsmall: 0 }, 
                 // Visually offsets the close X so that text appears centre-aligned
                 paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : undefined, width: "100%" },
                 React.createElement(Arrange, { autoFlow: "column", gap: isInternalAlert ? 'medium' : '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,
+                    ((_a = severityStyles[severity]) === null || _a === void 0 ? void 0 : _a.icon) ? (React.createElement(Align, { alignment: "topLeft" },
+                        React.createElement(Icon, { icon: severityStyles[severity].icon, color: (_b = severityStyles[severity].color) !== null && _b !== void 0 ? _b : 'var(--lns-color-white)' }))) : null,
                     ' ',
                     children))),
-        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;
+        React.createElement(IconButton, { iconColor: (_c = severityStyles[severity].color) !== null && _c !== void 0 ? _c : 'var(--lns-color-white)', tabIndex: 0, altText: "Close", icon: React.createElement(SvgClose, null), onClick: onCloseClick }))) : null;
 };
 export default NotificationBar;

package/dist/components/skeleton-text/skeleton-text.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const SkeletonTextWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SkeletonTextProps, object>;
+declare const SkeletonText: ({ size, lines, }: SkeletonTextProps & React.ComponentProps<typeof SkeletonTextWrapper>) => JSX.Element;
+declare type SkeletonTextProps = {
+    size?: 'body-sm' | 'body-md' | 'body-lg' | 'heading-sm' | 'heading-md' | 'heading-lg';
+    lines?: number;
+};
+export default SkeletonText;

package/dist/components/skeleton-text/skeleton-text.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { getTextSize } from '../../utilities';
+const SkeletonTextWrapper = styled.div `
+  ${props => getTextSize(props.size)};
+  color: transparent;
+  position: relative;
+  &::after {
+    content '';
+    position: absolute;
+    background-color: var(--lns-color-disabledBackground);
+    border-radius: var(--lns-radius-full);
+    width: 100%;
+    display: block;
+    height: 71.45%;
+    top: .2em;
+  }
+  ${props => props.lines > 1 &&
+    `
+      &:nth-of-type(3n+1) {
+        width: calc(100% - 2.25rem);
+      }
+      &:nth-of-type(3n) {
+        width: calc(100% - 4.125rem);
+      }
+    }
+  `};
+`;
+const SkeletonText = ({ size = 'body-md', lines = 1, }) => {
+    return (React.createElement(React.Fragment, null, [...Array(lines)].map((_, i) => (React.createElement(SkeletonTextWrapper, { key: i, size: size, lines: lines }, "Loading")))));
+};
+export default SkeletonText;

package/package.json

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