Add new ShimmerBox component (#578)

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%);
+    }
+  }
+}

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>
+);

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} />;
+};

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";