added scale to component, refactored to css-class approach

geist-org · Oct 15, 2022 · 6d1b4c5 · 6d1b4c5
1 parent da7601f
commit 6d1b4c5
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 96 deletions.
diff --git a/components/skeleton/skeleton.tsx b/components/skeleton/skeleton.tsx
@@ -1,106 +1,145 @@
 import React from 'react'
-import useTheme from "../use-theme";
+import useTheme from '../use-theme'
+import { useScale, withScale } from '../use-scale'
+import useClasses from '../use-classes'
 
 interface Props {
-    width?: number
-    squared?: boolean
-    rounded?: boolean
-    component?: keyof JSX.IntrinsicElements
-    className?: string
-    show?: boolean
-    minHeight?: number
-    animate?: boolean
-    height?: number
+  width?: number
+  squared?: boolean
+  rounded?: boolean
+  component?: keyof JSX.IntrinsicElements
+  className?: string
+  show?: boolean
+  minHeight?: number
+  animate?: boolean
+  height?: number
 }
 
 const defaultProps = {
-    squared: false,
-    rounded: false,
-    component: 'span' as keyof JSX.IntrinsicElements,
-    className: '',
-    show: false,
-    minHeight: 24,
-    animate: true,
+  squared: false,
+  rounded: false,
+  component: 'span' as keyof JSX.IntrinsicElements,
+  className: '',
+  show: false,
+  minHeight: 24,
+  animate: true,
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type SkeletonProps = Props & NativeAttrs
 
-const Skeleton: React.FC<React.PropsWithChildren<SkeletonProps>> = ({
-                                                                        component,
-                                                                        children,
-                                                                        width,
-                                                                        squared,
-                                                                        rounded,
-                                                                        show,
-                                                                        minHeight,
-                                                                        className,
-                                                                        animate,
-                                                                        height,
-                                                                        ...props
-                                                                    }: React.PropsWithChildren<SkeletonProps> & typeof defaultProps) => {
-    const Component = component
-    let theme = useTheme();
-
-    return (
-        <Component className={`skeleton ${className}`} {...props}>
-            {children}
-            <style jsx>{`
-              .skeleton {
-                background-image: linear-gradient(270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1});
-                background-size: 400% 100%;
-                -webkit-animation: ${animate ? 'loading 8s ease-in-out infinite' : 'none'};
-                animation: ${animate ? 'loading 8s ease-in-out infinite' : 'none'};
-                ${width && !show ? `width: ${width}px;` : ''}
-                ${height && !show  ? `height: ${height}px;` : ''}
-                border-radius: ${rounded ? '100%' : (squared ? '0' : '5px')};
-                display: block;
-                min-height: ${minHeight}px;
-                position: relative;
-                overflow: hidden;
-              }
-
-
-              .skeleton:before {
-                ${!show && children && `
-                position: absolute;
-                display: block;
-                height: 100%;
-                content: '';
-                background-image: linear-gradient(270deg, ${theme.palette.accents_1}, ${theme.palette.accents_2}, ${theme.palette.accents_2}, ${theme.palette.accents_1});
-                background-size: 400% 100%;
-                -webkit-animation: ${animate ? 'loading 8s ease-in-out infinite' : 'none'};
-                animation: ${animate ? 'loading 8s ease-in-out infinite' : 'none'};
-                width: 100%;
-                z-index: 2;
-                border-radius: ${rounded ? '100%' : (squared ? '0' : '5px')};
-              `};
-              }
-
-              @-webkit-keyframes loading {
-                0% {
-                  background-position: 200% 0
-                }
-
-                to {
-                  background-position: -200% 0
-                }
-              }
-
-              @keyframes loading {
-                0% {
-                  background-position: 200% 0
-                }
-
-                to {
-                  background-position: -200% 0
-                }
-              }
-            `}</style>
-        </Component>
-    )
+const SkeletonComponent: React.FC<React.PropsWithChildren<SkeletonProps>> = ({
+  component,
+  children,
+  width,
+  squared,
+  rounded,
+  show,
+  minHeight,
+  className,
+  animate,
+  height,
+  ...props
+}: React.PropsWithChildren<SkeletonProps> & typeof defaultProps) => {
+  const Component = component
+  let theme = useTheme()
+  const { SCALES } = useScale()
+  const classes = useClasses(
+    'skeleton',
+    { rounded, squared, show, stop: !animate, hasChildren: !!children },
+    className,
+  )
+
+  return (
+    <Component className={classes} {...props}>
+      {children}
+      <style jsx>{`
+        .skeleton {
+          width: ${SCALES.width(width ?? 1, 'initial')};
+          height: ${SCALES.height(height ?? 1, 'initial')};
+          display: block;
+          min-height: ${minHeight}px;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .skeleton,
+        .skeleton:before {
+          background-image: linear-gradient(
+            270deg,
+            ${theme.palette.accents_1},
+            ${theme.palette.accents_2},
+            ${theme.palette.accents_2},
+            ${theme.palette.accents_1}
+          );
+          background-size: 400% 100%;
+          -webkit-animation: loading 8s ease-in-out infinite;
+          animation: loading 8s ease-in-out infinite;
+          border-radius: 5px;
+        }
+
+        .skeleton.hasChildren:before {
+          position: absolute;
+          display: block;
+          height: 100%;
+          content: '';
+          width: 100%;
+          z-index: 2;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .skeleton,
+          .skeleton:before {
+            -webkit-animation: none;
+            animation: none;
+          }
+        }
+
+        .skeleton.stop,
+        .skeleton.stop:before {
+          -webkit-animation: none;
+          animation: none;
+        }
+
+        .skeleton.rounded, .skeleton.rounded:before {
+          border-radius: 100%;
+        }
+
+        .skeleton.squared, .skeleton.squared:before {
+          border-radius: 0;
+        }
+
+        .skeleton.show, .skeleton.show:before {
+          background: transparent;
+          width: initial;
+          height: initial;
+        }
+
+        @-webkit-keyframes loading {
+          0% {
+            background-position: 200% 0;
+          }
+
+          to {
+            background-position: -200% 0;
+          }
+        }
+
+        @keyframes loading {
+          0% {
+            background-position: 200% 0;
+          }
+
+          to {
+            background-position: -200% 0;
+          }
+        }
+      `}</style>
+    </Component>
+  )
 }
 
-Skeleton.defaultProps = defaultProps
-Skeleton.displayName = 'GeistCol'
+SkeletonComponent.defaultProps = defaultProps
+SkeletonComponent.displayName = 'GeistCol'
+const Skeleton = withScale(SkeletonComponent)
 export default Skeleton
diff --git a/pages/en-us/components/skeleton.mdx b/pages/en-us/components/skeleton.mdx
@@ -15,7 +15,7 @@ Show a placeholder in place of content that is loading.
   title="Default with set width."
   scope={{ Skeleton }}
   code={`
-<Skeleton width={160} />
+<Skeleton width={10} />
 `}
 />
 
@@ -39,23 +39,23 @@ Show a placeholder in place of content that is loading.
     title="Rounded skeleton."
     scope={{ Skeleton }}
     code={`
-<Skeleton rounded width={48} height={48} />
+<Skeleton rounded width={3} height={3} />
 `}
 />
 
 <Playground
     title="Squared skeleton."
     scope={{ Skeleton }}
     code={`
-<Skeleton squared width={48} height={48} />
+<Skeleton squared width={3} height={3} />
 `}
 />
 
 <Playground
     title="Disabled animation."
     scope={{ Skeleton }}
     code={`
-<Skeleton animate={false} width={160} height={50} />
+<Skeleton animate={false} width={10} height={3} />
 `}
 />