Merge branch 'master' of github.com:Telefonica/mistica-web into WEB-2095

-info-sheet-evolution

package.json

@@ -151,6 +151,7 @@
         "@vanilla-extract/dynamic": "^2.1.1",
         "@vanilla-extract/sprinkles": "^1.6.2",
         "classnames": "^2.3.1",
+        "cubic-bezier": "^0.1.2",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.1",
         "react-autosuggest": "^10.1.0",

playroom/snippets.tsx

@@ -2478,100 +2478,102 @@ const exampleScreens: Array<Snippet> = [
       setState("isSheetOpen", false);
     }}
   >
-    <ResponsiveLayout>
-      <Box paddingBottom={80} paddingTop={0}>
-        <Stack space={24}>
-          <Text4 medium>Summary of your order</Text4>
-          <Callout
-            asset={<IconTruckRegular color={colors.brand} />}
-            description="Products may be shipped separately depending on availability."
-          />
-
+    {({ modalTitleId }) => (
+      <SheetBody modalTitleId={modalTitleId}>
+        <Box paddingBottom={80} paddingTop={0}>
           <Stack space={24}>
-            <Stack space={8}>
-              <NegativeBox>
-                <RowList>
-                  <Row
-                    asset={
-                      <Image
-                        src="${imagePlaceholder}"
-                        height={64}
-                        aspectRatio="1:1"
-                      />
-                    }
-                    title="iPhone 14 Pro"
-                    subtitle="Color: Green"
-                    description="Capacity: 256 GB"
-                    right={
-                      <div
-                        style={{
-                          height: "100%",
-                          display: "flex",
-                          alignItems: "flex-end",
-                          justifyContent: "center",
-                          flexDirection: "column",
-                        }}
-                      >
-                        <Text2 color={colors.textSecondary}>1.379 €</Text2>
-                        <Text4 medium>1.379 €</Text4>
-                      </div>
-                    }
-                  />
-                  <Row
-                    asset={
-                      <Image
-                        src="${imagePlaceholder}"
-                        height={64}
-                        aspectRatio="1:1"
-                      />
-                    }
-                    title="AirPods 3ª gen."
-                    subtitle="Color: White"
-                    right={
-                      <div
-                        style={{
-                          height: "100%",
-                          display: "flex",
-                          alignItems: "flex-end",
-                          justifyContent: "center",
+            <Text4 medium>Summary of your order</Text4>
+            <Callout
+              asset={<IconTruckRegular color={colors.brand} />}
+              description="Products may be shipped separately depending on availability."
+            />
 
-                          flexDirection: "column",
-                        }}
-                      >
-                        <Text4 medium>200 €</Text4>
-                      </div>
-                    }
-                  />
-                </RowList>
-              </NegativeBox>
+            <Stack space={24}>
+              <Stack space={8}>
+                <NegativeBox>
+                  <RowList>
+                    <Row
+                      asset={
+                        <Image
+                          src="${imagePlaceholder}"
+                          height={64}
+                          aspectRatio="1:1"
+                        />
+                      }
+                      title="iPhone 14 Pro"
+                      subtitle="Color: Green"
+                      description="Capacity: 256 GB"
+                      right={
+                        <div
+                          style={{
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "flex-end",
+                            justifyContent: "center",
+                            flexDirection: "column",
+                          }}
+                        >
+                          <Text2 color={colors.textSecondary}>1.379 €</Text2>
+                          <Text4 medium>1.379 €</Text4>
+                        </div>
+                      }
+                    />
+                    <Row
+                      asset={
+                        <Image
+                          src="${imagePlaceholder}"
+                          height={64}
+                          aspectRatio="1:1"
+                        />
+                      }
+                      title="AirPods 3ª gen."
+                      subtitle="Color: White"
+                      right={
+                        <div
+                          style={{
+                            height: "100%",
+                            display: "flex",
+                            alignItems: "flex-end",
+                            justifyContent: "center",
+
+                            flexDirection: "column",
+                          }}
+                        >
+                          <Text4 medium>200 €</Text4>
+                        </div>
+                      }
+                    />
+                  </RowList>
+                </NegativeBox>
+                <Divider />
+              </Stack>
+              <Stack space={16}>
+                <Inline space="between">
+                  <Text3>Subtotal</Text3>
+                  <Text3>1.369 €</Text3>
+                </Inline>
+                <Inline space="between">
+                  <Text3 color={colors.promoHigh}>Promoción 7% descuento</Text3>
+                  <Text3 color={colors.promoHigh}>-100 €</Text3>
+                </Inline>
+                <Inline space="between">
+                  <Text3>Shipping costs</Text3>
+                  <Text3>0 €</Text3>
+                </Inline>
+              </Stack>
               <Divider />
-            </Stack>
-            <Stack space={16}>
-              <Inline space="between">
-                <Text3>Subtotal</Text3>
-                <Text3>1.369 €</Text3>
-              </Inline>
-              <Inline space="between">
-                <Text3 color={colors.promoHigh}>Promoción 7% descuento</Text3>
-                <Text3 color={colors.promoHigh}>-100 €</Text3>
-              </Inline>
-              <Inline space="between">
-                <Text3>Shipping costs</Text3>
-                <Text3>0 €</Text3>
-              </Inline>
-            </Stack>
-            <Divider />
-            <Stack space={8}>
-              <Inline space="between">
-                <Text4 medium>Total</Text4>
-                <Text4 medium>1.269 €</Text4>
-              </Inline>
-              <Text1 color={colors.textSecondary}>* All taxes included</Text1>
+              <Stack space={8}>
+                <Inline space="between">
+                  <Text4 medium>Total</Text4>
+                  <Text4 medium>1.269 €</Text4>
+                </Inline>
+                <Text1 color={colors.textSecondary}>* All taxes included</Text1>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
       </Box>
-    </ResponsiveLayout>
+      </SheetBody>
+    )}
   </Sheet>
 )}
 
@@ -3225,14 +3227,13 @@ const alertSnippets = [
       setState("isSheetOpen", false);
     }}
   >
-    <ResponsiveLayout>
-      <Box
-        paddingBottom={{ mobile: 16, desktop: 40 }}
-        paddingTop={{ mobile: 0, desktop: 40 }}
-      >
-        <Placeholder />
-      </Box>
-    </ResponsiveLayout>
+    {({ modalTitleId }) => (
+      <SheetBody modalTitleId={modalTitleId}>
+        <Box paddingBottom={{ mobile: 16, desktop: 0 }}>
+          <Placeholder />
+        </Box>
+      </SheetBody>
+    )}
   </Sheet>
 )}`,
     },
@@ -4142,6 +4143,24 @@ const ratingSnippets: Array<Snippet> = [
     },
 ];
 
+const meterSnippets: Array<Snippet> = [
+    {
+        group: 'Meter',
+        name: 'Meter Linear',
+        code: '<Meter width={200} type="linear" values={[33, 33, 0]} />',
+    },
+    {
+        group: 'Meter',
+        name: 'Meter Angular',
+        code: '<Meter width={200} type="angular" values={[33, 33, 0]} />',
+    },
+    {
+        group: 'Meter',
+        name: 'Meter Circular',
+        code: '<Meter width={200} type="circular" values={[33, 33, 0]} />',
+    },
+];
+
 export default [
     ...buttonSnippets,
     ...formSnippets,
@@ -4188,6 +4207,7 @@ export default [
     ...sliderSnippets,
     ...cardSnippets,
     ...exampleScreens,
+    ...meterSnippets,
     {
         group: 'Progress',
         name: 'Stepper',

src/__private_stories__/skin-components-story.tsx

@@ -51,6 +51,7 @@ import {
     Placeholder,
     NegativeBox,
     IconInvoicePlanFileRegular,
+    Meter,
 } from '..';
 import avatarImg from '../__stories__/images/avatar.jpg';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
@@ -315,6 +316,28 @@ export const Default: StoryComponent<Args> = ({variant}) => {
                             steps={['First', 'Second', 'Third', 'Fourth', 'Fifth']}
                         />
 
+                        {/** Meter */}
+                        <Inline space={16}>
+                            <Meter
+                                width={200}
+                                type="linear"
+                                values={[30, 30, 0]}
+                                arial-label="linear meter"
+                            />
+                            <Meter
+                                width={200}
+                                type="angular"
+                                values={[30, 30, 0]}
+                                arial-label="angular meter"
+                            />
+                            <Meter
+                                width={200}
+                                type="circular"
+                                values={[30, 30, 0]}
+                                arial-label="circular meter"
+                            />
+                        </Inline>
+
                         {/** TextLink */}
                         <TextLink onPress={() => {}}>This is a text link</TextLink>
                     </ComponentsGroup>

src/__screenshot_tests__/meter-screenshot-test.tsx

@@ -0,0 +1,44 @@
+import {openStoryPage, screen} from '../test-utils';
+
+test.each`
+    values                 | type          | themeVariant
+    ${[0]}                 | ${'linear'}   | ${'default'}
+    ${[0]}                 | ${'circular'} | ${'default'}
+    ${[0]}                 | ${'angular'}  | ${'default'}
+    ${[100]}               | ${'linear'}   | ${'default'}
+    ${[100]}               | ${'circular'} | ${'default'}
+    ${[100]}               | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'default'}
+    ${[33, 33]}            | ${'circular'} | ${'default'}
+    ${[33, 33]}            | ${'angular'}  | ${'default'}
+    ${[33, 33]}            | ${'linear'}   | ${'inverse'}
+    ${[33, 33]}            | ${'circular'} | ${'inverse'}
+    ${[33, 33]}            | ${'angular'}  | ${'inverse'}
+    ${[33, 33]}            | ${'linear'}   | ${'media'}
+    ${[33, 33]}            | ${'circular'} | ${'media'}
+    ${[33, 33]}            | ${'angular'}  | ${'media'}
+    ${[20, 20, 20, 20, 0]} | ${'linear'}   | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'circular'} | ${'default'}
+    ${[20, 20, 20, 20, 0]} | ${'angular'}  | ${'default'}
+`('Meter $themeVariant $type $values', async ({themeVariant, values, type}) => {
+    await openStoryPage({
+        id: 'components-data-visualizations-meter--meter-story',
+        args: {
+            themeVariant,
+            width: 200,
+            type,
+            valuesCount: values.length,
+            ...values.reduce(
+                (acc: Array<number>, value: number, index: number) => ({
+                    ...acc,
+                    [`value${index + 1}`]: value,
+                }),
+                {}
+            ),
+        },
+    });
+
+    const stepper = await screen.findByTestId('Meter');
+    const image = await stepper.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__screenshot_tests__/sheet-screenshot-test.tsx

@@ -3,7 +3,7 @@ import {openStoryPage, screen} from '../test-utils';
 const TESTABLE_DEVICES = ['MOBILE_IOS', 'DESKTOP'] as const;
 const TESTABLE_DEVICES_WITH_LARGE_DESKTOP = [...TESTABLE_DEVICES, 'LARGE_DESKTOP'] as const;
 
-test.each(TESTABLE_DEVICES)('Sheet in %s', async (device) => {
+test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('Sheet in %s', async (device) => {
     const page = await openStoryPage({
         id: 'components-modals-sheet--default',
         device,