feat(confirmation): styles updates (#636)

* feat(confirmation): styles updates * feat(themes): update confirmation click-theme * feat(confirmation): fix texts * test(confirmation): update screenshot * docs(confirmation): storybook refactoring * feat(confirmation): try to add height animation #1
core-ds · May 25, 2021 · da00fc5 · da00fc5
1 parent 9885f5e
commit da00fc5
Show file tree

Hide file tree

Showing 20 changed files with 187 additions and 194 deletions.
diff --git a/packages/confirmation/src/Component.test.tsx b/packages/confirmation/src/Component.test.tsx
@@ -109,7 +109,7 @@ describe('Confirmation', () => {
 
     describe('Fatal error tests', () => {
         const errorText = 'Выполните операцию с самого начала';
-        const defaultButtonErrorText = 'Понятно';
+        const defaultButtonErrorText = Confirmation.defaultProps?.buttonErrorText;
         const customButtonErrorText = 'custom text';
         const customErrorTitle = 'custom error title';
 
@@ -153,7 +153,7 @@ describe('Confirmation', () => {
                 />,
             );
 
-            const buttonError = getByText(defaultButtonErrorText);
+            const buttonError = getByText(defaultButtonErrorText as string);
             buttonError.click();
 
             expect(onSmsRetryClick).not.toBeCalled();
@@ -172,16 +172,16 @@ describe('Confirmation', () => {
                 />,
             );
 
-            const buttonError = getByText(defaultButtonErrorText);
+            const buttonError = getByText(defaultButtonErrorText as string);
             buttonError.click();
 
             expect(onSmsRetryClick).toBeCalled();
         });
     });
 
     describe('Sms retry tests', () => {
-        const buttonRetryInHintText = 'Попробовать заново';
-        const buttonRetryText = 'Запросить код повторно';
+        const buttonRetryInHintText = Confirmation.defaultProps?.buttonRetryText;
+        const buttonRetryText = 'Запросить новый код';
         const hintLinkText = 'Не приходит сообщение?';
 
         it('should display retry button', async () => {
@@ -247,7 +247,7 @@ describe('Confirmation', () => {
             const smsHintButton = await findByText(hintLinkText);
             smsHintButton.click();
 
-            const buttonRetryInHint = await findByText(buttonRetryInHintText);
+            const buttonRetryInHint = await findByText(buttonRetryInHintText as string);
             buttonRetryInHint.click();
 
             expect(onSmsRetryClick).toBeCalled();
@@ -275,13 +275,13 @@ describe('Confirmation', () => {
     });
 
     describe('Code cheсking tests', () => {
-        const defaultCodeCheckingText = 'Проверка кода';
+        const defaultCodeCheckingText = Confirmation.defaultProps?.codeCheckingText;
         const customCodeCheckingText = 'Идет проверка кода';
 
         it('should display default codeCheсkingText if codeChecking is true', () => {
             const { getByText } = render(<Confirmation {...baseProps} codeChecking={true} />);
 
-            expect(getByText(defaultCodeCheckingText)).toBeInTheDocument();
+            expect(getByText(defaultCodeCheckingText as string)).toBeInTheDocument();
         });
 
         it('should display custom passed codeCheсkingText if codeChecking is true', () => {
@@ -298,13 +298,13 @@ describe('Confirmation', () => {
     });
 
     describe('Code sending tests', () => {
-        const defaultCodeSendingText = 'Отправляем код';
+        const defaultCodeSendingText = Confirmation.defaultProps?.codeSendingText;
         const customCodeSendingText = 'Идет отправка кода';
 
         it('should display default codeSendingText if codeSending is true', () => {
             const { getByText } = render(<Confirmation {...baseProps} codeSending={true} />);
 
-            expect(getByText(defaultCodeSendingText)).toBeInTheDocument();
+            expect(getByText(defaultCodeSendingText as string)).toBeInTheDocument();
         });
 
         it('should display custom passed codeSendingText if codeSending is true', () => {

diff --git a/...ion/src/__image_snapshots__/confirmation-code-char-amount-align-sprite-snap.png b/...ion/src/__image_snapshots__/confirmation-code-char-amount-align-sprite-snap.png
diff --git a/...src/__image_snapshots__/confirmation-code-checking-code-sending-sprite-snap.png b/...src/__image_snapshots__/confirmation-code-checking-code-sending-sprite-snap.png
diff --git a/...age_snapshots__/confirmation-interactions-tests-open-don-t-receive-sms-snap.png b/...age_snapshots__/confirmation-interactions-tests-open-don-t-receive-sms-snap.png
diff --git a/...n/src/__image_snapshots__/confirmation-no-attempts-left-message-sprite-snap.png b/...n/src/__image_snapshots__/confirmation-no-attempts-left-message-sprite-snap.png
diff --git a/...src/__image_snapshots__/confirmation-phone-phone-mask-countdown-sprite-snap.png b/...src/__image_snapshots__/confirmation-phone-phone-mask-countdown-sprite-snap.png
diff --git a/...es/confirmation/src/__image_snapshots__/confirmation-sign-error-sprite-snap.png b/...es/confirmation/src/__image_snapshots__/confirmation-sign-error-sprite-snap.png
diff --git a/packages/confirmation/src/__snapshots__/Component.test.tsx.snap b/packages/confirmation/src/__snapshots__/Component.test.tsx.snap
@@ -58,10 +58,10 @@ exports[`Confirmation Snapshot tests should match snapshot 1`] = `
         
       </div>
       <div
-        class="countdown"
+        class="countdown countdown"
       >
         <div
-          class="component left countdown"
+          class="component left"
         >
           
           <div>
@@ -120,7 +120,7 @@ exports[`Confirmation Snapshot tests should match snapshot 1`] = `
         class="smsComeLinkWrap"
       >
         <a
-          class="component secondary smsComeLink"
+          class="component secondary pseudo smsComeLink"
         >
           <span
             class="text"
@@ -154,7 +154,7 @@ exports[`Confirmation Snapshot tests should match snapshot with fatal error 1`]
         Выполните операцию с самого начала
       </span>
       <button
-        class="component secondary s block"
+        class="component secondary xs"
         type="button"
       >
         <span
@@ -226,10 +226,10 @@ exports[`Confirmation Snapshot tests should match snapshot with masked phone 1`]
         
       </div>
       <div
-        class="countdown"
+        class="countdown countdown"
       >
         <div
-          class="component left countdown"
+          class="component left"
         >
           <div>
             Код отправлен на
@@ -292,7 +292,7 @@ exports[`Confirmation Snapshot tests should match snapshot with masked phone 1`]
         class="smsComeLinkWrap"
       >
         <a
-          class="component secondary smsComeLink"
+          class="component secondary pseudo smsComeLink"
         >
           <span
             class="text"
@@ -369,10 +369,10 @@ exports[`Confirmation Snapshot tests should match snapshot with nonFatal error 1
         </div>
       </div>
       <div
-        class="countdown"
+        class="countdown countdown"
       >
         <div
-          class="component left countdown"
+          class="component left hasError"
         >
           
           <div>
@@ -431,7 +431,7 @@ exports[`Confirmation Snapshot tests should match snapshot with nonFatal error 1
         class="smsComeLinkWrap"
       >
         <a
-          class="component secondary smsComeLink"
+          class="component secondary pseudo smsComeLink"
         >
           <span
             class="text"
@@ -504,10 +504,10 @@ exports[`Confirmation Snapshot tests should match snapshot with unmasked phone 1
         
       </div>
       <div
-        class="countdown"
+        class="countdown countdown"
       >
         <div
-          class="component left countdown"
+          class="component left"
         >
           <div>
             Код отправлен на
@@ -570,7 +570,7 @@ exports[`Confirmation Snapshot tests should match snapshot with unmasked phone 1
         class="smsComeLinkWrap"
       >
         <a
-          class="component secondary smsComeLink"
+          class="component secondary pseudo smsComeLink"
         >
           <span
             class="text"
@@ -646,7 +646,7 @@ exports[`Confirmation Snapshot tests should math snapshot without smsCountdown 1
         class="smsComeLinkWrap"
       >
         <a
-          class="component secondary smsComeLink"
+          class="component secondary pseudo smsComeLink"
         >
           <span
             class="text"

diff --git a/packages/confirmation/src/component.screenshots.test.tsx b/packages/confirmation/src/component.screenshots.test.tsx
@@ -23,7 +23,7 @@ describe(
                 'sprite',
                 createSpriteStorybookUrl({
                     componentName: 'Confirmation',
-                    size: { width: 350, height: 350 },
+                    size: { width: 450, height: 450 },
                     knobs: {
                         code: ['', '1234'],
                         alignContent: ['left', 'center'],
@@ -50,7 +50,7 @@ describe(
                 'sprite',
                 createSpriteStorybookUrl({
                     componentName: 'Confirmation',
-                    size: { width: 350, height: 350 },
+                    size: { width: 450, height: 450 },
                     knobs: {
                         code: ['12345'],
                         phone: '+7 000 000 00 42',
@@ -78,7 +78,7 @@ describe(
                 'sprite',
                 createSpriteStorybookUrl({
                     componentName: 'Confirmation',
-                    size: { width: 350, height: 350 },
+                    size: { width: 450, height: 450 },
                     knobs: {
                         code: ['12345'],
                         codeChecking: [true, false],
@@ -106,7 +106,7 @@ describe(
                 'sprite',
                 createSpriteStorybookUrl({
                     componentName: 'Confirmation',
-                    size: { width: 350, height: 350 },
+                    size: { width: 450, height: 450 },
                     knobs: {
                         code: ['12345'],
                         error: true,
@@ -135,7 +135,7 @@ describe(
                 'sprite',
                 createSpriteStorybookUrl({
                     componentName: 'Confirmation',
-                    size: { width: 350, height: 350 },
+                    size: { width: 450, height: 450 },
                     knobs: {
                         code: ['12345'],
                         error: true,
@@ -172,7 +172,7 @@ describe('Confirmation | interactions tests', () => {
                 page,
                 expect,
                 css,
-                screenshotOpts: { clip: { x: 0, y: 60, width: 500, height: 350 } },
+                screenshotOpts: { clip: { x: 0, y: 60, width: 500, height: 450 } },
             });
         } catch (error) {
             // eslint-disable-next-line no-console