Ayobolit & Vaadin front-end

[heshfekry]

CXL Storybook

Ayobilit notes:

• Polymer Is going away - Vaadin is going to get refactored to LitElement https://lit-element.polymer-project.org/
• Originally polymer 2 - that spec went away.
• Continue with Vaadin - extend their components.
• If needed create a couple of our own.
• Anything the UI/UX designers can do to assist/document this
• Transparency of components

Steps

1. Data source (WP REST API, fake JSON files)
2. API (what attributes, what's in shadow DOM, what's in light DOM)
3. Styling (CXL UI scss folder)

Adeft Playbook viewer front-end Compenents to be converted to storybook

• [x] Steps > extend cxl-vaadin-accordion on storybook
• [x] Ratings > CXL star rating
• [x] Embed other components to compose the playbook viewer using CXL layout=2c-l

Criteria for what Is a component:

• Does it have functionality?
• Does it have state?
• If it is just display — then doesn’t need to become a CXL UI component - no "style-only wrapper custom elements" needed
• Usually don’t do wrapper component

When Aybolit pull request is accepted then its ready for APP

Element view specification

Desktop

Main section

1. Breadcrumb
2. Title
3. Author (check with @litill about improvements made here^ regarding hiding Adeft user)
4. Peer reviewed - no avatar. (check with @litill about improvements made here^ regarding hiding user if that user is author, and showing multiple peer reviewers.)
5. Use case
6. Steps

Side bar

1. Rate this playbook
2. Last updated - as is
3. Courses & Lessons- only show if exists - change Label to Related Courses & Lessons
4. Related blogs - only show if exists
5. Tools - only show if exists

Mobile view order

1. Breadcrumb
2. Title
3. Author
4. peer review - no avatar.
5. Use case
6. Steps
7. Sidebar elements in same order^

Feedback

• [x] Move rating to the side bar with a Rate this playbook heading. Follows order above^ Check this video for placement - loom.com/share/749d6f9c1cd148e6838c2e4607ae5758
• [x] Remove arrows from sidebar
• [x] Use CXL footer

[lkraav]

Is there anything left here to keep it open @heshfekry