@transferwise/components 46.52.2 → 46.53.0

package/src/card/Card.story.tsx

@@ -1,54 +1,70 @@
-import { select, text } from '@storybook/addon-knobs';
+import { Meta, StoryObj } from '@storybook/react';
 import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { useState } from 'react';
+import { fn } from '@storybook/test';
 
 import Card from '.';
-import { CardProps } from './Card';
+
+type Story = StoryObj<typeof Card>;
 
 export default {
   component: Card,
   title: 'Layouts/Card',
-};
+  args: {
+    title: 'A card',
+    details: 'Some details about this card',
+    children: 'Lorem ipsum dolor sit amet.',
+    onClick: fn(),
+    as: 'div',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
 
-const Template = (props: Pick<CardProps, 'isExpanded' | 'icon' | 'onClick'>) => {
-  const elementType = select('elementType', ['div', 'li'], 'div');
-  const title = text('title', 'A card');
-  const details = text('details', 'Some details about this card');
-  const content = text('content', 'Lorem ipsum dolor sit amet.');
-
-  return (
-    <Card as={elementType} title={title} details={details} {...props}>
-      {content}
-    </Card>
-  );
-};
 
-export const Basic = () => {
-  const [isExpanded, setIsExpanded] = useState(false);
+export const Basic: Story = {
+  render: function Render(args) {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    const handleClick = (isCurrentExpanded: boolean) => {
+      setIsExpanded(isCurrentExpanded)
+      args?.onClick?.(!isExpanded);
+    }
 
-  return <Template isExpanded={isExpanded} onClick={setIsExpanded} />;
+    return <Card {...args} isExpanded={isExpanded} onClick={handleClick} />;
+  }
 };
 
-export const Multiple = () => {
-  const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
-
-  const handleOnCardClick = (index: number) => {
-    setExpandedCardIndex(index !== expandedCardIndex ? index : null);
-  };
-
-  return (
-    <>
-      <Template
-        icon={<FastFlagIcon />}
-        isExpanded={expandedCardIndex === 0}
-        onClick={() => handleOnCardClick(0)}
-      />
-      <Template
-        icon={<FastFlagIcon />}
-        isExpanded={expandedCardIndex === 1}
-        onClick={() => handleOnCardClick(1)}
-      />
-      <Template isExpanded={expandedCardIndex === 2} onClick={() => handleOnCardClick(2)} />
-    </>
-  );
+
+export const Multiple: Story = {
+  render: function Render(args) {
+    const [expandedCardIndex, setExpandedCardIndex] = useState<number | null>(0);
+
+    const handleOnCardClick = (index: number) => {
+      args?.onClick?.(index !== expandedCardIndex);
+      setExpandedCardIndex(index !== expandedCardIndex ? index : null);
+    };
+
+    return (
+      <>
+        <Card
+          {...args}
+          icon={<FastFlagIcon />}
+          isExpanded={expandedCardIndex === 0}
+          onClick={() => handleOnCardClick(0)}
+        />
+        <Card
+          {...args}
+          icon={<FastFlagIcon />}
+          isExpanded={expandedCardIndex === 1}
+          onClick={() => handleOnCardClick(1)}
+        />
+        <Card
+          {...args}
+          icon={<FastFlagIcon />}
+          isExpanded={expandedCardIndex === 2}
+          onClick={() => handleOnCardClick(2)}
+        />
+      </>
+    );
+  }
 };

package/src/card/Card.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 
 import Body from '../body';
 import Chevron from '../chevron';
@@ -40,13 +40,16 @@ const Card = forwardRef(function Card(
   }: CardProps,
   reference,
 ) {
-  const isOpen = !!(isExpanded && children);
+  const labelId = useId();
+  const contentId = useId();
+  const isExpandable = Boolean(children);
+
 
   return (
     <Element
       ref={reference}
       className={clsx('np-card', className, {
-        'np-card--expanded': isOpen,
+        'np-card--expanded': isExpandable && isExpanded,
         'np-card--inactive': !children,
         'np-card--has-icon': !!icon,
       })}
@@ -54,23 +57,38 @@ const Card = forwardRef(function Card(
       data-testid={dataTestId}
     >
       <Option
+        aria-expanded={isExpandable ? isExpanded : undefined}
+        aria-controls={isExpanded ? contentId : undefined}
+        id={labelId}
         aria-label={ariaLabel}
-        as={children ? 'button' : 'div'}
-        className={clsx('np-card__button')}
+        as={isExpandable ? 'button' : 'div'}
+        className="np-card__button"
         media={icon}
         title={title}
         content={details}
         showMediaAtAllSizes
-        button={children && <Chevron orientation={isOpen ? Position.TOP : Position.BOTTOM} />}
-        onClick={children ? () => onClick?.(!isExpanded) : undefined}
-      />
-      <div
-        className={clsx('np-card__divider', {
-          'np-card__divider--expanded': isOpen,
-        })}
+        button={
+          isExpandable ? <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} /> : null
+        }
+        onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}
       />
-      {isOpen && (
-        <Body as="span" type={Typography.BODY_LARGE} className="np-card__content d-block">
+
+      {isExpandable && (
+        <div
+          className={clsx('np-card__divider', {
+            'np-card__divider--expanded': isExpanded,
+          })}
+        />
+      )}
+
+      {isExpandable && isExpanded && (
+        <Body
+          as="div"
+          type={Typography.BODY_LARGE}
+          className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}
+          id={contentId}
+          aria-labelledby={labelId}
+        >
           {children}
         </Body>
       )}

package/src/common/Option/Option.tsx

@@ -6,6 +6,8 @@ import { LinkProps } from '../commonProps';
 
 export interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {
   'aria-label'?: string;
+  'aria-expanded'?: boolean;
+  'aria-controls'?: string;
   media?: ReactNode;
   name?: string;
   htmlFor?: string;

package/src/dateInput/DateInput.tests.story.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within, fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, Field } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
 import Provider from '../provider/Provider';
@@ -38,45 +38,10 @@ export const WithLabel = {
     onChange: fn(),
   },
   render: (args) => {
-    const id1 = 'date-input-group-label-1';
-    const label = 'Date of Birth';
-
     return (
-      <>
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
-          <code>aria-labelledby</code> prop
-        </Title>
-        <div className="control-label" id={id1}>
-          Date of Delivery
-        </div>
-        <DateInput {...args} aria-labelledby={id1} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
-          via <code>aria-label</code> attribute
-        </Title>
-        <div className="control-label">
-          {label}{' '}
-          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
-        </div>
-        <DateInput {...args} aria-label={label} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
-          label (rare use case)
-        </Title>
-        <fieldset>
-          <legend className="control-label">
-            Expiry Date for Credit Card (example of MONTH_YEAR mode)
-          </legend>
-          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
-        </fieldset>
-      </>
+      <Field label="Date of Delivery">
+        <DateInput {...args} />
+      </Field>
     );
   },
 } satisfies Story;
@@ -84,10 +49,9 @@ export const WithLabel = {
 export const InputError = {
   ...Basic,
   render: (args) => (
-    <div className="form-group has-error">
+    <Field sentiment="negative" message={lorem10}>
       <DateInput {...args} value={new Date('2010-04-05')} />
-      <InlineAlert type="error">{lorem10}</InlineAlert>
-    </div>
+    </Field>
   ),
 } satisfies Story;
 

package/src/dateLookup/DateLookup.rtl.spec.tsx

@@ -28,7 +28,7 @@ describe('DateLookup', () => {
       </Field>,
     );
     // TODO: Replace with `.toHaveAttribute('aria-haspopup')`
-    expect(screen.getByLabelText('Date of birth')).toHaveTextContent(
+    expect(screen.getByLabelText(/Date of birth/)).toHaveTextContent(
       initialValue.getFullYear().toString(),
     );
   });

package/src/dateLookup/dateTrigger/DateTrigger.css

@@ -4,18 +4,10 @@
   white-space: nowrap;
   width: 100%;
 }
-.np-date-trigger .control-label {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .np-theme-personal .np-date-trigger {
   padding-left: 16px;
   padding-left: var(--size-16);
 }
-.np-theme-personal .np-date-trigger .control-label + span {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-}
 .clear-btn {
   transition: color 0.15s ease-in-out;
   color: #c9cbce;

package/src/dateLookup/dateTrigger/DateTrigger.less

@@ -7,16 +7,8 @@
   white-space: nowrap;
   width: 100%;
 
-  .control-label {
-    font-weight: var(--font-weight-regular);
-  }
-
   .np-theme-personal & {
     padding-left: var(--size-16);
-
-    .control-label + span {
-      font-weight: var(--font-weight-regular);
-    }
   }
 }
 

package/src/dateLookup/dateTrigger/DateTrigger.spec.js

@@ -119,5 +119,5 @@ describe('DateTrigger', () => {
   const button = () => component.find('.np-date-trigger');
   const clearButton = () => component.find('.clear-btn');
   const chevron = () => component.find(Chevron);
-  const label = () => component.find('.control-label');
+  const label = () => component.find('.np-date-trigger-label');
 });

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -2,12 +2,13 @@ import { formatDate } from '@transferwise/formatting';
 import { useIntl } from 'react-intl';
 
 import Chevron from '../../chevron';
-import { Size, Position, SizeSmall, SizeMedium, SizeLarge } from '../../common';
+import { Size, Position, SizeSmall, SizeMedium, SizeLarge, Typography } from '../../common';
 import { CloseButton } from '../../common/closeButton/CloseButton';
 
 import messages from './DateTrigger.messages';
 import { useContext } from 'react';
 import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
+import Body from '../../body';
 
 interface DateTriggerProps {
   selectedDate: Date | null;
@@ -45,15 +46,19 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         type="button"
         onClick={onClick}
       >
-        {label && <span className="control-label small m-r-1">{label}</span>}
+        {label && (
+          <Body as="span" className="np-date-trigger-label m-r-1">
+            {label}
+          </Body>
+        )}
         {selectedDate ? (
-          <span className="font-weight-normal">
+          <Body as="span" type={Typography.BODY_LARGE}>
             {formatDate(selectedDate, locale, {
               day: 'numeric',
               month: monthFormat,
               year: 'numeric',
             })}
-          </span>
+          </Body>
         ) : (
           <span
             className="form-control-placeholder visible-xs-inline visible-sm-inline

package/src/field/Field.css

@@ -0,0 +1,4 @@
+.np-field-control {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}

package/src/field/Field.less

@@ -0,0 +1,5 @@
+.np-field {
+  &-control {
+      margin-top: var(--size-4);
+  }
+}

package/src/field/Field.spec.tsx

@@ -14,7 +14,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toBeInTheDocument();
     expect(screen.getByRole('textbox')).not.toHaveAttribute('aria-describedby');
   });
 
@@ -25,7 +25,7 @@ describe('Field', () => {
       </Field>,
     );
 
-    const textbox = screen.getByRole('textbox', { description: 'This is help text' });
+    const textbox = screen.getByRole('textbox', { description: /This is help text/ });
     expect(textbox).toBeInTheDocument();
     expect(textbox).not.toBeInvalid();
   });
@@ -42,15 +42,51 @@ describe('Field', () => {
     expect(textbox).toBeInvalid();
   });
 
-  it('should prefer error text over help text if both are provided', () => {
+  it('should shows error text and help text when both are provided', () => {
     render(
       <Field label="Phone number" error="This is error text" hint="This is help text">
         <Input />
       </Field>,
     );
 
-    expect(screen.getByRole('textbox', { description: 'This is error text' })).toBeInTheDocument();
-    expect(screen.queryByText('This is help text')).not.toBeInTheDocument();
+    expect(screen.getByRole('textbox', { description: /This is error text/ })).toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
+  });
+
+  it('should shows message and description when both are provided', () => {
+    render(
+      <Field
+        label="Phone number"
+        description="This is help text"
+        sentiment="negative"
+        message="This is error text"
+      >
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByRole('textbox', { description: /This is error text/ })).toBeInTheDocument();
+    expect(screen.getByText('This is help text')).toBeInTheDocument();
+    expect(screen.getByLabelText(/Phone number/)).toHaveAttribute('aria-describedby');
+  });
+
+  it('should show or hide (Optional) suffix depending on required prop', () => {
+    render(
+      <Field label="Phone number" description="This is help text">
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByText('(Optional)')).toBeInTheDocument();
+
+    render(
+      <Field label="Phone number" description="This is help text" required>
+        <Input />
+      </Field>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
   });
 
   it('avoids triggering button within label inadvertently', async () => {

package/src/field/Field.story.tsx

@@ -3,6 +3,12 @@ import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
 import { Sentiment } from '../common';
+import DateInput from '../dateInput';
+import { fn } from '@storybook/test';
+import { lorem10, lorem40 } from '../test-utils';
+import { TextArea } from '../inputs/TextArea';
+import { SearchInput } from '../inputs/SearchInput';
+import Info from '../info';
 
 export default {
   component: Field,
@@ -13,9 +19,66 @@ export default {
 export const Basic = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
+    <div className="row">
+      <div className="col-md-8 col-md-offset-2">
+        <Field label="Required Text Input" required>
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field label="Text Input with Description" description="This a field Description">
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+        <Field
+          label="Text Input with Validation Error"
+          description="This a field Description"
+          sentiment={Sentiment.NEGATIVE}
+          message="Validation error, please take a look"
+        >
+          <Input value={value} onChange={({ target }) => setValue(target.value)} />
+        </Field>
+
+        <Field label="Date Of Birth">
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Date Of Birth with Description" description={lorem10}>
+          <DateInput onChange={fn} />
+        </Field>
+
+        <Field label="Search business">
+          <SearchInput />
+        </Field>
+
+        <Field label="Textarea">
+          <TextArea />
+        </Field>
+
+        <Field label="Textarea with Description" description="This a TextArea Description">
+          <TextArea />
+        </Field>
+
+        <Field
+          label="Textarea with Validation Error"
+          description="This a TextArea Description"
+          message={lorem10}
+          sentiment="negative"
+        >
+          <TextArea />
+        </Field>
+
+        <Field
+          label={
+            <>
+              Label with Suffix <Info content={lorem40} />
+            </>
+          }
+        >
+          <TextArea />
+        </Field>
+      </div>
+    </div>
   );
 };
 
@@ -23,16 +86,51 @@ export const WithStatusMessages = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
     <div>
-      <Field label="Phone number" sentiment={Sentiment.POSITIVE} message="Positive message">
+      <Field
+        label="Text Input with Positive Message"
+        sentiment={Sentiment.POSITIVE}
+        message="Positive message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.WARNING} message="Warning message">
+
+      <Field
+        label="Text Input with Warning Message"
+        sentiment={Sentiment.WARNING}
+        message="Warning message"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+
+      <Field
+        label="Text Input with Validation Error"
+        sentiment={Sentiment.NEGATIVE}
+        message="This is a required field"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance with deprecated `hint` prop */}
+      <Field
+        label="Text Input with deprecated `hint` prop"
+        hint="This is a helpful message"
+        sentiment={Sentiment.NEGATIVE}
+        message="Validation error, please take a look"
+      >
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
-      <Field label="Phone number" message="This is a helpful message">
+
+      {/* instance with deprecated `error` & `hint` props */}
+      <Field
+        label="Text Input with deprecated `error` & `hint` props"
+        hint="This is a helpful message"
+        error="Validation error, please take a look"
+      >
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+
+      {/* instance of info via `message` property, this is rare case (e.g MoneyInput) */}
+      <Field label="Text Input with Info under the field" message="This is a helpful message">
         <Input value={value} onChange={({ target }) => setValue(target.value)} />
       </Field>
     </div>