OBVIVO-2814 (Simple Block): the label property was added to the simpl…

…e block, and some adjustments were also included using the Inline component to align the position in the component
Telefonica · Jan 8, 2025 · d52e2f0 · d52e2f0
1 parent 73e33eb
commit d52e2f0
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/..._/__image_snapshots__/blocks-screenshot-test-tsx-blocks-simple-block-1-snap.png b/..._/__image_snapshots__/blocks-screenshot-test-tsx-blocks-simple-block-1-snap.png
diff --git a/src/community/blocks.tsx b/src/community/blocks.tsx
@@ -84,22 +84,35 @@ interface SimpleBlockProps {
     image?: RendersNullableElement<typeof Image>;
     description?: string;
     'aria-label'?: string;
+    label?: string;
 }
 
-export const SimpleBlock = ({image, description, 'aria-label': ariaLabel}: SimpleBlockProps): JSX.Element => {
+export const SimpleBlock = ({
+    image,
+    description,
+    'aria-label': ariaLabel,
+    label,
+}: SimpleBlockProps): JSX.Element => {
     return (
         <div aria-label={ariaLabel}>
-            <Inline space={16} alignItems="center">
-                <div
-                    style={applyCssVars({
-                        [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-                    })}
-                >
-                    {image}
+            <Inline space="between" alignItems="center">
+                <Inline space={16} alignItems="center">
+                    <div
+                        style={applyCssVars({
+                            [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                        })}
+                    >
+                        {image}
+                    </div>
+                    <Text2 regular color={vars.colors.textSecondary}>
+                        {description}
+                    </Text2>
+                </Inline>
+                <div className={styles.rightContent}>
+                    <Text2 regular color={vars.colors.textBrand}>
+                        {label}
+                    </Text2>
                 </div>
-                <Text2 regular color={vars.colors.textSecondary}>
-                    {description}
-                </Text2>
             </Inline>
         </div>
     );