Sentiments Widget

Built with ReactJS. Demo at https://sentiments-widget.azurewebsites.net/

Please pull the code and run the below commands -

npm start

Open http://localhost:3000

npm run test

6 Test suits and 27 test cases

Browsers tested: MacOS Chrome, MacOS Firefox, Safari, Android Chrome

npm run build

Builds the app for production to the build folder

A brief note

This widget is built-up of 5 components. The root component is the SentimentsWidget.

Inside src/layout/animatable-container, is a higher-order-component who orchestrates the different states’ of the widget and handles the animation.

Each component is isolated with its own scoped styles and *.spec.js file.

Given more time, I would have liked to achieved the below -

1. Web Accessibility (e.g. keyboard and tags for screen-readers)
2. Theming
3. Better documentation or JSDoc

Component and State Diagram

Components

src/App.js

SentimentsWidget (Main exportable)

Child Components of SentimentsWidget

src/components/emoji/index.js

1. Emoji

src/components/feedback-form/index.js

1. FeedbackForm

src/components/help-us-improve/index.js

1. HelpUsImprove

src/components/layout/close-button/index.js

1. CloseButton

src/components/rating-scale/index.js

1. RatingScale

src/components/rating-scale/scale-selector/index.js

1. ScaleSelector

src/components/thank-you-card/index.js

1. ThankYouCard

_{This document was generated by the React DOC Generator v1.2.5.}