Add examples for all props in all SDDS baseline SDC YAML files

Created on 21 August 2024, 4 months ago
Updated 12 September 2024, 3 months ago

Problem/Motivation

We have a baseline for all SDC YAML and README files that were generated from the script and manually fixed for linting issues.

Looking at the XB test components, they have "examples" for each prop which I don't remember seeing in SDC docs before, e.g.

name: Hero
description: A Hero section with inline styles for testing purposes
props:
  type: object
  required:
    - heading
    - cta1href
  properties:
    heading:
      type: string
      title: Heading
      description: The main heading of the hero
      minLength: 2
      examples:
        - There goes my hero
        - Submit now
    subheading:
      type: string
      title: Sub-heading
      examples:
        - Watch him as he goes!
    cta1:
      type: string
      title: CTA 1 text
      examples:
        - View
    cta1href:
      type: string
      format: uri
      title: CTA 1 link
      examples:
        - https://example.com
    cta2:
      type: string
      title: CTA 2 text
      examples:
        - Click

Based on this issue:

📌 Auto-create/update Component config entities for all discovered SDCs that meet XB's minimum criteria Fixed

It looks like we *must* have the examples in order to show up in XB, so we need to add these.

Steps to reproduce

Proposed resolution

Go through all YAML files for base theme and subtheme, review the stories.js files to find the examples, and update props with these.

For example:

starshot_demo/components/01-atoms/starshot-heading/starshot-heading.stories.js

The example is "light" for:

  const theme = knobRadios(
    'Theme',
    {
      Light: 'light',
      Dark: 'dark',
    },
    'light',
    parentKnobs.theme,
    parentKnobs.knobTab,
  );

The example is "2" for:

    level: knobRadios(
      'Level',
      {
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
      },
      '2',
      parentKnobs.level,
      parentKnobs.knobTab,
    ),

The example is drupal-2 for:

   display: knobRadios(
      'Display',
      {
        None: '',
        'Drupal 2': 'drupal-2',
        'Drupal 3': 'drupal-3',
        'Drupal 4': 'drupal-4',
        'Drupal 5': 'drupal-5',
        'Drupal 6': 'drupal-6',
        'Drupal 7': 'drupal-7',
        'Drupal 8': 'drupal-8',
      },
      'drupal-2',
      parentKnobs.display,
      parentKnobs.knobTab,
    ),

The example is "left" for:

    align: knobRadios(
      'Align',
      {
        Left: 'left',
        Center: 'center',
        Right: 'right',
      },
      'left',
      parentKnobs.align,
      parentKnobs.knobTab,
    ),

Remaining tasks

  • Go through demo_design_system/components and demo_design_system/starshot_demo/components
  • Go through all [name].component.yml and [name].stories.js files
  • Review defaults in stories.js to determine examples for the YAML files
  • Update YAML files
  • Create MR
  • Review and test
  • Commit :)

User interface changes

These components should then show up in Experience Builder.

API changes

Data model changes

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States Kristen Pol Santa Cruz, CA, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Kristen Pol
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Fix filename.

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Here's another example of XB component examples where there are multiples:

        name:
          type: string
          title: Name
          description: The badge’s theme variant.
          default: primary
          enum:
            - 'moon-stars-fill'
            - 'moon-stars'
            - 'star-fill'
            - 'star'
            - 'stars'
            - 'rocket-fill'
            - 'rocket-takeoff-fill'
            - 'rocket-takeoff'
            - 'rocket'
          examples:
            [
              'moon-stars-fill',
              'moon-stars',
              'star-fill',
              'star',
              'stars',
              'rocket-fill',
              'rocket-takeoff-fill',
              'rocket-takeoff',
              'rocket',
            ]
        label:
          type: string
          title: Label
          description: An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices.
          default: 'This is an icon'
          examples: ['This is an icon']
        size:
          type: string
          title: Size
          description: The icon size.
          default: ''
          enum:
            - ''
            - base
            - l
            - s
            - xs
            - xxs
          examples: ['', 'base', 'l', 's', 'xs', 'xxs']
    
  • Assigned to annmarysruthy
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Thanks!

  • Pipeline finished with Success
    4 months ago
    Total: 165s
    #262403
  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #262946
  • 🇮🇳India annmarysruthy

    annmarysruthy changed the visibility of the branch 3469523-add-examples-for to hidden.

  • Pipeline finished with Success
    4 months ago
    Total: 169s
    #262948
  • 🇮🇳India annmarysruthy

    annmarysruthy changed the visibility of the branch 3469523-add-examples-for to active.

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Oh! I didn't notice the changes were there... I'll try to look soon. Thanks!

  • Merge request !27Resolve #3469523 "Add examples for" → (Merged) created by annmarysruthy
  • Pipeline finished with Success
    4 months ago
    Total: 255s
    #265001
  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #265197
  • Assigned to joshua1234511
  • Status changed to Needs review 4 months ago
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Assigning to Jacob for first review.

  • Assigned to jacobadeutsch
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Whoops... off to Jacob :D

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    It was a bit painful, but I've merged in recent changes.

  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #265509
  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #265510
  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #265511
  • Pipeline finished with Success
    4 months ago
    #265512
  • Assigned to Kristen Pol
  • fixed some yml enum mistakes that should have been previously resolved

  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #265563
  • Assigned to jacobadeutsch
  • Status changed to Needs work 4 months ago
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    I've scanned it... some things:

    I saw this:

    components/01-atoms/image/image.component.yml

        url:
          type: string
          title: Url
          description: URL of the image.
          examples:
            - true
    

    so the url example needs to change.

    And there are several:

    components/02-molecules/accordion/accordion.component.yml
    components/02-molecules/next-step/next-step.component.yml
    components/02-molecules/tabs/tabs.component.yml
    components/02-molecules/tag-list/tag-list.component.yml

          description: 'Vertical spacing: top, bottom, both.'
          enum:
            - top
            - bottom
            - both
          examples:
            - none
    

    so the "none" needs to change to be one of the options.

    The default got wiped out here:

    starshot_demo/components/00-base/starshot-container/starshot-container.component.yml

          description: Margin, with top, bottom or both vertical spaces.
          default: none
          description: 'Margin vertical spacing: top, bottom, both.'
          enum:
            - top
            - bottom
            - both
    

    Also, this branch will need to be tested on your local to make sure there are no fatal errors.

  • Assigned to annmarysruthy
  • Status changed to Active 4 months ago
  • 🇮🇳India annmarysruthy

    @kristenpol added examples for properties in all component.yml files of theme and subtheme. Kindly review

  • Pipeline finished with Success
    4 months ago
    Total: 311s
    #265730
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    @annmary… I’m confused… Jacob and I already were working on this today… did you not have all the files in your previous MR? Hopefully you picked up our changes because there were a lot from main branch and other unrelated fixes that needed to get in

  • Status changed to Needs review 4 months ago
  • 🇮🇳India annmarysruthy

    @kristenpol Yesterday I raised MR for the component.yml files in atoms, molecules folders of base theme. Today I took latest pull and added examples for remaining component.yml files of base theme and subtheme. Hope you are clear.

  • Issue was unassigned.
  • Assigned to jacobadeutsch
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Thanks for the clarification. Back to Jacob for #15 and to review new stuff.

  • Assigned to Kristen Pol
  • got rid of attributes, corrected the errors above, and used yamllint to find and correct some other errors

  • fixed 4 small remaining errors, they're showing up in XB now!

  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #266708
  • Pipeline finished with Success
    4 months ago
    Total: 166s
    #266725
  • Issue was unassigned.
  • Status changed to Fixed 4 months ago
  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Merged this last night and now we can see some cool stuff! Thanks!

  • 🇺🇸United States Kristen Pol Santa Cruz, CA, USA

    Note that I did make some tweaks just now as well as added some missing examples and added @todo for some components that don't have them. This will be fixed in a follow up issue.

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

Production build 0.71.5 2024