@sats-group/ui-lib 75.10.1 → 77.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.10.1",
+  "version": "77.0.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/text-input/text-input.scss

@@ -7,53 +7,72 @@
 .text-input {
   $block: &;
   $line-height: 1;
-  $icon-width: 24px;
-  $icon-spacing: spacing.$xs;
   $vertical-padding-xs: spacing.$xs;
   $vertical-padding-s: spacing.$s;
 
   &--variant-small {
-    #{$block}__input {
+    #{$block}__input-wrapper {
       padding: $vertical-padding-xs spacing.$s;
-    }
-
-    #{$block}__icon {
-      bottom: $vertical-padding-xs;
+      gap: spacing.$s;
     }
   }
 
   &--variant-large {
-    #{$block}__input {
+    #{$block}__input-wrapper {
       padding: $vertical-padding-s spacing.$m;
-    }
-
-    #{$block}__icon {
-      bottom: $vertical-padding-s;
+      gap: spacing.$m;
     }
   }
 
   &__wrapper {
     position: relative;
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
+    gap: spacing.$xxs;
   }
 
-  &__input {
-    @include font-sizes.normal(input);
+  &__length-counter {
+    color: light.$on-background-primary-alternate;
+  }
+
+  &__label-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__input-wrapper {
     border: 1px solid light.$ge-divider-default;
     border-radius: corner-radius.$s;
-    line-height: $line-height;
+    display: flex;
+    align-items: center;
     background-color: light.$surface-primary-default;
     color: light.$on-surface-primary-default;
     width: 100%;
     box-sizing: border-box;
 
-    #{$block}--icon & {
-      padding-left: $icon-spacing * 2 + $icon-width;
+    &:focus-within {
+      border-color: light.$ge-border-focused;
+      outline: none;
     }
 
+    @media (hover: hover) {
+      &:hover {
+        background-color: light.$surface-primary-hover;
+        cursor: text;
+      }
+    }
+  }
+
+  &__input {
+    @include font-sizes.normal(input);
+    line-height: $line-height;
+    width: inherit;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+
     &:focus {
-      border-color: light.$ge-border-focused;
+      border-color: none;
       outline: none;
     }
 
@@ -88,85 +107,10 @@
     }
   }
 
-  &__icon {
-    color: light.$on-surface-primary-disabled;
-    left: $icon-spacing;
-    height: $icon-width;
-    pointer-events: none;
-    position: absolute;
-    width: $icon-width;
-
-    svg {
-      display: block;
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  &--moving-label {
-    #{$block}__input {
-      padding: spacing.$s spacing.$m;
-    }
-
-    #{$block}__label {
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      margin: 0;
-      padding: 0 6px;
-      transform: translate(10px, spacing.$s);
-      transition: transform 0.1s cubic-bezier(0.22, 0.57, 0.25, 1);
-      transform-origin: left center;
-      max-width: calc(100% - 25px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      line-height: $line-height;
-
-      @media (prefers-reduced-motion) {
-        transition: transform 0s;
-      }
-
-      &::before {
-        content: '';
-        position: absolute;
-        z-index: -1;
-        left: 0;
-        bottom: 0;
-        height: 50%;
-        width: 100%;
-        background-color: light.$surface-primary-default;
-      }
-    }
-
-    &.text-input--moving-label {
-      &.text-input--theme-dark {
-        #{$block}__label {
-          color: light.$on-fixed-surface-primary-default;
-        }
-
-        #{$block}__label {
-          &::before {
-            content: '';
-            background-color: light.$fixed-surface-primary-default;
-          }
-        }
-      }
-    }
-
-    & #{$block}__input:focus,
-    & #{$block}__input:not(:placeholder-shown) {
-      ~ #{$block}__label {
-        transform: translate(10px, -50%) scale(0.8);
-      }
-    }
-  }
-
   &__help,
   &__error {
     display: flex;
     gap: spacing.$xs;
-    margin-top: spacing.$xxs;
 
     > * {
       align-self: flex-start;
@@ -174,7 +118,7 @@
   }
 
   &__help {
-    color: light.$on-surface-primary-disabled;
+    color: light.$on-surface-primary-alternate;
   }
 
   &__error {
@@ -182,10 +126,16 @@
   }
 
   &__help-icon,
-  &__error-icon {
+  &__error-icon,
+  &__icon {
     flex-shrink: 0;
   }
 
+  &__help-icon,
+  &__error-icon {
+    height: 16px; // Matches icon height. Otherwise, the auto height acts weirdly, by making the wrapper too tall.
+  }
+
   &__asterisk {
     color: light.$on-surface-featured;
     margin-left: spacing.$xs;
@@ -197,6 +147,28 @@
     #{$block}__help {
       color: light.$on-background-primary-disabled;
     }
+
+    #{$block}__input-wrapper {
+      background-color: light.$surface-primary-disabled;
+      border-color: light.$surface-primary-disabled;
+      cursor: auto;
+    }
+  }
+
+  &--error {
+    #{$block}__icon {
+      color: light.$on-surface-error;
+    }
+
+    #{$block}__input-wrapper {
+      outline: 2px solid light.$ge-signal-error;
+      outline-offset: -2px;
+
+      &:focus {
+        outline: 2px solid light.$ge-signal-error;
+        outline-offset: -2px;
+      }
+    }
   }
 
   &--theme-dark {
@@ -208,19 +180,25 @@
       color: light.$on-fixed-background-primary-default;
     }
 
+    #{$block}__length-counter,
     #{$block}__help {
-      color: light.$on-fixed-background-primary-disabled;
+      color: light.$on-background-primary-alternate;
     }
 
     #{$block}__input {
+      background-color: transparent;
+    }
+
+    #{$block}__input-wrapper {
       background-color: light.$fixed-surface-secondary-default;
       border-color: light.$ge-border-default;
       color: light.$on-fixed-surface-primary-alternate;
 
-      &:focus {
-        background-color: light.$fixed-surface-primary-default;
+      &:focus-within {
+        background: light.$fixed-surface-primary-default;
         color: light.$on-fixed-surface-primary-default;
         outline: none;
+        border-color: light.$ge-border-focused;
 
         ~ #{$block}__icon {
           color: light.$on-fixed-surface-primary-default;
@@ -235,33 +213,39 @@
       &[disabled]::placeholder {
         color: light.$on-fixed-surface-primary-disabled;
       }
+
+      @media (hover: hover) {
+        &:hover {
+          background-color: light.$fixed-surface-primary-hover;
+          cursor: text;
+        }
+      }
+    }
+
+    #{$block}__input {
+      background-color: transparent;
+      color: light.$on-fixed-surface-primary-default;
     }
 
     &#{$block}--disabled {
       #{$block}__label,
       #{$block}__icon,
       #{$block}__help {
-        color: light.$on-fixed-background-primary-disabled;
+        color: light.$on-fixed-surface-primary-disabled;
       }
 
       &#{$block}--error #{$block}__icon {
         color: light.$on-fixed-surface-error;
       }
-    }
-  }
 
-  &--error {
-    #{$block}__icon {
-      color: light.$on-surface-error;
-    }
-
-    #{$block}__input {
-      outline: 2px solid light.$ge-signal-error;
-      outline-offset: -2px;
+      #{$block}__input-wrapper {
+        background-color: light.$fixed-surface-primary-selected;
+        border-color: light.$on-fixed-surface-primary-disabled;
+        cursor: auto;
+      }
 
-      &:focus {
-        outline: 2px solid light.$ge-signal-error;
-        outline-offset: -2px;
+      #{$block}__input {
+        background-color: transparent;
       }
     }
   }

package/react/text-input/text-input.tsx

@@ -16,28 +16,40 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
       defaultValue,
       disabled,
       hasError,
-      hasMovingLabel,
       helpText,
-      hiddenLabel,
-      icon,
       label,
+      leadingIcon,
+      maxLength,
       name,
       onChange = () => {},
       placeholder,
       required,
       theme,
+      trailingIcon,
       type = 'text',
       variant = variants.large,
       ...restProps
     },
     ref,
   ) => {
+    const [count, setCount] = React.useState(0);
     const [isError, setIsError] = React.useState(hasError);
     const [validationOnChange, onInvalid, error] = useInputValidation(
       customErrorMessages,
       customErrorMessages ? customErrorMessages.defaultError : undefined,
       isError,
     );
+    const isMaxLengthValid = maxLength ? maxLength > 0 : undefined;
+
+    React.useEffect(() => {
+      if (defaultValue) {
+        if (typeof defaultValue === 'string') {
+          setCount(defaultValue.length);
+        } else if (typeof defaultValue === 'number') {
+          setCount(defaultValue);
+        }
+      }
+    }, [restProps]);
 
     useEffect(() => {
       setIsError(hasError);
@@ -50,38 +62,13 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
           'text-input--theme-light': theme === themes.light,
           'text-input--disabled': disabled,
           'text-input--error': error || isError,
-          'text-input--moving-label': icon ? false : hasMovingLabel,
-          'text-input--icon': icon,
+          'text-input--icon': leadingIcon || trailingIcon,
           'text-input--variant-small': variant === variants.small,
           'text-input--variant-large': variant === variants.large,
         })}
       >
         <div className="text-input__wrapper">
-          <input
-            {...restProps}
-            className="text-input__input"
-            defaultValue={defaultValue}
-            disabled={disabled}
-            required={required}
-            name={name}
-            onInvalid={e => onInvalid(e)}
-            onChange={e => {
-              onChange(e);
-              validationOnChange(e);
-              setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
-            }}
-            // NOTE: Using " " as placeholder for moving label theme to enable using `:placeholder-shown` to determine when to move the label
-            placeholder={
-              icon ? placeholder : hasMovingLabel ? ' ' : placeholder
-            }
-            ref={ref}
-            type={type}
-            aria-label={icon || hiddenLabel ? label : undefined}
-          />
-
-          {icon ? (
-            <div className="text-input__icon">{icon}</div>
-          ) : hiddenLabel ? null : (
+          <div className="text-input__label-wrapper">
             <Text
               className="text-input__label"
               theme={Text.themes.emphasis}
@@ -94,26 +81,69 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
                 <span className="text-input__asterisk">*</span>
               ) : null}
             </Text>
-          )}
-        </div>
+            {isMaxLengthValid ? (
+              <div className="text-input__length-counter">
+                <Text
+                  size={
+                    variant === variants.small
+                      ? Text.sizes.small
+                      : Text.sizes.basic
+                  }
+                >
+                  {count}/{maxLength}
+                </Text>
+              </div>
+            ) : null}
+          </div>
 
-        {helpText ? (
-          <div className="text-input__help">
-            <div className="text-input__help-icon">
-              <SvgInfo />
-            </div>
-            <Text size={Text.sizes.interface}>{helpText}</Text>
+          <div className="text-input__input-wrapper">
+            {leadingIcon ? (
+              <div className="text-input__icon">{leadingIcon}</div>
+            ) : null}
+            <input
+              className="text-input__input"
+              defaultValue={defaultValue}
+              disabled={disabled}
+              required={required}
+              name={name}
+              maxLength={isMaxLengthValid ? maxLength : undefined}
+              onInvalid={e => onInvalid(e)}
+              onChange={e => {
+                onChange(e);
+                validationOnChange(e);
+                setIsError(false); // NOTE: We want to reset error state on change to not confuse users.
+                if (isMaxLengthValid) {
+                  setCount(e.target.value.length);
+                }
+              }}
+              placeholder={placeholder}
+              ref={ref}
+              type={type}
+              aria-label={label}
+              {...restProps}
+            />
+            {trailingIcon ? (
+              <div className="text-input__icon">{trailingIcon}</div>
+            ) : null}
           </div>
-        ) : null}
-        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
-        {error ? (
-          <div aria-hidden="true" className="text-input__error">
-            <div className="text-input__error-icon">
-              <SvgError />
+          {helpText ? (
+            <div className="text-input__help">
+              <div className="text-input__help-icon">
+                <SvgInfo />
+              </div>
+              <Text size={Text.sizes.interface}>{helpText}</Text>
             </div>
-            <Text size={Text.sizes.interface}>{error}</Text>
-          </div>
-        ) : null}
+          ) : null}
+          {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
+          {error ? (
+            <div aria-hidden="true" className="text-input__error">
+              <div className="text-input__error-icon">
+                <SvgError />
+              </div>
+              <Text size={Text.sizes.interface}>{error}</Text>
+            </div>
+          ) : null}
+        </div>
       </label>
     );
   },

package/react/text-input/text-input.types.ts

@@ -14,12 +14,11 @@ export const variants = {
 export type TextInput = {
   customErrorMessages?: Messages;
   hasError?: boolean;
-  hasMovingLabel?: boolean;
   helpText?: string;
-  hiddenLabel?: boolean;
-  icon?: React.ReactNode;
   label: string;
+  leadingIcon?: React.ReactNode;
   name: string;
   theme?: ObjectValues<typeof themes>;
+  trailingIcon?: React.ReactNode;
   variant?: ObjectValues<typeof variants>;
 } & InputHtmlProps;

package/tokens/darkmode.scss

@@ -1,131 +0,0 @@
-@use 'sass:color';
-
-$primary: #2676b0;
-$primary-hover: #308acc;
-$primary-disabled: #272729;
-
-$primary-silver: #87878a;
-$primary-silver-hover: #939396;
-$primary-silver-disabled: #272729;
-
-$primary-gold: #d4a852;
-$primary-gold-hover: #d8b163;
-$primary-gold-disabled: #272729;
-
-$primary-platinum: #87878a;
-$primary-platinum-hover: #939396;
-$primary-platinum-disabled: #272729;
-
-$secondary: #3c3c41;
-$secondary-hover: #47474d;
-$secondary-disabled: #272729;
-
-$clean: #fff;
-$clean-hover: color.adjust(#fff, $alpha: -0.1);
-$clean-disabled: color.adjust(#fff, $alpha: -0.9);
-
-$clean-secondary: color.adjust(#fff, $alpha: -0.85);
-$clean-secondary-hover: color.adjust(#fff, $alpha: -0.9);
-$clean-secondary-disabled: color.adjust(#fff, $alpha: -0.95);
-
-$cta: #e16259;
-$cta-hover: #cd6354;
-$cta-disabled: #353535;
-$cta-non-text: #fd7459;
-
-$selection-blue: #9ec3ff;
-$selection-silver: #cad1d8;
-$selection-gold: #d4a852;
-$selection-platinum: #929aa1;
-
-$action: #549bde;
-$action-hover: #75b5f2;
-$action-disabled: #272729;
-
-$navigation-blue: #549bde;
-$navigation-silver: #f0f4f9;
-$navigation-gold: #d4a852;
-$navigation-platinum: #f2f9ff;
-
-$waitlist: #686db9;
-$waitlist-hover: #484ba2;
-$waitlist-text: #a0a5f1;
-$waitlist-disabled: #686db9;
-$waitlist-background: #2e2f46;
-
-$signal-success: #8bbf9b;
-$signal-success-text: #8bbf9b;
-$signal-success-background: #424846;
-$signal-warning: #fcd36c;
-$signal-warning-text: #fcd36c;
-$signal-warning-background: #484641;
-$signal-error: #e9698b;
-$signal-error-text: #e9698b;
-$signal-error-background: #4a4444;
-$signal-delete: #e5766e;
-$signal-delete-text: #e5766e;
-$signal-delete-background: #4b4343;
-
-$workout-pt: #6fc2ff;
-$workout-gx: #ee90f0;
-$workout-gymfloor: #e9698b;
-$workout-other: #56c09d;
-
-$ui-pressed: fuchsia; // NOTE: This is missing from Figma
-$ui-tabs: #191c1e;
-$ui-shimmer: #333438;
-$ui-border: color.adjust(#fff, $alpha: -0.91);
-$ui-shadow: #000000;
-$ui-graphical-elements-1: #ffffff;
-$ui-graphical-elements-2: color.adjust(#fff, $alpha: -0.1);
-$ui-graphical-elements-3: color.adjust(#fff, $alpha: -0.3);
-$ui-graphical-elements-4: #191c1e;
-$ui-graphical-elements-5: #fd7459;
-$ui-graphical-elements-6: #8bbf9b;
-$ui-graphical-elements-7: #686db9;
-
-$background-primary: #000;
-$background-secondary: #000;
-$background-surface-primary: #282e34;
-$background-surface-secondary: #282e34;
-
-$on-primary: #fff;
-$on-primary-disabled: color.adjust(#fff, $alpha: -0.32);
-
-$on-secondary: #fff;
-$on-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
-
-$on-clean: #0e2133;
-$on-clean-disabled: #9fa6ad;
-
-$on-clean-secondary: #fff;
-$on-clean-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
-
-$on-cta: #fff;
-$on-cta-disabled: color.adjust(#fff, $alpha: -0.32);
-$on-cta-non-text: #fff;
-
-$on-signal: #fff;
-
-$on-waitlist: #fff;
-$on-waitlist-disabled: color.adjust(#fff, $alpha: -0.32);
-
-$on-background-primary: #fff;
-$on-background-secondary: color.adjust(#fff, $alpha: -0.32);
-$on-background-disabled: color.adjust(#fff, $alpha: -0.6);
-$on-background-enabled-on: #fd7459;
-$on-background-enabled-off: #fff;
-$on-background-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
-$on-background-disabled-off: color.adjust(#fff, $alpha: -0.6);
-$on-background-element-on: fuchsia; // NOTE: This is missing from Figma
-$on-background-element-off: fuchsia; // NOTE: This is missing from Figma
-
-$on-surface-primary: #fff;
-$on-surface-secondary: color.adjust(#fff, $alpha: -0.32);
-$on-surface-disabled: color.adjust(#fff, $alpha: -0.6);
-$on-surface-enabled-on: #fd7459;
-$on-surface-enabled-off: #fff;
-$on-surface-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
-$on-surface-disabled-off: color.adjust(#fff, $alpha: -0.6);
-$on-surface-element-on: fuchsia; // NOTE: This is missing from Figma
-$on-surface-element-off: fuchsia; // NOTE: This is missing from Figma

package/tokens/lightmode.scss

@@ -1,131 +0,0 @@
-@use 'sass:color';
-
-$primary: #0d2134;
-$primary-hover: #092a48;
-$primary-disabled: #e8e9ec;
-
-$primary-silver: #454d56;
-$primary-silver-hover: #606a74;
-$primary-silver-disabled: #e8e9ec;
-
-$primary-gold: #262624;
-$primary-gold-hover: #393834;
-$primary-gold-disabled: #e8e9ec;
-
-$primary-platinum: #161718;
-$primary-platinum-hover: #313336;
-$primary-platinum-disabled: #e8e9ec;
-
-$secondary: #edf0f3;
-$secondary-hover: #e6eef9;
-$secondary-disabled: #e8e9ec;
-
-$clean: #fff;
-$clean-hover: #eceef0;
-$clean-disabled: color.adjust(#fff, $alpha: -0.5);
-
-$clean-secondary: color.adjust(#fff, $alpha: -0.85);
-$clean-secondary-hover: color.adjust(#fff, $alpha: -0.9);
-$clean-secondary-disabled: color.adjust(#fff, $alpha: -0.95);
-
-$cta: #d93226;
-$cta-hover: #c13c29;
-$cta-disabled: #e8e9ec;
-$cta-non-text: #fa5333;
-
-$selection-blue: #fa5333;
-$selection-silver: #cad1d8;
-$selection-gold: #d4a852;
-$selection-platinum: #929aa1;
-
-$action: #026ac2;
-$action-hover: #2580cd;
-$action-disabled: #9fa6ad;
-
-$navigation-blue: #0e2133;
-$navigation-silver: #454d56;
-$navigation-gold: #262624;
-$navigation-platinum: #161718;
-
-$waitlist: #484ba2;
-$waitlist-hover: #37378b;
-$waitlist-text: #484ba2;
-$waitlist-disabled: #686db9;
-$waitlist-background: #efeff7;
-
-$signal-success: #19976d;
-$signal-success-text: #097f58;
-$signal-success-background: #eaf6f2;
-$signal-warning: #eca720;
-$signal-warning-text: #925707;
-$signal-warning-background: #f0e8da;
-$signal-error: #bf3f4d;
-$signal-error-text: #b93947;
-$signal-error-background: #f5e2e4;
-$signal-delete: #da3b30;
-$signal-delete-text: #d93226;
-$signal-delete-background: #f9e0de;
-
-$workout-pt: #428bbf;
-$workout-gx: #db70dd;
-$workout-gymfloor: #d6bc38;
-$workout-other: #42ae8a;
-
-$ui-pressed: #eceef0;
-$ui-tabs: #f7f7f7;
-$ui-shimmer: #eaeaea;
-$ui-border: #dbdee0;
-$ui-shadow: #000000;
-$ui-graphical-elements-1: #7d92ad;
-$ui-graphical-elements-2: #9fb1c9;
-$ui-graphical-elements-3: #cfd8e4;
-$ui-graphical-elements-4: #7d92ad;
-$ui-graphical-elements-5: #fa5333;
-$ui-graphical-elements-6: #19976d;
-$ui-graphical-elements-7: #484ba2;
-
-$background-primary: #fafafa;
-$background-secondary: #fff;
-$background-surface-primary: #fff;
-$background-surface-secondary: #eaebed;
-
-$on-primary: #fff;
-$on-primary-disabled: #878f97;
-
-$on-secondary: #0e2133;
-$on-secondary-disabled: #878f97;
-
-$on-clean: #0e2133;
-$on-clean-disabled: #878f97;
-
-$on-clean-secondary: #fff;
-$on-clean-secondary-disabled: color.adjust(#fff, $alpha: -0.4);
-
-$on-cta: #fff;
-$on-cta-disabled: #5d6976;
-$on-cta-non-text: #fff;
-
-$on-signal: #fff;
-
-$on-waitlist: #fff;
-$on-waitlist-disabled: #e8e9ec;
-
-$on-background-primary: #0e2133;
-$on-background-secondary: #65717d;
-$on-background-disabled: #9fa6ad;
-$on-background-enabled-on: #fa5333;
-$on-background-enabled-off: #7d92ad;
-$on-background-disabled-on: #fd7459;
-$on-background-disabled-off: #9fb1c9;
-$on-background-element-on: #fca291;
-$on-background-element-off: #9fa6ad;
-
-$on-surface-primary: #0e2133;
-$on-surface-secondary: #65717d;
-$on-surface-disabled: #9fa6ad;
-$on-surface-enabled-on: #fa5333;
-$on-surface-enabled-off: #7d92ad;
-$on-surface-disabled-on: #fd7459;
-$on-surface-disabled-off: #9fb1c9;
-$on-surface-element-on: #fca291;
-$on-surface-element-off: #9fa6ad;