@wix/design-system

## Feature Examples ### Background - description: Define a gallery item's background using one of the following: &emsp;- `backgroundImageUrl` - use it to pass a link to the background image source file. &emsp;- `backgroundImageNode` - use it to pass a custom component as a background. - example: ```jsx <StorybookComponents.Stack> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} /> <CardGalleryItem backgroundImageNode=<Image height="100%" /> primaryActionProps={{ label: 'Button', }} /> <CardGalleryItem backgroundImageNode=<FillPreview fill="linear-gradient(45deg, rgba(14,0,255,1) 0%, rgba(0,212,255,1) 80%)" /> primaryActionProps={{ label: 'Button', }} /> </StorybookComponents.Stack>; ``` ### Image placement - description: Specify the placement of the background image using one of the following:- <code>top</code> (default) - Places the background image on top of the footer, as a <code><MediaOverlay/></code>.- <code>side</code> - Places the image in the footer, to the left of the title/subtitle. - example: ```jsx <StorybookComponents.Stack> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} title="Title" imagePlacement="top" /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" imagePlacement="side" /> </StorybookComponents.Stack>; ``` ### Title - description: Give more context to a card with following props: &emsp;- `title` - use it for a short and descriptive card title. &emsp;- `subtitle` - use it for a short caption to provide more narrative. - example: ```jsx <StorybookComponents.Stack width="200px"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} title="Title" subtitle="Subtitle" /> </StorybookComponents.Stack>; ``` ### Badge - description: Emphasise item status with a `badge`. Use it to promote new items or highlight ones that require attention. - example: ```jsx <StorybookComponents.Stack width="200px"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} badge={<Badge skin="standard">Badge</Badge>} /> </StorybookComponents.Stack>; ``` ### Actions - description: Define primary and secondary actions for an item with `primaryActionProps` and `secondaryActionProps`. This component is an interactive element so primary action is mandatory, while the secondary button is optional. - example: ```jsx <StorybookComponents.Stack width="400px"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} secondaryActionProps={{ label: 'Text Button', }} /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', disabled: true, disabledMessage: 'Message explaining the status', }} secondaryActionProps={{ label: 'Text Button', }} /> </StorybookComponents.Stack>; ``` ### Draggable - description: Control if the component is draggable with these properties:<li><code>draggable</code>: Enables drag behavior and shows an interactive drag handle on the card.</li><li><code>dragDisabled</code>: Disables dragging when draggable is enabled, keeping the drag handle visible but non-interactive.</li> - example: ```jsx () => ( <Box gap="20px" direction="vertical"> <Box direction="horizontal" width="600px" gap="20px"> <CardGalleryItem backgroundImageUrl="example.jpg" size="small" draggable primaryActionProps={{ label: 'Edit' }} title="Draggable" subtitle="Drag handle enabled" /> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" draggable dragDisabled primaryActionProps={{ label: 'Edit' }} title="Drag disabled" subtitle="Drag handle disabled" /> </Box> <Box direction="horizontal" width="600px" gap="20px"> <CardGalleryItem backgroundImageUrl="example.jpg" size="small" imagePlacement="side" draggable primaryActionProps={{ label: 'Edit' }} title="Draggable" subtitle="Side layout" /> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" imagePlacement="side" draggable dragDisabled primaryActionProps={{ label: 'Edit' }} title="Drag disabled" subtitle="Side layout" /> </Box> <Box direction="horizontal" width="600px" gap="20px"> <CardGalleryItem backgroundImageUrl="example.jpg" draggable primaryActionProps={{ label: 'Edit' }} /> <CardGalleryItem backgroundImageUrl="example.jpg" draggable dragDisabled primaryActionProps={{ label: 'Edit' }} /> </Box> </Box> ); ``` ### Settings menu - description: Allow users to act on a specific item by providing a <code>settingsMenu</code>. Popover menu can contain any required number of actions inside of it. - example: ```jsx () => ( <Box gap="20px" direction="vertical"> <Box width="300px"> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" title="Seasonal Special" subtitle="$18.00" primaryActionProps={{ label: 'Edit' }} settingsMenu={ <PopoverMenu triggerElement={({ toggle }) => ( <IconButton size="small" skin="light" priority="secondary" onClick={toggle} dataHook="card-gallery-item-settings-button" > <Icons.More /> </IconButton> )} > <PopoverMenu.MenuItem text="Duplicate" prefixIcon={<Icons.Duplicate />} /> <PopoverMenu.MenuItem text="Move to" prefixIcon={<Icons.MoveTo />} /> <PopoverMenu.MenuItem text="Hide" prefixIcon={<Icons.Hidden />} /> <PopoverMenu.MenuItem text="Archive" skin="destructive" prefixIcon={<Icons.Delete />} /> </PopoverMenu> } /> </Box> </Box> ); ``` ### Size - description: Control the size of the card. It supports 2 sizes:- <code>small</code>. Use this size if the card is stretched to less than 200px.- <code>medium</code> (default). This size is supposed to be used if the card is stretched to more than or equal 200px in the container.Note that if <code>imagePlacement="side"</code> is enabled, the size prop will change the size of the image. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <Box width="198px"> <CardGalleryItem backgroundImageUrl="example.jpg" size="small" primaryActionProps={{ label: 'Edit', }} title="Title" subtitle="Subtitle" /> </Box> <Box width="300px"> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" primaryActionProps={{ label: 'Edit', }} title="Title" subtitle="Subtitle" /> </Box> <Box width="300px"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" size="small" imagePlacement="side" /> </Box> <Box width="300px"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" size="medium" imagePlacement="side" /> </Box> </StorybookComponents.Stack>; ``` ### Suffix - description: Define a component (commonly icon) to be added to the footer. Use <code>showSuffixOnHover</code> to make it appear only when hovering over the card. - example: ```jsx <StorybookComponents.Stack> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" primaryActionProps={{ label: 'Edit', }} title="Title" subtitle="Subtitle" suffix={<Icons.Home />} /> <CardGalleryItem backgroundImageUrl="example.jpg" size="medium" primaryActionProps={{ label: 'Edit', }} title="Title" subtitle="Subtitle" suffix={<Icons.Home />} showSuffixOnHover /> </StorybookComponents.Stack>; ``` ### Skin - description: Control the look of the card border with <code>skin</code> prop.- <code>standard</code> (default) shows a shadow around the card- <code>outlined</code> gives a one pixel border around the card - example: ```jsx <StorybookComponents.Stack width="400px" flexDirection="column"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} title="Title" skin="standard" imagePlacement="top" /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" skin="standard" imagePlacement="side" /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} title="Title" skin="outlined" imagePlacement="top" /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" skin="outlined" imagePlacement="side" /> </StorybookComponents.Stack>; ``` ### Skin visibility - description: Control if the <code>skin</code> should be visible at all times or only on hover with <code>skinVisibility</code> prop. - example: ```jsx <StorybookComponents.Stack width="400px" flexDirection="column"> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{ label: 'Button', }} title="Title" skinVisibility skin="standard" imagePlacement="top" /> <CardGalleryItem backgroundImageUrl="example.jpg" primaryActionProps={{}} title="Title" skinVisibility skin="standard" imagePlacement="side" /> </StorybookComponents.Stack>; ``` ## Common Use Case Examples ### Product list - description: Use <code><CardGalleryItem/></code> to list down visual items, such as dishes, blog posts, products or their collections. These lists are commonly accompanied by an <code><AddItem/></code> component at the end of the list which allows users to add a new item to the grid. - example: ```jsx () => { const dishes = [ { id: 'breakfast-soup', imageSrc: 'https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&w=1200&q=80', title: 'Breakfast Soup', subtitle: '$7.89', badgeText: 'New', badgeSkin: 'success', }, { id: 'lemon-ricotta-pasta', imageSrc: 'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?auto=format&fit=crop&w=1200&q=80', title: 'Lemon Ricotta Pasta', subtitle: '$15.99', badgeText: 'Popular', badgeSkin: 'standard', }, ]; return ( <Box padding="20px" gap="20px" direction="vertical"> <Card showShadow> <Card.Header title="Dishes" suffix={ <Button size="small" prefixIcon={<Icons.Add />} dataHook="new-dish-button"> New Dish </Button> } /> <Card.Divider /> <Card.Content> <Layout> {dishes.map((dish) => ( <Cell key={dish.id} span={4}> <CardGalleryItem backgroundImageUrl={dish.imageSrc} title={<Text weight="bold">{dish.title}</Text>} subtitle={dish.subtitle} badge={<Badge skin={dish.badgeSkin}>{dish.badgeText}</Badge>} primaryActionProps={{ label: 'Edit' }} settingsMenu={ <PopoverMenu triggerElement={({ toggle }) => ( <IconButton onClick={toggle} skin="light" size="small" priority="secondary" dataHook={`${dish.id}-menu-button`} > <Icons.More /> </IconButton> )} > <PopoverMenu.MenuItem text="Duplicate" prefixIcon={<Icons.Duplicate />} /> <PopoverMenu.MenuItem text="Move to" prefixIcon={<Icons.MoveTo />} /> <PopoverMenu.MenuItem text="Sold out" prefixIcon={<Icons.FoodOutOfStock />} /> <PopoverMenu.MenuItem text="Hide" prefixIcon={<Icons.Hidden />} /> <PopoverMenu.MenuItem text="Archive" skin="destructive" prefixIcon={<Icons.Delete />} /> </PopoverMenu> } /> </Cell> ))} <Cell span={4}> <AddItem size="medium" tooltipContent="Add new dish" dataHook="add-dish-item" /> </Cell> </Layout> </Card.Content> </Card> </Box> ); }; ```