update snapshots

razorpay · Jan 11, 2024 · ab80799 · ab80799
1 parent f0c5b7e
commit ab80799
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 218 deletions.
diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
@@ -34,6 +34,11 @@ const rebrandedComponents = [
   'Switch',
   'Radio',
   'Checkbox',
+  'BaseInput',
+  'TextInput',
+  'PasswordInput',
+  'OTPInput',
+  'TextArea',
 ];
 
 module.exports = { rebrandedComponents };
diff --git a/.../blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap b/.../blade/src/components/Input/BaseInput/__tests__/__snapshots__/BaseInput.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO ddbvjp" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kbENFz"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 dBzbMg"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  hlZKkD"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(160, 100%, 26%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO gKXlrl" id="name-undefined-successtext-undefined" data-blade-component="base-text">Success</span></span></div></div></div></div></div>"`;
+exports[`<BaseInput /> should display success validation state 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><div data-blade-component="base-box" class="BaseBox-bmPWx jaAmIu"><label for="name-undefined-input-undefined" style="width:auto;flex-shrink:0;margin-right:16px" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO itNENY" data-blade-component="text">Enter name</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text"></p></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedBaseInputWrapperweb__StyledBaseInputWrapper-e1vobd-0 AnimatedBaseInputWrapperweb__StyledAnimatedBaseInputWrapper-e1vobd-1  kEPOL"><input type="text" id="name-undefined-input-undefined" data-blade-component="styled-base-input" aria-required="false" aria-disabled="false" aria-invalid="false" aria-describedby="name-undefined-successtext-undefined" class="StyledBaseInputweb__StyledBaseNativeInput-hsusrk-0 keHBlw"/><div data-blade-component="base-box" class="BaseBox-bmPWx BaseInputAnimatedBorderweb__BaseInputStyledAnimatedBorder-sc-2cepod-0  HaFJL"></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx ePSvGO"><div id="name-undefined-successtext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><svg aria-hidden="true" data-blade-component="icon" height="12px" viewBox="0 0 24 24" width="12px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" clip-rule="evenodd" fill="hsla(150, 100%, 21%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg><div data-blade-component="base-box" class="BaseBox-bmPWx eLBOzs"></div><span class="StyledBaseText-dVBfTO hfLSMt" data-blade-component="text">Success</span></span></div></div></div></div></div>"`;
 
 exports[`<BaseInput /> should display success validation state 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -95,7 +95,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(217,18%,45%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -117,7 +117,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -134,7 +134,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(160,100%,26%,1);
+  color: hsla(150,100%,21%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.6875rem;
   font-weight: 400;
@@ -151,7 +151,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  color: hsla(216,27%,36%,1);
+  color: hsla(211,26%,34%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -183,7 +183,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-webkit-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -200,7 +200,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::-moz-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -217,7 +217,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8:-ms-input-placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -234,7 +234,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c8.c8.c8.c8.c8::placeholder {
-  color: hsla(214,18%,69%,1);
+  color: hsla(211,20%,52%,0.32);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -260,14 +260,14 @@ exports[`<BaseInput /> should display success validation state 2`] = `
   left: 0;
   right: 0;
   opacity: 0;
-  background-color: hsla(218,89%,51%,1);
+  background-color: hsla(227,100%,59%,1);
   border-width: 1px;
   height: 1px;
 }
 
 .c7.c7.c7.c7.c7 {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -284,8 +284,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:hover {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -308,8 +308,8 @@ exports[`<BaseInput /> should display success validation state 2`] = `
 }
 
 .c7.c7.c7.c7.c7:focus-within {
-  background-color: hsla(155,100%,31%,0.09);
-  border-bottom-color: hsla(160,100%,26%,1);
+  background-color: hsla(150,100%,32%,0.09);
+  border-bottom-color: hsla(150,100%,32%,1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-bottom-width: 1px;
@@ -421,6 +421,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
         <div
           class="c12"
           data-blade-component="base-box"
+          id="name-1-successtext-5"
         >
           <span
             class="c13"
@@ -440,7 +441,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
                 clip-rule="evenodd"
                 d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z"
                 data-blade-component="svg-path"
-                fill="hsla(160, 100%, 26%, 1)"
+                fill="hsla(150, 100%, 21%, 1)"
                 fill-rule="evenodd"
               />
             </svg>
@@ -450,8 +451,7 @@ exports[`<BaseInput /> should display success validation state 2`] = `
             />
             <span
               class="c15"
-              data-blade-component="base-text"
-              id="name-1-successtext-5"
+              data-blade-component="text"
             >
               Success
             </span>