feat(fuselage): Skeleton Circle Variant (#1006)

Author: dougfabris

packages/fuselage/src/components/Skeleton/Skeleton.stories.tsx

@@ -40,3 +40,10 @@ RectVariant.args = {
   width: '50%',
   height: 100,
 };
+
+export const CircleVariant: ComponentStory<typeof Skeleton> = Template.bind({});
+CircleVariant.args = {
+  variant: 'circle',
+  width: 16,
+  height: 16,
+};

packages/fuselage/src/components/Skeleton/Skeleton.styles.scss

@@ -23,6 +23,10 @@
       content: '\00a0';
     }
   }
+
+  &--circle {
+    border-radius: lengths.border-radius(full);
+  }
 }
 
 @keyframes rcx-skeleton__animation {

packages/fuselage/src/components/Skeleton/Skeleton.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import Box from '../Box';
 
 type SkeletonProps = ComponentProps<typeof Box> & {
-  variant?: 'text' | 'rect';
+  variant?: 'text' | 'rect' | 'circle';
 };
 
 const Skeleton = ({ variant = 'text', ...props }: SkeletonProps) => (
@@ -13,6 +13,7 @@ const Skeleton = ({ variant = 'text', ...props }: SkeletonProps) => (
     rcx-skeleton
     rcx-skeleton--text={variant === 'text'}
     rcx-skeleton--rect={variant === 'rect'}
+    rcx-skeleton--circle={variant === 'circle'}
     {...props}
   />
 );