feat(community-skeleton-provider): add rounded corners to image skeleton

resolves #425
telus · Dec 14, 2020 · 42bf1a5 · 42bf1a5
1 parent c0dc358
commit 42bf1a5
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/packages/SkeletonProvider/SkeletonProvider.md b/packages/SkeletonProvider/SkeletonProvider.md
@@ -4,12 +4,12 @@ When used as a container for other components, it enhances a sub-set of TDS core
 The `skeleton` property will transform the child component into a skeleton. The `skeleton` property can be set to an object
 with options to customize how the skeleton will appear.
 
-| TDS Core    | skeleton options | type   | default   | Description                                       |
-| ----------- | ---------------- | ------ | --------- | ------------------------------------------------- |
-| **Text**    | lines            | number | 1         | Number of lines to appear as a skeleton           |
-|             | characters       | number | undefined | Character width of skeleton (default is full row) |
-| **Heading** | characters       | number | undefined | Character width of skeleton (default is full row) |
-| **Image**   | none             | n/a    | n/a       | Images always appear as a circle in skeleton form |
+| TDS Core    | skeleton options | type   | default   | Description                                                                         |
+| ----------- | ---------------- | ------ | --------- | ----------------------------------------------------------------------------------- |
+| **Text**    | lines            | number | 1         | Number of lines to appear as a skeleton                                             |
+|             | characters       | number | undefined | Character width of skeleton (default is full row)                                   |
+| **Heading** | characters       | number | undefined | Character width of skeleton (default is full row)                                   |
+| **Image**   | none             | n/a    | n/a       | Images appear as a circle in skeleton by default unless rounded prop set to corners |
 
 ### Example
 
@@ -81,3 +81,24 @@ the community contribuited `<Testimonial />` component can be skeletonized like
   />
 </SkeletonProvider>
 ```
+
+### Image skeleton with rounded corners
+
+You can create skeleton with rounded corners by using TDS core component `<Image />` with property `rounded` equal to `corners`. For example:
+
+```jsx
+<SkeletonProvider show={true}>
+  <Card variant="grey">
+    <Box>
+      <Image
+        rounded="corners"
+        src="image-example.jpg"
+        width={190}
+        height={210}
+        alt="Image of co-workers collaborating"
+        skeleton
+      />
+    </Box>
+  </Card>
+</SkeletonProvider>
+```
diff --git a/packages/SkeletonProvider/__tests__/SkeletonProvider.spec.jsx b/packages/SkeletonProvider/__tests__/SkeletonProvider.spec.jsx
@@ -122,4 +122,13 @@ describe('SkeletonProvider', () => {
         .first()
     ).not.toHaveProp('style')
   })
+
+  it('should render Image skeleton with rounded corners', () => {
+    const skeleton = doMount({
+      children: (
+        <Image width={60} height={60} rounded="corners" src="" alt="skeleton image" skeleton />
+      ),
+    })
+    expect(skeleton.find('ImageSkeleton')).toHaveStyleRule('border-radius', '4px')
+  })
 })
diff --git a/packages/SkeletonProvider/__tests__/__snapshots__/SkeletonProvider.spec.jsx.snap b/packages/SkeletonProvider/__tests__/__snapshots__/SkeletonProvider.spec.jsx.snap
@@ -169,6 +169,9 @@ exports[`SkeletonProvider should render children as skeletons 1`] = `
   animation-delay: 2s;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
+  border-radius: 4px;
+  width: 60px;
+  height: 60px;
 }
 
 <div>

diff --git a/packages/SkeletonProvider/package.json b/packages/SkeletonProvider/package.json
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@tds/core-colours": "^2.2.1",
+    "@tds/shared-styles": "^2.0.1",
     "@tds/util-helpers": "^1.5.0",
     "prop-types": "^15.6.2",
     "recompose": "^0.30.0",

diff --git a/packages/SkeletonProvider/tds/Image.jsx b/packages/SkeletonProvider/tds/Image.jsx
@@ -4,6 +4,7 @@ import Image from '@tds/core-image'
 import styled from 'styled-components'
 import { safeRest } from '@tds/util-helpers'
 import { colorGainsboro, colorAthensGrey } from '@tds/core-colours'
+import { borders } from '@tds/shared-styles'
 
 import withSkeleton from '../withSkeleton'
 
@@ -47,11 +48,23 @@ const StyledImageSkeleton = styled.div`
   animation-iteration-count: infinite;
 `
 
+const StyledRoundedCornersImageSkeleton = styled(StyledImageSkeleton)`
+  ${borders.rounded}
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+`
+
 const ImageSkeleton = ({ skeleton, ...rest }) => {
   if (!skeleton) {
     return <Image {...rest} />
   }
 
+  const { rounded } = rest
+
+  if (rounded === 'corners') {
+    return <StyledRoundedCornersImageSkeleton {...safeRest(rest)} />
+  }
+
   return <StyledImageSkeleton {...safeRest(rest)} />
 }