From 220a61d3adad0d8e10d99f76f6b03ad8a288426f Mon Sep 17 00:00:00 2001
From: Mattias Andersson <mattias800@gmail.com>
Date: Fri, 1 Sep 2023 15:22:11 +0200
Subject: [PATCH] Add new ShimmerBox component (#578)

---
 .../ui/shimmer-box/ShimmerBox.module.css      | 30 +++++++++++++++++++
 .../ui/shimmer-box/ShimmerBox.stories.tsx     | 27 +++++++++++++++++
 .../components/ui/shimmer-box/ShimmerBox.tsx  | 13 ++++++++
 packages/elements/src/index.ts                |  1 +
 4 files changed, 71 insertions(+)
 create mode 100644 packages/elements/src/components/ui/shimmer-box/ShimmerBox.module.css
 create mode 100644 packages/elements/src/components/ui/shimmer-box/ShimmerBox.stories.tsx
 create mode 100644 packages/elements/src/components/ui/shimmer-box/ShimmerBox.tsx

diff --git a/packages/elements/src/components/ui/shimmer-box/ShimmerBox.module.css b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.module.css
new file mode 100644
index 000000000..a477d02dc
--- /dev/null
+++ b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.module.css
@@ -0,0 +1,30 @@
+.shimmerBox {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  background-color: #dddbdd;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.2) 20%,
+      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0)
+    );
+    animation: shimmer 2s infinite;
+    content: "";
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
diff --git a/packages/elements/src/components/ui/shimmer-box/ShimmerBox.stories.tsx b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.stories.tsx
new file mode 100644
index 000000000..3ceb2194f
--- /dev/null
+++ b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.stories.tsx
@@ -0,0 +1,27 @@
+import { Box, Column, Row, Space } from "@stenajs-webui/core";
+import * as React from "react";
+import { ShimmerBox } from "./ShimmerBox";
+
+export default {
+  title: "elements/ShimmerBox",
+  component: ShimmerBox,
+};
+
+export const Demo = () => (
+  <Row width={"400px"} shadow={"box"}>
+    <Box flex={4} indent={2} spacing={2}>
+      <Column data-testid={"sailing-summary-cell"} alignItems={"flex-start"}>
+        <ShimmerBox height={"1.8rem"} width={"110px"} borderRadius={"8px"} />
+        <Space />
+        <ShimmerBox height={"1.4rem"} width={"50px"} borderRadius={"8px"} />
+        <Space />
+        <ShimmerBox height={"1.4rem"} width={"100px"} borderRadius={"8px"} />
+      </Column>
+    </Box>
+    <Box indent={2} spacing={2}>
+      <Column alignItems={"flex-end"} height={"76px"}>
+        <ShimmerBox width={"100px"} height={"2.0rem"} borderRadius={"8px"} />
+      </Column>
+    </Box>
+  </Row>
+);
diff --git a/packages/elements/src/components/ui/shimmer-box/ShimmerBox.tsx b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.tsx
new file mode 100644
index 000000000..dfe599ed6
--- /dev/null
+++ b/packages/elements/src/components/ui/shimmer-box/ShimmerBox.tsx
@@ -0,0 +1,13 @@
+import { Box, BoxProps } from "@stenajs-webui/core";
+import cx from "classnames";
+import * as React from "react";
+import styles from "./ShimmerBox.module.css";
+
+export interface ShimmerBoxProps extends BoxProps {}
+
+export const ShimmerBox: React.FC<ShimmerBoxProps> = ({
+  className,
+  ...props
+}) => {
+  return <Box className={cx(styles.shimmerBox, className)} {...props} />;
+};
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 8aaea2c4e..e1364181f 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -46,3 +46,4 @@ export * from "./components/ui/dialog/UseDialog";
 export * from "./components/ui/dialog/UseDialogPromise";
 export * from "./components/ui/dialog/drawer/UseDrawerDialog";
 export * from "./components/ui/dialog/modal/UseModalDialog";
+export * from "./components/ui/shimmer-box/ShimmerBox";