Test SDC conversion script and guide with starshot_demo/components/02-molecules/starshot-card

Executed the script using command:

python3 twig-sdc-yaml-generator/twig_sdc_yaml_generator.py starshot_demo/components/02-molecules/starshot-card

Result:

1. New Files starshot-card.component.yml, README.md is generated inside folder starshot_demo/components/02-molecules/starshot-card

Output Generated

starshot-card.component.yml

name: Starshot card

status: experimental

group: Molecules

props:

  type: object
  required:
    - summary
    - link
    - image

  properties:
    theme:
      type: string
      title: Theme
      description: 'Theme: light, dark.'
      default: light
      enum:
        - light
        - dark

    display:
      type: string
      title: Display
      description: 'Card display: vertical, horizontal, centered, overlay.'
      default: vertical
      enum:
        - vertical
        - horizontal
        - centered
        - overlay

    title:
      type: string
      title: Title
      description: Card title.

    summary:
      type: string
      title: Summary
      description: Card summary.

    link:
      type: object
      title: Link
      description: 'Link object:'
      properties: {}


    background:
      type: string
      title: Background
      description: URL for the background image.
      default: none

    tags:
      type: array
      title: Tags
      description: 'Tags array:'
      items:
        type: object

        properties:
          type:
            type: string
            title: Type
            description: 'Type: primary, secondary, tertiary'
            default: primary
            enum:
              - primary
              - secondary
              - tertiary

          content:
            type: string
            title: Content
            description: Content.

          icon:
            type: string
            title: Icon
            description: Icon name.

          icon_placement:
            type: string
            title: Icon placement
            description: 'Icon position: before, after.'
            default: before
            enum:
              - before
              - after

          url:
            type: string
            title: Url
            description: Optional URL to convert to a link.

          is_new_window:
            type: boolean
            title: Open in a new window. Only if url is provided.

          is_external:
            type: boolean
            title: Link is external.

    image:
      type: object
      title: Image
      description: 'Image object:'
      properties: {}


    attributes:
      type: string
      title: Attributes
      description: Additional attributes.

    modifier_class:
      type: string
      title: Modifier class
      description: Additional classes.

README.md

# Starshot card

This is the starshot card component.

## Usage

This component can be used within Experience Builder and other page builders that support SDC. It can also be added to other components and theme templates.

Observations

Found 3 issues in starshot-card.component.yml

1. Issue 1: For Link Object, there are 3 properties in starshot-card.twig file:
   

    * - link: [object] Link object:
    *   - text: [string] Text for the link.
    *   - url: [string] URL for the link.
    *   - is_external: [boolean] Link is external or not.

   However, in starshot-card.component.yml, properties are null:

       link:
         type: object
         title: Link
         description: 'Link object:'
         properties: {}

2. Issue 2: For image Object, there are 2 properties in starshot-card.twig file:
   

    * - image: [object] Image object:
    *   - url: [string] URL for the image.
    *   - alt: [string] Image alt text.

   However, in starshot-card.component.yml, properties are null:

       image:
         type: object
         title: Image
         description: 'Image object:'
         properties: {}

3. Issue 3: In starshot.component.yml, There is a property 'type' inside tags array:
   

       tags:
         type: array
         title: Tags
         description: 'Tags array:'
         items:
           type: object
   
           properties:
             type:
               type: string
               title: Type
               description: 'Type: primary, secondary, tertiary'
               default: primary
               enum:
                 - primary
                 - secondary
                 - tertiary

   But on checking starshot-card.twig and /starshot_demo/components/01-atoms/tag/tag.twig, we can see that type field can have values 'primary', 'secondary', 'tertiary', 'drupal'. Option 'drupal' is missing in generated code. This might be because in starshot_demo/components/01-atoms/tag/tag.twig comment 'drupal' option is not added but is present in code.
   * - type: [string] Type: primary, secondary, tertiary

How to fix the above issues

• Issue 1 &2 : The properties inside link and image objects are null because of indentation(of comment) in starshot-card.twig file. I removed an extra space before each property :
  

  {#
  /**
   * @file
   * Starshot 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.
   */
  #}

  Then run the python script again and it generated correct result. New Result:

  name: Starshot card
  
  status: experimental
  
  group: Molecules
  
  props:
  
    type: object
    required:
      - summary
      - link
      - image
  
    properties:
      theme:
        type: string
        title: Theme
        description: 'Theme: light, dark.'
        default: light
        enum:
          - light
          - dark
  
      display:
        type: string
        title: Display
        description: 'Card display: vertical, horizontal, centered, overlay.'
        default: vertical
        enum:
          - vertical
          - horizontal
          - centered
          - overlay
  
      title:
        type: string
        title: Title
        description: Card title.
  
      summary:
        type: string
        title: Summary
        description: Card summary.
  
      link:
        type: object
        title: Link
        description: 'Link object:'
  
        properties:
          text:
            type: string
            title: Text
            description: Text for the link.
  
          url:
            type: string
            title: Url
            description: URL for the link.
  
          is_external:
            type: boolean
            title: Link is external or not.
  
      background:
        type: string
        title: Background
        description: URL for the background image.
        default: none
  
      tags:
        type: array
        title: Tags
        description: 'Tags array:'
        items:
          type: object
  
          properties:
            type:
              type: string
              title: Type
              description: 'Type: primary, secondary, tertiary'
              default: primary
              enum:
                - primary
                - secondary
                - tertiary
  
            content:
              type: string
              title: Content
              description: Content.
  
            icon:
              type: string
              title: Icon
              description: Icon name.
  
            icon_placement:
              type: string
              title: Icon placement
              description: 'Icon position: before, after.'
              default: before
              enum:
                - before
                - after
  
            url:
              type: string
              title: Url
              description: Optional URL to convert to a link.
  
            is_new_window:
              type: boolean
              title: Open in a new window. Only if url is provided.
  
            is_external:
              type: boolean
              title: Link is external.
  
      image:
        type: object
        title: Image
        description: 'Image object:'
  
        properties:
          url:
            type: string
            title: Url
            description: URL for the image.
  
          alt:
            type: string
            title: Alt
            description: Image alt text.
  
      attributes:
        type: string
        title: Attributes
        description: Additional attributes.
  
      modifier_class:
        type: string
        title: Modifier class
        description: Additional classes.
  

• Issue 3: The option 'drupal' can be added in starshot-card.component.yml by adding 'drupal' in starshot_demo/components/01-atoms/tag/tag.twig for type variable:
  

  {#
  /**
   * @file
   * Tag component.
   *
   * Variables:
   * - theme: [string] Theme: light, dark.
   * - type: [string] Type: primary, secondary, tertiary, drupal
   * - content: [string] Content.
   * - icon: [string] Icon name.
   * - icon_placement: [string] Icon position: before, after.
   * - url: [string] Optional URL to convert to a link.
   * - is_new_window: [boolean] Open in a new window. Only if url is provided.
   * - is_external: [boolean] Link is external.
   * - attributes: [string] Additional attributes.
   * - modifier_class: [string] Additional classes.
   */
  #}

Added a commit for adding drupal in tag.twig. This would fix issue 3 listed in comment #3. Kindly review