fix: adjusted brakelines and chip component and storybook

Telefonica · Feb 21, 2025 · 740cf7c · 740cf7c
1 parent 898b172
commit 740cf7c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/src/__stories__/chip-story.tsx b/src/__stories__/chip-story.tsx
@@ -157,22 +157,20 @@ export const MultipleSelection: StoryComponent<Omit<Args, 'closable'>> = ({inver
         </ChipBackgroundContainer>
     );
 };
-export const NavigableChip: StoryComponent<Omit<Args, 'closable'>> = ({
-    inverse,
-    icon,
-    badge,
-    active: chipActive,
-    href: hrefProp,
-}) => {
+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: hrefProp !== 'undefined' ? hrefProp : '',
-        active: chipActive,
+        href: 'https://example.com',
+        active: true,
     };
 
     return (
-        <ChipBackgroundContainer dataAttributes={{testid: 'chip'}} inverse={inverse}>
+        <ChipBackgroundContainer dataAttributes={{testid: 'navigable-chip'}} inverse={inverse}>
             <Chip {...props}>Chip</Chip>
         </ChipBackgroundContainer>
     );
@@ -189,10 +187,8 @@ const defaultArgs = {
 
 const navigableArgs = {
     inverse: false,
-    active: true,
     badge: '0',
     icon: false,
-    href: 'https://example.com',
 };
 
 const defaultArgTypes = {
@@ -205,6 +201,12 @@ const defaultArgTypes = {
         control: {type: 'select'},
     },
 };
+const NavigableChipArgTypes = {
+    badge: {
+        options: badgeOptions,
+        control: {type: 'select'},
+    },
+};
 
 Default.storyName = 'Chip';
 Default.argTypes = defaultArgTypes;
@@ -216,5 +218,5 @@ SingleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};
 MultipleSelection.argTypes = defaultArgTypes;
 MultipleSelection.args = {...(({closable, ...o}) => o)(defaultArgs)};
 
-NavigableChip.argTypes = defaultArgTypes;
+NavigableChip.argTypes = NavigableChipArgTypes;
 NavigableChip.args = navigableArgs;
diff --git a/src/__tests__/chip-test.tsx b/src/__tests__/chip-test.tsx
@@ -14,7 +14,9 @@ test('Chip can be closed', async () => {
     );
 
     const closeButton = screen.getByRole('button', {name: 'Cerrar'});
+
     await userEvent.click(closeButton);
+
     expect(closeSpy).toHaveBeenCalledTimes(1);
 });
 
@@ -27,8 +29,11 @@ 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);
 });
 
@@ -39,7 +44,10 @@ 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);
 });
diff --git a/src/chip.tsx b/src/chip.tsx
@@ -58,7 +58,7 @@ const Chip = (props: ChipProps): JSX.Element => {
             {Icon && (
                 <div
                     className={
-                        props.active
+                        active
                             ? isTouchable
                                 ? overInverse
                                     ? styles.iconNavigationInverse
@@ -120,7 +120,7 @@ const Chip = (props: ChipProps): JSX.Element => {
         <div
             className={classnames(
                 styles.chipVariants[
-                    props.active
+                    active
                         ? isTouchable
                             ? overInverse
                                 ? 'navigationActiveInverse'