feat: add label property to simple-block and implement inverse token …

…in chip
Telefonica · Dec 4, 2024 · d115575 · d115575
1 parent 8872f87
commit d115575
Show file tree

Hide file tree

Showing 5 changed files with 238 additions and 223 deletions.
diff --git a/src/chip.css.ts b/src/chip.css.ts
@@ -41,7 +41,7 @@ const chipActive = style({});
 
 export const chipVariants = styleVariants({
     default: [
-        containerBase,
+        containerBase, 
         sprinkles({
             background: vars.colors.backgroundContainer,
             color: vars.colors.textPrimary,
@@ -54,6 +54,13 @@ export const chipVariants = styleVariants({
             color: vars.colors.textPrimary,
         }),
     ],
+    inverse: [
+        containerBase,
+        sprinkles({
+            background: vars.colors.brand,
+            color: vars.colors.textPrimaryInverse,
+        }),
+    ],
     active: [
         chipActive,
         containerBase,
@@ -130,6 +137,11 @@ export const iconActive = style([
     {color: vars.colors.controlActivated, paddingRight: 4},
 ]);
 
+export const iconInverse = style([
+    sprinkles({paddingRight: 4}),
+    {color: vars.colors.neutralLow, paddingRight: 4},
+]);
+
 export const leftPadding = styleVariants({
     default: [sprinkles({paddingLeft: {mobile: 20, desktop: 12}})],
     withIcon: [sprinkles({paddingLeft: {mobile: 16, desktop: 8}})],
@@ -154,4 +166,4 @@ globalStyle(`${interactive}:hover:not(${chipActive}) > ${iconActive}`, {
             color: vars.colors.controlActivated,
         },
     },
-});
+});
diff --git a/src/chip.tsx b/src/chip.tsx
@@ -44,11 +44,16 @@ const Chip = (props: ChipProps): JSX.Element => {
     const {texts, isDarkMode, textPresets, t} = useTheme();
 
     const overAlternative = useThemeVariant() === 'alternative';
+    const inverse = useThemeVariant() === 'inverse';
 
     const body = (
         <>
             {Icon && (
-                <div className={active ? styles.iconActive : styles.icon}>
+                <div className={classnames({
+                    [styles.iconActive]: active,
+                    [styles.iconInverse]: inverse,
+                    [styles.icon]: !active && !inverse
+                })}>
                     <Icon color="currentColor" size={pxToRem(16)} />
                 </div>
             )}
@@ -66,7 +71,7 @@ const Chip = (props: ChipProps): JSX.Element => {
         return (
             <div
                 className={classnames(
-                    overAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
+                    inverse ? styles.chipVariants.inverse : overAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
                     styles.chipWrapper,
                     Icon ? styles.leftPadding.withIcon : styles.leftPadding.default,
                     styles.rightPadding.withIcon
@@ -103,7 +108,7 @@ const Chip = (props: ChipProps): JSX.Element => {
     const renderContent = (dataAttributes?: DataAttributes) => (
         <div
             className={classnames(
-                styles.chipVariants[active ? 'active' : overAlternative ? 'overAlternative' : 'default'],
+                styles.chipVariants[active ? 'active' : inverse ? 'inverse' : overAlternative ? 'overAlternative' : 'default'],
                 // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
                 isTouchable ? styles.wrappedContent : styles.chipWrapper,
                 {
@@ -129,9 +134,9 @@ const Chip = (props: ChipProps): JSX.Element => {
                 {renderContent()}
             </BaseTouchable>
         );
-    }
+    } 
 
     return renderContent(chipDataAttributes);
 };
 
-export default Chip;
+export default Chip;
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,14 @@ BlockRow.args = {
 
 type SimpleBlockArgs = {
     description: string;
+    label: string;
 };
 
-export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description}) => {
+export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description, label}) => {
     return (
         <ResponsiveLayout>
             <Box paddingY={24} dataAttributes={{testid: 'simple-block'}}>
-                <SimpleBlock description={description} image={<Image height={40} src={imgExample} />} />
+                <SimpleBlock description={description} label={label} image={<Image height={40} src={imgExample} />} />
             </Box>
         </ResponsiveLayout>
     );
@@ -81,6 +82,7 @@ export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description}) => {
 BlockSimple.storyName = 'SimpleBlock';
 BlockSimple.args = {
     description: 'description',
+    label: 'label',
 };
 
 type InformationBlockArgs = {
@@ -255,4 +257,4 @@ BlockProgress.args = {
     value: '20',
     text: 'text',
     description: 'description',
-};
+};