feat: add label property to simple-block (#1308)

OBVIVO-2814 (Simple Block): the label property was added to the simple block, and some adjustments were also included using the Inline component to align the position in the component. https://www.figma.com/design/hTthBYJeDVzcpUhkQYlyFG/Blocks-specs?node-id=7304-2609&t=GTbvRZkMvRSJacnI-0
Telefonica · Jan 15, 2025 · 2c57982 · 2c57982 · github-actions · Jan 15, 2025
1 parent 316565d
commit 2c57982
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx
@@ -3958,13 +3958,14 @@ const SimpleBlockSnippets = [
     {
         name: 'Simple Block',
         code: `
-        <SimpleBlock
-          image={
-            <Image src="${imagePlaceholder}" height={40} />
-          }
-          description="description"
-        />
-      `,
+      <SimpleBlock
+        image={
+          <Image src="${imagePlaceholder}" height={40} />
+        }
+        rightText="rightText"
+        description="description"
+      />
+    `,
         group: 'Blocks',
     },
 ];

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/__stories__/blocks-story.tsx b/src/community/__stories__/blocks-story.tsx
@@ -66,13 +66,18 @@ BlockRow.args = {
 
 type SimpleBlockArgs = {
     description: string;
+    rightText: string;
 };
 
-export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description}) => {
+export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description, rightText}) => {
     return (
         <ResponsiveLayout>
             <Box paddingY={24} dataAttributes={{testid: 'simple-block'}}>
-                <SimpleBlock description={description} image={<Image height={40} src={imgExample} />} />
+                <SimpleBlock
+                    description={description}
+                    rightText={rightText}
+                    image={<Image height={40} src={imgExample} />}
+                />
             </Box>
         </ResponsiveLayout>
     );
@@ -81,6 +86,7 @@ export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description}) => {
 BlockSimple.storyName = 'SimpleBlock';
 BlockSimple.args = {
     description: 'description',
+    rightText: 'label',
 };
 
 type InformationBlockArgs = {

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;
+    rightText?: string;
 }
 
-export const SimpleBlock = ({image, description, 'aria-label': ariaLabel}: SimpleBlockProps): JSX.Element => {
+export const SimpleBlock = ({
+    image,
+    description,
+    'aria-label': ariaLabel,
+    rightText,
+}: 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}>
+                        {rightText}
+                    </Text2>
                 </div>
-                <Text2 regular color={vars.colors.textSecondary}>
-                    {description}
-                </Text2>
             </Inline>
         </div>
     );