@transferwise/components 0.0.0-experimental-5125346 → 0.0.0-experimental-3b84ee4

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-5125346",
+  "version": "0.0.0-experimental-3b84ee4",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/responsivePanel/ResponsivePanel.tsx

@@ -16,6 +16,7 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
     onClose,
     open = false,
     position = Position.BOTTOM,
+    anchorWidth = false,
   }: PanelProps,
   reference,
 ) {
@@ -35,6 +36,7 @@ const ResponsivePanel = forwardRef<HTMLDivElement, PanelProps>(function Responsi
       arrow={arrow}
       open={open}
       position={position}
+      anchorWidth={anchorWidth}
       anchorRef={anchorRef}
       className={className}
       onClose={onClose}

package/src/i18n/en.json

@@ -23,6 +23,7 @@
   "neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",
   "neptune.SelectInput.noResultsFound": "No results found",
+  "neptune.SelectOption.action.label": "Choose",
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",

package/src/index.ts

@@ -3,6 +3,7 @@
  */
 export type { AccordionItem, AccordionProps } from './accordion';
 export type { ActionOptionProps } from './actionOption';
+export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
@@ -86,6 +87,7 @@ export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/ty
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
+export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
 export { default as AvatarWrapper } from './avatarWrapper';

package/src/inlineAlert/InlineAlert.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import { Sentiment, Size } from '../common';
 import StatusIcon from '../statusIcon';

package/src/main.css

@@ -1484,6 +1484,48 @@ button.np-option {
     border-radius: var(--radius-small);
   }
 }
+.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:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-select-option-placeholder:focus,
+.np-select-option-placeholder: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-section {
+  margin-top: 0 !important;
+}
+.has-error * .np-select-option {
+  --ring-outline-color: var(--color-sentiment-negative);
+  --ring-outline-offset: 0;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  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);
+}
 .np-panel__content {
   opacity: 0;
   visibility: hidden;
@@ -5402,9 +5444,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-color: #c9cbce !important;
   border-color: var(--color-interactive-secondary) !important;
 }
-.np-upload-button-container.droppable-dropping:before {
-  z-index: 2;
-}
 .np-upload-button-container input[type="file"] {
   opacity: 0;
   z-index: -1;
@@ -5415,7 +5454,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .np-upload-button {
   width: 100%;
-  border-top: 1px solid transparent;
   padding: 16px;
   padding: var(--padding-small);
   border-radius: 0;
@@ -5483,25 +5521,8 @@ label.np-upload-button:not(.disabled):active {
   color: var(--color-sentiment-negative) !important;
 }
 .np-theme-personal .np-upload-input-errors {
-  list-style: none;
   padding-left: 0;
-}
-.np-theme-personal .np-upload-input-errors li {
-  position: relative;
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-upload-input-errors li {
-    padding-left: 32px;
-    padding-left: var(--size-32);
-  }
-}
-.np-theme-personal .np-upload-input-errors li:before {
-  content: '•';
-  position: absolute;
-  display: block;
-  left: 0;
+  list-style-position: inside;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
@@ -5520,49 +5541,30 @@ label.np-upload-button:not(.disabled):active {
 .np-upload-item {
   border: 1px solid #c9cbce;
   border: 1px solid var(--color-interactive-secondary);
-  position: relative;
 }
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
+.np-upload-item:first-child ~ div:before {
   display: block;
-  position: absolute;
+  position: relative;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  left: 16px;
-  left: var(--size-16);
-  width: calc(100% - 2 * 16px);
-  width: calc(100% - 2 * var(--size-16));
-}
-.np-upload-item:first-child ~ div:not(.np-upload-item__link):before,
-.np-upload-item:not(:first-child).np-upload-item__link .np-upload-item--link:before {
-  top: 0;
-}
-.np-upload-item.np-upload-item__link:hover .np-upload-item--link:after {
-  bottom: -1px;
+  margin: 0 16px;
+  margin: 0 var(--size-16);
 }
 .np-upload-item:first-child ~ div {
-  border-top: 1px;
-}
-.np-upload-item:not(:first-child) .np-upload-item--link:hover {
-  border-top-color: rgba(0,0,0,0.10196);
-  border-top-color: var(--color-border-neutral);
+  border-top: 0;
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover + .np-upload-item:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-item .np-upload-item--link:before,
-.np-upload-item.np-upload-item__link:hover + .np-upload-button-container .np-upload-item--link:before {
-  display: none;
+.np-upload-item.np-upload-item__link:hover:before,
+.np-upload-button-container:hover:before {
+  margin: 0 !important;
 }
-.np-upload-button-container:hover:before,
-.np-upload-button-container.droppable-dropping:before {
-  left: 0 !important;
-  width: 100% !important;
+.np-upload-item.np-upload-item__link:hover + div:before,
+.np-upload-button-container:hover + div:before {
+  margin: 0 !important;
 }
 .np-upload-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5579,29 +5581,17 @@ label.np-upload-button:not(.disabled):active {
   flex: 1;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-top: 1px solid transparent;
   border-radius: inherit;
 }
 .np-upload-item__link a:focus-visible {
   outline-offset: -2px;
 }
-.np-upload-item__link a:hover:before {
-  display: none !important;
-}
-.np-upload-item__link a:hover:after {
-  left: 0 !important;
-  width: 100% !important;
-}
 .np-upload-item__link a:hover,
 .np-upload-item__link a:active {
   -webkit-text-decoration: none;
   text-decoration: none;
-}
-.np-upload-item__link a:hover .np-upload-button,
-.np-upload-item__link a:active .np-upload-button {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border-radius: inherit;
 }
 .np-upload-item__body {
   display: flex;
@@ -5626,7 +5616,6 @@ label.np-upload-button:not(.disabled):active {
   outline-offset: 0 !important;
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
-  border: none;
   color: var(--color-interactive-primary);
   right: 16px;
   right: var(--size-16);

package/src/main.less

@@ -13,6 +13,7 @@
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";
 @import "./common/Option/Option.less";
+@import "./selectOption/SelectOption.less";
 @import "./common/panel/Panel.less";
 @import "./common/RadioButton/RadioButton.less";
 @import "./dateInput/DateInput.less";

package/src/selectOption/SelectOption.css

@@ -0,0 +1,42 @@
+.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:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-select-option-placeholder:focus,
+.np-select-option-placeholder: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-section {
+  margin-top: 0 !important;
+}
+.has-error * .np-select-option {
+  --ring-outline-color: var(--color-sentiment-negative);
+  --ring-outline-offset: 0;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 0;
+  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

@@ -0,0 +1,40 @@
+@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);
+
+    &:hover {
+      background-color: var(--color-background-neutral-hover);
+    }
+  
+    &:focus,
+    &:active {
+      background-color: var(--color-background-neutral-active);
+    }
+  }
+
+  &-selected {
+    border: 1px solid var(--color-interactive-secondary);
+  }
+
+  &-list {
+    max-height: 350px;
+    overflow-y: auto;
+  }
+
+  &-section {
+    // override large margin in Section & Header
+    margin-top: 0 !important;
+  }
+
+  .has-error * & {
+    .ring-negative();
+    .ring-offset-0();
+    .ring();
+    .focus-ring();
+  }
+}

package/src/selectOption/SelectOption.messages.ts

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

package/src/selectOption/SelectOption.spec.tsx

@@ -0,0 +1,101 @@
+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', {
+      name: /choose/i,
+    });
+
+    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', {
+      name: /choose/i,
+    });
+
+    await userEvent.click(button);
+
+    dialog = screen.queryByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('shows options', async () => {
+    render(<SelectOptionExample />);
+
+    const button = screen.getByRole('button', {
+      name: /choose/i,
+    });
+
+    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', {
+      name: /pick/i,
+    });
+
+    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.queryByRole('button', {
+        name: /pick/i,
+      }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryAllByTestId('chevron-up-icon')).toHaveLength(1);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});