Merged in chore/sw-3145-move-skeleton-shimmer (pull request #2509)

chore(SW-3145): Move SkeletonShimmer to design-system

* Move SkeletonShimmer to design-system


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/SkeletonShimmer/index.tsx

@@ -0,0 +1,48 @@
+import { cva, cx } from 'class-variance-authority'
+
+import styles from './skeleton.module.css'
+
+const variants = cva(styles.shimmer, {
+  variants: {
+    contrast: {
+      light: styles.light,
+      dark: styles.dark,
+    },
+    display: {
+      block: styles.block,
+      'inline-block': styles.inlineBlock,
+    },
+  },
+  defaultVariants: {
+    contrast: 'light',
+    display: 'inline-block',
+  },
+})
+
+export default function SkeletonShimmer({
+  className,
+  height,
+  width,
+  contrast = 'light',
+  display = 'inline-block',
+}: {
+  className?: string
+  height?: string
+  width?: string
+  contrast?: 'light' | 'dark'
+  display?: 'block' | 'inline-block'
+}) {
+  return (
+    <span
+      className={cx(className, variants({ contrast, display }))}
+      style={{
+        height: height,
+        width: width,
+        maxWidth: '100%',
+      }}
+    >
+      {/* zero width space, allows for font styles to affect height */}
+      <span aria-hidden="true">&#8203;</span>
+    </span>
+  )
+}

packages/design-system/lib/components/SkeletonShimmer/skeleton.module.css

@@ -0,0 +1,54 @@
+.shimmer.dark {
+  --shimmer-background: rgba(255, 255, 255, 0.1);
+  --shimmer: linear-gradient(
+    120deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.1) 40%,
+    rgba(255, 255, 255, 0.1) 60%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+.shimmer.light {
+  --shimmer-background: rgba(217, 217, 217, 0.5);
+  --shimmer: 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) 100%
+  );
+
+  background-color: var(--shimmer-background);
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  border-radius: 4px;
+  min-height: 1em;
+  min-width: 2ch;
+}
+.shimmer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: var(--shimmer);
+  animation: shimmer 3s infinite;
+  content: '';
+}
+.shimmer span {
+  visibility: hidden;
+}
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.block {
+  display: block;
+}
+.inlineBlock {
+  display: inline-block;
+}

packages/design-system/package.json

@@ -17,6 +17,7 @@
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./Select": "./dist/components/Select/index.js",
+    "./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
     "./Tooltip": "./dist/components/Tooltip/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",