@transferwise/components 0.0.0-experimental-9462b09 → 0.0.0-experimental-2645631

package/src/segmentedControl/SegmentedControl.story.tsx

@@ -1,14 +1,18 @@
-import { StoryFn } from '@storybook/react';
-import React from 'react';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
 
 import Button from '../button';
 
 import SegmentedControl from './SegmentedControl';
+import { Field } from '../field/Field';
 
-export default {
+const meta = {
   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([
@@ -91,3 +95,37 @@ 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,6 +3,7 @@ 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 };
 
@@ -38,6 +39,8 @@ const SegmentedControl = ({
   segments,
   onChange,
 }: SegmentedControlProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [animate, setAnimate] = useState(false);
 
   const segmentsRef = useRef<HTMLDivElement>(null);
@@ -95,7 +98,8 @@ const SegmentedControl = ({
         className={classNames('segmented-control__segments', {
           'segmented-control__segments--no-animate': !animate,
         })}
-        role={mode !== 'input' ? 'tablist' : undefined}
+        role={mode !== 'input' ? 'tablist' : 'group'}
+        {...inputAttributes}
       >
         {segmentsWithRefs.map((segment) => {
           const onSelect = () => {

package/src/ssr.spec.js

@@ -226,7 +226,6 @@ describe('Server side rendering', () => {
       DateLookup: { value: new Date() },
       Link: { size: 16 },
       Tooltip: { children: <>yo</> },
-      SelectOption: { placeholder: { media: <img alt="img" /> } },
     };
 
     const { Provider } = exposedLibraryItems;

package/src/tabs/TabList.tsx

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,88 @@
+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;

package/build/styles/selectOption/SelectOption.css

@@ -1,47 +0,0 @@
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.form-group label > .np-select-option {
-  margin-bottom: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}

package/build/types/selectOption/SelectOption.d.ts

@@ -1,21 +0,0 @@
-import { ActionButtonProps } from '../actionButton';
-import type { OptionProps } from '../common/Option/Option';
-import { HeaderProps } from '../header/Header';
-export type SelectOptiopsSection<T = unknown> = {
-    title?: HeaderProps['title'];
-    options: SelectOptionValue<T>[];
-};
-export type SelectOptionValue<T = unknown> = Pick<OptionProps, 'media' | 'title' | 'content' | 'disabled'> & {
-    value?: T;
-};
-export type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {
-    actionLabel?: ActionButtonProps['children'];
-};
-export type SelectOptionProps<T = unknown> = {
-    onChange: (selected: SelectOptionValue<T>) => void;
-    selected?: SelectOptionValue<T>;
-    options: SelectOptiopsSection<T>[];
-    placeholder: SelectOptionPlaceholder;
-} & Omit<OptionProps, 'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'>;
-export default function SelectOption<T>({ selected: selectedValueProp, options, onChange, placeholder, disabled, ...props }: SelectOptionProps<T>): import("react").JSX.Element;
-//# sourceMappingURL=SelectOption.d.ts.map

package/build/types/selectOption/SelectOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CAC/C,WAAW,EACX,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAC3C,GAAG;IACF,KAAK,CAAC,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC3C,QAAQ,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAChC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,WAAW,EAAE,uBAAuB,CAAC;CACtC,GAAG,IAAI,CACN,WAAW,EACX,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,qBAAqB,GAAG,UAAU,CACnG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,CAAC,EAAE,EACtC,QAAQ,EAAE,iBAA6B,EACvC,OAAO,EACP,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAmGtB"}

package/build/types/selectOption/SelectOption.messages.d.ts

@@ -1,12 +0,0 @@
-declare const _default: {
-    actionLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-    selectedActionLabel: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-export default _default;
-//# sourceMappingURL=SelectOption.messages.d.ts.map

package/build/types/selectOption/SelectOption.messages.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.messages.d.ts","sourceRoot":"","sources":["../../../src/selectOption/SelectOption.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBASG"}

package/build/types/selectOption/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './SelectOption';
-export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './SelectOption';
-//# sourceMappingURL=index.d.ts.map

package/build/types/selectOption/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selectOption/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}

package/src/selectOption/SelectOption.css

@@ -1,47 +0,0 @@
-.np-select-option {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  padding: 16px;
-  padding: var(--size-16);
-}
-.np-select-option-placeholder {
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-select-option-placeholder:not(.disabled):hover {
-  background-color: var(--color-background-neutral-hover);
-}
-.np-select-option-placeholder:not(.disabled):focus,
-.np-select-option-placeholder:not(.disabled):active {
-  background-color: var(--color-background-neutral-active);
-}
-.np-select-option-selected {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-}
-.np-select-option-list {
-  max-height: 350px;
-  overflow-y: auto;
-}
-.np-select-option-list > .np-section {
-  margin-top: 0;
-}
-.form-group label > .np-select-option {
-  margin-bottom: 0;
-}
-.has-error * .np-select-option {
-  --ring-outline-color: var(--color-sentiment-negative);
-  --ring-outline-width: 3px;
-  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
-  outline: var(--ring-outline-color) solid 3px;
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: calc(-1 * 3px);
-  outline-offset: var(--ring-outline-offset);
-}
-.has-error * .np-select-option:focus {
-  outline: none;
-}
-.has-error * .np-select-option:focus-visible {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}

package/src/selectOption/SelectOption.less

@@ -1,45 +0,0 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
-
-.np-select-option {
-  border-radius: var(--radius-small);
-  padding: var(--size-16);
-
-  &-placeholder {
-    background-color: var(--color-background-neutral);
-
-    &:not(.disabled):hover {
-      background-color: var(--color-background-neutral-hover);
-    }
-  
-    &:not(.disabled):focus,
-    &:not(.disabled):active {
-      background-color: var(--color-background-neutral-active);
-    }
-  }
-
-  &-selected {
-    border: 1px solid var(--color-interactive-secondary);
-  }
-
-  &-list {
-    max-height: 350px;
-    overflow-y: auto;
-
-    & > .np-section {
-      // remove large margin in Section & Header
-      margin-top: 0;
-    }
-  }
-
-  .form-group label > & {
-    // remove margin-bottom for label
-    margin-bottom: 0;
-  }
-
-  .has-error * & {
-    .ring-negative();
-    .ring-inset();
-    .ring();
-    .focus-ring();
-  }
-}

package/src/selectOption/SelectOption.messages.ts

@@ -1,12 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  actionLabel: {
-    id: 'neptune.SelectOption.action.label',
-    defaultMessage: 'Choose',
-  },
-  selectedActionLabel: {
-    id: 'neptune.SelectOption.selected.action.label',
-    defaultMessage: 'Change chosen option',
-  },
-});

package/src/selectOption/SelectOption.spec.tsx

@@ -1,89 +0,0 @@
-import { render, userEvent, screen, within, mockMatchMedia } from '../test-utils';
-import { composeStories } from '@storybook/react';
-import * as stories from './SelectOption.story';
-import { Breakpoint } from '../common';
-import { wait } from '../test-utils/wait';
-
-const { Basic: SelectOptionExample } = composeStories(stories);
-
-mockMatchMedia();
-
-describe('Select Option', () => {
-  it('opens dropdown on desktop view', async () => {
-    render(<SelectOptionExample />);
-
-    let dialog = screen.queryByRole('dialog');
-    expect(dialog).not.toBeInTheDocument();
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    dialog = screen.queryByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-  });
-
-  it('opens bottom sheet on mobile view', async () => {
-    // mock mobile view
-    window.innerWidth = Breakpoint.EXTRA_SMALL;
-
-    render(<SelectOptionExample />);
-
-    let dialog = screen.queryByRole('dialog');
-    expect(dialog).not.toBeInTheDocument();
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    dialog = screen.queryByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-  });
-
-  it('shows options', async () => {
-    render(<SelectOptionExample />);
-
-    const button = screen.getByRole('button');
-
-    await userEvent.click(button);
-
-    const dialog = screen.getByRole('dialog');
-    const sectionHeaders = within(dialog).getAllByRole('heading', { name: /balances|jars/i });
-    expect(sectionHeaders).toHaveLength(2);
-
-    const options = within(dialog).getAllByRole('heading', { level: 4 });
-    expect(options).toHaveLength(5);
-  });
-
-  it('choose option', async () => {
-    // mock mobile view
-    window.innerWidth = Breakpoint.EXTRA_SMALL;
-
-    const onClickHandler = jest.fn();
-    render(
-      <SelectOptionExample
-        placeholder={{ title: 'Please choose balance', actionLabel: 'Pick' }}
-        onChange={onClickHandler}
-      />,
-    );
-
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveTextContent('Pick');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    await userEvent.click(button);
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-    const pickedOption = within(screen.getByRole('dialog')).getByText('Trip to Mars');
-
-    expect(onClickHandler).not.toHaveBeenCalled();
-    await userEvent.click(pickedOption);
-    expect(onClickHandler).toHaveBeenCalledTimes(1);
-
-    // wait for dialog to close
-    await wait(500);
-    expect(screen.getByText('Trip to Mars')).toBeInTheDocument();
-    expect(screen.queryAllByTestId('chevron-down-icon')).toHaveLength(1);
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-  });
-});