feat(Chips): Chip Active Navigation strong style

playroom/snippets.tsx

@@ -4286,6 +4286,22 @@ export default [
         name: 'Chip icon',
         code: '<Chip onClose={() => {}} Icon={IconLightningFilled}>Chip</Chip>',
     },
+    {
+        group: 'Chip',
+        name: 'Chip navigation',
+        code: '<Chip active={true} href="https://example.com">Chip</Chip>',
+    },
+    {
+        group: 'Chip',
+        name: 'Chip navigation inverse',
+        code: ` <ResponsiveLayout isInverse={true} fullWidth>
+                  <Box padding={16} width="fit-content" >
+                    <div style={{lineHeight: 0}}>
+                      <Chip href="https://example.com">Chip</Chip>
+                    </div>
+                  </Box>
+                </ResponsiveLayout>`,
+    },
     {
         group: 'Chip',
         name: 'Chip checkbox',

src/__stories__/chip-story.tsx

@@ -23,7 +23,9 @@ type Args = {
     inverse: boolean;
     icon: boolean;
     closable: boolean;
+    active: boolean;
     badge: string;
+    href: string;
 };
 
 type Props = {
@@ -35,29 +37,32 @@ type Props = {
 const ChipBackgroundContainer = ({inverse, dataAttributes, children}: Props) => (
     <ResponsiveLayout isInverse={inverse} fullWidth>
         <Box padding={16} width="fit-content" dataAttributes={dataAttributes}>
-            <div
-                style={{
-                    // prevent line-height from affecting the height of the container;
-                    // happens when changing the base font size
-                    lineHeight: 0,
-                }}
-            >
-                {children}
-            </div>
+            <div style={{lineHeight: 0}}>{children}</div>
         </Box>
     </ResponsiveLayout>
 );
 
-export const Default: StoryComponent<Args> = ({inverse, icon, closable, badge}) => {
+export const Default: StoryComponent<Args> = ({
+    inverse,
+    icon,
+    closable,
+    badge,
+    active: chipActive,
+    href: hrefProp,
+}) => {
     const props = {
         Icon: icon ? IconLightningFilled : undefined,
         badge: badge !== 'undefined' ? +badge : undefined,
+        href: hrefProp !== 'undefined' ? hrefProp : '',
+        active: chipActive,
     };
 
+    const {href, active, ...rest} = props;
+
     return (
         <ChipBackgroundContainer dataAttributes={{testid: 'chip'}} inverse={inverse}>
             {closable ? (
-                <Chip onClose={() => window.alert('closed')} {...props}>
+                <Chip onClose={() => window.alert('closed')} {...rest}>
                     Chip
                 </Chip>
             ) : (
@@ -147,16 +152,22 @@ export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inver
 
 const defaultArgs = {
     inverse: false,
+    active: false,
     badge: '0',
     icon: false,
     closable: false,
+    href: 'undefined',
 };
 
 const defaultArgTypes = {
     badge: {
         options: badgeOptions,
         control: {type: 'select'},
     },
+    href: {
+        options: ['undefined', 'https://example.com'],
+        control: {type: 'select'},
+    },
 };
 
 Default.storyName = 'Chip';

src/__tests__/chip-test.tsx

@@ -12,11 +12,8 @@ test('Chip can be closed', async () => {
             <Chip onClose={closeSpy}>some text</Chip>
         </ThemeContextProvider>
     );
-
     const closeButton = screen.getByRole('button', {name: 'Cerrar'});
-
     await userEvent.click(closeButton);
-
     expect(closeSpy).toHaveBeenCalledTimes(1);
 });
 
@@ -29,11 +26,8 @@ test('Chip can be closed when using custom close label', async () => {
             </Chip>
         </ThemeContextProvider>
     );
-
     const closeButton = screen.getByRole('button', {name: 'custom close label'});
-
     await userEvent.click(closeButton);
-
     expect(closeSpy).toHaveBeenCalledTimes(1);
 });
 
@@ -44,10 +38,35 @@ test('Chip can be clicked', async () => {
             <Chip onPress={clickSpy}>some text</Chip>
         </ThemeContextProvider>
     );
-
     const chip = screen.getByText('some text');
-
     await userEvent.click(chip);
-
     expect(clickSpy).toHaveBeenCalledTimes(1);
 });
+
+test('Chip with href renders as a link', async () => {
+    const locationAssignMock = jest.fn();
+    Object.defineProperty(window, 'location', {
+        writable: true,
+        configurable: true,
+        value: {
+            assign: locationAssignMock,
+            href: 'http://localhost',
+        },
+    });
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Chip href="https://example.com">some text</Chip>
+        </ThemeContextProvider>
+    );
+    const chipNvigation = screen.getByRole('link', {name: /some text/i});
+    expect(chipNvigation).toHaveAttribute('href', 'https://example.com');
+    chipNvigation.addEventListener('click', (e) => {
+        e.preventDefault();
+        const href = chipNvigation.getAttribute('href');
+        if (href) {
+            window.location.assign(href);
+        }
+    });
+    await userEvent.click(chipNvigation);
+    expect(locationAssignMock).toHaveBeenCalledWith('https://example.com');
+});

src/chip.css.ts

@@ -66,6 +66,29 @@ export const chipVariants = styleVariants({
             cursor: 'pointer',
         },
     ],
+    navigationActive: [
+        chipActive,
+        containerBase,
+        sprinkles({
+            color: vars.colors.textPrimaryInverse,
+            background: vars.colors.controlActivated,
+        }),
+        {
+            borderColor: vars.colors.controlActivated,
+            cursor: 'pointer',
+        },
+    ],
+    navigationActiveInverse: [
+        containerBase,
+        sprinkles({
+            color: vars.colors.controlActivated,
+            background: vars.colors.controlActivatedInverse,
+        }),
+        {
+            borderColor: vars.colors.controlActivatedInverse,
+            cursor: 'pointer',
+        },
+    ],
 });
 
 export const interactive = style({
@@ -119,6 +142,15 @@ export const icon = style([
     sprinkles({paddingRight: 4}),
     {color: vars.colors.neutralMedium, paddingRight: 4},
 ]);
+export const iconNavigation = style([
+    sprinkles({paddingRight: 4}),
+    {color: vars.colors.textPrimaryInverse, paddingRight: 4},
+]);
+
+export const iconNavigationInverse = style([
+    sprinkles({paddingRight: 4}),
+    {color: vars.colors.controlActivated, paddingRight: 4},
+]);
 
 export const iconActive = style([
     sprinkles({paddingRight: 4}),

src/chip.tsx

@@ -35,20 +35,44 @@ interface ToggleChipProps extends SimpleChipProps {
     active: boolean;
 }
 
-type ClickableChipProps = TouchableComponentProps<SimpleChipProps & {active?: boolean}>;
+interface NavigableChipProps extends SimpleChipProps {
+    href: string;
+}
+
+type ClickableChipProps = TouchableComponentProps<
+    SimpleChipProps & {
+        active?: boolean;
+    }
+>;
 
-type ChipProps = ExclusifyUnion<ClosableChipProps | ToggleChipProps | ClickableChipProps>;
+type ChipProps = ExclusifyUnion<
+    ClosableChipProps | ToggleChipProps | NavigableChipProps | ClickableChipProps
+>;
 
 const Chip = (props: ChipProps): JSX.Element => {
-    const {Icon, children, id, dataAttributes, active, badge, onClose, closeButtonLabel} = props;
+    const {Icon, children, id, dataAttributes, badge, onClose, closeButtonLabel} = props;
     const {texts, textPresets, t} = useTheme();
-
     const overAlternative = useThemeVariant() === 'alternative';
+    const inverse = useThemeVariant() === 'inverse';
+
+    const href = 'href' in props ? props.href : undefined;
+    const isActive = !!props.active;
+    const isNavigationActive = !!(href && href.trim() !== '');
 
     const body = (
         <>
             {Icon && (
-                <div className={active ? styles.iconActive : styles.icon}>
+                <div
+                    className={
+                        isActive
+                            ? isNavigationActive
+                                ? inverse
+                                    ? styles.iconNavigationInverse
+                                    : styles.iconNavigation
+                                : styles.iconActive
+                            : styles.icon
+                    }
+                >
                     <Icon color="currentColor" size={pxToRem(16)} />
                 </div>
             )}
@@ -90,21 +114,32 @@ const Chip = (props: ChipProps): JSX.Element => {
             </div>
         );
     }
+
     const isTouchable = props.href || props.onPress || props.to;
-    const isInteractive = active !== undefined || isTouchable;
+    const isInteractive = isActive || isTouchable;
 
     const renderBadge = () => {
         if (!badge) {
             return null;
         }
-        return <>{badge === true ? <Badge /> : <Badge value={badge} />}</>;
+        return badge === true ? <Badge /> : <Badge value={badge} />;
     };
 
     const renderContent = (dataAttributes?: DataAttributes) => (
         <div
             className={classnames(
-                styles.chipVariants[active ? 'active' : overAlternative ? 'overAlternative' : 'default'],
-                // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
+                styles.chipVariants[
+                    isActive
+                        ? isNavigationActive
+                            ? inverse
+                                ? 'navigationActiveInverse'
+                                : 'navigationActive'
+                            : 'active'
+                        : overAlternative
+                          ? 'overAlternative'
+                          : 'default'
+                ],
+
                 isTouchable ? styles.wrappedContent : styles.chipWrapper,
                 {
                     [styles.interactive]: isInteractive,