@transferwise/components 0.0.0-experimental-94569f6 → 0.0.0-experimental-5769182

package/src/field/Field.tsx

@@ -15,15 +15,28 @@ export type FieldProps = {
   /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
   id?: string | null;
   label: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEUTRAL}` prop instead */
   hint?: React.ReactNode;
+  message?: React.ReactNode;
+  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */
   error?: React.ReactNode;
+  sentiment?: `${Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.POSITIVE | Sentiment.WARNING}`;
   className?: string;
   children?: React.ReactNode;
 };
 
-export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
-  const hasError = Boolean(error);
-  const hasHint = Boolean(hint) && !hasError;
+export const Field = ({
+  id,
+  label,
+  message: propMessage,
+  sentiment: propType,
+  className,
+  children,
+  ...props
+}: FieldProps) => {
+  const sentiment = props.error ? Sentiment.NEGATIVE : propType;
+  const message = props.error || props.hint || propMessage;
+  const hasError = sentiment === Sentiment.NEGATIVE;
 
   const labelId = useId();
 
@@ -35,14 +48,16 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={hasError || hasHint ? descriptionId : undefined}>
+        <InputDescribedByProvider value={message ? descriptionId : undefined}>
           <InputInvalidProvider value={hasError}>
             <div
               className={classNames(
                 'form-group d-block',
                 {
+                  'has-success': sentiment === Sentiment.POSITIVE,
+                  'has-warning': sentiment === Sentiment.WARNING,
                   'has-error': hasError,
-                  'has-info': hasHint,
+                  'has-info': sentiment === Sentiment.NEUTRAL,
                 },
                 className,
               )}
@@ -51,14 +66,9 @@ export const Field = ({ id, label, hint, error, className, children }: FieldProp
                 {label}
                 {children}
               </Label>
-              {hasHint && (
-                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
-                  {hint}
-                </InlineAlert>
-              )}
-              {hasError && (
-                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
-                  {error}
+              {message && (
+                <InlineAlert type={sentiment} id={descriptionId}>
+                  {message}
                 </InlineAlert>
               )}
             </div>

package/src/inlineAlert/InlineAlert.story.tsx

@@ -51,7 +51,7 @@ export const Basic = () => {
 
   return (
     <>
-      {/*eslint-disable-next-line react/no-adjacent-inline-elements */}
+      {/* eslint-disable-next-line react/no-adjacent-inline-elements */}
       <p>
         The styling for the input (the coloured border) and the visibility of the inline alert is
         controlled through the use of <code>has-***</code> classes which are applied to the{' '}
@@ -60,7 +60,11 @@ export const Basic = () => {
         element. The available classes are <code>has-error</code>, <code>has-info</code>,{' '}
         <code>has-warning</code> and <code>has-success</code>.
       </p>
-      <p>Where possible consumers should use Field instead of doing this manually.</p>
+      <p>
+        Where possible consumers should use{' '}
+        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
+        this manually.
+      </p>
       <div className={`form-group ${typeClass}`}>
         <label className="control-label" htmlFor="id0">
           Toggleable
@@ -73,14 +77,18 @@ export const Basic = () => {
           Negative
         </label>
         <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="error">{message}</InlineAlert>
+        <InlineAlert type="negative">{message}</InlineAlert>
       </div>
-      <div className="form-group has-positive">
+      <div className="form-group has-success">
         <label className="control-label" htmlFor="id2">
           Positive
         </label>
         <Input id="id2" value="Neptune is cool" />
-        <InlineAlert type="positive">{message}</InlineAlert>
+        <InlineAlert type="positive">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </InlineAlert>
       </div>
       <div className="form-group has-neutral">
         <label className="control-label" htmlFor="id3">

package/src/inlineAlert/InlineAlert.tsx

@@ -1,8 +1,8 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
-import { Sentiment } from '../common';
+import { Sentiment, Size } from '../common';
+import StatusIcon from '../statusIcon';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,15 +17,22 @@ export default function InlineAlert({
   className,
   children,
 }: InlineAlertProps) {
-  const danger = type === 'negative' || type === 'error';
   return (
     <div
       role="alert"
       id={id}
-      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
+      className={classNames(
+        'alert alert-detach',
+        `alert-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type as Sentiment) ? 'danger' : type}`,
+        className,
+      )}
     >
-      {danger && <AlertCircleIcon />}
-      <div>{children}</div>
+      <div className="d-inline-flex">
+        {type !== Sentiment.NEUTRAL && type !== Sentiment.PENDING && (
+          <StatusIcon sentiment={type} size={Size.SMALL} />
+        )}
+        <div className="np-text-body-default">{children}</div>
+      </div>
     </div>
   );
 }

package/src/inputs/SelectInput.css

@@ -2,36 +2,66 @@
   position: relative;
   z-index: 1060;
 }
+.np-bottom-sheet-v2-backdrop-container--enter,
+.np-bottom-sheet-v2-backdrop-container--leave {
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop-container--enter-from,
+.np-bottom-sheet-v2-backdrop-container--leave-to {
+  opacity: 0;
+}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop--closed {
-  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: 64px;
-  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  padding-left: 8px;
+  padding-left: var(--size-8);
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  padding-top: 64px;
+  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  display: flex;
   max-height: 100%;
+}
+.np-bottom-sheet-v2-content--enter,
+.np-bottom-sheet-v2-content--leave {
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter,
+  .np-bottom-sheet-v2-content--leave {
+    transition-property: opacity;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-content-inner-container {
+  display: flex;
+  height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -41,45 +71,30 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content:focus {
+.np-bottom-sheet-v2-content-inner-container:focus {
   outline: none;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content {
-    transition-property: transform;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-  .np-bottom-sheet-v2-content--closed {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-  .np-bottom-sheet-v2-content--closed {
-    opacity: 0;
-  }
-}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  display: flex;
-  flex-direction: column;
+  padding-top: 0px;
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto 1fr;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
-  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;

package/src/inputs/_BottomSheet.less

@@ -3,80 +3,98 @@
   z-index: 1060;
 }
 
+.np-bottom-sheet-v2-backdrop-container {
+  &--enter, &--leave {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
+  }
+
+  &--enter-from, &--leave-to {
+    opacity: 0;
+  }
+}
+
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: var(--color-content-primary);
   opacity: 0.4;
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-
-  &--closed {
-    opacity: 0;
-  }
 }
 
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
-  margin-left: var(--size-8);
-  margin-right: var(--size-8);
-  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+  padding-top: var(--size-64);
 }
 
 .np-bottom-sheet-v2-content {
-  display: flex;
   max-height: 100%;
-  flex-direction: column;
-  border-top-left-radius: 32px; /* TODO: Tokenize */
-  border-top-right-radius: 32px; /* TODO: Tokenize */
-  background-color: var(--color-background-elevated);
-  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
-
-  &:focus {
-    outline: none;
-  }
 
-  @media (prefers-reduced-motion: no-preference) {
+  &--enter, &--leave {
     transition-property: transform;
     transition-timing-function: ease-out;
     transition-duration: 300ms;
 
-    &--closed {
-      transform: translateY(100%);
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        transition-property: opacity;
+      }
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
+  &--enter-from, &--leave-to {
+    @media (prefers-reduced-motion: no-preference) {
+      & {
+        transform: translateY(100%);
+      }
+    }
 
-    &--closed {
-      opacity: 0;
+    @media (prefers-reduced-motion: reduce) {
+      & {
+        opacity: 0;
+      }
     }
   }
 }
 
+.np-bottom-sheet-v2-content-inner-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  border-top-left-radius: 32px; /* TODO: Tokenize */
+  border-top-right-radius: 32px; /* TODO: Tokenize */
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
+}
+
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: var(--size-16);
 }
 
 .np-bottom-sheet-v2-content-inner {
-  display: flex;
-  flex-direction: column;
+  padding-top: 0px;
+  display: grid;
   row-gap: var(--size-8);
-  overflow: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+
+  &--has-title {
+    grid-template-rows: auto 1fr;
+  }
 
   &--padding-md {
     padding: var(--size-16);
-    padding-top: 0px;
   }
 }
 

package/src/inputs/_BottomSheet.tsx

@@ -10,10 +10,9 @@ import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
 import { ThemeProvider, useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 
 import { CloseButton } from '../common/closeButton';
-import { useVirtualKeyboard } from '../common/hooks/useVirtualKeyboard';
 import { PreventScroll } from '../common/preventScroll/PreventScroll';
 import { Size } from '../common/propsValues/size';
 
@@ -43,8 +42,6 @@ export function BottomSheet({
   onClose,
   onCloseEnd,
 }: BottomSheetProps) {
-  useVirtualKeyboard();
-
   const { refs, context } = useFloating<Element>({
     open,
     onOpenChange: (value) => {
@@ -85,22 +82,28 @@ export function BottomSheet({
             afterLeave={onCloseEnd}
           >
             <Transition.Child
-              className="np-bottom-sheet-v2-backdrop"
-              enterFrom="np-bottom-sheet-v2-backdrop--closed"
-              leaveTo="np-bottom-sheet-v2-backdrop--closed"
-            />
+              enter="np-bottom-sheet-v2-backdrop-container--enter"
+              enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
+              leave="np-bottom-sheet-v2-backdrop-container--leave"
+              leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+            >
+              <div className="np-bottom-sheet-v2-backdrop" />
+            </Transition.Child>
 
             <div className="np-bottom-sheet-v2">
-              <FocusScope>
-                <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
-                  <Fragment
-                    key={floatingKey} // Force inner state invalidation on open
-                  >
-                    <Transition.Child
+              <Transition.Child
+                className="np-bottom-sheet-v2-content"
+                enter="np-bottom-sheet-v2-content--enter"
+                enterFrom="np-bottom-sheet-v2-content--enter-from"
+                leave="np-bottom-sheet-v2-content--leave"
+                leaveTo="np-bottom-sheet-v2-content--leave-to"
+              >
+                <FocusScope>
+                  <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+                    <div
+                      key={floatingKey} // Force inner state invalidation on open
                       ref={refs.setFloating}
-                      className="np-bottom-sheet-v2-content"
-                      enterFrom="np-bottom-sheet-v2-content--closed"
-                      leaveTo="np-bottom-sheet-v2-content--closed"
+                      className="np-bottom-sheet-v2-content-inner-container"
                       {...getFloatingProps()}
                     >
                       <div className="np-bottom-sheet-v2-header">
@@ -114,7 +117,10 @@ export function BottomSheet({
                       <div
                         className={classNames(
                           'np-bottom-sheet-v2-content-inner',
-                          padding === 'md' && 'np-bottom-sheet-v2-content-inner--padding-md',
+                          title && 'np-bottom-sheet-v2-content-inner--has-title',
+                          {
+                            'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                          },
                         )}
                       >
                         {title ? (
@@ -124,10 +130,10 @@ export function BottomSheet({
                           {children}
                         </div>
                       </div>
-                    </Transition.Child>
-                  </Fragment>
-                </FloatingFocusManager>
-              </FocusScope>
+                    </div>
+                  </FloatingFocusManager>
+                </FocusScope>
+              </Transition.Child>
             </div>
           </Transition>
         </ThemeProvider>

package/src/main.css

@@ -2400,36 +2400,66 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   position: relative;
   z-index: 1060;
 }
+.np-bottom-sheet-v2-backdrop-container--enter,
+.np-bottom-sheet-v2-backdrop-container--leave {
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+.np-bottom-sheet-v2-backdrop-container--enter-from,
+.np-bottom-sheet-v2-backdrop-container--leave-to {
+  opacity: 0;
+}
 .np-bottom-sheet-v2-backdrop {
   position: fixed;
   inset: 0px;
   background-color: #37517e;
   background-color: var(--color-content-primary);
   opacity: 0.4;
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-  transition-duration: 300ms;
-}
-.np-bottom-sheet-v2-backdrop--closed {
-  opacity: 0;
 }
 .np-bottom-sheet-v2 {
   position: fixed;
   inset: 0px;
-  bottom: env(keyboard-inset-height, 0px);
-  margin-left: 8px;
-  margin-left: var(--size-8);
-  margin-right: 8px;
-  margin-right: var(--size-8);
-  margin-top: 64px;
-  margin-top: var(--size-64);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  padding-left: 8px;
+  padding-left: var(--size-8);
+  padding-right: 8px;
+  padding-right: var(--size-8);
+  padding-top: 64px;
+  padding-top: var(--size-64);
 }
 .np-bottom-sheet-v2-content {
-  display: flex;
   max-height: 100%;
+}
+.np-bottom-sheet-v2-content--enter,
+.np-bottom-sheet-v2-content--leave {
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  transition-duration: 300ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter,
+  .np-bottom-sheet-v2-content--leave {
+    transition-property: opacity;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .np-bottom-sheet-v2-content--enter-from,
+  .np-bottom-sheet-v2-content--leave-to {
+    opacity: 0;
+  }
+}
+.np-bottom-sheet-v2-content-inner-container {
+  display: flex;
+  height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -2439,45 +2469,30 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content:focus {
+.np-bottom-sheet-v2-content-inner-container:focus {
   outline: none;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .np-bottom-sheet-v2-content {
-    transition-property: transform;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-  .np-bottom-sheet-v2-content--closed {
-    transform: translateY(100%);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .np-bottom-sheet-v2-content {
-    transition-property: opacity;
-    transition-timing-function: ease-out;
-    transition-duration: 300ms;
-  }
-  .np-bottom-sheet-v2-content--closed {
-    opacity: 0;
-  }
-}
 .np-bottom-sheet-v2-header {
   align-self: flex-end;
   padding: 16px;
   padding: var(--size-16);
 }
 .np-bottom-sheet-v2-content-inner {
-  display: flex;
-  flex-direction: column;
+  padding-top: 0px;
+  display: grid;
+  grid-row-gap: 8px;
+  grid-row-gap: var(--size-8);
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow: auto;
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+.np-bottom-sheet-v2-content-inner--has-title {
+  grid-template-rows: auto 1fr;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
-  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -4193,14 +4208,16 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/src/statusIcon/StatusIcon.css

@@ -66,13 +66,15 @@
     height: var(--size-32);
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }