Favourite Component/Button

[cindyebi]

Following up on the previous discussion about new components for the Training Academy's Personal Space project, I thought it's better to separate them into different threads.

There is a need to have a custom component for adding courses to favorites. Although we have tried to use the vf-checkbox as seen on the mockup below to accommodate this need, the visual representation didn't seem to fit well with the goal of the action. A checkbox component better signifies an action of selecting multiple options rather than adding items to favorites. As seen on other websites such as Future Learn and Udemy, adding courses to favorite are visually signified as a Star or Heart icon button.

Current mockup using vf-checkbox:

Udemy:

FutureLearn:

Component design suggestions:
Similar to the vf-back-to-top, v1 and v2 added a Star icon into the current vf-button secondary variant:

An icon button without labels could be utilized for a more compact version where there isn't enough space to accommodate a button with label, e.g. course listings on search results, image thumbnails on the Featured Courses section on the Training Academy homepage:

[khawkins98]

Being worked on at #1672