Implement KCard

[MisRob]

Blocked by

• Implement BaseCard #529

Summary

Implement KCard, an accessible base card component offering the most frequently used card content and thumbnail layouts, as well as other customization options. Please see #528 first, and also note that KCard is built on top of the BaseCard #529.

Markup requirements

• Passes all its content via the default slot down to BaseCard

KCard.vue

<BaseCard>
  ...
</BaseCard>

Style requirements

• Doesn't have any styles affecting its placement within its parent component (e.g. outer margins)
• Has temporarily set width/height (so that we can preview it in a reasonable manner, but this will be worked on later as part of the card grid component)
• Implements spaces between slots and thumbnail area
• Doesn't assume slots content (e.g. slots have no fixed height)
• Robust content tolerance (very short/very long title, with or without thumbnail, ...)
• Follows Figma designs as closely as possible

Architecture requirements

• Is built on top of BaseCard
• Uses KImg for the thumbnail area implementation
  • sets isDecorative to true on KImg (the thumbnail image is decorative)
  • KCard's thumbnailScaleType is passed down to KImg's scaleType
• Uses KTextTruncator for title truncation

Interface

Props

Name	Description	Type	Required	Default
to	Router-link object that enables user navigation to the intended route.	Object	true	-
title	Sets the value of the title text. A simpler alternative to the title slot.	String	false	null
titleLines	A number of lines a title text is truncated to.	Number	false	2
headingLevel	A level of the heading element (<h2>-<h6>) wrapping a title text. Supported values: 2-6.	Number	true	-
layout	Determines the visual layout of card's content. Can be one of: 'horizontal', 'vertical'.	String	false	'horizontal'
thumbnailDisplay	Determines whether a thumbnail area is displayed or not, and sets its size. Can be one of: 'none', 'small', 'large'. When it's 'small' or 'large' and thumbnailSrc is empty or invalid, the thumbnail area will be filled with thumbnailBackgroundColor acting as a placeholder.	String	false	'none'
thumbnailSrc	Source URL of a thumbnail image	String	false	null
thumbnailScaleType	Specifies how an image should be scaled within the thumbnail area. Can be one of 'centerInside', 'contain', or 'fitXY'. See KImg's scaleType.	String	false	'centerInside'

Slots

Name	Description
title	Optional slot section containing the title contents, should not contain a heading element. An alternative to the title prop.
aboveTitle	Places content above the title area.
belowTitle	Places content below the title area.
footer	Places content to the footer area.
thumbnailPlaceholder	When a thumbnail placeholder area is displayed (for example when the image is not available or can't be loaded), you can use this slot to place content to the area.

Events

Name	Description
focus	Emitted when the card element has received focus.
hover	Emitted when the mouse pointer enters or leaves the card element

Acceptance criteria

• Conforms fully to the specification above
• Supports all layouts in "Available layouts for card content and thumbnails" section of KCard Technical Specification #528
• Supports RTL
• Contains validation to check that thumbnailScaleType prop value is a valid scale type (see the same validator in KImg)
• There is a documentation page for KCard
  • has examples illustrating the main content and thumbnail layouts
  • contains guidance on the headingLevel to notify developers that they need to choose a correct level based on context
  • emphasizes the need for a unique and descriptive title to aid users in searching through lists of links

[MisRob]

Not for contribution - already assigned to a team member