Refactor default config templates for View Modes Inventory to use default SDC Card components with patterns

Problem/Motivation

Switching from custom view modes and custom layouts to UI Patterns layouts with SDC Card components

Proposed resolution

• Revamp the View Modes Inventory (VMI) factory by integrating SDC card components and implementing UI Patterns layouts
• #3367498: Refactor default Card components and patterns with media and Card Style Size integrations
• #3370171: Switch display modes for the Varbase Blog content type to use Card view modes with SDC Card components and UI Patterns layouts

• List of View Modes Inventory

  Impressed cards:

  • Impressed card - xlarge.
  • Impressed card - large.
  • Impressed card - medium.
  • Impressed card - small.
  • Impressed card - xsmall.

  Featured cards:

  • Featured card - xlarge.
  • Featured card - large.
  • Featured card - medium.
  • Featured card - small.
  • Featured card - xsmall.

  Text cards:

  • Text card - large.
  • Text card - medium.
  • Text card - small.

  Overlay cards:

  • Overlay card - xlarge.
  • Overlay card - large.
  • Overlay card - medium.

  Hero cards:

  • Hero card.

• 
• Add a new set of view modes for content types

view_modes:
  impressed_card_xlarge:
    label: 'Impressed card - xlarge'
  impressed_card_large:
    label: 'Impressed card - large'
  impressed_card_medium:
    label: 'Impressed card - medium'
  impressed_card_small:
    label: 'Impressed card - small'
  impressed_card_xsmall:
    label: 'Impressed card - xsmall'
  featured_card_xlarge:
    label: 'Featured card - xlarge'
  featured_card_large:
    label: 'Featured card - large'
  featured_card_medium:
    label: 'Featured card - medium'
  featured_card_small:
    label: 'Featured card - small'
  featured_card_xsmall:
    label: 'Featured card - xsmall'
  text_card_large:
    label: 'Text card - large'
  text_card_medium:
    label: 'Text card - medium'
  text_card_small:
    label: 'Text card - small'
  overlay_card_xlarge:
    label: 'Overlay card - xlarge'
  overlay_card_large:
    label: 'Overlay card - large'
  overlay_card_medium:
    label: 'Overlay card - medium'
  hero_card:
    label: 'Hero card'

Add assets config templates for Content types
Add mapping for UI Patterns to user modes

mapping:
  impressed_card_xlarge:
    label: 'Impressed card - xlarge'
    layout: pattern_card_impressed
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.impressed_card_xlarge'
  impressed_card_large:
    label: 'Impressed card - large'
    layout: pattern_card_impressed
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.impressed_card_large'
  impressed_card_medium:
    label: 'Impressed card - medium'
    layout: pattern_card_impressed
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.impressed_card_medium'
  impressed_card_small:
    label: 'Impressed card - small'
    layout: pattern_card_impressed
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.impressed_card_small'
  impressed_card_xsmall:
    label: 'Impressed card - xsmall'
    layout: pattern_card_impressed
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.impressed_card_xsmall'
  featured_card_xlarge:
    label: 'Featured card - xlarge'
    layout: pattern_card_featured
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.featured_card_xlarge'
  featured_card_large:
    label: 'Featured card - large'
    layout: pattern_card_featured
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.featured_card_large'
  featured_card_medium:
    label: 'Featured card - medium'
    layout: pattern_card_featured
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.featured_card_medium'
  featured_card_small:
    label: 'Featured card - small'
    layout: pattern_card_featured
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.featured_card_small'
  featured_card_xsmall:
    label: 'Featured card - xsmall'
    layout: pattern_card_featured
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.featured_card_xsmall'
  text_card_large:
    label: 'Text teaser - large'
    layout: pattern_card_text
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.text_card_large'
  text_card_medium:
    label: 'Text teaser - medium'
    layout: pattern_card_text
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.text_card_medium'
  text_card_small:
    label: 'Text teaser - small'
    layout: pattern_card_text
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.text_card_small'
  overlay_card_xlarge:
    label: 'overlay_card - xlarge'
    layout: pattern_card_overlay
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.overlay_card_xlarge'
  overlay_card_large:
    label: 'overlay_card - large'
    layout: pattern_card_overlay
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.overlay_card_large'
  overlay_card_medium:
    label: 'overlay_card - medium'
    layout: pattern_card_overlay
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.overlay_card_medium'
  hero_card:
    label: 'Hero card'
    layout: pattern_card_hero
    config_name: 'core.entity_view_display.node.CONTENT_TYPE_NAME.hero_card'

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release Varbase 10.0.0-beta1, vmi-3.0.0-alpha2

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3367867: Refactored default config templates for View Modes Inventory to use default SDC Card components with patterns