Problem/Motivation
We are converting all CivicTheme components to use SDC.
This issue is focused on the Map component as an example.
Note: This will use a manual process in order to test against the script that's being created.
Steps to reproduce
Proposed resolution
Convert the component to SDC.
Remaining tasks
- Set up local dev environment using dev guide
- Read the SDC conversion guide
- Look at Map component in Storybook
- cd demo_design_system/components/02-molecules/map
- Note: this directory will change in the future [TBD]
- Create the map.component.yml file
- Clear Drupal cache:
ddev drush cr - Check yml syntax per SDC conversion guide
- Check the component shows up in the SDC registry
- [pending script] Run the UI Suite checker against component
- [pending script] Compare file against automated script
- [pending guide] Check component shows up XB
User interface changes
Component will show up in SDC registry like:

API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | map.component.yml | 1.34 KB | jacobadeutsch |
| #6 | map.component.yml.txt | 1.32 KB | jacobadeutsch |
| #6 | yml_AI_gen.txt | 1.57 KB | jacobadeutsch |
| #6 | twig_to_yml_AI_test.py_.txt | 2.67 KB | jacobadeutsch |
Issue fork demo_design_system-3465333
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
kristen polAssigning to Jacob for after the Chip.
This has a couple slots.
Comment #4
kristen polFix directory.
Comment #5
kristen polChanging parent.
Comment #6
jacobadeutsch commentedI tested the qed42 twig sdc yaml python script on this one and it worked. I attached the result below. Better formatting for it would be nice though, it'd make it easier for people to review the yml.
I made a prototype for an AI version and it seems like it might be even more tedious to fine tune the prompt for it. I think for now we should just use the algorithm, it'll be more consistent in the end anyways. I've attached the python script as well as its result here. It didn't do super well.
Comment #7
kristen polThanks! Great analysis.
It would be nice if it had some spaces. For now, can you clean up the file a bit? And add the status and group?
After that, we can get this merged in as an example.
Comment #8
jacobadeutsch commentedCleaned up the file. Should be usable, still not perfect since we don't have a standard practice to go by.
Comment #9
kristen polThanks. Marking for merge for now as an example. Testing will likely surface more things.
Comment #10
kristen polGiving back to Jacob to go through the new merge request doc for this:
https://www.drupal.org/community-initiatives/starshot-demo-design-system...
Comment #11
kristen polMarking postponed until the script changes have been reviewed.
Comment #12
kristen polWill use this one for @sea2709 to test creating an MR.
Dang - Just use the attachment in #8 and walk through the guide. I'm leaving this issue as postponed so no one else picks this up.
Comment #15
sea2709 commentedMerge request is ready for review!
Comment #16
kristen polThanks! I merged it so not sure why it's not showing up merged here :shrug:
Back to postponed for now. Will revisit once the script is finalized.
Comment #17
kristen polClosing because we'll do the final YAML updates here:
#3467234: Use SDC conversion script to create baseline SDC YAML and README files