Create flexible card for Starshot Demo Design System

Kristen Pol → credited alan.cole → .

Alan has made a lot of progress on this and it will be likely draft ready EOD today.

Kristen Pol → credited febdao → .

Feb did a review yesterday, but assigning to myself for review before it can be merged.

https://git.drupalcode.org/project/demo_design_system/-/tree/b4c9ff45792...

I think the variable definition is a bit different than in other places, so assigning to Jacob to suggest improvements here based on the SDC conversion work.

/**
 * @file
 * Starshot card component.
 *
 * Variables:
 * - theme: [string] Theme: light, dark.
 * - display: [string] vertical, horizontal, centered, overlay.
 * - title: [string] Title.
 * - summary: [string] Title.
 * - link: [object] E.g. { text, url, is_external }.
 * - background: [string] Image url.
 * - tags: [array] Array of tags e.g. { icon, content, icon_placement, url, is_new_window, is_external }.
 * - image: [object] Image object e.g. { url, alt }.
 * - attributes: [string] Additional attributes.
 * - modifier_class: [string] Additional classes.
 */

Here's an updated twig:

/**
 * @file
 * Card component.
 *
 * Variables:
 * - theme: [string] Theme: light, dark.
 * - display: [string] Card display: vertical, horizontal, centered, overlay.
 * - title: [string] Card title.
 * - summary: [string] Card summary.
 * - link: [object] Link object:
 *    - text: [string] Text for the link.
 *    - url: [string] URL for the link.
 *    - is_external: [boolean] Link is external or not.
 * - background: [string] URL for the background image.
 * - tags: [array] Tags array:
 *   - icon: [string] Icon name.
 *   - content: [string] Tag text.
 *   - icon_placement: [string] Icon position: left, right.
 *   - url: [string] URL for the link.
 *   - is_new_window: [boolean] Open link in a new window.
 *   - is_external: [boolean] Link is external or not.
 * - image: [object] Image object:
 *    - url: [string] URL for the image.
 *    - alt: [string] Image alt text.
 * - attributes: [string] Additional attributes.
 * - modifier_class: [string] Additional classes.
 */

I based this off of various other component's twigs. I'm not sure if anything else has to be added for this component in particular, but this should work better for now.

Thanks! I'll get that updated.

I've updated that in the branch. Marking this ready. Leaving assigned to me until this is merged.

https://git.drupalcode.org/project/demo_design_system/-/commit/9da074b70...

Simplifying language.

This was merged so marking fixed.

Automatically closed - issue fixed for 2 weeks with no activity.