@transferwise/components 0.0.0-experimental-4f00ba7 → 0.0.0-experimental-cd38ca2

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,7 @@
 import { StoryFn, Meta } from '@storybook/react';
 
+import { Field } from '../field/Field';
+
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadResponse } from './types';
 
@@ -44,3 +46,12 @@ SingleFile.args = { ...props };
 
 export const MultipleFiles: Story = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
+
+export const WithinField: Story = Template.bind({});
+WithinField.decorators = [
+  (Story) => (
+    <Field message="Something went wrong" sentiment="negative">
+      <Story />
+    </Field>
+  ),
+];

package/src/uploadInput/UploadInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 
 import Button from '../button';
 import { CommonProps, ControlType, Priority, Status } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 import Modal from '../modal';
 import { isSizeValid } from '../upload/utils/isSizeValid';
 import { isTypeValid } from '../upload/utils/isTypeValid';
@@ -127,6 +128,8 @@ const UploadInput = ({
   sizeLimitErrorMessage,
   uploadButtonTitle,
 }: UploadInputProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
@@ -299,7 +302,11 @@ const UploadInput = ({
 
   return (
     <>
-      <div className={classNames('np-upload-input', className, { disabled })}>
+      <div
+        role="group"
+        className={classNames('np-upload-input', className, { disabled })}
+        {...inputAttributes}
+      >
         {uploadedFiles.map((file) => (
           <UploadItem
             key={file.id}

package/src/tabs/TabList.tsx

@@ -1,11 +0,0 @@
-export interface TabListProps {
-  children?: React.ReactNode;
-}
-
-export default function TabList({ children }: TabListProps) {
-  return (
-    <ul className="tabs__tab-list" role="tablist">
-      {children}
-    </ul>
-  );
-}

package/src/tabs/Tabs.story.tsx

@@ -1,76 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { Size, Width } from '../common';
-
-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;