feat(skeleton): Add layout classes (#151)

package.json

@@ -37,11 +37,11 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@pancakeswap-libs/eslint-config-pancake": "0.1.0",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@storybook/addon-a11y": "^6.1.5",
-    "@storybook/addon-actions": "^6.1.5",
-    "@storybook/addon-essentials": "^6.1.5",
-    "@storybook/addon-links": "^6.1.5",
-    "@storybook/react": "^6.1.5",
+    "@storybook/addon-a11y": "^6.1.15",
+    "@storybook/addon-actions": "^6.1.15",
+    "@storybook/addon-essentials": "^6.1.15",
+    "@storybook/addon-links": "^6.1.15",
+    "@storybook/react": "^6.1.15",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@types/react": "^17.0.0",
@@ -62,7 +62,7 @@
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
     "react-router-dom": "^5.2.0",
-    "rollup": "^2.35.0",
+    "rollup": "^2.38.0",
     "styled-components": "^5.2.0",
     "themeprovider-storybook": "^1.6.4",
     "ts-jest": "^26.4.4",

src/__tests__/components/skeleton.test.tsx

@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ sc-gsTCUz kuHpnZ jeKmSf"
+        class="sc-bdfBwQ sc-gsTCUz lnQWmK jeKmSf"
       />
     </DocumentFragment>
   `);
@@ -18,7 +18,7 @@ it("renders correctly avatar", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ sc-gsTCUz gazSxV jeKmSf"
+        class="sc-bdfBwQ sc-gsTCUz dNWWAj jeKmSf"
         height="50"
         width="50"
       />
@@ -31,7 +31,7 @@ it("renders correctly waves animation", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ sc-dlfnbm jySpbJ hYUQGT"
+        class="sc-bdfBwQ sc-dlfnbm cIASSD hYUQGT"
         height="50"
         width="50"
       />

src/components/Skeleton/Skeleton.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled, { keyframes } from "styled-components";
+import { space, layout } from "styled-system";
 import { SkeletonProps, animation as ANIMATION, variant as VARIANT } from "./types";
 
 const waves = keyframes`
@@ -23,13 +24,14 @@ const pulse = keyframes`
   }
 `;
 
-const Root = styled.div<{ variant: SkeletonProps["variant"]; width?: number; height?: number }>`
+const Root = styled.div<SkeletonProps>`
   min-height: 20px;
   display: block;
   background-color: ${({ theme }) => theme.colors.backgroundDisabled};
-  width: ${({ width }) => (width ? `${width}px` : "100%")};
-  height: ${({ height }) => (height ? `${height}px` : "100%")};
   border-radius: ${({ variant, theme }) => (variant === VARIANT.CIRCLE ? theme.radii.circle : theme.radii.small)};
+
+  ${layout}
+  ${space}
 `;
 
 const Pulse = styled(Root)`
@@ -53,13 +55,12 @@ const Waves = styled(Root)`
   }
 `;
 
-const Skeleton: React.FC<SkeletonProps> = ({ width, height, variant = VARIANT.RECT, animation = ANIMATION.PULSE }) => {
-  return (
-    <>
-      {animation === ANIMATION.PULSE && <Pulse variant={variant} width={width} height={height} />}
-      {animation === ANIMATION.WAVES && <Waves variant={variant} width={width} height={height} />}
-    </>
-  );
+const Skeleton: React.FC<SkeletonProps> = ({ variant = VARIANT.RECT, animation = ANIMATION.PULSE, ...props }) => {
+  if (animation === ANIMATION.WAVES) {
+    return <Waves variant={variant} {...props} />;
+  }
+
+  return <Pulse variant={variant} {...props} />;
 };
 
 export default Skeleton;

src/components/Skeleton/types.ts

@@ -1,3 +1,5 @@
+import { LayoutProps, SpaceProps } from "styled-system";
+
 export const animation = {
   WAVES: "waves",
   PULSE: "pulse",
@@ -11,9 +13,7 @@ export const variant = {
 export type Animation = typeof animation[keyof typeof animation];
 export type Variant = typeof variant[keyof typeof variant];
 
-export interface SkeletonProps {
+export interface SkeletonProps extends SpaceProps, LayoutProps {
   animation?: Animation;
   variant?: Variant;
-  width?: number;
-  height?: number;
 }