feat(info-button): added inverted variant and new color prop #420

src/tedi/components/buttons/info-button/info-button.module.scss

@@ -3,4 +3,12 @@
   height: var(--button-xs-icon-size);
   min-height: var(--button-xs-icon-size);
   vertical-align: bottom;
+
+  &[data-variant='inverted']:hover:not(:disabled) {
+    background-color: var(--button-main-neutral-inverted-icon-only-background-hover);
+  }
+
+  &[data-variant='inverted']:active:not(:disabled) {
+    background-color: var(--button-main-neutral-inverted-icon-only-background-active);
+  }
 }

src/tedi/components/buttons/info-button/info-button.spec.tsx

@@ -66,4 +66,30 @@ describe('InfoButton Component', () => {
     expect(button).toHaveAttribute('title', 'Info button');
     expect(button).toHaveAttribute('id', 'info-button-id');
   });
+
+  it('applies default color variant correctly', () => {
+    render(<InfoButton>Info</InfoButton>);
+    const button = screen.getByRole('button');
+    expect(button).not.toHaveAttribute('data-variant');
+  });
+
+  it('applies inverted color variant correctly', () => {
+    render(<InfoButton color="inverted">Info</InfoButton>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('data-variant', 'inverted');
+  });
+
+  it('applies the inverted variant and still renders children', () => {
+    render(
+      <InfoButton color="inverted">
+        <span data-testid="child">Child content</span>
+      </InfoButton>
+    );
+    const button = screen.getByRole('button');
+    expect(button).toHaveAttribute('data-variant', 'inverted');
+
+    const child = screen.getByTestId('child');
+    expect(child).toBeInTheDocument();
+    expect(child).toHaveTextContent('Child content');
+  });
 });

src/tedi/components/buttons/info-button/info-button.stories.tsx

@@ -28,20 +28,29 @@ const buttonStateArray = ['Default', 'Hover', 'Active', 'Focus'];
 
 type TemplateMultipleProps = {
   array: typeof buttonStateArray;
+  color?: 'default' | 'inverted';
 };
 
 const TemplateColumn: StoryFn<TemplateMultipleProps> = (args) => {
-  const { array, ...buttonProps } = args;
+  const { array, color = 'default', ...buttonProps } = args;
 
   return (
     <VerticalSpacing>
       {array.map((state, index) => (
         <Row key={index}>
           <Col width={1} className="display-flex align-items-center">
-            <Text modifiers="bold">{state}</Text>
+            <Text modifiers="bold" color={color === 'inverted' ? 'white' : 'primary'}>
+              {state}
+            </Text>
           </Col>
           <Col width={1} className="text-center">
-            <InfoButton title={`Info button ${state}`} {...buttonProps} aria-label={`Info button ${state}`} id={state}>
+            <InfoButton
+              title={`Info button ${state}`}
+              color={color}
+              {...buttonProps}
+              aria-label={`Info button ${state}`}
+              id={state}
+            >
               Info button
             </InfoButton>
           </Col>
@@ -57,7 +66,7 @@ export const Default: Story = {
   },
 };
 
-export const InfoButtonStates: StoryObj<TemplateMultipleProps> = {
+export const States: StoryObj<TemplateMultipleProps> = {
   render: TemplateColumn,
   args: {
     array: buttonStateArray,
@@ -70,3 +79,19 @@ export const InfoButtonStates: StoryObj<TemplateMultipleProps> = {
     },
   },
 };
+
+export const Inverted: StoryObj<TemplateMultipleProps> = {
+  render: TemplateColumn,
+  args: {
+    array: buttonStateArray,
+    color: 'inverted',
+  },
+  parameters: {
+    pseudo: {
+      hover: '#Hover',
+      active: '#Active',
+      focusVisible: '#Focus',
+    },
+    backgrounds: { default: 'brand' },
+  },
+};

src/tedi/components/buttons/info-button/info-button.tsx

@@ -4,27 +4,33 @@ import React from 'react';
 import { Button, ButtonProps } from '../button/button';
 import styles from './info-button.module.scss';
 
-export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children'> {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size' | 'children' | 'color'> {
   /**
-   * If true, applies a small size to the InfoButton.
+   * If true, applies a small size to the InfoButton
    * @default false
    */
   isSmall?: boolean;
   /**
-   * Children elements to be rendered inside the InfoButton.
+   * Children elements to be rendered inside the InfoButton
    */
   children?: React.ReactNode;
+  /*
+   * Color variant of the InfoButton
+   * @default 'default'
+   */
+  color?: 'default' | 'inverted';
 }
 
 export const InfoButton = React.forwardRef<HTMLButtonElement, InfoButtonProps>(
-  ({ isSmall, children, ...props }, ref): JSX.Element => (
+  ({ isSmall, children, color = 'default', ...props }, ref): JSX.Element => (
     <Button
       className={cn(styles['tedi-info-button'])}
+      data-variant={color === 'inverted' ? 'inverted' : undefined}
       data-name="info-button"
       {...props}
-      type="button"
       icon={{ name: 'info', size: isSmall ? 16 : 18 }}
       visualType="neutral"
+      color={color}
       ref={ref}
     >
       {children}