New Rating component

[degiorgig]

Nowdays we have the necessity to track the feeling of the customer using a webapplication.

therefore it would be nice to have a rating component, like stars: https://ng-bootstrap.github.io/#/components/rating/examples

[oliverschuerch]

We allready have such a component: https://design-system.post.ch/#/ng-bootstrap-samples/rating If something is not working for you with this component, please let us know.

[rouvenpost]

First Iteration Ratingbar positive and negative: https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=12038%3A38032&t=16gR0XgX0Bie1vIJ-1

[wueestd]

@oliverschuerch please review

[oliverschuerch]

We need to know if we can switch the amount of stars and if we need to have a mode, in which we can show the average rating that was given by all the users.

I will discuss this with @gfellerph next week.

[oliverschuerch]

@rouvenpost For now, this is a ngBootstrap component, which comes with several possibilities for an advances styling/visuality:

• DEVs can define the maximal rating (amount of stars shown)
• DEVs can show the current rating.
• DEVs can define some more things you can find here: https://ng-bootstrap.github.io/#/components/rating/api

In the future we will replace the ngBootstrap component with a web-component, where we will have more possibilities for customization. We could (for example) set the default amount of stars to 6. But we should not restrict this number! At the end, the DEV should have the choice of how many stars the rating component should show.

[wueestd]

ready to be published and reviewed

[wueestd]

I added states and made the size bigger, so that it is at least a bit accessible 😆 https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=12038%3A38032&t=pVEip6yLEd69iXWu-1

Could you please have a look at it @rouvenpost ?

[rouvenpost]

@wueestd why do you thing the original Bootstrap Size is not accesible?

[wueestd]

@rouvenpost because the klick area is only 16x24 px

[wueestd]

what do you think @rouvenpost @gfellerph @oliverschuerch

https://github.com/swisspost/design-system/assets/20660048/ded821dc-51c9-4334-9298-2c9ecafd47d3

[rouvenpost]

Color and behaviour are nice. Do we need halfsteps? If the sizechanges are no problem for the Devs then it will be finde with me.

[gfellerph]

Looks good, need to investigate how much customization the current component allows. Eventually, we'll build a web-component ourselves.

[oliverschuerch]

We will not customize the existing ngBootstrap component, but instead build a web-component: #1522