@transferwise/components 0.0.0-experimental-7709e0e → 0.0.0-experimental-94569f6

package/src/field/Field.tsx

@@ -15,28 +15,15 @@ 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,
-  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;
+export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
 
   const labelId = useId();
 
@@ -48,16 +35,14 @@ export const Field = ({
   return (
     <FieldLabelIdContextProvider value={labelId}>
       <InputIdContextProvider value={inputId}>
-        <InputDescribedByProvider value={message ? descriptionId : undefined}>
+        <InputDescribedByProvider value={hasError || hasHint ? 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': sentiment === Sentiment.NEUTRAL,
+                  'has-info': hasHint,
                 },
                 className,
               )}
@@ -66,9 +51,14 @@ export const Field = ({
                 {label}
                 {children}
               </Label>
-              {message && (
-                <InlineAlert type={sentiment} id={descriptionId}>
-                  {message}
+              {hasHint && (
+                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
+                  {hint}
+                </InlineAlert>
+              )}
+              {hasError && (
+                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
+                  {error}
                 </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,11 +60,7 @@ 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{' '}
-        <a href="https://storybook.wise.design/?path=/story/field--basic">Field</a> instead of doing
-        this manually.
-      </p>
+      <p>Where possible consumers should use Field instead of doing this manually.</p>
       <div className={`form-group ${typeClass}`}>
         <label className="control-label" htmlFor="id0">
           Toggleable
@@ -77,18 +73,14 @@ export const Basic = () => {
           Negative
         </label>
         <Input id="id1" value="Neptune is cool" />
-        <InlineAlert type="negative">{message}</InlineAlert>
+        <InlineAlert type="error">{message}</InlineAlert>
       </div>
-      <div className="form-group has-success">
+      <div className="form-group has-positive">
         <label className="control-label" htmlFor="id2">
           Positive
         </label>
         <Input id="id2" value="Neptune is cool" />
-        <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>
+        <InlineAlert type="positive">{message}</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 React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
-import { Sentiment, Size } from '../common';
-import StatusIcon from '../statusIcon';
+import { Sentiment } from '../common';
 
 export interface InlineAlertProps {
   id?: string;
@@ -17,22 +17,15 @@ 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-${[Sentiment.NEGATIVE, Sentiment.ERROR].includes(type as Sentiment) ? 'danger' : type}`,
-        className,
-      )}
+      className={classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className)}
     >
-      <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>
+      {danger && <AlertCircleIcon />}
+      <div>{children}</div>
     </div>
   );
 }

package/src/inputs/SelectInput.css

@@ -2,66 +2,36 @@
   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 {
-  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%;
+  max-height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -71,30 +41,45 @@
   background-color: var(--color-background-elevated);
   box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
 }
-.np-bottom-sheet-v2-content-inner-container:focus {
+.np-bottom-sheet-v2-content: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 {
-  padding-top: 0px;
-  display: grid;
-  grid-row-gap: 8px;
-  grid-row-gap: var(--size-8);
+  display: flex;
+  flex-direction: column;
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-.np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  overflow: auto;
 }
 .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,98 +3,80 @@
   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;
+  }
 
-  &--enter, &--leave {
+  @media (prefers-reduced-motion: no-preference) {
     transition-property: transform;
     transition-timing-function: ease-out;
     transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        transition-property: opacity;
-      }
+    &--closed {
+      transform: translateY(100%);
     }
   }
 
-  &--enter-from, &--leave-to {
-    @media (prefers-reduced-motion: no-preference) {
-      & {
-        transform: translateY(100%);
-      }
-    }
+  @media (prefers-reduced-motion: reduce) {
+    transition-property: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 300ms;
 
-    @media (prefers-reduced-motion: reduce) {
-      & {
-        opacity: 0;
-      }
+    &--closed {
+      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 {
-  padding-top: 0px;
-  display: grid;
+  display: flex;
+  flex-direction: column;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-
-  &--has-title {
-    grid-template-rows: auto 1fr;
-  }
+  overflow: auto;
 
   &--padding-md {
     padding: var(--size-16);
+    padding-top: 0px;
   }
 }
 

package/src/inputs/_BottomSheet.tsx

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

package/src/main.css

@@ -2400,66 +2400,36 @@ 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 {
-  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%;
+  max-height: 100%;
   flex-direction: column;
   border-top-left-radius: 32px;
   /* TODO: Tokenize */
@@ -2469,30 +2439,45 @@ 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-inner-container:focus {
+.np-bottom-sheet-v2-content: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 {
-  padding-top: 0px;
-  display: grid;
-  grid-row-gap: 8px;
-  grid-row-gap: var(--size-8);
+  display: flex;
+  flex-direction: column;
   row-gap: 8px;
   row-gap: var(--size-8);
-  overflow-y: auto;
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-.np-bottom-sheet-v2-content-inner--has-title {
-  grid-template-rows: auto 1fr;
+  overflow: auto;
 }
 .np-bottom-sheet-v2-content-inner--padding-md {
   padding: 16px;
   padding: var(--size-16);
+  padding-top: 0px;
 }
 .np-bottom-sheet-v2-title {
   color: #37517e;
@@ -4208,16 +4193,14 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-32);
   }
 }
-.status-circle.negative,
-.status-circle.error {
+.status-circle.negative {
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.neutral {
   background-color: #5d7079;
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive,
-.status-circle.success {
+.status-circle.positive {
   background-color: var(--color-sentiment-positive);
 }
 .tw-stepper {

package/src/statusIcon/StatusIcon.css

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