feat(Rating, InfoRating): new components (#1196)

Issue: [Link](https://jira.tid.es/browse/WEB-1981)

## 📄 Note

Haptic feedback requires implementing it in radio button component and
coordinating with native teams (it may require changes in the bridge). I
consider this as a different task (implementing haptic feedback for all
the controls), and it can be iterated in a different PR.

## ⚠️ Warning

This PR requires a major release in Mistica. There are no breaking
changes caused by the components themselves, but because we need new
icons from mistica-design repo, and design team has introduced some
breaking changes in their latest release. We can't merge this PR until
this one gets merged:
#1197

playroom/snippets.tsx

@@ -2900,8 +2900,8 @@ const alertSnippets = [
       title: fruit,
       description: "Description",
       asset: (
-        <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
-          <IconMobileDeviceRegular color={skinVars.colors.brand} />
+        <Circle backgroundColor={colors.brandLow} size={40}>
+          <IconMobileDeviceRegular color={colors.brand} />
         </Circle>
       ),
     }))}
@@ -3326,8 +3326,8 @@ const gridSnippets = [
   <GridItem>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 1"
@@ -3337,8 +3337,8 @@ const gridSnippets = [
   <GridItem rowSpan={2}>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 2"
@@ -3348,8 +3348,8 @@ const gridSnippets = [
   <GridItem>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 3"
@@ -3359,8 +3359,8 @@ const gridSnippets = [
   <GridItem columnSpan={2}>
     <SnapCard
       icon={
-        <Circle size={40} backgroundColor={skinVars.colors.brandLow}>
-          <IconAcademicRegular color={skinVars.colors.brand} />
+        <Circle size={40} backgroundColor={colors.brandLow}>
+          <IconAcademicRegular color={colors.brand} />
         </Circle>
       }
       title="Title 4"
@@ -3640,12 +3640,90 @@ const timerSnippets: Array<Snippet> = [
     },
 ];
 
+const ratingSnippets: Array<Snippet> = [
+    {
+        group: 'Rating',
+        name: 'InfoRating',
+        code: `
+          <InfoRating
+            aria-label="info rating"
+            size={24}
+            value={3}
+            count={6}
+            icon={{
+              ActiveIcon: IconStarFilled,
+              InactiveIcon: IconStarRegular,
+              color: colors.warning,
+            }}
+          />
+        `,
+    },
+    {
+        group: 'Rating',
+        name: 'Rating quantitative',
+        code: `
+          <Rating
+            aria-label="quantitative rating"
+            type="quantitative"
+            size={32}
+            defaultValue={3}
+            count={5}
+            icon={{
+              ActiveIcon: IconStarFilled,
+              InactiveIcon: IconStarRegular,
+              color: colors.controlActivated,
+            }}
+          />
+        `,
+    },
+    {
+        group: 'Rating',
+        name: 'Rating qualitative',
+        code: `
+          <Rating
+            aria-label="qualitative rating"
+            type="qualitative"
+            size={32}
+            valueLabels={["very bad", "bad", "regular", "good", "very good"]}
+            icons={[
+              {
+                  ActiveIcon: IconFaceSadFilled,
+                  InactiveIcon: IconFaceSadRegular,
+                  color: colors.errorHigh,
+              },
+              {
+                  ActiveIcon: IconFaceSlightlySadFilled,
+                  InactiveIcon: IconFaceSlightlySadRegular,
+                  color: colors.error,
+              },
+              {
+                  ActiveIcon: IconFaceNeutralFilled,
+                  InactiveIcon: IconFaceNeutralRegular,
+                  color: colors.warning,
+              },
+              {
+                  ActiveIcon: IconFaceHappyFilled,
+                  InactiveIcon: IconFaceHappyRegular,
+                  color: colors.success,
+              },
+              {
+                  ActiveIcon: IconFaceSuperHappyFilled,
+                  InactiveIcon: IconFaceSuperHappyRegular,
+                  color: colors.successHigh,
+              },
+            ]}
+          />
+        `,
+    },
+];
+
 export default [
     ...buttonSnippets,
     ...formSnippets,
     ...feedbackSnippets,
     ...skeletonSnippets,
     ...timerSnippets,
+    ...ratingSnippets,
     {group: 'Feedbacks', name: 'Snackbar', code: '<Snackbar message="Some message here" />'},
     ...layoutSnippets,
     {

src/__screenshot_tests__/rating-screenshot-test.tsx

@@ -0,0 +1,179 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test.each([0, 1, 2, 3, 4, 5, 4.5, 4.51])('InfoRating - value = %s', async (value) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([4.5, 0.74, 0.75, 1.24, 4.25])('InfoRating - with half value and value = %s', async (value) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value, withHalfValue: true},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([16, 24, 48])('InfoRating - size = %s', async (size) => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {size},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('InfoRating - inverse', async () => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {inverse: true, value: 3},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('InfoRating - custom icons', async () => {
+    await openStoryPage({
+        id: 'components-rating--info-rating-story',
+        device: 'MOBILE_IOS',
+        args: {value: 3.5, customIcons: true, withHalfValue: true},
+    });
+
+    const rating = await screen.findByTestId('info-rating');
+
+    expect(await rating.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - quantitative', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'quantitative'},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - quantitative with custom icons', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'quantitative', customIcons: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - qualitative', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative'},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const labels = ['muy malo', 'malo', 'regular', 'bueno', 'muy bueno'];
+
+    for (const label of labels) {
+        const currentIcon = await screen.findByRole('radio', {name: label});
+        await page.click(currentIcon);
+        expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+    }
+});
+
+test('Rating - qualitative with custom icons', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative', customIcons: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const labels = ['no battery', 'low battery', 'mid battery', 'full battery'];
+
+    for (const label of labels) {
+        const currentIcon = await screen.findByRole('radio', {name: label});
+        await page.click(currentIcon);
+        expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+    }
+});
+
+test('Rating - qualitative inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {type: 'qualitative', inverse: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+
+    const thirdIcon = await screen.findByRole('radio', {name: 'regular'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test.each([8, 24, 48])('Rating - size = %s', async (size) => {
+    await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {size},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});
+
+test('Rating - inverse', async () => {
+    const page = await openStoryPage({
+        id: 'components-rating--rating-story',
+        device: 'MOBILE_IOS',
+        args: {inverse: true},
+    });
+
+    const ratingWrapper = await screen.findByTestId('rating-wrapper');
+
+    const thirdIcon = await screen.findByRole('radio', {name: '3 de 5'});
+    await page.click(thirdIcon);
+
+    expect(await ratingWrapper.screenshot()).toMatchImageSnapshot();
+});