Merge pull request #1677 from dxc-technology/gomezivann/image-examples

New Image tokens and examples added

Author: jsuarezgonz

lib/src/common/variables.ts

@@ -492,6 +492,11 @@ export const componentTokens = {
   },
   image: {
     captionFontColor: CORE_TOKENS.color_grey_900,
+    captionFontFamily: CORE_TOKENS.type_sans,
+    captionFontSize: CORE_TOKENS.type_scale_02,
+    captionFontStyle: CORE_TOKENS.type_normal,
+    captionFontWeight: CORE_TOKENS.type_regular,
+    captionLineHeight: CORE_TOKENS.type_leading_normal,
   },
   link: {
     fontColor: CORE_TOKENS.color_blue_800,

lib/src/image/Image.tsx

@@ -31,7 +31,15 @@ const DxcImage = ({
         wrapper={(children: React.ReactNode) => (
           <Figure>
             {children}
-            <BaseTypography as="figcaption" color={colorsTheme.image.captionFontColor} fontSize="0.875rem">
+            <BaseTypography
+              as="figcaption"
+              color={colorsTheme.image.captionFontColor}
+              fontFamily={colorsTheme.image.captionFontFamily}
+              fontSize={colorsTheme.image.captionFontSize}
+              fontStyle={colorsTheme.image.captionFontStyle}
+              fontWeight={colorsTheme.image.captionFontWeight}
+              lineHeight={colorsTheme.image.captionLineHeight}
+            >
               {caption}
             </BaseTypography>
           </Figure>