Add shake animation on max-length

aragon · Dec 11, 2023 · c77589d · c77589d
1 parent cd1ed28
commit c77589d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/components/input/inputContainer/inputContainer.tsx b/src/components/input/inputContainer/inputContainer.tsx
@@ -71,7 +71,11 @@ export const InputContainer: React.FC<IInputContainerProps> = (props) => {
             )}
             <div className={containerClasses}>{children}</div>
             {maxLength != null && (
-                <p className="text-sm font-normal leading-tight text-neutral-600">
+                <p
+                    className={classNames('text-sm font-normal leading-tight text-neutral-600', {
+                        'animate-shake': inputLength === maxLength,
+                    })}
+                >
                     [{inputLength}/{maxLength}]
                 </p>
             )}

diff --git a/src/components/input/inputText/inputText.stories.tsx b/src/components/input/inputText/inputText.stories.tsx
@@ -25,7 +25,7 @@ export const Default: Story = {
     },
 };
 
-const ControlledInput = (props: IInputTextProps) => {
+const ControlledComponent = (props: IInputTextProps) => {
     const [value, setValue] = useState<string>('');
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
@@ -37,7 +37,7 @@ const ControlledInput = (props: IInputTextProps) => {
  * Usage example of a controlled input.
  */
 export const Controlled: Story = {
-    render: (props) => <ControlledInput {...props} />,
+    render: (props) => <ControlledComponent {...props} />,
     args: {
         placeholder: 'Controlled input',
     },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -198,5 +198,26 @@ module.exports = {
             tight: 'var(--ods-line-height-tight)',
             relaxed: 'var(--ods-line-height-relaxed)',
         },
+        extend: {
+            animation: {
+                shake: 'shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both',
+            },
+            keyframes: {
+                shake: {
+                    '10%, 90%': {
+                        transform: 'translate3d(-1px, 0, 0)',
+                    },
+                    '20%, 80%': {
+                        transform: 'translate3d(2px, 0, 0)',
+                    },
+                    '30%, 50%, 70%': {
+                        transform: 'translate3d(-4px, 0, 0)',
+                    },
+                    '40%, 60%': {
+                        transform: 'translate3d(4px, 0, 0)',
+                    },
+                },
+            },
+        },
     },
 };