wix-style-react
Version:
84 lines (83 loc) • 3.36 kB
JavaScript
export default {
description:
'Thumbnail allows to display a specified object as a select item.',
do: [
'Use it to select single or multiple items from a mixed list of options.',
'Use it when select items need to be emphasised with graphics or images.',
'Use it to build gallery selections.',
],
dont: [
'Don’t use it to switch between alternative options or views. Use <SegmentedToggle/> or <SelectableAccordion/> instead.',
'Don’t use it to display images. Use <ImageViewer/> instead.',
'Don’t use it to distribute content within a page. Use <Tabs/> instead.',
],
featureExamples: [
{
title: 'Structure',
description: `Component consist of 3 optional content areas:<br/>
 - \`image\`<br/>
 - \`title\`<br/>
 - \`description\``,
example: '_structure',
},
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in more dense and narrow layouts<br/>
 - \`tiny\` - use in more dense and narrow layouts`,
example: '_size',
},
{
title: 'Dimensions',
description: `Set thumbnail dimensions in pixels or percentage with \`height\` and \`width\` properties.`,
example: '_dimensions',
},
{
title: 'Content alignment',
description: `Control vertical alignment of thumbnail content with \`contentAlignment\` prop. It supports 2 options:<br/>
 - \`center\` (default) - use in all common cases<br/>
 - \`top\` - use when thumbnail list contain items with different content lengths`,
example: '_contentAlignment',
},
{
title: 'Background image',
description: `Render image as a background of a thumbnail with \`backgroundImage\` prop.
Use it for gallery type selections, such as product cover image selection.`,
example: '_backgroundImage',
},
{
title: 'States',
description: `Control the state of a component with:<br/>
 - \`selected\` - use it to mark active selection<br/>
 - \`disabled\` - use it to mark item that cannot be selected or deselected<br/>
<br/>
Remove selected item checkmark icon with \`hideSelectedIcon\` prop.`,
example: '_states',
},
{
title: 'Custom content',
description: `Render any component or set of them as a child item to the thumbnail content area.
When passed, a title will be displayed below the thumbnail. `,
example: '_customContent',
},
],
commonUseCaseExamples: [
{
title: 'List of options',
description: `Use a thumbnail to list down a larger list of options using icons as visual clues.`,
example: '_listOfOptions',
},
{
title: 'Gallery selection',
description: `Use a thumbnail with \`backgroundImage\` to construct gallery type selections.`,
example: '_gallerySelection',
},
{
title: 'Custom content',
description: `Render custom content inside of a thumbnail to provide more details about the selection option.
In example, add graphics, images or custom actions such as links to read more. `,
example: '_commonCustomContent',
},
],
};