feat(skeleton): Add option for different skeleton colors (Workday#939)

* feat(skeleton): Add option for different skeleton colors
alanbsmith · Jan 22, 2021 · 27504a1 · 27504a1
1 parent 3ba2da8
commit 27504a1
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 11 deletions.
diff --git a/modules/skeleton/react/README.md b/modules/skeleton/react/README.md
@@ -90,7 +90,11 @@ import {Skeleton, SkeletonHeader} from '@workday/canvas-kit-react-skeleton';
 
 ### Optional
 
-> None
+#### `backgroundColor: string`
+
+> Can be used to define the color of the skeleton. Accepts hex colors in string format.
+
+Default: `soap200`
 
 # SkeletonShape
 
@@ -138,6 +142,12 @@ Default: `"100%"`
 
 Default: `0`
 
+#### `backgroundColor: string`
+
+> Can be used to define the color of the skeleton. Accepts hex colors in string format.
+
+Default: `soap200`
+
 # SkeletonText
 
 A component that renders a text placeholder for a skeleton. Each line has a width of `100%` and a
@@ -173,3 +183,9 @@ import {Skeleton, SkeletonText} from '@workday/canvas-kit-react-skeleton';
 > have a width of `60%`
 
 Default: `2`
+
+#### `backgroundColor: string`
+
+> Can be used to define the color of the skeleton. Accepts hex colors in string format.
+
+Default: `soap200`
diff --git a/modules/skeleton/react/lib/parts/skeletonHeader.tsx b/modules/skeleton/react/lib/parts/skeletonHeader.tsx
@@ -1,12 +1,22 @@
+import canvas from '@workday/canvas-kit-react-core';
 import * as React from 'react';
 import SkeletonShape from './skeletonShape';
 import {TEXT_BORDER_RADIUS} from './utils';
 
-export default class SkeletonHeader extends React.Component<React.HTMLAttributes<HTMLDivElement>> {
+export interface SkeletonHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The background color of the skeleton
+   * @default soap200
+   */
+  backgroundColor?: string;
+}
+
+export default class SkeletonHeader extends React.Component<SkeletonHeaderProps> {
   render(): React.ReactNode {
-    const {...elemProps} = this.props;
+    const {backgroundColor = canvas.colors.soap200, ...elemProps} = this.props;
 
     const lineProps = {
+      backgroundColor,
       borderRadius: TEXT_BORDER_RADIUS,
       height: '28px',
       width: '100%',

diff --git a/modules/skeleton/react/lib/parts/skeletonShape.tsx b/modules/skeleton/react/lib/parts/skeletonShape.tsx
@@ -8,12 +8,13 @@ const Shape = styled('div')<{
   width?: number | string;
   height?: number | string;
   borderRadius?: number | string;
-}>(({width, height, borderRadius}) => {
+  backgroundColor?: string;
+}>(({width, height, borderRadius, backgroundColor}) => {
   return {
     width: width ? width : '100%',
     height: height ? height : '100%',
     borderRadius: borderRadius ? borderRadius : 0,
-    backgroundColor: canvas.colors.soap200,
+    backgroundColor,
     marginBottom: BOTTOM_MARGIN,
   };
 });
@@ -34,12 +35,31 @@ export interface SkeletonShapeProps extends React.HTMLAttributes<HTMLDivElement>
    * @default 0
    */
   borderRadius?: number | string;
+  /**
+   * The background color of the skeleton
+   * @default soap200
+   */
+  backgroundColor?: string;
 }
 
 export default class SkeletonShape extends React.Component<SkeletonShapeProps> {
   render(): React.ReactNode {
-    const {width, height, borderRadius, ...elemProps} = this.props;
+    const {
+      width,
+      height,
+      borderRadius,
+      backgroundColor = canvas.colors.soap200,
+      ...elemProps
+    } = this.props;
 
-    return <Shape width={width} height={height} borderRadius={borderRadius} {...elemProps} />;
+    return (
+      <Shape
+        width={width}
+        height={height}
+        borderRadius={borderRadius}
+        backgroundColor={backgroundColor}
+        {...elemProps}
+      />
+    );
   }
 }
diff --git a/modules/skeleton/react/lib/parts/skeletonText.tsx b/modules/skeleton/react/lib/parts/skeletonText.tsx
@@ -13,6 +13,11 @@ export interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement>
    * @default 2
    */
   lineCount?: number;
+  /**
+   * The background color of the skeleton
+   * @default soap200
+   */
+  backgroundColor?: string;
 }
 
 const Line = styled('div')<{
@@ -32,20 +37,24 @@ const Line = styled('div')<{
 
 export default class SkeletonText extends React.Component<SkeletonTextProps> {
   render(): React.ReactNode {
-    const {lineCount = 2, ...elemProps} = this.props;
+    const {lineCount = 2, backgroundColor = canvas.colors.soap200, ...elemProps} = this.props;
 
     if (lineCount <= 0) {
       return null;
     }
 
-    return <TextContainer {...elemProps}>{this.createTextLines(lineCount)}</TextContainer>;
+    return (
+      <TextContainer {...elemProps}>
+        {this.createTextLines(lineCount, backgroundColor)}
+      </TextContainer>
+    );
   }
 
-  private readonly createTextLines = (lineCount: number) => {
+  private readonly createTextLines = (lineCount: number, backgroundColor: string) => {
     const lines = [];
 
     const lineProps = {
-      backgroundColor: canvas.colors.soap200,
+      backgroundColor,
       borderRadius: TEXT_BORDER_RADIUS,
       height: '21px',
       width: '100%',

diff --git a/modules/skeleton/react/stories/stories.tsx b/modules/skeleton/react/stories/stories.tsx
@@ -16,6 +16,7 @@ import {Button, ButtonVariant} from '@workday/canvas-kit-react-button';
 import Skeleton, {SkeletonShape, SkeletonText, SkeletonHeader} from '../index';
 
 import README from '../README.md';
+import canvas from '@workday/canvas-kit-react-core';
 
 const Container = styled('span')({
   width: '60%',
@@ -179,4 +180,27 @@ storiesOf('Components/Indicators/Skeleton/React', module)
         </Skeleton>
       </div>
     );
+  })
+  .add('Color', () => {
+    return (
+      <div className="story">
+        <h1>Skeleton Color</h1>
+        <Skeleton>
+          <FlexContainer>
+            <SkeletonShape
+              width={40}
+              height={40}
+              borderRadius={99}
+              backgroundColor={canvas.colors.berrySmoothie100}
+            />
+            <Container>
+              <SkeletonHeader backgroundColor={canvas.colors.cantaloupe100} />
+            </Container>
+          </FlexContainer>
+          <div>
+            <SkeletonText lineCount={3} backgroundColor={canvas.colors.fruitPunch100} />
+          </div>
+        </Skeleton>
+      </div>
+    );
   });