@transferwise/components 0.0.0-experimental-1605d4e → 0.0.0-experimental-65253b2

package/build/types/item/ItemCheckbox.d.ts

@@ -1,4 +1,4 @@
 import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
+export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange' | 'disabled'>;
 export declare const Checkbox: (props: ItemCheckboxProps) => import("react").JSX.Element;
 //# sourceMappingURL=ItemCheckbox.d.ts.map

package/build/types/item/ItemCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/item/ItemCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;AAEpG,eAAO,MAAM,QAAQ,UAAoB,iBAAiB,gCAQzD,CAAC"}
+{"version":3,"file":"ItemCheckbox.d.ts","sourceRoot":"","sources":["../../../src/item/ItemCheckbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAGvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,EACnB,SAAS,GAAG,eAAe,GAAG,UAAU,GAAG,UAAU,CACtD,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAoB,iBAAiB,gCAQzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1605d4e",
+  "version": "0.0.0-experimental-65253b2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -95,13 +95,13 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-1605d4e",
+    "@transferwise/neptune-css": "0.0.0-experimental-65253b2",
     "@wise/components-theming": "1.6.2",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.21.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-1605d4e",
+    "@transferwise/neptune-css": "0.0.0-experimental-65253b2",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/item/ItemButton.spec.tsx

@@ -0,0 +1,90 @@
+import { render, screen, mockMatchMedia } from '../test-utils';
+import { Button as ItemButton } from './ItemButton';
+import { ButtonPriority } from '../button/Button.types';
+import { ItemContext } from './Item';
+
+mockMatchMedia();
+
+describe('ItemButton', () => {
+  const mockSetControlType = jest.fn();
+
+  const renderWithItemContext = (ui: React.ReactNode) => {
+    return render(
+      <ItemContext.Provider
+        value={{
+          setControlType: mockSetControlType,
+          ids: {
+            label: 'label',
+            additionalInfo: 'additional Info',
+            value: 'value',
+            control: 'control',
+            prompt: 'prompt',
+          },
+          props: {},
+        }}
+      >
+        {ui}
+      </ItemContext.Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('always sets v2 to true', () => {
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(mockSetControlType).toHaveBeenCalledWith('button');
+  });
+
+  it('always sets size to "md"', () => {
+    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toHaveClass('wds-Button--medium');
+  });
+
+  it('supports all priorities', () => {
+    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
+    priorities.forEach((priority) => {
+      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
+      const button = screen.getByRole('button', { name: `Test ${priority}` });
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  it('renders as a button by default', () => {
+    renderWithItemContext(<ItemButton>Click me</ItemButton>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('renders as an anchor when href is provided', () => {
+    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
+    const link = screen.getByRole('link', { name: 'Go to Example' });
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('spreads additional props to the button', () => {
+    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
+    const button = screen.getByRole('button', { name: 'Custom Button' });
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('aria-label', 'Custom Button');
+  });
+
+  it('spreads additional props to the anchor', () => {
+    renderWithItemContext(
+      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
+        Custom Link
+      </ItemButton>,
+    );
+    const link = screen.getByRole('link', { name: 'Custom Link' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});

package/src/item/ItemCheckbox.tsx

@@ -3,14 +3,17 @@ import CheckboxButton from '../checkboxButton';
 import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
 import { ItemContext, ItemContextData } from './Item';
 
-export type ItemCheckboxProps = Pick<CheckboxButtonProps, 'checked' | 'indeterminate' | 'onChange'>;
+export type ItemCheckboxProps = Pick<
+  CheckboxButtonProps,
+  'checked' | 'indeterminate' | 'onChange' | 'disabled'
+>;
 
 export const Checkbox = function (props: ItemCheckboxProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
+  const { setControlType } = useContext<ItemContextData>(ItemContext);
 
   useEffect(() => {
     setControlType('checkbox');
   }, []);
 
-  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
+  return <CheckboxButton {...props} />;
 };

package/src/item/ItemSwitch.tsx

@@ -3,11 +3,11 @@ import { default as SwitchComp, SwitchProps } from '../switch';
 import { ItemContext, ItemContextData } from './Item';
 
 export const Switch = function (props: SwitchProps) {
-  const { setControlType, props: baseItemProps } = useContext<ItemContextData>(ItemContext);
+  const { setControlType } = useContext<ItemContextData>(ItemContext);
 
   useEffect(() => {
     setControlType('checkbox');
   }, []);
 
-  return <SwitchComp disabled={baseItemProps.disabled} {...props} />;
+  return <SwitchComp {...props} />;
 };