feat: be possible to customize placeholder

closes #249

Author: Kikobeats

packages/react/src/components/Card/CardEmpty.js

@@ -9,11 +9,17 @@ import { Content } from './CardContent'
 import { GlobalContext } from '../../context/GlobalState'
 import { isLarge, isSmall } from '../../utils'
 
+const Placeholder = styled('span')``
+
+Placeholder.defaultProps = {
+  className: 'microlink_card_placeholder'
+}
+
 const MediaEmpty = styled(CardImage)`
   ${emptyStateImageAnimation};
 `
 
-const HeaderEmpty = styled('span')`
+const HeaderEmpty = styled(Placeholder)`
   opacity: 0.8;
   height: 16px;
   width: ${({ cardSize }) => (!isSmall(cardSize) ? '60%' : '75%')};
@@ -30,7 +36,7 @@ const HeaderEmpty = styled('span')`
   `};
 `
 
-const DescriptionEmpty = styled('span')`
+const DescriptionEmpty = styled(Placeholder)`
   opacity: 0.8;
   height: 14px;
   width: 95%;
@@ -40,12 +46,13 @@ const DescriptionEmpty = styled('span')`
   animation-delay: 0.125s;
 `
 
-const FooterEmpty = styled('span')`
+const FooterEmpty = styled(Placeholder)`
   opacity: 0.8;
   height: 12px;
   width: 30%;
   display: block;
-  ${emptyStateAnimation} animation-delay: .25s;
+  ${emptyStateAnimation};
+  animation-delay: 0.25s;
 
   ${({ cardSize }) =>
     !isLarge(cardSize) &&

packages/react/src/index.js

@@ -39,6 +39,7 @@ const Card = props => {
     setData,
     url,
     apiKey, // destructuring to avoid pass it
+    placeholderComponent: CardEmpty,
     ...restProps
   } = props
 
@@ -224,6 +225,7 @@ const Microlink = props => (
 Microlink.defaultProps = {
   className: '',
   apiKey: undefined,
+  placeholderComponent: CardEmpty,
   autoPlay: true,
   controls: true,
   direction: 'ltr',

packages/react/stories/index.js

@@ -26,7 +26,7 @@ storiesOf('props', module)
       createStoryEntry({ url, media: 'video', controls: false })
     )
   )
-  .add('loading', () => createStoryEntry({ loading: true }))
+  .add('loading', () => createStoryEntry({ loading: true, fetchData: false }))
   .add('lazy', () => [
     createStoryEntry({ lazy: false }, true),
     createStoryEntry({ lazy: { threshold: 1 } }, true)