feat(Rating, InfoRating): new components

playroom/snippets.tsx

@@ -3632,12 +3632,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: skinVars.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: skinVars.colors.controlActivated,
+            }}
+          />
+        `,
+    },
+    {
+        group: 'Rating',
+        name: 'Rating qualitative',
+        code: `
+          <Rating
+            aria-label="info rating"
+            type="qualitative"
+            size={32}
+            valueLabels={["muy malo", "malo", "regular", "bueno", "muy bueno"]}
+            icons={[
+              {
+                  ActiveIcon: IconFaceSadFilled,
+                  InactiveIcon: IconFaceSadRegular,
+                  color: skinVars.colors.errorHigh,
+              },
+              {
+                  ActiveIcon: IconFaceSlightlySadFilled,
+                  InactiveIcon: IconFaceSlightlySadRegular,
+                  color: skinVars.colors.error,
+              },
+              {
+                  ActiveIcon: IconFaceNeutralFilled,
+                  InactiveIcon: IconFaceNeutralRegular,
+                  color: skinVars.colors.warning,
+              },
+              {
+                  ActiveIcon: IconFaceHappyFilled,
+                  InactiveIcon: IconFaceHappyRegular,
+                  color: skinVars.colors.success,
+              },
+              {
+                  ActiveIcon: IconFaceSuperHappyFilled,
+                  InactiveIcon: IconFaceSuperHappyRegular,
+                  color: skinVars.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,130 @@
+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('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 - 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 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();
+});

src/__stories__/rating-story.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import {Box, InfoRating, Rating, ResponsiveLayout} from '..';
+
+export default {
+    title: 'Components/Rating',
+    parameters: {fullScreen: true},
+};
+
+type RatingArgs = {
+    inverse: boolean;
+    count: number;
+    size: number;
+    type: 'quantitative' | 'qualitative';
+    disabled: boolean;
+};
+
+export const RatingStory: StoryComponent<RatingArgs> = ({inverse, count, size, type, disabled}) => {
+    return (
+        <ResponsiveLayout fullWidth isInverse={inverse}>
+            <Box padding={16}>
+                <div data-testid="rating-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Rating
+                        size={size}
+                        disabled={disabled}
+                        {...(type === 'qualitative'
+                            ? {type}
+                            : {
+                                  type,
+                                  count,
+                              })}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+RatingStory.storyName = 'Rating';
+
+RatingStory.args = {
+    type: 'quantitative',
+    count: 5,
+    size: 32,
+    disabled: false,
+    inverse: false,
+};
+
+RatingStory.argTypes = {
+    type: {
+        options: ['quantitative', 'qualitative'],
+        control: {type: 'select'},
+    },
+    count: {
+        control: {type: 'range', min: 1, max: 5},
+        if: {arg: 'type', eq: 'quantitative'},
+    },
+    size: {
+        control: {type: 'range', min: 16, max: 64, step: 4},
+    },
+};
+
+type InfoRatingArgs = {
+    inverse: boolean;
+    count: number;
+    value: number;
+    size: number;
+    withHalfValue: boolean;
+};
+
+export const InfoRatingStory: StoryComponent<InfoRatingArgs> = ({
+    inverse,
+    count,
+    value,
+    size,
+    withHalfValue,
+}) => {
+    return (
+        <ResponsiveLayout fullWidth isInverse={inverse}>
+            <Box padding={16}>
+                <InfoRating
+                    value={value}
+                    count={count}
+                    size={size}
+                    withHalfValue={withHalfValue}
+                    dataAttributes={{testid: 'info-rating'}}
+                />
+            </Box>
+        </ResponsiveLayout>
+    );
+};
+
+InfoRatingStory.storyName = 'InfoRating';
+
+InfoRatingStory.args = {
+    inverse: false,
+    withHalfValue: false,
+    count: 5,
+    size: 16,
+    value: 0,
+};
+
+InfoRatingStory.argTypes = {
+    count: {
+        control: {type: 'range', min: 1, max: 5},
+    },
+    size: {
+        control: {type: 'range', min: 16, max: 64, step: 4},
+    },
+};