@jacobadeutsch

jacobadeutsch → made their first commit to this issue’s fork.

Tested ! - it works now. All of the components show no matter the default.

The original starshot_placeholder_image_1.jpg is contained in these extra files:

./starshot_demo/storybook-static/static/media/starshot_placeholder_image_1.1fc788ef.jpg
./starshot_demo/storybook-static/main.f3f1a652.iframe.bundle.js
./starshot_demo/components_combined/03-organisms/starshot-hero/starshot-hero.component.yml
./starshot_demo/components_combined/03-organisms/starshot-case-study/starshot-case-study.component.yml
./starshot_demo/components_combined/01-atoms/starshot-image/starshot-image.component.yml
./starshot_demo/dist/scripts.js
./starshot_demo/node_modules/.cache/terser-webpack-plugin/content-v2/sha512/9e/3c/ec8b035cacf7950ede8ef72451e8e29d5f615d24af184a87c4dcf9a49c084c69d2c617c96c5a7c28cfcc445e6c8f9a701d85a9638c889964f1f4370e523f
./starshot_demo/node_modules/.cache/terser-webpack-plugin/content-v2/sha512/05/7d/9aa4f37541d9a16a4738deb1e3e84e8eb3e58918981243b6ebdde3ee251eb767147ef392bb1e0963da7fc9abd87dd7b4aee133a367cc863a5e353721eae8
./starshot_demo/node_modules/.cache/terser-webpack-plugin/content-v2/sha512/be/a3/1ee6ce7f047afdd9da3167e7f13601be36a7c2b1fb90beece4c172ee2a99367733b3732737e3c63d5d166909c597c25b8433cf0971418706afb95828bbc3
./starshot_demo/node_modules/.cache/terser-webpack-plugin/content-v2/sha512/2f/ac/2fb6165446aa1684294bd0e86b92909af4544fceebf26555465e1885816cff1e974416e0ab8015699cf2757ffca300907f60ef9b9e814269c4882efba91a
./starshot_demo/node_modules/.cache/terser-webpack-plugin/content-v2/sha512/f1/48/127d5471b21e393cf084c574a287ef8969dcb237b3514a14e9d37a03ea141b96defe8aba81011457293e118c76aeb032f770037850e304efdd3332b074ff
./.git/index

kristen pol → credited jacobadeutsch → .

I added the icons but these ones aren't working:
- document
- layer
- layers
- lock-file
- lock-gallery
- mobile
- open-source
- users
- water-drop
- web

related issue:
https://www.drupal.org/project/demo_design_system/issues/3479203 📌 Integrate SDDS base theme content-link component with XB Active

https://www.drupal.org/project/experience_builder/issues/3481575 🐛 Link opens inside XB Active

jacobadeutsch → created an issue.

jacobadeutsch → created an issue.

jacobadeutsch → made their first commit to this issue’s fork.

jacobadeutsch → made their first commit to this issue’s fork.

jacobadeutsch → created an issue.

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

I compared with storybook, everything seems the same besides the dark theme css and a weird glitch, see attached...

This is weird, I didn't do anything but the text is wrapping now. Could have been some weird problem with my environment, don't know. The test I recorded is too big to upload but it shorter than the other videos I recorded so I don't know what's up with that... Not worth uploading either way, it works and looks just like storybook. Maybe there are some small css differences, not sure.

Here's the comparison with tab on storybook, looks pretty good

The chip in xb seems to have more options than the storybook one. Here's the test I recorded:

Here's a video of me messing around with it. It looks pretty good. I think there's an XB glitch where the starting props won't always display right. For example it starts with the disabled state prop being ticked. This one is actually false in the yml, so it's showing wrong, but then if you mess around with other props it actually selects it as true and the link goes grey. I think something similar could be happening for the button component.

I added the themes prop and it works. Currently I've been using this branch to test a bunch of stuff, so I'll need to clean it before any MRs can be done. As for a recording, I don't think I can provide a useful one from my end here because it's working perfectly fine for me, it's the same as the storybook component.

Seems to be working well now. When you change the title though it resets the image, just like the bug I was encountering here 📌 Integrate SDDS base theme image component with XB Active . Would we want width and height props for this one?

jacobadeutsch → made their first commit to this issue’s fork.

Current problems with my iterations of the image component:
- The uploaded image disappears when the size is changed. Even when the height is changed, even though height doesn't work right now.
- The height prop doesn't do anything. It seems like it's programmed right in the twig, unless I'm missing something. So I'm not sure where the problem lies for this bug.

The link opens inside the XB window which shouldn't happen. Other than that it works alright.

I couldn't find any problems when I tested, but maybe there is missing functionality. It just works like a button that links off to something.

Main problem right now is that the text doesn't wrap, so it just trails off of the screen. It's mostly working otherwise though.

Icon prop and icon placement prop works for megaphone. There's a glitch where it gets greyed out when props are messed with. Link opens weird.

Do we want to just go with the twig & yml we created in starshot-image?

There's a weird glitch where sometimes when the text content is edited the heading shrinks, but the size prop stays the same.

I don't think this one can move forward until a schema is added for adding video files.

Seems to work pretty well right now. Definitely could use some work on the CSS end, it can sort of break components when used in a slot.

Notes on the current state of Button:
- Doesn't open its link
- Greys out when any props are changed
- Icon props don't do anything

jacobadeutsch → made their first commit to this issue’s fork.

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

jacobadeutsch → made their first commit to this issue’s fork.

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

jacobadeutsch → made their first commit to this issue’s fork.

I think it depends on how we see examples being used. If we're able to successfully get an example's content working in referenced to included props without them being present in the yml then we don't need to include included props.

jacobadeutsch → made their first commit to this issue’s fork.

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

jacobadeutsch → made their first commit to this issue’s fork.

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

jacobadeutsch → made their first commit to this issue’s fork.

could add date formats, uri formats, min/max for int. image format should be checked with the XB team

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

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

Instructions were clear and I got XB running and everything. Not sure if the themes were working though, seemed like maybe they weren't.

fixed some yml enum mistakes that should have been previously resolved

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

fixed the required fields thing

jacobadeutsch → made their first commit to this issue’s fork.

Nevermind lets not do this, most vars act the same like null, false, and '', but 0 works differently and removing these things could mess something up. It seems like these "errors" might just be warnings

MR for updated twigs. Mostly fixed UI Patterns error "The exact same as just testing the variable, empty is not needed." by removing "is not empty"

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

kristen pol → credited jacobadeutsch → .

I went through and fixed most of the remaining stuff manually. The READMEs all had this error: 8:81 MD013/line-length Line length [Expected: 80; Actual: 156] and I just split that line into two. So that's one thing the generator script could have a small update on. Other than that I also fixed some line length problems in yaml files like label for example: 41:81 error line too long (81 > 80 characters) (line-length) where I used this notation to properly format it:

Key: >
  this is my very very very
  long string

From this webpage.

Which the generator could also be updated on. Other than that I just fixed some twig problems the linter exposed so we seem pretty good for now.

Here's the related issue:
https://www.drupal.org/project/demo_design_system/issues/3467234 📌 Use SDC conversion script to create baseline SDC YAML and README files Fixed

Here is the current version of the megalinter, it runs in the demo design system directory and can take a directory as an argument, but it defaults to the components dir and the starshot_demo/components dir

Generated ymls and mds using the twig-sdc-yaml-generator, fixed some twig problems, and some errors found while linting.

jacobadeutsch → created an issue.

kristen pol → credited jacobadeutsch → .

Here's a list of all of current yamllint and markdownlint errors and their associated files. I recommend turning this back into a json so it looks nicer, it wouldn't let me upload json. This is from a script I've almost finished the first iteration of, I could have it out to use by tomorrow if I'm able to meet with Kristen enough by then. Not sure though because she's at a conference right now.

Updated twig variables, mainly fixing issues where the enum format was wrong.

Ex:

With left, right or both.
->
Variable name: left, right, both.

jacobadeutsch → made their first commit to this issue’s fork.

Kristen Pol → credited jacobadeutsch → .

Additionally, there are 24625 problems (24625 errors, 0 warnings) for Javascript files under demo_design_system. Those files being:

civictheme_starter_kit/gulpfile.js
dist/civictheme.js
starshot_demo/components_combined/00-base/starshot-container/starshot-container.stories.js
starshot_demo/components_combined/00-base/starshot-one-col/starshot-one-col.stories.js
starshot_demo/components_combined/00-base/starshot-three-col/starshot-three-col.stories.js
starshot_demo/dist/scripts.js
starshot_demo/gulpfile.js
theme-settings/civictheme.theme-settings.colors.js

Found all of the problem files:

dist/civictheme.admin.css
dist/civictheme.css
dist/civictheme.editor.css
dist/civictheme.layout.css
dist/civictheme.variables.css
theme-settings/civictheme.theme-settings.colors.css
starshot_demo/dist/styles.css
starshot_demo/dist/styles.editor.css
starshot_demo/dist/styles.variables.css

found the other errors. they're all in theme-settings/civictheme.theme-settings.colors.css

34009 of these errors seem to be from demo_design_system/starshot_demo/dist
32693 of these errors seem to be from demo_design_system/dist

So 66702 out of 66722 of the errors are from both dist directories. I reckon it'll be easier to find the remaining 20 once those directories are dealt with.

jacobadeutsch → created an issue.

Most of the boolean problems seemed fixed but I did come across a weird edge case:

mobile-navigation-menu.component.yml

name: Mobile navigation menu

status: experimental

group: Organisms

props:

  type: object

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

    items:
      type: array
      title: Items
      description: 'Menu links array. Each item contains:'
      items:
        type: object

        properties:
          title:
            type: string
            title: Title
            description: The title of the link.

          url:
            type: string
            title: Url
            description: The link url.

          below:
            type: array
            title: Below
            description: Array of submenu items.

          is_expanded:
            type: boolean
            title: Is expanded
            description: Flag if the current item has visible child.

          in_active_trail:
            type: boolean
            title: In active trail
            description: Flag if the current item is in the active trail.

I wish I knew more about yml to understand how this file is working better... The items are being nested twice or something? Coding this all seems like a pain, thank you for doing such a great job

I found a variable in the campaign component yml which isn't directly taken from the twig:

          type:
            type: string
            title: Type
            description: 'Button type: primary, secondary, tertiary.'
            default: null
            enum:
            - primary
            - secondary
            - tertiary

the twig comment:

{#
/**
 * @file
 * Campaign component.
 *
 * Variables:
 * - content_top: [string] Content slot.
 * - image: [object] Image object:
 *   - url: [string] Image URL.
 *   - alt: [string] Image alt text.
 * - image_position: [string] Image position: left, right.
 * - tags: [array] Array of tags.
 * - title: [string] Title.
 * - date: [string] Date.
 * - content: [string] Content.
 * - links: [array] Array of link objects containing:
 *   - text: [string] Link text.
 *   - url: [string] Link URL.
 *   - is_new_window: [boolean] Open link in the new window.
 *   - is_external: [boolean] Link is external.
 * - content_bottom: [string] Content slot.
 * - theme: [string] Theme: light, dark.
 * - vertical_spacing: [string] With top, bottom or both vertical spaces.
 * - attributes: [string] Additional attributes.
 * - modifier_class: [string] Additional classes.
 */
#}

This I think is because this type var is being taken from the button component which is included here in the twig:

										{% include '@atoms/button/button.twig' with {
											theme: theme,
											kind: 'link',
											type: loop.index == 1 ? 'primary' : 'tertiary',
											text: link.text,
											url: link.url,
											is_new_window: link.is_new_window,
											is_external: link.is_external
										} only %}

To be honest I have no idea if this is supposed to be how it is, so just double checking here.

I think any instances of duplicate enums would be because the twig files have a mistake in them. So I wouldn't think it's 100% necessary for the script to do that. Seeing that mistake in the yml helps us find the problem in the twig as well.

In the button component, the yml file was generated with a null default for this var:

    type:
      type: string
      title: Type
      description: 'Button type: primary, secondary, tertiary.'
      default: null
      enum:
      - primary
      - secondary
      - tertiary

I think it's getting that from here:
{% set type = type in ['primary', 'secondary', 'tertiary'] ? type : null %}

Should it just not have a default in this instance? Maybe default: null is right here, I'm not really sure.

Another thing, booleans that appear under objects don't go by the title: description formatting. Here's an example from the list organism:

...
    link_above:
      type: object
      title: Link above
      description: 'Link object:'

      properties:
        text:
          type: string
          title: Text
          description: Text.

        url:
          type: string
          title: Url
          description: URL.

        is_new_window:
          type: boolean
          title: Is new window
          description: Open link in a new window.
...

Kristen Pol → credited jacobadeutsch → .

Kristen Pol → credited jacobadeutsch → .

The script is seriously awesome now, great job!

I'm working on creating the baseline ymls using it rn, and I did encounter a small problem:

    description_display:
      type: string
      title: Description display
      description: 'Description display: before, after, invisible. Default is before.
        Optional.'

      default: before
      enum:
      - before
      - after
      - invisible. Default is before. Optional



    message_type:
      type: string
      title: Message type
      description: 'Type of the message: error, warning, info, success. Default is
        error.'

      default: error
      enum:
      - error
      - warning
      - info
      - success. Default is error

I guess this is one thing I missed about the formatting of the twigs, there can be a default specified after the list. I think there should be at least a . at the end in these instances, so maybe first it can check for a . and then a \n just incase there isn't a . at the end? I'm not great with regex but I hope the solution is pretty simple. Not sure what happened with the indents either but idk if that will be a problem with the syntax.

Kristen Pol → credited jacobadeutsch → .

Kristen Pol → credited jacobadeutsch → .

I've attached an instance of the enum not being generated from the OLD twig-sdc-yaml-generator below. The new script generated the enums fine.

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

If instead of generating based on a given list of hardcoded enums you wanted to create a text parser to generate them I think there is a standard procedure for writing the twigs that could make this possible:

 * - theme: [string] Theme: light, dark.
 * - type: [string] Type: primary, secondary, tertiary
 * - icon_placement: [string] Icon position: before, after.

* Not sure if a . at the end is standard, or if this twig has a typo and that's what caused the problem

I think this is standard? * - var_name: [string] Name: enum1, enum2, enum3, enum4, etc...

Maybe the second colon in the line could be used to detect a list of enums? I guess I might be missing other cases.. I don't remember if objects or arrays sometimes include a colon in their descriptions, and I guess if they did then a way around that could be checking the datatype first. Assuming all enum lists are of type string.

Other than that though I think the only notes I have are that spacing between the vars would be nice. Something like this:

name: tag

status: experimental

group: Atoms

props:

  type: object

  required:
  - content
  - url

  properties:

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

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

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

Also group names are showing up as "default" right now. And the blank string bool defaults are still appearing but I assume you're on that.

Great work!!

should be ready to merge

Kristen Pol → credited jacobadeutsch → .