This task defines the minimum viable product (MVP) of the Card component.
Scope
The MVP of the Card component will cover the Nearby pages use case. We will follow up with more subtasks of the epic task to cover the GrowthExperiments use cases.
Design spec
Anatomy
The initial component will include:
- Media section at the start of the card. This can either be:
- An icon
- A thumbnail or thumbnail placeholder. The placeholder will be shown in 2 cases: 1) When there is a thumbnail image but it has not loaded yet, and 2) when the Card is meant to show a thumbnail (e.g. in a grid with other Cards that have thumbnails) but no image has been provided
- Card title
- Description
- Supporting text (a slot, so a variety of content – e.g. links – can be supported)
Style
The initial component will present the following visual features:
- Outlined: The card will present a gray outline
- Landscape orientation: The card will present a horizontal layout
Sizing
By default, Card's width and height is defined by its content + padding.
Any extra spacing needed to make the card adjust its width in context will be added as white space at the end.
Card users might need to apply a min-height to Cards to make the layout look harmonious. We decided to not make this part of the default configuration of the component for now.
Interaction
The initial component will follow these interaction specifications:
- Supplying the url prop will make the Card a clickable link. Otherwise, the root element of the Card will be a <span>.
- States for clickable Cards:
- Default
- Hover
- Focus
- Loading: As mentioned above, the thumbnail placeholder will display while the image is loading.
Documentation
- Structure: The component will be documented in an individual page called "Card" that will be included in alphabetical order in the structure of Codex's demo site.
- Content:
- The Card's demo page will contain a description and essential implementation notes at the top
- The "Demos" section will feature:
- A demonstration of each slot
- A clickable Card with a url prop
- Media: a Card with an icon, a Card with a thumbnail, and a group of Cards demonstrating the showThumbnail prop's usage
- A maximum example similar to what's provided in the design spec
Considerations
- The thumbnail behavior described above is the same as the current implementation of thumbnails in MenuItems. We will create a separate task to extract this behavior from the MenuItem component into a new Thumbnail component, which will be used by MenuItem and Card. Note that there are likely style differences between the two, so the Thumbnail component should only contain basic styles used by both (or these styles should be configurable within Thumbnail)
- Layout (number of cards and amount of space between them) will be defined by the application
- Special supporting text style (in the case of NearbyPages, absolutely positioning within the bottom border) will be defined by the application and not covered as a reusable style within Card
Acceptance criteria
This task will pass from the designer to the developer once the Figma spec is created.
- A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description.
- The initial component is implemented in Codex.
