Create a preview component for social links:
The component should be created on top of existing components in the library. Consider the following components:
- Text - represnets text in different combinations
- ImageViewer - an image picker with additional info
- What APIs should the component have in order to make it consistent, easy to use and to test
- The
ImageViewer
component has rounded corners and fixed size. Should be 100% width/height and with squared corners. This is a requirement only forSocialPreview
and not forImageViewer
.
const SocialPreview = ({children}) => (
<div className={styles.socialPreviewComposition}>
{children}
</div>
);
const App = () => (
<SocialPreview>
<ImageViewer imageUrl="http://wix.com/image.png”/>
<Text>Preview Url</Text>
<Text>Title</Text>
<Text>Description</Text>
</SocialPreview>
);
Pros:
- Straightforward API
- Easy to test each part with it’s own drivers
Cons:
- Prone to composition mistakes (since not closed in the component)
- Harder to document
Magic:
- ImageViewer needs to be configured no to have borders, so the css can apply styles on it with css, or it can be added to the ImageViewer directly
<SocialPreview
previewUrl="www.site-name.com"
title="Site Name | a title of you site"
description="A short description for a site"
imageViewerProps={{
imageUrl: 'https://wix.com/image.png’,
}}
/>
Pros:
- Straightforward
- Protected from making mistakes
Cons:
- Harder to test the image component
- Couples the component directly to ImageViewer, so refactors are harder. Internal implementation becomes public.
<SocialPreview
previewUrl="www.site-name.com"
title="Site Name | a title of you site"
description="A short description for a site"
media={
<ImageViewer imageUrl="https://wix.com/image.png"/>
}
/>
Pros:
- 1/2 Straightforward
- 1/2 Protected from making mistakes
- Testing is easier since data-hook can be applied directly
Cons:
- Harder to test the image component
Magic:
- Css can be done either internally, but it’s a wild guess, or it needs to be supplied to the ImageViewer
Criteria | Approach 1 | Approach 2 | Approach 3 |
---|---|---|---|
Straightforward API | V | X | X |
Test drivers simplicity | V | X | V |
Mistake-free (wrong configuration) | X | V | X |
Easy to document | V | V | X |
Configuring ImageViewer correctly | X | V | X |
Approach 3.b - Generic MediaCard Layout (Composition)
Render Slots
<Text/>
and<ImageViewer/>
<Text/>
and<ImageViewer/>
<Text/>
and<ImageViewer/>
getMedia()
,getTitle()
, etc.. which return a HTML Element (of the first child of the slot)