npm - @transferwise/components - Versions diffs - 46.40.0 → 46.41.1 - Mend

@transferwise/components 46.40.0 → 46.41.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/build/index.js +68 -74
package/build/index.js.map +1 -1
package/build/index.mjs +69 -75
package/build/index.mjs.map +1 -1
package/build/main.css +69 -14
package/build/styles/main.css +69 -14
package/build/styles/statusIcon/StatusIcon.css +4 -2
package/build/styles/uploadInput/UploadInput.css +18 -1
package/build/styles/uploadInput/uploadButton/UploadButton.css +4 -0
package/build/styles/uploadInput/uploadItem/UploadItem.css +43 -11
package/build/types/dateInput/DateInput.d.ts.map +1 -1
package/build/types/field/Field.d.ts +6 -1
package/build/types/field/Field.d.ts.map +1 -1
package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
package/package.json +4 -4
package/src/dateInput/DateInput.spec.tsx +220 -0
package/src/dateInput/DateInput.story.tsx +3 -76
package/src/dateInput/DateInput.tests.story.tsx +238 -0
package/src/dateInput/DateInput.tsx +50 -53
package/src/field/Field.story.tsx +17 -36
package/src/field/Field.tests.story.tsx +33 -0
package/src/field/Field.tsx +23 -13
package/src/inlineAlert/InlineAlert.story.tsx +13 -5
package/src/inlineAlert/InlineAlert.tsx +13 -6
package/src/main.css +69 -14
package/src/statusIcon/StatusIcon.css +4 -2
package/src/statusIcon/StatusIcon.less +4 -2
package/src/statusIcon/StatusIcon.tsx +1 -1
package/src/uploadInput/UploadInput.css +18 -1
package/src/uploadInput/UploadInput.less +17 -1
package/src/uploadInput/UploadInput.tests.story.tsx +13 -2
package/src/uploadInput/uploadButton/UploadButton.css +4 -0
package/src/uploadInput/uploadButton/UploadButton.less +5 -0
package/src/uploadInput/uploadItem/UploadItem.css +43 -11
package/src/uploadInput/uploadItem/UploadItem.less +61 -17
package/src/dateInput/DateInput.rtl.spec.tsx +0 -17
package/src/dateInput/DateInput.spec.js +0 -477

package/src/dateInput/DateInput.tsx CHANGED Viewed

@@ -2,8 +2,16 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
-import { DateMode, MonthFormat, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import {
+  DateMode,
+  MonthFormat,
+  Size,
+  SizeLarge,
+  SizeMedium,
+  SizeSmall,
+  Typography,
+} from '../common';
 import { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
 import { useInputAttributes } from '../inputs/contexts';
 import messages from './DateInput.messages';
@@ -93,8 +101,10 @@ const DateInput = ({
   };
   const [day, setDay] = useState(() => getInitialDate('day'));
+  const [displayDay, setDisplayDay] = useState(day?.toString());
   const [month, setMonth] = useState(() => getInitialDate('month'));
   const [year, setYear] = useState(() => getInitialDate('year'));
+  const [displayYear, setDisplayYear] = useState(year?.toString());
   const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date | null | undefined>(
     getDateObject,
   );
@@ -129,7 +139,7 @@ const DateInput = ({
   const getSelectElement = () => {
     return (
       <label className="d-flex flex-column">
-        <span className="sr-only">{monthLabel}</span>
+        <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
           name="month"
           disabled={disabled}
@@ -147,13 +157,25 @@ const DateInput = ({
     );
   };
+  const isDayValid = (newDay: number, newMonth: number, newYear: number) => {
+    const maxDay = new Date(newYear, newMonth + 1, 0).getDate();
+    return newDay <= maxDay;
+  };
   const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {
-    if (newDay == null || newMonth == null || newYear == null) {
+    if (newDay == null || newDay === 0 || newMonth == null || newYear == null || newYear === 0) {
+      broadcastNewValue(null);
+      return;
+    }
+    if (!isDayValid(newDay, newMonth, newYear)) {
       broadcastNewValue(null);
       return;
     }
     const dateValue = new Date(newYear, newMonth, newDay);
+    if (newYear < 100) {
+      dateValue.setFullYear(newYear);
+    }
     if (!isDateValid(dateValue)) {
       broadcastNewValue(null);
@@ -170,9 +192,12 @@ const DateInput = ({
   };
   const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checkedDay } = checkDate(Number.parseInt(event.target.value, 10), month, year);
-    setDay(checkedDay);
-    handleInternalValue(checkedDay, month, year);
+    const newDayString = event.target.value.replace(/\D/g, '');
+    const newDayNumber = Number.parseInt(newDayString, 10);
+    setDay(newDayNumber);
+    setDisplayDay(newDayString);
+    handleInternalValue(newDayNumber, month, year);
   };
   const handleMonthChange = (selectedMonth: number | null) => {
@@ -181,30 +206,21 @@ const DateInput = ({
       handleInternalValue(day, null, year);
       return;
     }
-    const { checkedDay } = checkDate(day, selectedMonth, year);
     setMonth(selectedMonth);
-    if (day && checkedDay !== day) {
-      setDay(checkedDay);
-    }
-    handleInternalValue(checkedDay, selectedMonth, year);
+    handleInternalValue(day, selectedMonth, year);
   };
   const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = event.target.value;
-    const slicedYear = newValue.length > 4 ? newValue.slice(0, 4) : newValue;
-    if (slicedYear.toString().length === 4) {
-      // Correct day based on year and month.
-      const { checkedDay } = checkDate(day, month, Number.parseInt(newValue, 10));
-      if (day && checkedDay !== day) {
-        setDay(checkedDay);
-      }
+    const newYearString = event.target.value.replace(/\D/g, '');
+    const newYearNumber = Number.parseInt(newYearString, 10);
-      setYear(Number.parseInt(slicedYear, 10));
-      handleInternalValue(checkedDay, month, Number.parseInt(slicedYear, 10));
+    if (newYearString.length >= 4 && newYearString.length <= 6) {
+      setYear(newYearNumber);
+      setDisplayYear(newYearString);
+      handleInternalValue(day, month, newYearNumber);
     } else {
-      setYear(Number.parseInt(slicedYear, 10));
+      setYear(null);
+      setDisplayYear(newYearString);
       handleInternalValue(day, month, null);
     }
   };
@@ -216,29 +232,6 @@ const DateInput = ({
     }
   };
-  const checkDate = (
-    newDay: number | null = null,
-    newMonth: number | null = 0,
-    newYear: number | null = null,
-  ) => {
-    let checkedDay = newDay;
-    const maxDay = new Date(newYear || 2000, newMonth != null ? newMonth + 1 : 1, 0).getDate();
-    if (!newDay) {
-      checkedDay = null;
-    }
-    if (newDay && newDay < 0) {
-      checkedDay = 1;
-    }
-    if ((newDay && newMonth) || (newDay && newDay > 31)) {
-      checkedDay = newDay > maxDay ? maxDay : newDay;
-    }
-    return { checkedDay, checkedMonth: newMonth, checkedYear: newYear };
-  };
   const monthYearOnly = mode === DateMode.MONTH_YEAR;
   const monthWidth = classNames({
@@ -254,7 +247,7 @@ const DateInput = ({
     return (
       <div className="col-sm-3">
         <label>
-          <span className="sr-only">{dayLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -262,10 +255,12 @@ const DateInput = ({
               pattern="[0-9]*"
               name="day"
               autoComplete={dayAutoComplete}
-              value={day || ''}
+              value={displayDay || ''}
               placeholder={placeholders?.day}
               disabled={disabled}
               min={1}
+              max={31}
+              maxLength={2}
               onChange={(event) => handleDayChange(event)}
             />
           </div>
@@ -278,7 +273,7 @@ const DateInput = ({
     return (
       <div className="col-sm-4">
         <label>
-          <span className="sr-only">{yearLabel}</span>
+          <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
               type="text"
@@ -287,9 +282,11 @@ const DateInput = ({
               name="year"
               autoComplete={yearAutoComplete}
               placeholder={placeholders?.year}
-              value={year || ''}
+              value={displayYear || ''}
               disabled={disabled}
-              min={1}
+              min={0}
+              max={9999}
+              maxLength={6}
               onChange={(event) => handleYearChange(event)}
             />
           </div>

package/src/field/Field.story.tsx CHANGED Viewed

@@ -2,10 +2,12 @@ import { useState } from 'react';
 import { Input } from '../inputs/Input';
 import { Field } from './Field';
+import { Sentiment } from '../common';
 export default {
   component: Field,
   title: 'Field',
+  tags: ['autodocs'],
 };
 export const Basic = () => {
@@ -17,43 +19,22 @@ export const Basic = () => {
   );
 };
-export const WithErrorMessage = () => {
+export const WithStatusMessages = () => {
   const [value, setValue] = useState<string | undefined>('This is some text');
   return (
-    <Field label="Phone number" error="This is a required field">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
-  );
-};
-export const WithHelp = () => {
-  const [value, setValue] = useState<string | undefined>('This is some text');
-  return (
-    <Field label="Phone number" hint="This is a helpful message">
-      <Input value={value} onChange={({ target }) => setValue(target.value)} />
-    </Field>
-  );
-};
-export const WithHelpAndErrorOnBlur = () => {
-  const [value, setValue] = useState<string | undefined>('This is some text');
-  const [error, setError] = useState<string | undefined>(undefined);
-  return (
-    <Field label="Phone number" hint="Please include country code" error={error}>
-      <Input
-        value={value}
-        onChange={({ target }) => {
-          setValue(target.value);
-          setError(undefined);
-        }}
-        onBlur={() => {
-          if (!value) {
-            setError('This is a required field');
-          } else {
-            setError(undefined);
-          }
-        }}
-      />
-    </Field>
+    <div>
+      <Field label="Phone number" 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">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" sentiment={Sentiment.NEGATIVE} message="This is a required field">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+      <Field label="Phone number" message="This is a helpful message">
+        <Input value={value} onChange={({ target }) => setValue(target.value)} />
+      </Field>
+    </div>
   );
 };

package/src/field/Field.tests.story.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Input } from '../inputs/Input';
+import { Field } from './Field';
+import { Sentiment } from '../common';
+export default {
+  component: Field,
+  title: 'Field/Tests',
+};
+export const WithHelpAndErrorOnBlur = () => {
+  const [value, setValue] = useState('This is some text');
+  const [error, setError] = useState<string | undefined>(undefined);
+  return (
+    <Field
+      label="Phone number"
+      sentiment={error ? Sentiment.NEGATIVE : Sentiment.NEUTRAL}
+      message={error || 'Please include country code'}
+    >
+      <Input
+        value={value}
+        onChange={({ target }) => {
+          setValue(target.value);
+          setError(undefined);
+        }}
+        onBlur={() => {
+          setError('Something went wrong');
+        }}
+      />
+    </Field>
+  );
+};

package/src/field/Field.tsx CHANGED Viewed

@@ -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 = Sentiment.NEUTRAL,
+  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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,8 +1,8 @@
-import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
 import classNames from 'classnames';
 import { 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-${type === Sentiment.NEGATIVE || type === Sentiment.ERROR ? '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/main.css CHANGED Viewed

@@ -4208,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 {
@@ -5400,6 +5402,9 @@ 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;
@@ -5410,6 +5415,7 @@ 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;
@@ -5477,8 +5483,25 @@ 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;
-  list-style-position: inside;
+}
+.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;
 }
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
@@ -5497,30 +5520,49 @@ 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:before {
+.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 {
   display: block;
-  position: relative;
+  position: absolute;
   height: 1px;
   background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   content: " ";
-  margin: 0 16px;
-  margin: 0 var(--size-16);
+  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;
 }
 .np-upload-item:first-child ~ div {
-  border-top: 0;
+  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);
 }
 .np-upload-item:not(:last-child) {
   border-bottom: 0;
 }
-.np-upload-item.np-upload-item__link:hover:before,
-.np-upload-button-container:hover:before {
-  margin: 0 !important;
+.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 + div:before,
-.np-upload-button-container:hover + div: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-button-container:has(:focus-visible) {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
@@ -5537,17 +5579,29 @@ 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;
@@ -5572,6 +5626,7 @@ 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/statusIcon/StatusIcon.css CHANGED Viewed

@@ -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);
 }

package/src/statusIcon/StatusIcon.less CHANGED Viewed

@@ -60,7 +60,8 @@
   }
 }
-.status-circle.negative {
+.status-circle.negative,
+.status-circle.error {
   background-color: var(--color-sentiment-negative);
 }
@@ -68,6 +69,7 @@
   background-color: var(--color-content-secondary);
 }
-.status-circle.positive {
+.status-circle.positive,
+.status-circle.success {
   background-color: var(--color-sentiment-positive);
 }

package/src/statusIcon/StatusIcon.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ const StatusIcon = ({ sentiment = 'neutral', size = 'md' }: StatusIconProps) =>
   return (
     <span
       data-testid="status-icon"
-      className={classNames('status-circle', 'status-circle-' + size, sentiment)}
+      className={classNames('status-circle', `status-circle-${size}`, sentiment)}
     >
       <Icon className={classNames('status-icon', iconColor)} />
     </span>