@transferwise/components 0.0.0-experimental-44efb60 → 0.0.0-experimental-95044f9

package/build/main.css

@@ -4741,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   flex-flow: column;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px !important;
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/build/styles/main.css

@@ -4741,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   flex-flow: column;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px !important;
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/build/styles/segmentedControl/SegmentedControl.css

@@ -46,8 +46,8 @@
   flex-flow: column;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px !important;
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/build/types/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCA+CZ,CAAC"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/field/Field.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAUtC,MAAM,MAAM,UAAU,GAAG;IACvB,6IAA6I;IAC7I,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IACjG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,4FAQf,UAAU,gCAiDZ,CAAC"}

package/build/types/inlineAlert/InlineAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAiBlB"}
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/inlineAlert/InlineAlert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAQ,MAAM,WAAW,CAAC;AAG5C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,GAAG,SAAS,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,EAAE,EACF,IAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,+BAelB"}

package/build/types/inputs/contexts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAS/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}
+{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/inputs/contexts.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,2BAA2B,8CAA+B,CAAC;AAGxE,eAAO,MAAM,sBAAsB,8CAA0B,CAAC;AAG9D,eAAO,MAAM,wBAAwB,8CAAmC,CAAC;AAGzE,eAAO,MAAM,oBAAoB,+CAA+B,CAAC;AAEjE,UAAU,sBAAsB;IAC9B,gLAAgL;IAChL,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,GAAE,sBAA2B;;;;;EAQ/E;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;CACxD;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC7E,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,IAAI,CAAC,EAAE,sBAAsB;YAEgB,IAAI,CAAC,CAAC,EAAE,MAAM,wBAAwB,CAAC;;EAOrF"}

package/build/types/segmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAOA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,+CAMnB,qBAAqB,gCA6HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/segmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,KAAK,OAAO,GAAG,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,KAAK,mBAAmB,GAAG,WAAW,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,SAAS,OAAO,EAAE,GAAG,SAAS,mBAAmB,EAAE,CAAC;AAE3E,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,mBAAmB,EAAE,CAAC;CAC1C,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,SAAS,OAAO,EAAE,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,CAAC,yBAAyB,GAAG,0BAA0B,CAAC,CAAC;AAE3D,QAAA,MAAM,gBAAgB,+CAMnB,qBAAqB,gCA0HvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/tabs/TabList.d.ts

@@ -1,5 +1,10 @@
-export interface TabListProps {
-    children?: React.ReactNode;
+export default TabList;
+declare function TabList({ children }: {
+    children: any;
+}): import("react").JSX.Element;
+declare namespace TabList {
+    namespace propTypes {
+        let children: any;
+    }
 }
-export default function TabList({ children }: TabListProps): import("react").JSX.Element;
 //# sourceMappingURL=TabList.d.ts.map

package/build/types/tabs/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,+BAQzD"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabList.js"],"names":[],"mappings":";AAEA;;gCAMC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-44efb60",
+  "version": "0.0.0-experimental-95044f9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/field/Field.tsx

@@ -63,12 +63,14 @@ export const Field = ({
                 className,
               )}
             >
-              {label ? (
-                <label id={labelId} htmlFor={inputId} className="control-label">
+              {label != null ? (
+                <Label id={labelId} htmlFor={inputId}>
                   {label}
-                </label>
-              ) : null}
-              {children}
+                  {children}
+                </Label>
+              ) : (
+                children
+              )}
 
               {message && (
                 <InlineAlert type={sentiment} id={descriptionId}>

package/src/inlineAlert/InlineAlert.spec.tsx

@@ -28,6 +28,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-info');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
     });
 
     it('renders neutral', () => {
@@ -35,6 +36,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-neutral');
+      expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
     });
 
     it('renders success', () => {
@@ -42,6 +44,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-success');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders positive', () => {
@@ -49,6 +52,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-positive');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders error as danger', () => {
@@ -56,6 +60,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-danger');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders negative as danger', () => {
@@ -63,6 +68,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-danger');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
 
     it('renders warning', () => {
@@ -70,6 +76,7 @@ describe('InlineAlert', () => {
       const component = screen.getByRole('alert');
 
       expect(component).toHaveClass('alert-warning');
+      expect(screen.getByTestId('status-icon')).toBeInTheDocument();
     });
   });
 });

package/src/inlineAlert/InlineAlert.tsx

@@ -11,6 +11,14 @@ export interface InlineAlertProps {
   children: ReactNode;
 }
 
+const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
+  Sentiment.NEGATIVE,
+  Sentiment.ERROR,
+  Sentiment.POSITIVE,
+  Sentiment.SUCCESS,
+  Sentiment.WARNING,
+]);
+
 export default function InlineAlert({
   id,
   type = 'neutral',
@@ -27,9 +35,7 @@ export default function InlineAlert({
         className,
       )}
     >
-      {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
-        <StatusIcon sentiment={type} size={Size.SMALL} />
-      )}
+      {iconTypes.has(type) && <StatusIcon sentiment={type} size={Size.SMALL} />}
       <div className="np-text-body-default">{children}</div>
     </div>
   );

package/src/inputs/contexts.tsx

@@ -18,10 +18,9 @@ interface UseInputAttributesArgs {
 }
 
 export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
-  const id = useContext(InputIdContext);
   const labelId = useContext(FieldLabelIdContext);
   return {
-    id: !nonLabelable ? id : undefined,
+    id: useContext(InputIdContext),
     'aria-labelledby': nonLabelable ? labelId : undefined,
     'aria-describedby': useContext(InputDescribedByContext),
     'aria-invalid': useContext(InputInvalidContext),

package/src/main.css

@@ -4741,8 +4741,8 @@ html:not([dir="rtl"]) .np-navigation-option {
   flex-flow: column;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px !important;
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/src/segmentedControl/SegmentedControl.css

@@ -46,8 +46,8 @@
   flex-flow: column;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 4px !important;
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 4px;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/src/segmentedControl/SegmentedControl.less

@@ -43,7 +43,7 @@
   flex: 1 1 100%;
   flex-flow: column;
   padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 var(--size-4) !important;
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
   line-height: inherit;
   align-items: center;

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { render, screen, userEvent, waitFor } from '../test-utils';
 
 import SegmentedControl, { SegmentedControlProps } from './SegmentedControl';
-import { Field } from '../field/Field';
 
 const defaultSegments = [
   {
@@ -189,13 +188,4 @@ describe('SegmentedControl', () => {
       'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',
     );
   });
-
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Label">
-        <SegmentedControl {...defaultProps} />
-      </Field>,
-    );
-    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Label/);
-  });
 });

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,18 +1,14 @@
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
+import { StoryFn } from '@storybook/react';
+import React from 'react';
 
 import Button from '../button';
 
 import SegmentedControl from './SegmentedControl';
-import { Field } from '../field/Field';
 
-const meta = {
+export default {
   component: SegmentedControl,
   title: 'Forms/SegmentedControl',
-} satisfies Meta<typeof SegmentedControl>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+};
 
 const Template: StoryFn = (args) => {
   const [segments, setSegments] = React.useState([
@@ -95,37 +91,3 @@ export const SegmentedControlView = {
     mode: 'view',
   },
 };
-
-export const WithinField = {
-  args: {
-    name: 'aSegmentedControl',
-    mode: 'input',
-    value: 'cupcakes',
-    segments: [
-      { id: 'CUPCAKE', label: 'Cupcakes', value: 'cupcakes' },
-      { id: 'SPONGECAKE', label: 'Sponge cake', value: 'spongecake' },
-      { id: 'CARROT_CAKE', label: 'Carrot cake', value: 'carrotcake' },
-    ],
-    onChange: () => {},
-  },
-  render: function Render({ value: initialValue, onChange, ...args }) {
-    const [value, setValue] = useState(initialValue);
-    return (
-      <SegmentedControl
-        value={value}
-        onChange={(nextValue) => {
-          setValue(nextValue);
-          onChange?.(nextValue);
-        }}
-        {...args}
-      />
-    );
-  },
-  decorators: [
-    (Story) => (
-      <Field label="Label">
-        <Story />
-      </Field>
-    ),
-  ],
-} satisfies Story;

package/src/segmentedControl/SegmentedControl.tsx

@@ -3,7 +3,6 @@ import { createRef, useEffect, useRef, useState } from 'react';
 
 import Body from '../body';
 import { Typography } from '../common';
-import { useInputAttributes } from '../inputs/contexts';
 
 type SegmentBase = { id: string; label: string; value: string };
 
@@ -39,8 +38,6 @@ const SegmentedControl = ({
   segments,
   onChange,
 }: SegmentedControlProps) => {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
-
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -98,8 +95,7 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
-        role={mode !== 'input' ? 'tablist' : 'group'}
-        {...inputAttributes}
+        role={mode !== 'input' ? 'tablist' : undefined}
       >
         {segmentsWithRefs.map((segment) => {
           const onSelect = () => {

package/src/tabs/TabList.js

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const TabList = ({ children }) => {
+  return (
+    <ul className="tabs__tab-list" role="tablist">
+      {children}
+    </ul>
+  );
+};
+
+TabList.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+};
+
+export default TabList;

package/src/tabs/Tabs.story.js

@@ -0,0 +1,135 @@
+import { useState } from 'react';
+
+import { Size, Width } from '../common';
+
+import Tabs from './Tabs';
+
+export default {
+  component: Tabs,
+  title: 'Navigation/Tabs',
+};
+
+export const Basic = () => {
+  const [selected, setSelected] = useState(0);
+  return (
+    <Tabs
+      className="tabs-custom-class"
+      name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
+      tabs={[
+        {
+          title: 'Title 1',
+          disabled: false,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+        {
+          title: 'Title 2',
+          disabled: false,
+          content: (
+            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+          ),
+        },
+        {
+          title: 'Title 3',
+          disabled: true,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+      ]}
+      selected={selected}
+      animatePanelsOnClick
+      onTabSelect={(index) => setSelected(index)}
+    />
+  );
+};
+
+export const AutoTabHeaderWidth = () => {
+  const [selected, setSelected] = useState(0);
+  return (
+    <Tabs
+      className="tabs-custom-class"
+      name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
+      headerWidth={Width.AUTO}
+      tabs={[
+        {
+          title: 'Title 1',
+          disabled: false,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+        {
+          title: 'Title 2',
+          disabled: false,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+        {
+          title: 'Title 3',
+          disabled: true,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+      ]}
+      selected={selected}
+      onTabSelect={(index) => setSelected(index)}
+    />
+  );
+};
+
+export const NoPanelAnimation = () => {
+  const [selected, setSelected] = useState(0);
+  return (
+    <Tabs
+      animatePanels={false}
+      className="tabs-custom-class"
+      name="tabs-docs"
+      transitionSpacing={Size.MEDIUM}
+      tabs={[
+        {
+          title: 'Title 1',
+          disabled: false,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+        {
+          title: 'Title 2',
+          disabled: false,
+          content: (
+            <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
+          ),
+        },
+        {
+          title: 'Title 3',
+          disabled: true,
+          content: (
+            <div className="p-a-2">
+              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
+            </div>
+          ),
+        },
+      ]}
+      selected={selected}
+      onTabSelect={(index) => setSelected(index)}
+    />
+  );
+};

package/src/tabs/TabList.tsx

@@ -1,15 +0,0 @@
-import { useInputAttributes } from '../inputs/contexts';
-
-export interface TabListProps {
-  children?: React.ReactNode;
-}
-
-export default function TabList({ children }: TabListProps) {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
-
-  return (
-    <ul className="tabs__tab-list" role="tablist" {...inputAttributes}>
-      {children}
-    </ul>
-  );
-}

package/src/tabs/Tabs.rtl.spec.tsx

@@ -1,40 +0,0 @@
-import { Field } from '../field/Field';
-import { render, screen } from '../test-utils';
-
-import Tabs from '.';
-
-describe('Tabs', () => {
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field label="Label">
-        <Tabs
-          tabs={[
-            {
-              title: 'Title 1',
-              disabled: false,
-              content: (
-                <div className="p-a-2">
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis
-                  similique
-                </div>
-              ),
-            },
-            {
-              title: 'Title 2',
-              disabled: false,
-              content: (
-                <div className="p-a-2">
-                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
-                </div>
-              ),
-            },
-          ]}
-          name="tabs-test"
-          selected={0}
-          onTabSelect={() => {}}
-        />
-      </Field>,
-    );
-    expect(screen.getByRole('tablist')).toHaveAccessibleName(/^Label/);
-  });
-});

package/src/tabs/Tabs.story.tsx

@@ -1,88 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { Size, Width } from '../common';
-import { Field } from '../field/Field';
-
-import Tabs from './Tabs';
-
-const meta = {
-  component: Tabs,
-  title: 'Navigation/Tabs',
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic = {
-  args: {
-    tabs: [
-      {
-        title: 'Title 1',
-        disabled: false,
-        content: (
-          <div className="p-a-2">
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-          </div>
-        ),
-      },
-      {
-        title: 'Title 2',
-        disabled: false,
-        content: (
-          <div className="p-a-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
-        ),
-      },
-      {
-        title: 'Title 3',
-        disabled: true,
-        content: (
-          <div className="p-a-2">
-            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum totam debitis similique
-          </div>
-        ),
-      },
-    ],
-  },
-  render: function Render(args) {
-    const [selected, setSelected] = useState(0);
-    return (
-      <Tabs
-        className="tabs-custom-class"
-        name="tabs-docs"
-        transitionSpacing={Size.MEDIUM}
-        selected={selected}
-        animatePanelsOnClick
-        onTabSelect={(index: number) => setSelected(index)}
-        {...args}
-      />
-    );
-  },
-} satisfies Story;
-
-export const AutoTabHeaderWidth = {
-  ...Basic,
-  args: {
-    ...Basic.args,
-    headerWidth: Width.AUTO,
-  },
-} satisfies Story;
-
-export const NoPanelAnimation = {
-  ...Basic,
-  args: {
-    ...Basic.args,
-    animatePanelsOnClick: false,
-  },
-} satisfies Story;
-
-export const WithinField = {
-  ...Basic,
-  decorators: [
-    (Story) => (
-      <Field label="Label">
-        <Story />
-      </Field>
-    ),
-  ],
-} satisfies Story;