Merge branch 'WEB-1437-chevron-in-button-link' of github.com:Telefoni…

…ca/mistica-web into WEB-1437-chevron-in-button-link

src/__screenshot_tests__/list-screenshot-test.tsx

@@ -44,6 +44,7 @@ test.each(getCases())(
                 extraContent,
                 withBadge,
                 headline: 'Headline',
+                detail: 'Detail',
             },
         });
 
@@ -64,6 +65,7 @@ test.each(getCases())(
                 extraContent,
                 withBadge,
                 headline: 'Headline',
+                detail: 'Detail',
             },
         });
 
@@ -82,6 +84,7 @@ test.each(controls)('Row list disabled - %s', async (control) => {
             headline: 'Headline',
             withBadge: true,
             disabled: true,
+            detail: 'Detail',
         },
     });
 
@@ -99,6 +102,7 @@ test.each(controls)('Boxed row list disabled - %s', async (control) => {
             headline: 'Headline',
             withBadge: true,
             disabled: true,
+            detail: 'Detail',
         },
     });
 
@@ -117,6 +121,7 @@ test('Rows with only a Title content are centered', async () => {
             headline: '',
             description: '',
             control: 'chevron',
+            detail: 'Detail',
         },
     });
 
@@ -135,6 +140,7 @@ test.each(devices)('Custom row with text centered', async (device) => {
             subtitle: '',
             headline: '',
             description: '',
+            detail: 'Detail',
         },
     });
 

src/__stories__/list-story.tsx

@@ -50,6 +50,7 @@ type Args = {
     title: string;
     subtitle: string;
     description: string;
+    detail: string;
     control: string;
     withBadge: boolean;
     oneLineTitle: boolean;
@@ -65,6 +66,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
     title,
     subtitle,
     description,
+    detail,
     control,
     withBadge,
     oneLineTitle,
@@ -163,6 +165,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -177,6 +180,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 2 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -195,6 +199,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -209,6 +214,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -223,6 +229,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -237,6 +244,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -251,6 +259,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -265,6 +274,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -279,6 +289,7 @@ const Template: StoryComponent<Args & {boxed?: boolean}> = ({
                 title={title}
                 subtitle={subtitle}
                 description={description}
+                detail={detail}
                 badge={withBadge ? 22 : undefined}
                 titleLinesMax={oneLineTitle ? 1 : 2}
                 subtitleLinesMax={oneLineSubtitle ? 1 : 2}
@@ -304,6 +315,7 @@ const defaultArgs = {
     title: 'Title',
     subtitle: '',
     description: 'Description',
+    detail: '',
     control: 'chevron',
     withBadge: false,
     oneLineTitle: false,

src/card.tsx

@@ -926,7 +926,11 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                                         truncate={descriptionLinesMax}
                                                         as="p"
                                                         regular
-                                                        color={vars.colors.textSecondary}
+                                                        color={
+                                                            withGradient
+                                                                ? vars.colors.textPrimary
+                                                                : vars.colors.textSecondary
+                                                        }
                                                         textShadow={textShadow}
                                                         hyphens="auto"
                                                     >

src/list.css.ts

@@ -64,7 +64,10 @@ export const control = style([
     },
 ]);
 
-export const right = style({marginLeft: 16});
+export const right = style({display: 'flex', marginLeft: 16, maxWidth: '40%'});
+
+export const detailRight = style({paddingLeft: 8});
+export const detail = style({textAlign: 'right'});
 
 export const centeredControl = sprinkles({
     display: 'flex',

src/list.tsx

@@ -36,6 +36,7 @@ interface CommonProps {
     subtitleLinesMax?: number;
     description?: string | null;
     descriptionLinesMax?: number;
+    detail?: string;
     asset?: React.ReactNode;
     badge?: boolean | number;
     role?: string;
@@ -74,6 +75,7 @@ const Content: React.FC<ContentProps> = ({
     subtitleLinesMax,
     description,
     descriptionLinesMax,
+    detail,
     asset,
     type = 'basic',
     badge,
@@ -114,56 +116,82 @@ const Content: React.FC<ContentProps> = ({
             >
                 <Stack space={4}>
                     {headline && (
-                        <Text1 regular color={vars.colors.textPrimary}>
+                        <Text1 regular color={vars.colors.textPrimary} hyphens="auto">
                             {headline}
                         </Text1>
                     )}
                     <Stack space={2}>
-                        <Text3 regular color={vars.colors.textPrimary} truncate={titleLinesMax} id={labelId}>
+                        <Text3
+                            regular
+                            color={vars.colors.textPrimary}
+                            truncate={titleLinesMax}
+                            id={labelId}
+                            hyphens="auto"
+                        >
                             {title}
                         </Text3>
                         {subtitle && (
-                            <Text2 regular color={vars.colors.textSecondary} truncate={subtitleLinesMax}>
+                            <Text2
+                                regular
+                                color={vars.colors.textSecondary}
+                                truncate={subtitleLinesMax}
+                                hyphens="auto"
+                            >
                                 {subtitle}
                             </Text2>
                         )}
                         {description && (
-                            <Text2 regular color={vars.colors.textSecondary} truncate={descriptionLinesMax}>
+                            <Text2
+                                regular
+                                color={vars.colors.textSecondary}
+                                truncate={descriptionLinesMax}
+                                hyphens="auto"
+                            >
                                 {description}
                             </Text2>
                         )}
                         {extra}
                     </Stack>
                 </Stack>
             </div>
+
             {renderBadge()}
-            {type === 'chevron' && (
-                <Box paddingLeft={16} className={classNames(styles.center, {[styles.disabled]: disabled})}>
-                    <IconChevron
-                        color={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
-                        direction="right"
-                    />
-                </Box>
-            )}
-            {type === 'control' && <div className={styles.right}>{renderRight(right, centerY)}</div>}
-            {type === 'custom' && (
-                <>
-                    <div className={classNames(styles.right, {[styles.disabled]: disabled})}>
+
+            <div className={classNames({[styles.right]: !!detail || type !== 'basic'})}>
+                {detail && (
+                    <div className={classNames(styles.center, styles.detail, {[styles.disabled]: disabled})}>
+                        <Text2 regular color={vars.colors.textSecondary} hyphens="auto">
+                            {detail}
+                        </Text2>
+                    </div>
+                )}
+
+                {type === 'control' && (
+                    <div className={classNames({[styles.detailRight]: !!detail})}>
                         {renderRight(right, centerY)}
                     </div>
-                    {withChevron && (
-                        <Box
-                            paddingLeft={4}
-                            className={classNames(styles.center, {[styles.disabled]: disabled})}
-                        >
-                            <IconChevron
-                                color={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
-                                direction="right"
-                            />
-                        </Box>
-                    )}
-                </>
-            )}
+                )}
+
+                {type === 'custom' && (
+                    <div
+                        className={classNames({[styles.detailRight]: !!detail, [styles.disabled]: disabled})}
+                    >
+                        {renderRight(right, centerY)}
+                    </div>
+                )}
+
+                {(type === 'chevron' || (type === 'custom' && withChevron)) && (
+                    <Box
+                        paddingLeft={detail || type === 'custom' ? 4 : 0}
+                        className={classNames(styles.center, {[styles.disabled]: disabled})}
+                    >
+                        <IconChevron
+                            color={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
+                            direction="right"
+                        />
+                    </Box>
+                )}
+            </div>
         </Box>
     );
 };
@@ -280,6 +308,7 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
         subtitleLinesMax,
         description,
         descriptionLinesMax,
+        detail,
         badge,
         role,
         extra,
@@ -310,6 +339,7 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
             titleLinesMax={titleLinesMax}
             subtitleLinesMax={subtitleLinesMax}
             descriptionLinesMax={descriptionLinesMax}
+            detail={detail}
             type={type}
             right={right}
             extra={extra}

src/skins/blau.tsx

@@ -275,6 +275,11 @@ export const getBlauSkin: GetKnownSkin = () => {
         textPresets: {
             cardTitle: {weight: 'regular'},
             button: {weight: 'medium'},
+            tabsLabel: {
+                weight: 'medium',
+                size: {mobile: 16, desktop: 18},
+                lineHeight: {mobile: 24, desktop: 24},
+            },
             link: {weight: 'medium'},
             title1: {weight: 'medium'},
             indicator: {weight: 'medium'},
@@ -284,7 +289,6 @@ export const getBlauSkin: GetKnownSkin = () => {
             text8: {weight: 'light'},
             text9: {weight: 'light'},
             text10: {weight: 'light'},
-            tabsLabel: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
         },
     };
     return skin;

src/skins/defaults.tsx

@@ -12,7 +12,7 @@ export const defaultTextPresetsConfig: TextPresetsConfig = {
     link: {weight: 'medium'},
     title1: {weight: 'medium'},
     indicator: {weight: 'medium'},
-    tabsLabel: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
+    tabsLabel: {weight: 'medium', size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
 };
 
 export const defaultBorderRadiiConfig: BorderRadiiConfig = {

src/skins/movistar-legacy.tsx

@@ -281,6 +281,11 @@ export const getMovistarLegacySkin: GetKnownSkin = (variant) => {
         textPresets: {
             cardTitle: {weight: 'bold'},
             button: {weight: 'medium'},
+            tabsLabel: {
+                weight: 'medium',
+                size: {mobile: 16, desktop: 18},
+                lineHeight: {mobile: 24, desktop: 24},
+            },
             link: {weight: 'medium'},
             title1: {weight: 'medium'},
             indicator: {weight: 'medium'},
@@ -290,7 +295,6 @@ export const getMovistarLegacySkin: GetKnownSkin = (variant) => {
             text8: {weight: 'bold'},
             text9: {weight: 'bold'},
             text10: {weight: 'bold'},
-            tabsLabel: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
         },
     };
 
@@ -303,6 +307,5 @@ export const getMovistarLegacySkin: GetKnownSkin = (variant) => {
         skin.colors.controlActivated = palette.movistarProminentBlue;
         skin.colors.dividerInverse = palette.movistarProminentBlueDark;
     }
-
     return skin;
 };

src/skins/movistar.tsx

@@ -279,6 +279,11 @@ export const getMovistarSkin: GetKnownSkin = () => {
         textPresets: {
             cardTitle: {weight: 'bold'},
             button: {weight: 'medium'},
+            tabsLabel: {
+                weight: 'medium',
+                size: {mobile: 16, desktop: 18},
+                lineHeight: {mobile: 24, desktop: 24},
+            },
             link: {weight: 'medium'},
             title1: {weight: 'medium'},
             indicator: {weight: 'medium'},
@@ -288,7 +293,6 @@ export const getMovistarSkin: GetKnownSkin = () => {
             text8: {weight: 'bold'},
             text9: {weight: 'bold'},
             text10: {weight: 'bold'},
-            tabsLabel: {size: {mobile: 16, desktop: 18}, lineHeight: {mobile: 24, desktop: 24}},
         },
     };
     return skin;