feat(core-components-confirmation): separate error and error text (#329)

* feat(core-components-confirmation): separate error and error text separate error and error text, fix centering BREAKING CHANGE: separate error and error text * feat(core-components-confirmation): fix margins
core-ds · Oct 27, 2020 · 03fc4fb · 03fc4fb
1 parent 0f4d547
commit 03fc4fb
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 20 deletions.
diff --git a/packages/confirmation/src/component.stories.mdx b/packages/confirmation/src/component.stories.mdx
@@ -100,7 +100,8 @@ import { Select } from '../../select/src/Component';
                                 onSmsRetryClick={() => handleSmsRetryClick('error')}
                                 codeSending={codeSending['error']}
                                 codeChecking={codeChecking['error']}
-                                error={error['error']}
+                                error={!!error['error']}
+                                errorText={error['error']}
                                 countdownDuration={countdownDuration}
                                 code={value['error']}
                                 onInputChange={({ code }) => setCode('error', code)}
@@ -117,7 +118,8 @@ import { Select } from '../../select/src/Component';
                                 onSmsRetryClick={() => handleSmsRetryClick('fatal')}
                                 codeSending={codeSending['fatal']}
                                 codeChecking={codeChecking['fatal']}
-                                error={error['fatal']}
+                                error={!!error['fatal']}
+                                errorText={error['fatal']}
                                 errorIsFatal={true}
                                 countdownDuration={countdownDuration}
                                 code={value['fatal']}

diff --git a/packages/confirmation/src/component.tsx b/packages/confirmation/src/component.tsx
@@ -25,10 +25,15 @@ export type ConfirmationProps = {
      */
     codeSending?: boolean;
 
+    /**
+     * Состояние ошибки подписания
+     */
+    error?: boolean;
+
     /**
      * Текст ошибки подписания
      */
-    error?: string;
+    errorText?: string;
 
     /**
      * Дополнительный контент
@@ -154,7 +159,8 @@ export const Confirmation = forwardRef<HTMLDivElement, ConfirmationProps>(
             dataTestId,
             errorIsFatal,
             errorTitle = 'Превышено количество попыток ввода кода',
-            error,
+            error = false,
+            errorText,
             hasPhoneMask = true,
             hasSmsCountdown = true,
             phone,
@@ -183,13 +189,13 @@ export const Confirmation = forwardRef<HTMLDivElement, ConfirmationProps>(
 
         const [countdownFinished, setCountdownFinished] = useState(false);
 
-        const shouldShowError = errorIsFatal && !!error;
+        const shouldShowError = errorIsFatal && Boolean(errorText);
 
         const shouldShowSignComponent = !showHint && !shouldShowError;
 
         const shouldShowHint = showHint && !shouldShowError;
 
-        const nonFatalError = errorIsFatal ? '' : error;
+        const nonFatalError = errorIsFatal ? '' : errorText;
 
         const shouldShowHintLink = countdownFinished && !codeChecking && retries > 0;
 
@@ -256,7 +262,8 @@ export const Confirmation = forwardRef<HTMLDivElement, ConfirmationProps>(
                         phone={phone}
                         code={code}
                         hasPhoneMask={hasPhoneMask}
-                        error={nonFatalError || ''}
+                        errorText={nonFatalError || ''}
+                        error={error}
                         title={signTitle}
                         inputRef={inputRef}
                         codeCheckingText={codeCheckingText}
@@ -274,7 +281,7 @@ export const Confirmation = forwardRef<HTMLDivElement, ConfirmationProps>(
                     <div className={styles.error}>
                         <span className={styles.errorHeader}>{errorTitle}</span>
 
-                        <span className={styles.errorText}>{error}</span>
+                        <span className={styles.errorText}>{errorText}</span>
 
                         <Button
                             size='s'

diff --git a/packages/confirmation/src/components/code-input/component.tsx b/packages/confirmation/src/components/code-input/component.tsx
@@ -11,6 +11,7 @@ import cn from 'classnames';
 
 import { usePrevious } from '@alfalab/hooks';
 
+import { ContentAlign } from '../../component';
 import { mergeArrays } from './utils';
 
 import styles from './index.module.css';
@@ -19,8 +20,9 @@ type CodeInputProps = {
     processing: boolean;
     value: string;
     slotsCount: number;
-    error?: string;
+    error: boolean;
     className?: string;
+    alignContent: ContentAlign;
     handleChange: (code: string) => void;
     handleInputKeyDown: (event: KeyboardEvent) => void;
 };
@@ -31,8 +33,9 @@ type InputProps = {
     index: number;
     value: string;
     slotsCount: number;
-    error?: string;
+    error: boolean;
     processing: boolean;
+    alignContent: ContentAlign;
     focus: (inputIndex: number) => void;
     handleInputKeyDown: (event: KeyboardEvent) => void;
     setRef: SetInputRef;
@@ -47,6 +50,7 @@ const Input = ({
     error,
     processing,
     value,
+    alignContent,
     handleChange,
     handleInputKeyDown,
     setRef,
@@ -122,7 +126,7 @@ const Input = ({
 
     return (
         <input
-            className={cn(styles.input, { [styles.hasError]: Boolean(error) })}
+            className={cn(styles.input, styles[alignContent], { [styles.hasError]: error })}
             disabled={processing}
             value={splittedValue[index] || ''}
             autoComplete={index === 0 ? 'one-time-code' : ''}
@@ -136,7 +140,16 @@ const Input = ({
 
 export const CodeInput = forwardRef<HTMLInputElement, CodeInputProps>(
     (
-        { processing, value = '', slotsCount, error, handleInputKeyDown, handleChange, className },
+        {
+            processing,
+            value = '',
+            slotsCount,
+            error,
+            handleInputKeyDown,
+            handleChange,
+            className,
+            alignContent,
+        },
         ref,
     ) => {
         const inputs = useRef<HTMLInputElement[]>([]);
@@ -204,6 +217,7 @@ export const CodeInput = forwardRef<HTMLInputElement, CodeInputProps>(
                         error={error}
                         processing={processing}
                         slotsCount={slotsCount}
+                        alignContent={alignContent}
                         handleChange={handleChange}
                         handleInputKeyDown={handleInputKeyDown}
                         setRef={setRef}

diff --git a/packages/confirmation/src/components/code-input/index.module.css b/packages/confirmation/src/components/code-input/index.module.css
@@ -21,15 +21,15 @@
     font-weight: var(--confirmation-input-font-weight);
     font-family: var(--confirmation-input-font-family);
 
-    &:last-child {
-        margin-right: var(--gap-xs);
-    }
-
     &.hasError {
         color: var(--confirmation-error-color);
         caret-color: var(--confirmation-input-text-color);
         background-color: var(--confirmation-input-error-bg-color);
     }
+
+    &.center {
+        margin: 0 var(--gap-2xs);
+    }
 }
 
 @keyframes shake {

diff --git a/packages/confirmation/src/components/sign-confirmation/component.tsx b/packages/confirmation/src/components/sign-confirmation/component.tsx
@@ -20,7 +20,8 @@ export type SignConfirmationProps = {
     hasPhoneMask: boolean;
     phone?: string;
     code: string;
-    error: string;
+    errorText: string;
+    error: boolean;
     title: string;
     codeCheckingText: string;
     codeSendingText: string;
@@ -44,7 +45,8 @@ export const SignConfirmation: FC<SignConfirmationProps> = ({
     hasPhoneMask,
     phone,
     code: inputValue,
-    error = '',
+    error,
+    errorText,
     title,
     hasSmsCountdown,
     inputRef,
@@ -59,7 +61,7 @@ export const SignConfirmation: FC<SignConfirmationProps> = ({
 }) => {
     const processing = codeChecking || codeSending;
 
-    const displayedError = processing ? '' : error;
+    const displayedError = processing ? '' : errorText;
 
     const handleInputKeyDown = useCallback(
         (event: KeyboardEvent) => {
@@ -99,11 +101,12 @@ export const SignConfirmation: FC<SignConfirmationProps> = ({
             <div className={styles.inputContainer}>
                 <CodeInput
                     processing={processing}
-                    error={displayedError}
+                    error={error}
                     value={inputValue}
                     ref={inputRef}
                     slotsCount={requiredCharAmount}
                     className={styles.codeInput}
+                    alignContent={alignContent}
                     handleChange={handleInputChange}
                     handleInputKeyDown={handleInputKeyDown}
                 />