@sats-group/ui-lib 75.4.0 → 75.5.0

package/package.json

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

package/react/select/select.scss

@@ -41,23 +41,32 @@
     transform: translateY(-50%);
     pointer-events: none;
     display: flex;
-    align-items: center
+    align-items: center;
   }
 
-  select {
-    @include font-sizes.normal(basic);
+  &__select {
+    @include font-sizes.normal(input);
     color: light.$on-surface-primary-default;
     appearance: none;
     background-color: transparent;
     border: 1px solid light.$ge-border-default;
     display: block;
-    padding-top: clamp(spacing.$xs, 2vw, spacing.$s);
-    padding-bottom: clamp(spacing.$xs, 2vw, spacing.$s);
-    padding-left: clamp(spacing.$s, 2vw, spacing.$m);
-    padding-right: spacing.$l; // NOTE: Space for chevron icon
     position: relative;
     width: 100%;
     border-radius: corner-radius.$s;
+    padding-right: spacing.$l;
+
+    &--variant-small {
+      padding-top: spacing.$xs;
+      padding-bottom: spacing.$xs;
+      padding-left: spacing.$s;
+    }
+
+    &--variant-large {
+      padding-top: spacing.$s;
+      padding-bottom: spacing.$s;
+      padding-left: spacing.$m;
+    }
 
     @media (hover: hover) {
       &:hover {

package/react/select/select.tsx

@@ -7,7 +7,7 @@ import Option from '../select-option/select-option';
 import Text from '../text';
 import SvgArrowDown from '@sats-group/icons/18/arrow-down';
 
-import { labelPositions, Select as Props } from './select.types';
+import { labelPositions, Select as Props, variants } from './select.types';
 
 // NOTE: `onChangeOption` works like `onChange` but returns the props for that option instead of an event object.
 const RefSelect = React.forwardRef<
@@ -26,6 +26,7 @@ const RefSelect = React.forwardRef<
       onChangeOption = () => {},
       options = [],
       required,
+      variant = variants.large,
       ...restProps
     },
     ref,
@@ -49,7 +50,12 @@ const RefSelect = React.forwardRef<
       >
         {isLabelVisible && (label || children) ? (
           <div className="select__label">
-            <Text size={Text.sizes.small} theme={Text.themes.emphasis}>
+            <Text
+              size={
+                variant === variants.small ? Text.sizes.small : Text.sizes.basic
+              }
+              theme={Text.themes.emphasis}
+            >
               {label}
             </Text>
             {required ? <span className="select__asterisk">*</span> : null}
@@ -61,6 +67,10 @@ const RefSelect = React.forwardRef<
 
         <div className="select__native-wrapper">
           <select
+            className={cn('select__select', {
+              'select__select--variant-small': variant === variants.small,
+              'select__select--variant-large': variant === variants.large,
+            })}
             name={name}
             ref={ref}
             onChange={onInputChange}
@@ -97,8 +107,14 @@ const RefSelect = React.forwardRef<
 RefSelect.displayName = 'Select';
 
 // NOTE: Since `React.forwardRef` props aren't generic, the component is cast so that generics work as intended. See https://stackoverflow.com/a/58473012
-const Select = RefSelect as <OptionExtra>(
-  props: Props<OptionExtra> & { ref?: React.Ref<HTMLSelectElement> },
+const SelectComponent = RefSelect as <OptionExtra>(
+  props: Props<OptionExtra> & {
+    ref?: React.Ref<HTMLSelectElement>;
+  },
 ) => React.ReactElement;
 
+const Select: typeof SelectComponent & {
+  variants: typeof variants;
+} = Object.assign(SelectComponent, { variants });
+
 export default Select;

package/react/select/select.types.ts

@@ -7,6 +7,11 @@ export const labelPositions = {
   stacked: 'stacked',
 } as const;
 
+export const variants = {
+  small: 'small',
+  large: 'large',
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Select<OptionExtra = any> = {
   isLabelVisible?: boolean;
@@ -15,4 +20,5 @@ export type Select<OptionExtra = any> = {
   name: string;
   onChangeOption?: (option?: SelectOption<OptionExtra>) => void;
   options?: SelectOption<OptionExtra>[];
+  variant?: ObjectValues<typeof variants>;
 } & SelectHtmlProps;

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

@@ -6,10 +6,31 @@
 
 .text-input {
   $block: &;
-  $vertical-padding: 13px;
   $line-height: 1;
   $icon-width: 24px;
   $icon-spacing: spacing.$xs;
+  $vertical-padding-xs: spacing.$xs;
+  $vertical-padding-s: spacing.$s;
+
+  &--variant-small {
+    #{$block}__input {
+      padding: $vertical-padding-xs spacing.$s;
+    }
+
+    #{$block}__icon {
+      bottom: $vertical-padding-xs;
+    }
+  }
+
+  &--variant-large {
+    #{$block}__input {
+      padding: $vertical-padding-s spacing.$m;
+    }
+
+    #{$block}__icon {
+      bottom: $vertical-padding-s;
+    }
+  }
 
   &__wrapper {
     position: relative;
@@ -18,12 +39,9 @@
   }
 
   &__input {
-    font-size: 16px;
-    font-family: font-names.$brand, sans-serif;
+    @include font-sizes.normal(input);
     border: 1px solid light.$ge-divider-default;
     border-radius: corner-radius.$s;
-    padding: clamp(spacing.$xs, 2vw, spacing.$s)
-      clamp(spacing.$s, 2vw, spacing.$m);
     line-height: $line-height;
     background-color: light.$surface-primary-default;
     color: light.$on-surface-primary-default;
@@ -71,7 +89,6 @@
   }
 
   &__icon {
-    bottom: $vertical-padding;
     color: light.$on-surface-primary-disabled;
     left: $icon-spacing;
     height: $icon-width;
@@ -88,7 +105,7 @@
 
   &--moving-label {
     #{$block}__input {
-      padding: $vertical-padding spacing.$m;
+      padding: spacing.$s spacing.$m;
     }
 
     #{$block}__label {
@@ -97,7 +114,7 @@
       top: 0;
       margin: 0;
       padding: 0 6px;
-      transform: translate(10px, $vertical-padding);
+      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);

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Text from '../text';
 import useInputValidation from '../use-input-validation';
 
-import { themes, TextInput as Props } from './text-input.types';
+import { themes, variants, TextInput as Props } from './text-input.types';
 
 const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
   (
@@ -24,6 +24,7 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
       required,
       theme,
       type = 'text',
+      variant = variants.large,
       ...restProps
     },
     ref,
@@ -40,6 +41,8 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
           'text-input--error': error || hasError,
           'text-input--moving-label': icon ? false : hasMovingLabel,
           'text-input--icon': icon,
+          'text-input--variant-small': variant === variants.small,
+          'text-input--variant-large': variant === variants.large,
         })}
       >
         <div className="text-input__wrapper">
@@ -70,7 +73,9 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
             <Text
               className="text-input__label"
               theme={Text.themes.emphasis}
-              size={Text.sizes.small}
+              size={
+                variant === variants.small ? Text.sizes.small : Text.sizes.basic
+              }
             >
               {label}
               {required ? (
@@ -88,7 +93,7 @@ const RefTextInput = React.forwardRef<HTMLInputElement, Props>(
         {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}
         {error ? (
           <div aria-hidden="true" className="text-input__error">
-            <Text>{error}</Text>
+            <Text size={Text.sizes.interface}>{error}</Text>
           </div>
         ) : null}
       </label>
@@ -101,6 +106,7 @@ RefTextInput.displayName = 'TextInput';
 
 const TextInput: typeof RefTextInput & {
   themes: typeof themes;
-} = Object.assign(RefTextInput, { themes });
+  variants: typeof variants;
+} = Object.assign(RefTextInput, { themes, variants });
 
 export default TextInput;

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

@@ -6,8 +6,12 @@ export const themes = {
   light: 'light',
 } as const;
 
+export const variants = {
+  small: 'small',
+  large: 'large',
+};
+
 export type TextInput = {
-  theme?: ObjectValues<typeof themes>;
   customErrorMessages?: Messages;
   hasError?: boolean;
   hasMovingLabel?: boolean;
@@ -16,4 +20,6 @@ export type TextInput = {
   icon?: React.ReactNode;
   label: string;
   name: string;
+  theme?: ObjectValues<typeof themes>;
+  variant?: ObjectValues<typeof variants>;
 } & InputHtmlProps;

package/tokens/font-sizes.scss

@@ -1,38 +1,38 @@
-@use "sass:map";
+@use 'sass:map';
 @use './font-names';
 
 $headline: (
   headline1: (
     fallBack: 64px,
-    clamp: clamp(36px, 4vw, 64px)
+    clamp: clamp(36px, 4vw, 64px),
   ),
   headline2: (
     fallBack: 38px,
-    clamp: clamp(24px, 4vw, 38px)
+    clamp: clamp(24px, 4vw, 38px),
   ),
   headline3: (
     fallBack: 30px,
-    clamp: clamp(19px, 4vw, 30px)
+    clamp: clamp(19px, 4vw, 30px),
   ),
   large: (
     fallBack: 21px,
-    clamp: clamp(16px, 4vw, 21px)
+    clamp: clamp(16px, 4vw, 21px),
   ),
   basic: (
     fallBack: 18px,
-    clamp: clamp(14px, 4vw, 18px)
+    clamp: clamp(14px, 4vw, 18px),
   ),
   small: (
     fallBack: 16px,
-    clamp: clamp(12px, 4vw, 16px)
+    clamp: clamp(12px, 4vw, 16px),
   ),
   interface: (
     fallBack: 14px,
-    clamp: clamp(10px, 4vw, 14px)
+    clamp: clamp(10px, 4vw, 14px),
   ),
   button: (
     fallBack: 16px,
-    clamp: clamp(14px, 4vw, 16px)
+    clamp: clamp(14px, 4vw, 16px),
   ),
 );
 
@@ -51,35 +51,39 @@ $headline: (
 $normal: (
   headline1: (
     fallBack: 36px,
-    clamp: clamp(28px, 4vw, 36px)
+    clamp: clamp(28px, 4vw, 36px),
   ),
   headline2: (
     fallBack: 28px,
-    clamp: clamp(24px, 4vw, 28px)
+    clamp: clamp(24px, 4vw, 28px),
   ),
   headline3: (
     fallBack: 24px,
-    clamp: clamp(19px, 4vw, 24px)
+    clamp: clamp(19px, 4vw, 24px),
   ),
   large: (
     fallBack: 21px,
-    clamp: clamp(16px, 3vw, 21px)
+    clamp: clamp(16px, 3vw, 21px),
   ),
   basic: (
     fallBack: 18px,
-    clamp: clamp(14px, 3vw, 18px)
+    clamp: clamp(14px, 3vw, 18px),
   ),
   small: (
     fallBack: 16px,
-    clamp: clamp(12px, 3vw, 16px)
+    clamp: clamp(12px, 3vw, 16px),
   ),
   interface: (
     fallBack: 14px,
-    clamp: clamp(10px, 3vw, 14px)
+    clamp: clamp(10px, 3vw, 14px),
   ),
   section: (
     fallBack: 20px,
-    clamp: clamp(16px, 3vw, 20px)
+    clamp: clamp(16px, 3vw, 20px),
+  ),
+  input: (
+    fallBack: 16px,
+    clamp: clamp(16px, 3vw, 18px),
   ),
 );
 

package/react/select-option/README.md

@@ -1,3 +0,0 @@
-# SelectOption
-
-This component is not intended to be used directly. It is used by `Select` internally but needs to live in a separate folder in order for a TypeScript file to be created for it.