Feat/more error states

.github/actions/auto-assign/action.yml

@@ -2,5 +2,5 @@ name: "PR auto assign"
 description: "Zonos specific auto-labeling action"
 author: "Zonos"
 runs:
-  using: "node16"
+  using: node20
   main: "index.js"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.2.14",
+  "version": "5.2.15",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

src/components/checkbox/Checkbox.module.scss

@@ -53,12 +53,6 @@ $disabled-border: var(--amino-checkbox-disabled-border);
   user-select: none;
   box-shadow: $box-shadow;
 
-  &.checked {
-    background: theme.$amino-primary;
-    border: none;
-    box-shadow: theme.$amino-shadow-button-primary;
-  }
-
   svg {
     color: theme.$amino-gray-0;
     width: 16px;

src/components/checkbox/Checkbox.module.scss.d.ts

@@ -1,6 +1,5 @@
 export declare const aminoCheckbox: string;
 export declare const checkboxContainer: string;
-export declare const checked: string;
 export declare const disabled: string;
 export declare const infoWrapper: string;
 export declare const labelWrapper: string;

src/components/checkbox/Checkbox.tsx

@@ -9,6 +9,10 @@ import {
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import {
+  type HelpTextProps,
+  HelpText,
+} from 'src/components/help-text/HelpText';
 import { Text } from 'src/components/text/Text';
 import { CheckmarkIcon } from 'src/icons/CheckmarkIcon';
 import { theme } from 'src/styles/constants/theme';
@@ -19,11 +23,34 @@ import styles from './Checkbox.module.scss';
 
 const AnimatedCheckIcon = motion(CheckmarkIcon);
 
+const getBackgroundColor = (checked: boolean, error: boolean) => {
+  if (checked) {
+    if (error) {
+      return theme.danger;
+    }
+    return theme.primary;
+  }
+
+  return theme.inputBackground;
+};
+
+const getBorder = (checked: boolean, error: boolean) => {
+  if (checked) {
+    return 'none';
+  }
+
+  if (error) {
+    return `1.5px solid ${theme.danger}`;
+  }
+  return `1.5px solid ${theme.gray400}`;
+};
+
 export type CheckboxProps = Omit<
   ComponentPropsWithoutRef<'label'>,
   'onClick' | 'onChange'
 > &
-  BaseProps & {
+  BaseProps &
+  HelpTextProps & {
     /**
      * Don't stop propagation of the click event
      * @default false
@@ -47,6 +74,8 @@ export const Checkbox = ({
   checked = false,
   className,
   disabled,
+  error = false,
+  helpText,
   icon,
   label,
   labelComponent,
@@ -80,12 +109,8 @@ export const Checkbox = ({
       htmlFor={labelAsHtmlAttribute}
       style={{
         ...style,
-        '--amino-checkbox-background': checked
-          ? theme.primary
-          : theme.inputBackground,
-        '--amino-checkbox-border': !checked
-          ? `1.5px solid ${theme.gray400}`
-          : 'none',
+        '--amino-checkbox-background': getBackgroundColor(checked, error),
+        '--amino-checkbox-border': getBorder(checked, error),
         '--amino-checkbox-box-shadow': checked
           ? theme.shadowButtonPrimary
           : 'none',
@@ -151,6 +176,8 @@ export const Checkbox = ({
             </div>
           ))}
       </div>
+
+      <HelpText error={error} helpText={helpText} />
     </label>
   );
 };

src/components/checkbox/__stories__/Checkbox.stories.tsx

@@ -1,24 +1,12 @@
 import { useState } from 'react';
 
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
 import { type CheckboxProps, Checkbox } from 'src/components/checkbox/Checkbox';
 import { Default } from 'src/icons/flags/Default';
 
 import styles from './Checkbox.stories.module.scss';
 
-const CheckboxMeta: Meta = {
-  component: Checkbox,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/WnKnmG7L3Q74hqPsw4rbEE/Amino-2.0?node-id=74%3A856&mode=dev',
-    },
-  },
-};
-
-export default CheckboxMeta;
-
 const Template: StoryFn<CheckboxProps> = ({
   checked,
   ...props
@@ -33,71 +21,90 @@ const Template: StoryFn<CheckboxProps> = ({
   );
 };
 
-export const BasicCheckbox = Template.bind({});
-BasicCheckbox.args = {
-  icon: <Default height={12} width={16} />,
-  label: 'Input label',
-  subtitle: 'Subtitle here',
+const CheckboxMeta: Meta<CheckboxProps> = {
+  component: Checkbox,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/WnKnmG7L3Q74hqPsw4rbEE/Amino-2.0?node-id=74%3A856&mode=dev',
+    },
+  },
+  render: Template,
+};
+
+export default CheckboxMeta;
+
+export const BasicCheckbox: StoryObj<CheckboxProps> = {
+  args: {
+    icon: <Default height={12} width={16} />,
+    label: 'Input label',
+    subtitle: 'Subtitle here',
+  },
 };
 
-export const DisabledBasicCheckbox = Template.bind({});
-DisabledBasicCheckbox.args = {
-  disabled: true,
-  icon: <Default height={16} width={16} />,
-  label: 'Input label',
-  subtitle: 'Subtitle here',
+export const DisabledBasicCheckbox: StoryObj<CheckboxProps> = {
+  args: {
+    disabled: true,
+    icon: <Default height={16} width={16} />,
+    label: 'Input label',
+    subtitle: 'Subtitle here',
+  },
 };
 
-export const BasicCheckboxWithoutIcon = Template.bind({});
-BasicCheckboxWithoutIcon.args = {
-  label: 'Input label',
-  subtitle: 'Subtitle here',
+export const BasicCheckboxWithoutIcon: StoryObj<CheckboxProps> = {
+  args: {
+    label: 'Input label',
+    subtitle: 'Subtitle here',
+  },
 };
-export const BasicCheckboxWithoutSubtitle = Template.bind({});
-BasicCheckboxWithoutSubtitle.args = {
-  icon: <Default height={16} width={16} />,
-  label: 'Input label',
+
+export const BasicCheckboxWithoutSubtitle: StoryObj<CheckboxProps> = {
+  args: {
+    icon: <Default height={16} width={16} />,
+    label: 'Input label',
+  },
 };
 
-export const CheckboxWithSubstitueLabel = Template.bind({});
-CheckboxWithSubstitueLabel.args = {
-  icon: <Default height={16} width={16} />,
-  label: 'Input label',
-  labelComponent: (
-    <div className={styles.labelComponent}>
-      I have read and agree to the{' '}
-      <a
-        href="https://docs.zonos.com/legal"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Zonos terms of service
-      </a>
-      ,{' '}
-      <a
-        href="https://www.ups.com/assets/resources/media/UTA_with_EUR.pdf"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        UPS Technology Agreement
-      </a>
-      ,{' '}
-      <a
-        href="https://www.ups.com/assets/resources/media/en_US/daily_rates.pdf"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        UPS Rate and Service Guideline
-      </a>
-      , and{' '}
-      <a
-        href="https://www.ups.com/assets/resources/media/terms_service_us.pdf"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Tariff
-      </a>
-      .
-    </div>
-  ),
+export const CheckboxWithSubstituteLabel: StoryObj<CheckboxProps> = {
+  args: {
+    icon: <Default height={16} width={16} />,
+    label: 'Input label',
+    labelComponent: (
+      <div className={styles.labelComponent}>
+        I have read and agree to the{' '}
+        <a
+          href="https://docs.zonos.com/legal"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Zonos terms of service
+        </a>
+        ,{' '}
+        <a
+          href="https://www.ups.com/assets/resources/media/UTA_with_EUR.pdf"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          UPS Technology Agreement
+        </a>
+        ,{' '}
+        <a
+          href="https://www.ups.com/assets/resources/media/en_US/daily_rates.pdf"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          UPS Rate and Service Guideline
+        </a>
+        , and{' '}
+        <a
+          href="https://www.ups.com/assets/resources/media/terms_service_us.pdf"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Tariff
+        </a>
+        .
+      </div>
+    ),
+  },
 };

src/components/country-multi-select/CountryMultiSelectExpanded.module.scss

@@ -25,6 +25,10 @@
   border-radius: 12px;
   padding: 8px;
 
+  &:global(.error) {
+    border-color: theme.$amino-danger;
+  }
+
   display: flex;
   flex-direction: column;
   gap: 4px;

src/components/country-multi-select/CountryMultiSelectExpanded.tsx

@@ -13,6 +13,10 @@ import { Button } from 'src/components/button/Button';
 import { Checkbox } from 'src/components/checkbox/Checkbox';
 import { Collapse } from 'src/components/collapse/Collapse';
 import { Divider } from 'src/components/divider/Divider';
+import {
+  type HelpTextProps,
+  HelpText,
+} from 'src/components/help-text/HelpText';
 import { Text } from 'src/components/text/Text';
 import { ChevronUpIcon } from 'src/icons/ChevronUpIcon';
 import { RemoveCircleIcon } from 'src/icons/RemoveCircleIcon';
@@ -48,32 +52,33 @@ type CountryMultiSelectExpandedRegion<CountryCode extends string = string> = {
 
 export type CountryMultiSelectExpandedProps<
   CountryCode extends string = string,
-> = BaseProps & {
-  actions?: ReactNode;
-  countries: CountryMultiSelectExpandedOption<CountryCode>[];
-  /**
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * @default 380
-   */
-  maxHeight?: number;
-  /**
-   * Remove the top header part
-   * @default false
-   */
-  noHeader?: boolean;
-  selectedCountries: CountryMultiSelectExpandedOption<CountryCode>[];
-  /**
-   * No search bar
-   * @default false
-   */
-  withoutSearch?: boolean;
-  onChange: (
-    countries: CountryMultiSelectExpandedOption<CountryCode>[],
-  ) => void;
-};
+> = BaseProps &
+  HelpTextProps & {
+    actions?: ReactNode;
+    countries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @default 380
+     */
+    maxHeight?: number;
+    /**
+     * Remove the top header part
+     * @default false
+     */
+    noHeader?: boolean;
+    selectedCountries: CountryMultiSelectExpandedOption<CountryCode>[];
+    /**
+     * No search bar
+     * @default false
+     */
+    withoutSearch?: boolean;
+    onChange: (
+      countries: CountryMultiSelectExpandedOption<CountryCode>[],
+    ) => void;
+  };
 
 export const CountryMultiSelectExpanded = <
   CountryCode extends string = string,
@@ -82,6 +87,8 @@ export const CountryMultiSelectExpanded = <
   className,
   countries,
   disabled = false,
+  error = false,
+  helpText,
   maxHeight = 380,
   noHeader = false,
   onChange,
@@ -327,7 +334,9 @@ export const CountryMultiSelectExpanded = <
         </div>
       )}
 
-      <div className={styles.componentWrapper}>
+      <HelpText error={error} helpText={helpText} withoutMargin />
+
+      <div className={clsx(styles.componentWrapper, error && 'error')}>
         <div className={styles.componentHeaderWrapper}>
           {!withoutSearch && (
             <label