CourseCardImage for Fender React UI Kit
Description
Image component for My Path and Course Details Course Cards
Installation and Usage
yarn add @fenderdigital/react-course-card-image --save
import CourseCard from '@fenderdigital/react-course-card-image';
<CourseCardImage
courseNumber={courseNumber}
courseType={courseType}
imagePath={courseImage}
isTablet={isTablet}
lessonsCompletedPercentage={lessonsCompletedPercentage}
origin={origin}
/>Props
-
courseNumber- Course number for on-path courses -
courseType- Riff, song or skill -
imagePath- Image URL for course art -
isTablet- For tablet-specific styling of native component -
lessonsCompletedPercentage- For gradient overlays based on course completion -
origin- For Course Detail vs. My Path-specific styling
| propName | propType | defaultValue | isRequired |
|---|---|---|---|
| courseNumber | number | undefined | false |
| courseType | CourseType | n/a | true |
| imagePath | string | n/a | true |
| isTablet | boolean | undefined | false |
| lessonsCompletedPercentage | number | n/a | true |
| origin | ImageOrigin | n/a | true |
Development
Check the Monorepo README for development documentation.