favo

**** FAVO

A UI library for quickly building pages and UI blocks.

Github

Getting Started

Make sure you have node 8 installed.

nvm use 8
git clone https://github.com/webedx-spark/favo
yarn
yarn start // keep it open
npm link  // open a new tab

Open a new tab and run

nvm use 8
cd playground
yarn
yarn start // keep it open
npm link @coursera/favo // open a new tab

Visit http://localhost:3000/ to see demo blocks.

Try to change the block component inside the src folder and see live updates.

General working process

UI Dev flow

1. Add a component in the related src directory
2. Export the component in src/index.js
3. Import the component in playground/src/components/FavoComponentList.js and add it to render (Good to always add to the top so you don't have to scroll to the bottom to see the change.) Visit http://localhost:3006/favo to see the component.
4. Once you've finished update the UI, run yarn release to publish a new version

Use Favo in web

1. From web

cd static/bundles/xdp
yarn workspace xdp add @coursera/favo@0.0.?

and start importing Favo components.

Use in production

Ready to publish the components? Run yarn release and start using the components in production.

Notes

• Rerun yarn build after adding new package dependencies to FAVO.

XDP TODOs

Misc.

• Update RatingWithModal (later, may not need)
• SocialPills (later, may not need)

Tejas

• SEO: Q&A, schema, metatags...

• more work depending on Tejas's availability

Quang

Components list: (UI blocks, reusable components, design Q&A, web migration, api data mappinging, and ensure web compatibility)

• BannerSDP
• BannerSCDP
• AboutS12n (require us to map the api data to glance data)
• AboutCourse
• CTAButton (don't need to add to CUI now, just add to Favo is ok)
• SDPStickyHeader (TBD, depend on time)
• BannerCDP (lower priority, next sprint)
• StarRating (ref: https://github.com/vidaaudrey/vcui/blob/master/src/components/extended/StarRating.js)

Kelvin

Components list: (UI blocks, design Q&A, web migration, api data mappinging and ensure web compatibility)

• CourseReviewOverview (further work on the responsiveness and match data with apiData)
• AboutS12nCourseList (need to query separate api and map the data to the correct format)
• HowItWorksCDP
• HowItWorksSDP
• Recommendations (separate api, deferToCSR)
• FAQs (defer to next week unless Audrey's Collapse/Accordion component is ready)
• FAQsCML (Add to FAQs, based on faq type, either render regular FAQs or FAQsCML. Only need in web, for Favo we'll use plain html render, for now)

May need further design tweaks (including the latest mobile design from Chelsea):

• InstructorList
• PartnerList
• IndustryPartners
• LearnerStories
• EarnCreditMDP
• CoursesMDP
• ProjectListMDP
• AboutMasterTrack
• StartLearningMDP
• BannerMDP

Audrey

• Get infra to set up phabractor for Favo
• Data fetching setup for SDP
• Data fetching and page loading set up for SCDP
• Migrate all UI components to web
• Migrate apiData to the latest format (only if Quang and Kelvin haven't started working on the affected components yet)
• Set up edge A/B testing for s12n
• Set up epic rollout
• Collapse and Accordion required for FAQs
• Set up React Int.
• S12nTabs
• Conversion components EnrollSectionSDP, EnrollSectionSCDP, EnrollmentWidget, SCDPCourseEnrollmentWidget,... (working with conversion team to get those)
• PlanComparisonMDP (lower priority, next sprint)

Future work (beyond this sprint)

• Schema supported json editing
• Figure out temp translation solution based on the schema
• Convert HowItWorksSDP and HowItWorksCDP to template
• Template gallery
• Visual editor for CustomBlock
• Add Coursera standard auth
• Epic integration