feat(Chips): Chip Active Navigation strong style

playroom/snippets.tsx

@@ -4381,6 +4381,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/__screenshot_tests__/chip-screenshot-test.tsx

@@ -63,3 +63,34 @@ test('Chip - should expand when inside a grid', async () => {
 
     expect(await story.screenshot()).toMatchImageSnapshot();
 });
+test('Chip - navigable with href and active', async () => {
+    await openStoryPage({
+        id: 'components-chip--navigable-chip',
+        device: 'DESKTOP',
+        args: {
+            href: 'https://example.com',
+            active: true,
+            icon: true,
+        },
+    });
+
+    const story = await screen.findByTestId('chip');
+
+    expect(await story.screenshot()).toMatchImageSnapshot();
+});
+test('Chip - navigable with href and active and inverse', async () => {
+    await openStoryPage({
+        id: 'components-chip--navigable-chip',
+        device: 'DESKTOP',
+        args: {
+            href: 'https://example.com',
+            active: true,
+            icon: true,
+            inverse: true,
+        },
+    });
+
+    const story = await screen.findByTestId('chip');
+
+    expect(await story.screenshot()).toMatchImageSnapshot();
+});

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 = {
@@ -48,16 +50,27 @@ const ChipBackgroundContainer = ({inverse, dataAttributes, children}: Props) =>
     </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>
             ) : (
@@ -144,19 +157,55 @@ export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inver
         </ChipBackgroundContainer>
     );
 };
+export const NavigableChip: StoryComponent<{
+    inverse: boolean;
+    icon: boolean;
+    badge: string;
+}> = ({inverse, icon, badge}) => {
+    const props = {
+        Icon: icon ? IconLightningFilled : undefined,
+        badge: badge !== 'undefined' ? +badge : undefined,
+        href: 'https://example.com',
+        active: true,
+    };
+
+    return (
+        <ChipBackgroundContainer dataAttributes={{testid: 'navigable-chip'}} inverse={inverse}>
+            <Chip {...props}>Chip</Chip>
+        </ChipBackgroundContainer>
+    );
+};
 
 const defaultArgs = {
     inverse: false,
+    active: false,
     badge: '0',
     icon: false,
     closable: false,
+    href: 'undefined',
+};
+
+const navigableArgs = {
+    inverse: false,
+    badge: '0',
+    icon: false,
 };
 
 const defaultArgTypes = {
     badge: {
         options: badgeOptions,
         control: {type: 'select'},
     },
+    href: {
+        options: ['undefined', 'https://example.com'],
+        control: {type: 'select'},
+    },
+};
+const NavigableChipArgTypes = {
+    badge: {
+        options: badgeOptions,
+        control: {type: 'select'},
+    },
 };
 
 Default.storyName = 'Chip';
@@ -168,3 +217,6 @@ SingleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};
 
 MultipleSelection.argTypes = defaultArgTypes;
 MultipleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};
+
+NavigableChip.argTypes = NavigableChipArgTypes;
+NavigableChip.args = navigableArgs;

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.textActivated,
+            background: vars.colors.brandLow,
+        }),
+        {
+            borderColor: vars.colors.controlActivated,
+            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,38 @@ interface ToggleChipProps extends SimpleChipProps {
     active: boolean;
 }
 
+interface ToggleChipProps extends SimpleChipProps {
+    active: boolean;
+}
+
 type ClickableChipProps = TouchableComponentProps<SimpleChipProps & {active?: boolean}>;
 
 type ChipProps = ExclusifyUnion<ClosableChipProps | ToggleChipProps | ClickableChipProps>;
 
 const Chip = (props: ChipProps): JSX.Element => {
-    const {Icon, children, id, dataAttributes, active, badge, onClose, closeButtonLabel} = props;
+    const {Icon, children, id, dataAttributes, badge, active, onClose, closeButtonLabel} = props;
     const {texts, textPresets, t} = useTheme();
+    const themeVariante = useThemeVariant();
+    const overAlternative = themeVariante === 'alternative';
+    const overInverse = themeVariante === 'inverse';
 
-    const overAlternative = useThemeVariant() === 'alternative';
+    const isTouchable = props.href || props.onPress || props.to;
+    const isInteractive = active !== undefined || isTouchable;
 
     const body = (
         <>
             {Icon && (
-                <div className={active ? styles.iconActive : styles.icon}>
+                <div
+                    className={
+                        active
+                            ? isTouchable
+                                ? overInverse
+                                    ? styles.iconNavigationInverse
+                                    : styles.iconNavigation
+                                : styles.iconActive
+                            : styles.icon
+                    }
+                >
                     <Icon color="currentColor" size={pxToRem(16)} />
                 </div>
             )}
@@ -90,21 +108,29 @@ const Chip = (props: ChipProps): JSX.Element => {
             </div>
         );
     }
-    const isTouchable = props.href || props.onPress || props.to;
-    const isInteractive = active !== undefined || 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[
+                    active
+                        ? isTouchable
+                            ? overInverse
+                                ? 'navigationActiveInverse'
+                                : 'navigationActive'
+                            : 'active'
+                        : overAlternative
+                          ? 'overAlternative'
+                          : 'default'
+                ],
+
                 isTouchable ? styles.wrappedContent : styles.chipWrapper,
                 {
                     [styles.interactive]: isInteractive,