@transferwise/components 0.0.0-experimental-5d40786 → 0.0.0-experimental-2932cd5

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;