@gobolt/genesis 0.8.2 → 0.8.4

package/dist/components/TileLog/TileLogSpacer.d.ts

@@ -0,0 +1,2 @@
+declare const TileLogSpacer: () => import("react/jsx-runtime").JSX.Element;
+export default TileLogSpacer;

package/dist/components/TileLog/__stories__/TileLog.stories.d.ts

@@ -22,3 +22,5 @@ export declare const FullTimeline: Story;
 export declare const VariedContentTimeline: Story;
 export declare const SingleEntry: Story;
 export declare const Loading: Story;
+export declare const Spacer: Story;
+export declare const SpacerInTimeline: Story;

package/dist/components/TileLog/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './TileLog';
 export type { TileLogProps } from './TileLog';
 export { default as TileLogSkeleton } from './TileLogSkeleton';
+export { default as TileLogSpacer } from './TileLogSpacer';

package/dist/components/TileLog/styles.d.ts

@@ -6,10 +6,13 @@ interface TimelineLineProps {
     $color?: string;
 }
 export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TileProps, StyledProps>> & string & Omit<({ children, dataTestId, className, style, isHorizontal, }: import('..').TileProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const SkeletonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('..').TileProps, "theme"> & StyledProps, never>> & string;
 export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TileProps, StyledProps>> & string & Omit<({ children, dataTestId, className, style, isHorizontal, }: import('..').TileProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const TimelineColumn: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').TileProps, never>> & string & Omit<({ children, dataTestId, className, style, isHorizontal, }: import('..').TileProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const TimelineLine: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimelineLineProps>> & string;
 export declare const Dot: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Content: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').TileProps, StyledProps>> & string & Omit<({ children, dataTestId, className, style, isHorizontal, }: import('..').TileProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const ActionNote: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').TileProps, never>> & string & Omit<({ children, dataTestId, className, style, isHorizontal, }: import('..').TileProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const SpacerWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+export declare const SpacerColumn: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/dist/components/index.d.ts

@@ -82,6 +82,8 @@ export { default as Tile } from './Tile';
 export type { TileProps } from './Tile';
 export { default as TileLog } from './TileLog';
 export type { TileLogProps } from './TileLog';
+export { TileLogSkeleton } from './TileLog';
+export { TileLogSpacer } from './TileLog';
 export { default as Toast } from './Toast';
 export type { ToastProps } from './Toast';
 export { default as Tooltip } from './Tooltip';

package/dist/index.cjs

@@ -89183,6 +89183,10 @@ const Wrapper = styled(Tile)`
     background-color: #f4f4f4;
   }
 `;
+const SkeletonWrapper = styled(Wrapper)`
+  height: 80px;
+  overflow: hidden;
+`;
 const Container = styled(Tile)`
   flex-direction: row;
   justify-content: flex-start;
@@ -89219,6 +89223,21 @@ const Content = styled(Tile)`
 const ActionNote = styled(Tile)`
   padding: 0;
 `;
+const SpacerWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 0 ${({ theme }) => theme.sizing.Size6}px;
+  background-color: #fff;
+`;
+const SpacerColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  width: 26px;
+`;
 const TileLog = ({
   timestamp,
   action,
@@ -89362,6 +89381,46 @@ const TileLog = ({
     ] })
   ] }) });
 };
+const GENERIC_COLOR$1 = "#CBCBCB";
+const TileLogSkeleton = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SkeletonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TimelineColumn, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TimelineLine, { $color: GENERIC_COLOR$1 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dot, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(TimelineLine, { $color: GENERIC_COLOR$1 })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "30%" },
+          style: { marginBottom: 2 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "70%" },
+          style: { marginBottom: 2 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "40%" }
+        }
+      )
+    ] })
+  ] }) });
+};
+const GENERIC_COLOR = "#CBCBCB";
+const TileLogSpacer = () => /* @__PURE__ */ jsxRuntime.jsx(SpacerWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SpacerColumn, { children: /* @__PURE__ */ jsxRuntime.jsx(TimelineLine, { $color: GENERIC_COLOR }) }) });
 const GlobalStyles = styled.createGlobalStyle`
   * {
     margin: 0;
@@ -89421,6 +89480,8 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Tile = Tile;
 exports.TileLog = TileLog;
+exports.TileLogSkeleton = TileLogSkeleton;
+exports.TileLogSpacer = TileLogSpacer;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip2;
 exports.Typography = Typography;

package/dist/index.js

@@ -89165,6 +89165,10 @@ const Wrapper = styled(Tile)`
     background-color: #f4f4f4;
   }
 `;
+const SkeletonWrapper = styled(Wrapper)`
+  height: 80px;
+  overflow: hidden;
+`;
 const Container = styled(Tile)`
   flex-direction: row;
   justify-content: flex-start;
@@ -89201,6 +89205,21 @@ const Content = styled(Tile)`
 const ActionNote = styled(Tile)`
   padding: 0;
 `;
+const SpacerWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 0 ${({ theme }) => theme.sizing.Size6}px;
+  background-color: #fff;
+`;
+const SpacerColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  width: 26px;
+`;
 const TileLog = ({
   timestamp,
   action,
@@ -89344,6 +89363,46 @@ const TileLog = ({
     ] })
   ] }) });
 };
+const GENERIC_COLOR$1 = "#CBCBCB";
+const TileLogSkeleton = () => {
+  return /* @__PURE__ */ jsx(SkeletonWrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(TimelineColumn, { children: [
+      /* @__PURE__ */ jsx(TimelineLine, { $color: GENERIC_COLOR$1 }),
+      /* @__PURE__ */ jsx(Dot, {}),
+      /* @__PURE__ */ jsx(TimelineLine, { $color: GENERIC_COLOR$1 })
+    ] }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "30%" },
+          style: { marginBottom: 2 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "70%" },
+          style: { marginBottom: 2 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton$1,
+        {
+          active: true,
+          title: false,
+          paragraph: { rows: 1, width: "40%" }
+        }
+      )
+    ] })
+  ] }) });
+};
+const GENERIC_COLOR = "#CBCBCB";
+const TileLogSpacer = () => /* @__PURE__ */ jsx(SpacerWrapper, { children: /* @__PURE__ */ jsx(SpacerColumn, { children: /* @__PURE__ */ jsx(TimelineLine, { $color: GENERIC_COLOR }) }) });
 const GlobalStyles = createGlobalStyle`
   * {
     margin: 0;
@@ -89404,6 +89463,8 @@ export {
   Tag,
   Tile,
   TileLog,
+  TileLogSkeleton,
+  TileLogSpacer,
   Toast,
   Tooltip2 as Tooltip,
   Typography,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",