**** FAVO
A UI library for quickly building pages and UI blocks.
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
- Add a component in the related
src
directory - Export the component in
src/index.js
- 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. - Once you've finished update the UI, run
yarn release
to publish a new version
Use Favo in web
- 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