Skip to content

Commit

Permalink
feat: be possible to customize placeholder
Browse files Browse the repository at this point in the history
closes #249
  • Loading branch information
Kikobeats authored and breadadams committed Jul 1, 2022
1 parent c12be0d commit 166b379
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 5 deletions.
13 changes: 9 additions & 4 deletions packages/react/src/components/Card/CardEmpty.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,15 @@ import { Content } from './CardContent'
import { GlobalContext } from '../../context/GlobalState'
import { isLarge, isSmall } from '../../utils'

const Placeholder = styled.span.attrs({
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%')};
Expand All @@ -30,7 +34,7 @@ const HeaderEmpty = styled('span')`
`};
`

const DescriptionEmpty = styled('span')`
const DescriptionEmpty = styled(Placeholder)`
opacity: 0.8;
height: 14px;
width: 95%;
Expand All @@ -40,12 +44,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) &&
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const Card = props => {
setData,
url,
apiKey, // destructuring to avoid pass it
placeholderComponent: CardEmpty,
...restProps
} = props

Expand Down Expand Up @@ -224,6 +225,7 @@ const Microlink = props => (
Microlink.defaultProps = {
className: '',
apiKey: undefined,
placeholderComponent: CardEmpty,
autoPlay: true,
controls: true,
direction: 'ltr',
Expand Down
2 changes: 1 addition & 1 deletion packages/react/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit 166b379

Please sign in to comment.