[Structured list] Web Component: enhancement and new variant

[ibmdotcom-bot]

Engineering info:

• Innovation Team engineer: @andy-blum
• Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2422
• DPO consulting engineer: @emyarod

---

User Story

As a [user role below]: Carbon for ibm.com developer

I need to: create/change the Structured list

so that I can: provide the ibm.com adopter developers components they can use to build ibm.com web pages

Additional information

• Story within Storybook with corresponding knobs
• Utilize Carbon
• Create with Shadow DOM and Custom Elements standards
• The React version is created as a wrapper to the Web Components version
• See the Epic (#8385) for the Design and Functional specs information
• Visual QA testing issue (#8386)
• Prod QA testing issue (#8387)

1. Structured list enhancement

• Ability to include paragraph breaks
• Ability to add checkmark icon in row items
• Ability to add tooltip

2. Structured list with row headers (vertical)

New variant of current structured list

• Ability for Rows to have heading style (no column headers)

3. 8 columns

Not sure if this is an enhancement or new, I think structured list can already span 8 columns?

Additional Information

• Design specs
• Carbon web components structures list
• Carbon React structured list

Acceptance criteria

• [ ] Include README for the web component and corresponding styles
• [ ] Create Web Components styles in styles package
• [ ] Create React wrapper
• [ ] Do not create knobs in Storybook that include JSON objects
• [ ] Break out Storybook stories into multiple variation stories, if applicable
• [ ] Create codesandbox example under /packages/web-components/examples/codesandbox and include in README
• [ ] Minimum 80% unit test coverage
• [ ] add the trigger to create the React Wrapper
  • [ ] create the React storybook stories and related documentation
• [ ] Update the Carbon for ibm.com website component data file to be sure the web site Component Status and Storybook links are correct
• [ ] Use the Visual QA checklist to verify design quality
• [ ] Update the e2e test scripts, if needed.
• [ ] Confirm e2e test results have no major errors.
• [ ] A comment is posted in the Prod QA issue (#8387) when development is finished.
• [ ] The dev complete label is added to the Prod QA issue (#8387).

[kennylam]

Hey team! Please add your planning poker estimate with ZenHub @andy-blum @mwanberg @jkaeser

[kennylam]

Please add your planning poker estimate with ZenHub @proeung

[proeung]

@EAVilleda @dratzenboeck-ibm Just a heads up, this component is scheduled to be worked on for our current sprint (05). I think it'll be helpful if you both can provide some examples of how you're looking to structure this component on the AEM editorial side so that we won't run into issues during the integration process. Managing tables can be tricky, therefore I think it'll be helpful to see if you guys are managing them as defined node structure or free form in the WYSIWYG.

[dratzenboeck-ibm]

@proeung Our plan is using the AEM rich text editor for table editing. So we are not building a component where you can add table rows and cells as subcomponents, but where the author can basically edit the HTML with a table editor and the output should be the final HTML. This means out of the box the markup would result in something like the table here https://www.aemcomponents.dev/content/core-components-examples/library/page-authoring/text.html#title-36ac9ed382 . If we need different markup we probably will need to customize the AEM rich text editor.

[andy-blum]

@dratzenboeck-ibm does your rich text editor limit what HTML is valid to things like <table> or will you be able to add in web components?

[andy-blum]

Also, is this how your team is planning to author the similar pricing tables components?

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8389

[dratzenboeck-ibm]

@andy-blum As said the <table> markup is the default output of the rich text table editor. If we need web components we will have to put in effort to change the output markup of the RTE. Regarding pricing tables components I haven't seen any designs yet. I thought a pricing table would be a widget that is filled with content from an API instead of manually authored content. But yes generally I would say if we want the author to build a table himself it should be by using the rich text editor. We don't plan to build another table variation where we have rows / cells as separate components.

[proeung]

Moving the React Wrapper portion of this component into a separate ticket (https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8494) and leaving this one to just Web Components.