diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index 53376a626d..22196b0599 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -262,6 +262,8 @@ exports[`Storyshots Components/Button Primary 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -327,6 +329,8 @@ exports[`Storyshots Components/Button Secondary 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -393,6 +397,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -455,6 +461,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -517,6 +525,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -583,6 +593,8 @@ exports[`Storyshots Components/Button Tertiary 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: transparent;
border-color: transparent;
color: #3388FF;
@@ -646,6 +658,8 @@ exports[`Storyshots Components/Button With Icon 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -728,6 +742,8 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -785,6 +801,8 @@ exports[`Storyshots Components/Button/ButtonGroup Base 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -1011,19 +1029,19 @@ exports[`Storyshots Components/Button/IconButton Base 1`] = `
exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
@keyframes animation-0 {
0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
}
}
-.circuit-7 {
+.circuit-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -1048,385 +1066,101 @@ exports[`Storyshots Components/Button/LoadingButton Base 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
-webkit-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`Storyshots Components/Button/LoadingButton Error 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
}
-.circuit-7:focus {
+.circuit-3:focus {
outline: 0;
box-shadow: 0 0 0 4px #AFD0FE;
}
-.circuit-7:focus::-moz-focus-inner {
+.circuit-3:focus::-moz-focus-inner {
border: 0;
}
-.circuit-7:disabled,
-.circuit-7[disabled] {
+.circuit-3:disabled,
+.circuit-3[disabled] {
opacity: 0.5;
pointer-events: none;
box-shadow: none;
}
-.circuit-7:hover {
+.circuit-3:hover {
background-color: #1760CE;
border-color: #1760CE;
}
-.circuit-7:active {
+.circuit-3:active {
background-color: #003C8B;
border-color: #003C8B;
}
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
+.circuit-1 {
+ display: block;
width: 24px;
height: 24px;
border-radius: 100%;
- border: 2px solid #FFFFFF;
+ border: 2px solid currentColor;
border-top-color: transparent;
-webkit-animation: animation-0 1s infinite linear;
animation: animation-0 1s infinite linear;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
+ position: absolute;
opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`Storyshots Components/Button/LoadingButton Success 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
+ visibility: hidden;
+ -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
-.circuit-7:focus::-moz-focus-inner {
+.circuit-0 {
border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
+ white-space: nowrap;
+ width: 1px;
}
-.circuit-4 {
- display: inline-block;
+.circuit-2 {
opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
+ visibility: visible;
+ -webkit-transform: scale3d(1,1,1);
+ -ms-transform: scale3d(1,1,1);
+ transform: scale3d(1,1,1);
+ -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
}
`;
@@ -4229,6 +3963,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -4419,6 +4155,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -5102,6 +4840,8 @@ exports[`Storyshots Components/Carousel Composed 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -5663,6 +5403,8 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -5937,6 +5679,8 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6660,6 +6404,8 @@ exports[`Storyshots Components/Modal Base 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6726,6 +6472,8 @@ exports[`Storyshots Components/Modal With Custom Styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6792,6 +6540,8 @@ exports[`Storyshots Components/Modal With Footer 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6858,6 +6608,8 @@ exports[`Storyshots Components/Modal With Header 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6924,6 +6676,8 @@ exports[`Storyshots Components/Modal With Title And Close Button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -6990,6 +6744,8 @@ exports[`Storyshots Components/Modal Without Close Button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -7179,6 +6935,8 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -7728,6 +7486,8 @@ exports[`Storyshots Components/Notification Alert 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -8087,6 +7847,8 @@ exports[`Storyshots Components/Notification Warning 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -8558,6 +8320,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -8623,6 +8387,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -8706,6 +8472,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -8782,6 +8550,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -8909,6 +8679,8 @@ exports[`Storyshots Components/Popover Base 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -9372,6 +9144,19 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
`;
exports[`Storyshots Components/Sidebar Base 1`] = `
+.circuit-48 {
+ border: 0;
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
.circuit-52 {
height: 100vh;
}
@@ -9684,19 +9469,6 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
}
}
-.circuit-48 {
- border: 0;
- -webkit-clip: rect(0 0 0 0);
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-
@@ -9911,77 +9683,49 @@ exports[`Storyshots Components/Sidebar Base 1`] = `
exports[`Storyshots Components/Spinner Base 1`] = `
@keyframes animation-0 {
0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
}
}
@keyframes animation-0 {
0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
}
100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
}
}
-.circuit-2 {
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- background-color: #9DA7B1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- height: 50px;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 50px;
-}
-
.circuit-0 {
+ display: block;
width: 24px;
height: 24px;
border-radius: 100%;
- border: 2px solid #FFFFFF;
+ border: 2px solid currentColor;
border-top-color: transparent;
-webkit-animation: animation-0 1s infinite linear;
animation: animation-0 1s infinite linear;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
}
-
+
`;
exports[`Storyshots Components/Step Form 1`] = `
@@ -10016,6 +9760,8 @@ exports[`Storyshots Components/Step Form 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -10340,6 +10086,8 @@ exports[`Storyshots Components/Step Slider 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -10457,6 +10205,8 @@ exports[`Storyshots Components/Step Swiper 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -23119,6 +22869,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -23189,6 +22941,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -23256,6 +23010,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -23318,6 +23074,8 @@ HTMLCollection [
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/Button/Button.docs.mdx b/src/components/Button/Button.docs.mdx
index 05665da582..c11e05514e 100644
--- a/src/components/Button/Button.docs.mdx
+++ b/src/components/Button/Button.docs.mdx
@@ -75,9 +75,7 @@ with a primary button for the expected action and a secondary button on its left
## LoadingButton
-When the button's action is inputting/saving information or it takes more than 3 seconds to take the user to the next step/page, you can indicate a loading state with `LoadingButton`, as well as visually notify the user of success or an error after loading. You should only use it on primary buttons.
+When the button's action is inputting/saving information or it takes more than 3 seconds to take the user to the next step/page, you can indicate a loading state with `LoadingButton`.
-
-
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index d9cc6673f5..a38c086f33 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -73,6 +73,7 @@ const baseStyles = ({ theme }: StyleProps) => css`
border-radius: ${theme.borderRadius.giga};
border-width: ${BORDER_WIDTH};
border-style: solid;
+ transition: opacity ${theme.transitions.default};
&:focus {
${focusOutline({ theme })};
diff --git a/src/components/Button/__snapshots__/Button.spec.tsx.snap b/src/components/Button/__snapshots__/Button.spec.tsx.snap
index fcd3f582ec..beb86c3065 100644
--- a/src/components/Button/__snapshots__/Button.spec.tsx.snap
+++ b/src/components/Button/__snapshots__/Button.spec.tsx.snap
@@ -108,6 +108,8 @@ exports[`Button styles should render a disabled button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -174,6 +176,8 @@ exports[`Button styles should render a giga button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -239,6 +243,8 @@ exports[`Button styles should render a kilo button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -304,6 +310,8 @@ exports[`Button styles should render a mega button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -369,6 +377,8 @@ exports[`Button styles should render a primary button by default 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -434,6 +444,8 @@ exports[`Button styles should render a secondary button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -499,6 +511,8 @@ exports[`Button styles should render a stretched button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -565,6 +579,8 @@ exports[`Button styles should render a tertiary button 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: transparent;
border-color: transparent;
color: #3388FF;
diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts
deleted file mode 100644
index 8c874b1cec..0000000000
--- a/src/components/Button/constants.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-
-import { sizes } from '../../styles/constants';
-
-const { KILO, MEGA, GIGA } = sizes;
-
-export const SIZE_PROP_TYPE = PropTypes.oneOf([KILO, MEGA, GIGA]);
-
-// TODO: move this back to the component once we Make LoadingButton a
-// sub-component.
-export const BUTTON_PROP_TYPES = {
- /**
- * Should the Button be disabled?
- */
- disabled: PropTypes.bool,
- /**
- * URL the Button should lead to. Causes the Button to render an
tag.
- */
- href: PropTypes.string,
- /**
- * Renders a primary button using the brand color.
- */
- primary: PropTypes.bool,
- /**
- * Size of the button. Use the Button's KILO, MEGA, or GIGA properties.
- */
- size: SIZE_PROP_TYPE,
- /**
- * Renders a secondary button.
- */
- secondary: PropTypes.bool,
- /**
- * Trigger stretch (full width) styles on the component.
- */
- stretch: PropTypes.bool,
- /**
- * Link target. Should only be passed, if href is passed, too.
- */
- target: PropTypes.string
-};
-
-export const BUTTON_DEFAULT_PROPS = {
- disabled: false,
- href: null,
- primary: false,
- secondary: false,
- size: MEGA,
- stretch: false,
- target: null
-};
diff --git a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
index cefd965204..4622e5c012 100644
--- a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
+++ b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -305,6 +305,8 @@ exports[`Carousel styles should render with children as a function 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -856,6 +858,8 @@ exports[`Carousel styles should render with children as a node 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1378,6 +1382,8 @@ exports[`Carousel styles should render with default paused styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1931,6 +1937,8 @@ exports[`Carousel styles should render with default styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
index 2142e3efd4..ed288eccc3 100644
--- a/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
+++ b/src/components/Carousel/components/Buttons/__snapshots__/Buttons.spec.js.snap
@@ -41,6 +41,8 @@ exports[`Buttons styles should render with default styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/LoadingButton/LoadingButton.js b/src/components/LoadingButton/LoadingButton.js
deleted file mode 100644
index 5fd36d323d..0000000000
--- a/src/components/LoadingButton/LoadingButton.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { noop, omit } from 'lodash/fp';
-
-import Button from './components/Button';
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from './constants';
-import { BUTTON_PROP_TYPES, BUTTON_DEFAULT_PROPS } from '../Button/constants';
-import {
- isActive,
- isDisabled,
- isSuccess,
- isError
-} from './LoadingButtonService';
-
-export default class LoadingButton extends Component {
- static SUCCESS = SUCCESS;
-
- static ERROR = ERROR;
-
- static propTypes = {
- ...BUTTON_PROP_TYPES,
- isLoading: PropTypes.bool,
- exitAnimationDuration: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number
- ]),
- exitAnimation: PropTypes.oneOf([
- LoadingButton.SUCCESS,
- LoadingButton.ERROR
- ]),
- onAnimationComplete: PropTypes.func
- };
-
- static defaultProps = {
- ...BUTTON_DEFAULT_PROPS,
- isLoading: false,
- exitAnimationDuration: 2000,
- exitAnimation: null,
- onAnimationComplete: noop
- };
-
- state = {
- loadingState: DISABLED
- };
-
- static getDerivedStateFromProps(nextProps, prevState) {
- const { isLoading, exitAnimation } = nextProps;
- const { loadingState } = prevState;
-
- // Component still on exitAnimation status
- if (isSuccess(loadingState) || isError(loadingState)) {
- return null;
- }
-
- // Component on initial disabled status
- if (isLoading && isDisabled(loadingState)) {
- return {
- loadingState: ACTIVE
- };
- }
-
- // Component on active status but finished loading
- if (!isLoading && isActive(loadingState)) {
- return {
- loadingState: exitAnimation || DISABLED
- };
- }
-
- return null;
- }
-
- componentDidUpdate(prevProps, prevState) {
- const { loadingState } = this.state;
- const { exitAnimationDuration, exitAnimation } = this.props;
-
- if (!isActive(loadingState) && prevState.loadingState !== loadingState) {
- if (!exitAnimation) {
- this.onAnimationComplete();
- } else {
- this.timeout = setTimeout(
- this.onAnimationComplete,
- exitAnimationDuration
- );
- }
- }
- }
-
- componentWillUnmount() {
- if (this.timeout) {
- clearTimeout(this.timeout);
- }
- }
-
- onAnimationComplete = () => {
- const { onAnimationComplete } = this.props;
-
- if (onAnimationComplete) {
- onAnimationComplete();
- }
-
- this.setState({
- loadingState: DISABLED
- });
- };
-
- render() {
- const { loadingState } = this.state;
- const props = omit(
- ['onAnimationComplete', 'isLoading', 'exitAnimationDuration'],
- this.props
- );
- const isLoading =
- isActive(loadingState) ||
- isSuccess(loadingState) ||
- isError(loadingState);
-
- return (
-
- );
- }
-}
diff --git a/src/components/LoadingButton/LoadingButton.spec.js b/src/components/LoadingButton/LoadingButton.spec.js
deleted file mode 100644
index 5871dd54bf..0000000000
--- a/src/components/LoadingButton/LoadingButton.spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import LoadingButton from './LoadingButton';
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from './constants';
-
-describe('LoadingButton', () => {
- describe('Style tests', () => {
- it('should render with default styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should render with loading styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should render with default styles after loading has finished', async () => {
- const { rerender, container } = render(
-
- );
-
- rerender();
-
- await wait();
-
- expect(container.firstChild).toMatchSnapshot();
- });
- });
-
- describe('getDerivedStateFromProps()', () => {
- it('should update the state to ACTIVE', () => {
- const nextProps = { isLoading: true };
- const prevState = { loadingState: DISABLED };
- const actual = LoadingButton.getDerivedStateFromProps(
- nextProps,
- prevState
- );
- const expected = { loadingState: ACTIVE };
-
- expect(actual).toEqual(expected);
- });
-
- describe('exit animations', () => {
- const nextProps = { isLoading: false };
- const prevState = { loadingState: ACTIVE };
-
- it('should update the state to DISABLED when there is no exit animation', () => {
- const actual = LoadingButton.getDerivedStateFromProps(
- nextProps,
- prevState
- );
- const expected = { loadingState: DISABLED };
-
- expect(actual).toEqual(expected);
- });
-
- it('should update the state to SUCCESS when there is a success animation', () => {
- const actual = LoadingButton.getDerivedStateFromProps(
- { ...nextProps, exitAnimation: LoadingButton.SUCCESS },
- prevState
- );
- const expected = { loadingState: SUCCESS };
-
- expect(actual).toEqual(expected);
- });
-
- it('should update the state to ERROR when there is an error animation', () => {
- const actual = LoadingButton.getDerivedStateFromProps(
- { ...nextProps, exitAnimation: LoadingButton.ERROR },
-
- prevState
- );
- const expected = { loadingState: ERROR };
-
- expect(actual).toEqual(expected);
- });
- });
- });
-
- describe('onAnimationComplete()', () => {
- it('should dispatch the provided onAnimationComplete handler', async () => {
- const onAnimationCompleteMock = jest.fn();
- const { rerender } = render(
-
- );
-
- rerender(
-
- );
-
- await wait();
-
- expect(onAnimationCompleteMock).toHaveBeenCalledTimes(1);
- });
- });
-
- describe('Accessibility tests', () => {
- it('should meet accessibility guidelines', async () => {
- const wrapper = renderToHtml(
- Loading Button
- );
- const actual = await axe(wrapper);
- expect(actual).toHaveNoViolations();
- });
- });
-});
diff --git a/src/components/LoadingButton/LoadingButton.spec.tsx b/src/components/LoadingButton/LoadingButton.spec.tsx
new file mode 100644
index 0000000000..0e56ccbfc8
--- /dev/null
+++ b/src/components/LoadingButton/LoadingButton.spec.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { create, renderToHtml, axe, RenderFn } from '../../util/test-utils';
+
+import { LoadingButton, LoadingButtonProps } from './LoadingButton';
+
+describe('LoadingButton', () => {
+ function renderLoadingButton(renderFn: RenderFn, props: LoadingButtonProps) {
+ return renderFn();
+ }
+
+ const baseProps = {
+ children: 'Things take time',
+ loadingLabel: 'Loading'
+ };
+
+ describe('styles', () => {
+ it('should render with default styles', () => {
+ const actual = renderLoadingButton(create, baseProps);
+ expect(actual).toMatchSnapshot();
+ });
+
+ it('should render with loading styles', () => {
+ const actual = renderLoadingButton(create, {
+ ...baseProps,
+ isLoading: true
+ });
+ expect(actual).toMatchSnapshot();
+ });
+ });
+
+ describe('accessibility', () => {
+ it('should meet accessibility guidelines', async () => {
+ const wrapper = renderLoadingButton(renderToHtml, baseProps);
+ const actual = await axe(wrapper);
+ expect(actual).toHaveNoViolations();
+ });
+ });
+});
diff --git a/src/components/LoadingButton/LoadingButton.story.js b/src/components/LoadingButton/LoadingButton.story.tsx
similarity index 53%
rename from src/components/LoadingButton/LoadingButton.story.js
rename to src/components/LoadingButton/LoadingButton.story.tsx
index 16ab0b0d40..19f2939ec7 100644
--- a/src/components/LoadingButton/LoadingButton.story.js
+++ b/src/components/LoadingButton/LoadingButton.story.tsx
@@ -14,64 +14,46 @@
*/
import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
-import LoadingButton from '.';
+import docs from '../Button/Button.docs.mdx';
+import { LoadingButton, LoadingButtonProps } from './LoadingButton';
-// eslint-disable-next-line react/prop-types
-const LoadingButtonWithState = ({ exitAnimation, ...props }) => {
+export default {
+ title: 'Components/Button/LoadingButton',
+ component: LoadingButton,
+ parameters: {
+ docs: { page: docs },
+ jest: ['LoadingButton']
+ }
+};
+
+const StatefulLoadingButton = (props: Partial) => {
const [loading, setLoading] = useState(false);
const handleClick = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
- }, 1000);
+ }, 2000);
};
return (
+ variant={select(
+ 'Variant',
+ ['primary', 'secondary', 'tertiary'],
+ 'primary'
+ )}
+ size={select('Size', ['kilo', 'mega', 'giga'], 'mega')}
+ {...props}
+ >
+ Things take time
+
);
};
-export default {
- title: 'Components/Button/LoadingButton',
- component: LoadingButton,
- parameters: {
- jest: ['LoadingButton']
- }
-};
-
-export const base = () => (
-
- Things take time
-
-);
-
-export const success = () => (
-
- I am a success!
-
-);
-
-export const error = () => (
-
- I will fail.
-
-);
+export const Base = () => ;
diff --git a/src/components/LoadingButton/LoadingButton.tsx b/src/components/LoadingButton/LoadingButton.tsx
new file mode 100644
index 0000000000..b460f58cfd
--- /dev/null
+++ b/src/components/LoadingButton/LoadingButton.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { FC } from 'react';
+import { css } from '@emotion/core';
+import { hideVisually } from 'polished';
+
+import styled, { StyleProps } from '../../styles/styled';
+import Button from '../Button';
+import { ButtonProps } from '../Button/Button';
+import Spinner from '../Spinner';
+
+export interface LoadingButtonProps extends ButtonProps {
+ /**
+ * Visually disables the button and shows a loading spinner.
+ */
+ isLoading?: boolean;
+ /**
+ * Visually hidden label to communicate the loading state to visually
+ * impaired users.
+ */
+ loadingLabel: string;
+}
+
+const buttonStyles = css`
+ position: relative;
+ overflow: hidden;
+`;
+
+const spinnerBaseStyles = ({ theme }: StyleProps) => css`
+ position: absolute;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity ${theme.transitions.default},
+ visibility ${theme.transitions.default};
+`;
+
+const spinnerLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
+ isLoading &&
+ css`
+ opacity: 1;
+ visibility: visible;
+ `;
+
+const LoadingIcon = styled(Spinner)<{ isLoading: boolean }>(
+ spinnerBaseStyles,
+ spinnerLoadingStyles
+);
+
+const LoadingLabel = styled.span(hideVisually);
+
+const childrenStyles = ({ theme }: StyleProps) => css`
+ opacity: 1;
+ visibility: visible;
+ transform: scale3d(1, 1, 1);
+ transition: opacity ${theme.transitions.default},
+ transform ${theme.transitions.default},
+ visibility ${theme.transitions.default};
+`;
+
+const childrenLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
+ isLoading &&
+ css`
+ opacity: 0;
+ visibility: hidden;
+ transform: scale3d(0, 0, 0);
+ `;
+
+const Children = styled.span<{ isLoading: boolean }>(
+ childrenStyles,
+ childrenLoadingStyles
+);
+
+export const LoadingButton: FC = ({
+ children,
+ isLoading = false,
+ loadingLabel = 'Loading',
+ ...props
+}) => (
+
+);
diff --git a/src/components/LoadingButton/LoadingButtonService.spec.js b/src/components/LoadingButton/LoadingButtonService.spec.js
deleted file mode 100644
index 1dc4344580..0000000000
--- a/src/components/LoadingButton/LoadingButtonService.spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from './constants';
-
-import * as Service from './LoadingButtonService';
-
-describe('LoadingButtonService', () => {
- describe('isActive()', () => {
- describe('not equal', () => {
- it('should return false', () => {
- expect(Service.isActive(DISABLED)).toBeFalsy();
- });
- });
-
- it('should return true', () => {
- expect(Service.isActive(ACTIVE)).toBeTruthy();
- });
- });
-
- describe('isDisabled()', () => {
- describe('not equal', () => {
- it('should return false', () => {
- expect(Service.isDisabled(ACTIVE)).toBeFalsy();
- });
- });
-
- it('should return true', () => {
- expect(Service.isDisabled(DISABLED)).toBeTruthy();
- });
- });
-
- describe('isSuccess()', () => {
- describe('not equal', () => {
- it('should return false', () => {
- expect(Service.isSuccess(DISABLED)).toBeFalsy();
- });
- });
-
- it('should return true', () => {
- expect(Service.isSuccess(SUCCESS)).toBeTruthy();
- });
- });
-
- describe('isError()', () => {
- describe('not equal', () => {
- it('should return false', () => {
- expect(Service.isError(DISABLED)).toBeFalsy();
- });
- });
-
- it('should return true', () => {
- expect(Service.isError(ERROR)).toBeTruthy();
- });
- });
-});
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
deleted file mode 100644
index 3fb04eee53..0000000000
--- a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
+++ /dev/null
@@ -1,451 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingButton Style tests should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`LoadingButton Style tests should render with default styles after loading has finished 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`LoadingButton Style tests should render with loading styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- opacity: 0;
- -webkit-transform: translate(0,100%);
- -ms-transform: translate(0,100%);
- transform: translate(0,100%);
-}
-
-
-`;
diff --git a/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
new file mode 100644
index 0000000000..40d5ceb8b4
--- /dev/null
+++ b/src/components/LoadingButton/__snapshots__/LoadingButton.spec.tsx.snap
@@ -0,0 +1,301 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingButton styles should render with default styles 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+.circuit-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: auto;
+ height: auto;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ font-weight: 700;
+ border-radius: 5px;
+ border-width: 1px;
+ border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
+ background-color: #3388FF;
+ border-color: #3388FF;
+ color: #FFFFFF;
+ padding: 8px calc(24px - 1px);
+}
+
+.circuit-3:focus {
+ outline: 0;
+ box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-3:focus::-moz-focus-inner {
+ border: 0;
+}
+
+.circuit-3:disabled,
+.circuit-3[disabled] {
+ opacity: 0.5;
+ pointer-events: none;
+ box-shadow: none;
+}
+
+.circuit-3:hover {
+ background-color: #1760CE;
+ border-color: #1760CE;
+}
+
+.circuit-3:active {
+ background-color: #003C8B;
+ border-color: #003C8B;
+}
+
+.circuit-1 {
+ display: block;
+ width: 24px;
+ height: 24px;
+ border-radius: 100%;
+ border: 2px solid currentColor;
+ border-top-color: transparent;
+ -webkit-animation: animation-0 1s infinite linear;
+ animation: animation-0 1s infinite linear;
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ position: absolute;
+ opacity: 0;
+ visibility: hidden;
+ -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+}
+
+.circuit-0 {
+ border: 0;
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.circuit-2 {
+ opacity: 1;
+ visibility: visible;
+ -webkit-transform: scale3d(1,1,1);
+ -ms-transform: scale3d(1,1,1);
+ transform: scale3d(1,1,1);
+ -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+}
+
+
+`;
+
+exports[`LoadingButton styles should render with loading styles 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+.circuit-3 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ width: auto;
+ height: auto;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ font-weight: 700;
+ border-radius: 5px;
+ border-width: 1px;
+ border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
+ background-color: #3388FF;
+ border-color: #3388FF;
+ color: #FFFFFF;
+ padding: 8px calc(24px - 1px);
+}
+
+.circuit-3:focus {
+ outline: 0;
+ box-shadow: 0 0 0 4px #AFD0FE;
+}
+
+.circuit-3:focus::-moz-focus-inner {
+ border: 0;
+}
+
+.circuit-3:disabled,
+.circuit-3[disabled] {
+ opacity: 0.5;
+ pointer-events: none;
+ box-shadow: none;
+}
+
+.circuit-3:hover {
+ background-color: #1760CE;
+ border-color: #1760CE;
+}
+
+.circuit-3:active {
+ background-color: #003C8B;
+ border-color: #003C8B;
+}
+
+.circuit-0 {
+ border: 0;
+ -webkit-clip: rect(0 0 0 0);
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.circuit-1 {
+ display: block;
+ width: 24px;
+ height: 24px;
+ border-radius: 100%;
+ border: 2px solid currentColor;
+ border-top-color: transparent;
+ -webkit-animation: animation-0 1s infinite linear;
+ animation: animation-0 1s infinite linear;
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ position: absolute;
+ opacity: 0;
+ visibility: hidden;
+ -webkit-transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+ opacity: 1;
+ visibility: visible;
+}
+
+.circuit-2 {
+ opacity: 1;
+ visibility: visible;
+ -webkit-transform: scale3d(1,1,1);
+ -ms-transform: scale3d(1,1,1);
+ transform: scale3d(1,1,1);
+ -webkit-transition: opacity 200ms ease-in-out, -webkit-transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ -webkit-transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms ease-in-out;
+ opacity: 0;
+ visibility: hidden;
+ -webkit-transform: scale3d(0,0,0);
+ -ms-transform: scale3d(0,0,0);
+ transform: scale3d(0,0,0);
+}
+
+
+`;
diff --git a/src/components/LoadingButton/components/Button/Button.js b/src/components/LoadingButton/components/Button/Button.js
deleted file mode 100644
index f5f90d2cbe..0000000000
--- a/src/components/LoadingButton/components/Button/Button.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
-
-import Button from '../../../Button';
-import LoadingIcon from '../LoadingIcon';
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from '../../constants';
-import {
- BUTTON_PROP_TYPES,
- BUTTON_DEFAULT_PROPS
-} from '../../../Button/constants';
-
-const StyledButton = styled(Button)`
- position: relative;
- overflow: hidden;
-`;
-
-const childrenWrapperStyles = ({ theme }) => css`
- display: inline-block;
- opacity: 1;
- transform: translate(0, 0);
- transition: opacity ${theme.transitions.default},
- transform ${theme.transitions.default};
-`;
-
-const childrenWrapperLoadingStyles = ({ loadingState }) =>
- loadingState !== DISABLED &&
- css`
- opacity: 0;
- transform: translate(0, 100%);
- `;
-
-const ChildrenWrapper = styled.span`
- ${childrenWrapperStyles};
- ${childrenWrapperLoadingStyles};
-`;
-
-const LoadingButton = ({
- loadingState,
- size,
- children,
- onClick,
- isLoading,
- ...otherProps
-}) => (
-
-
- {children}
-
-);
-
-LoadingButton.propTypes = {
- ...BUTTON_PROP_TYPES,
- loadingState: PropTypes.oneOf([DISABLED, ACTIVE, SUCCESS, ERROR]),
- isLoading: PropTypes.bool
-};
-
-LoadingButton.defaultProps = {
- ...BUTTON_DEFAULT_PROPS,
- loadingState: DISABLED,
- isLoading: false
-};
-
-export default LoadingButton;
diff --git a/src/components/LoadingButton/components/Button/Button.spec.js b/src/components/LoadingButton/components/Button/Button.spec.js
deleted file mode 100644
index dcd8a35413..0000000000
--- a/src/components/LoadingButton/components/Button/Button.spec.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import { ACTIVE } from '../../constants';
-import Button from '.';
-
-describe('Button', () => {
- describe('Style tests', () => {
- it('should have default styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should have active loading styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should have isLoading styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
- });
-
- describe('Logic tests', () => {
- it('should not bind the click handler to the button while loading', () => {
- const onClick = jest.fn();
- const { getByTestId } = render(
-
- );
-
- act(() => {
- fireEvent.click(getByTestId('loading-button'));
- });
-
- expect(onClick).not.toHaveBeenCalled();
- });
- });
-
- describe('Accessibility tests', () => {
- it('should meet accessibility guidelines', async () => {
- const wrapper = renderToHtml();
- const actual = await axe(wrapper);
- expect(actual).toHaveNoViolations();
- });
- });
-});
diff --git a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap b/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
deleted file mode 100644
index 46d8a3ce96..0000000000
--- a/src/components/LoadingButton/components/Button/__snapshots__/Button.spec.js.snap
+++ /dev/null
@@ -1,451 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button Style tests should have active loading styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- opacity: 0;
- -webkit-transform: translate(0,100%);
- -ms-transform: translate(0,100%);
- transform: translate(0,100%);
-}
-
-
-`;
-
-exports[`Button Style tests should have default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`Button Style tests should have isLoading styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-7 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: auto;
- height: auto;
- cursor: pointer;
- font-size: 16px;
- line-height: 24px;
- text-align: center;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-weight: 700;
- border-radius: 5px;
- border-width: 1px;
- border-style: solid;
- background-color: #3388FF;
- border-color: #3388FF;
- color: #FFFFFF;
- padding: 8px calc(24px - 1px);
- position: relative;
- overflow: hidden;
-}
-
-.circuit-7:focus {
- outline: 0;
- box-shadow: 0 0 0 4px #AFD0FE;
-}
-
-.circuit-7:focus::-moz-focus-inner {
- border: 0;
-}
-
-.circuit-7:disabled,
-.circuit-7[disabled] {
- opacity: 0.5;
- pointer-events: none;
- box-shadow: none;
-}
-
-.circuit-7:hover {
- background-color: #1760CE;
- border-color: #1760CE;
-}
-
-.circuit-7:active {
- background-color: #003C8B;
- border-color: #003C8B;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-4 {
- display: inline-block;
- opacity: 1;
- -webkit-transform: translate(0,0);
- -ms-transform: translate(0,0);
- transform: translate(0,0);
- -webkit-transition: opacity 200ms ease-in-out,-webkit-transform 200ms ease-in-out;
- -webkit-transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
- transition: opacity 200ms ease-in-out,transform 200ms ease-in-out;
-}
-
-
-`;
diff --git a/src/components/LoadingButton/components/Button/index.js b/src/components/LoadingButton/components/Button/index.js
deleted file mode 100644
index 89c2859703..0000000000
--- a/src/components/LoadingButton/components/Button/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import Button from './Button';
-
-export default Button;
diff --git a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js b/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js
deleted file mode 100644
index ada3e8da5c..0000000000
--- a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
-import { size as sizeMixin } from 'polished';
-import { CircleCheckmarkFilled, CircleCrossFilled } from '@sumup/icons';
-
-import { sizes } from '../../../../styles/constants';
-
-import Spinner from '../../../Spinner';
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from '../../constants';
-
-const { KILO, MEGA, GIGA } = sizes;
-
-/**
- * Keyframes
- */
-const iconEnter = keyframes`
- 0% {
- opacity: 1;
- transform: scale3d(0, 0, 0);
- }
-
- 100% {
- opacity: 1;
- transform: scale3d(1, 1, 1);
- }
-`;
-
-/**
- * General purpose style functions.
- */
-const centeredStyles = () => css`
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
-`;
-
-const sizeStyles = label => ({ theme, size }) => {
- const sizeMap = {
- [KILO]: theme.spacings.mega,
- [MEGA]: theme.spacings.giga,
- [GIGA]: theme.spacings.tera
- };
-
- const sizeValue = sizeMap[size] || sizeMap.GIGA;
-
- return css`
- label: ${`${label}--${size.toLowerCase()}`};
- ${sizeMixin(sizeValue)};
- `;
-};
-
-const IconContainer = styled.div`
- ${sizeStyles('loading-icon__status')};
- ${centeredStyles};
- width: 100%;
-`;
-
-const iconStyles = theme => css`
- ${sizeMixin('100%')};
- position: absolute;
- transform: scale3d(0, 0, 0);
- opacity: 0;
- transition: opacity ${theme.transitions.default};
- animation: ${iconEnter} ${theme.transitions.default};
- animation-fill-mode: forwards;
- animation-iteration-count: 1;
-`;
-
-/**
- * The components center themselves in the relatively positioned parent.
- */
-const LoadingIcon = ({ loadingState, size }) => (
-
-
- {loadingState === SUCCESS && }
- {loadingState === ERROR && }
-
-);
-
-LoadingIcon.propTypes = {
- /**
- * Current loading state of the button. Determines whether the icon shows
- * and whether Spinner or Success are shown.
- */
- loadingState: PropTypes.oneOf([DISABLED, ACTIVE, SUCCESS, ERROR]).isRequired,
- /**
- * Size prop from the Button.
- */
- size: PropTypes.string.isRequired
-};
-
-LoadingIcon.defaultProps = {
- size: GIGA
-};
-
-/**
- * @component
- */
-export default LoadingIcon;
diff --git a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.spec.js b/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.spec.js
deleted file mode 100644
index 593e7576cd..0000000000
--- a/src/components/LoadingButton/components/LoadingIcon/LoadingIcon.spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import { DISABLED, ACTIVE, SUCCESS, ERROR } from '../../constants';
-import { sizes } from '../../../../styles/constants';
-import LoadingIcon from '.';
-
-const { KILO, MEGA, GIGA } = sizes;
-
-describe('LoadingIcon', () => {
- describe('Style tests', () => {
- it('should have disabled LoadingIcon styles', () => {
- const actual = create(
-
- );
- expect(actual).toMatchSnapshot();
- });
-
- it('should have active LoadingIcon styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should have success LoadingIcon styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should have error LoadingIcon styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should have kilo LoadingIcon styles', () => {
- const actual = create(
-
- );
- expect(actual).toMatchSnapshot();
- });
-
- it('should have mega LoadingIcon styles', () => {
- const actual = create(
-
- );
- expect(actual).toMatchSnapshot();
- });
-
- it('should have giga LoadingIcon styles', () => {
- const actual = create(
-
- );
- expect(actual).toMatchSnapshot();
- });
- });
-
- describe('Accessibility tests', () => {
- it('should meet accessibility guidelines', async () => {
- const wrapper = renderToHtml(
-
- );
- const actual = await axe(wrapper);
- expect(actual).toHaveNoViolations();
- });
- });
-});
diff --git a/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap b/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap
deleted file mode 100644
index 88460bc9ea..0000000000
--- a/src/components/LoadingButton/components/LoadingIcon/__snapshots__/LoadingIcon.spec.js.snap
+++ /dev/null
@@ -1,618 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoadingIcon Style tests should have active LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-2 {
- height: 16px;
- width: 16px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have disabled LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-2 {
- height: 16px;
- width: 16px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have error LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-1 {
- 0% {
- opacity: 1;
- -webkit-transform: scale3d(0,0,0);
- -ms-transform: scale3d(0,0,0);
- transform: scale3d(0,0,0);
- }
-
- 100% {
- opacity: 1;
- -webkit-transform: scale3d(1,1,1);
- -ms-transform: scale3d(1,1,1);
- transform: scale3d(1,1,1);
- }
-}
-
-.circuit-3 {
- height: 16px;
- width: 16px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-2 {
- height: 100%;
- width: 100%;
- position: absolute;
- -webkit-transform: scale3d(0,0,0);
- -ms-transform: scale3d(0,0,0);
- transform: scale3d(0,0,0);
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- -webkit-animation: animation-1 200ms ease-in-out;
- animation: animation-1 200ms ease-in-out;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- animation-iteration-count: 1;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have giga LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-2 {
- height: 32px;
- width: 32px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have kilo LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-2 {
- height: 16px;
- width: 16px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have mega LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-2 {
- height: 24px;
- width: 24px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-
-`;
-
-exports[`LoadingIcon Style tests should have success LoadingIcon styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-1 {
- 0% {
- opacity: 1;
- -webkit-transform: scale3d(0,0,0);
- -ms-transform: scale3d(0,0,0);
- transform: scale3d(0,0,0);
- }
-
- 100% {
- opacity: 1;
- -webkit-transform: scale3d(1,1,1);
- -ms-transform: scale3d(1,1,1);
- transform: scale3d(1,1,1);
- }
-}
-
-.circuit-3 {
- height: 16px;
- width: 16px;
- position: absolute;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- width: 100%;
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
-}
-
-.circuit-2 {
- height: 100%;
- width: 100%;
- position: absolute;
- -webkit-transform: scale3d(0,0,0);
- -ms-transform: scale3d(0,0,0);
- transform: scale3d(0,0,0);
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- -webkit-animation: animation-1 200ms ease-in-out;
- animation: animation-1 200ms ease-in-out;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- -webkit-animation-iteration-count: 1;
- animation-iteration-count: 1;
-}
-
-
-`;
diff --git a/src/components/LoadingButton/components/LoadingIcon/index.js b/src/components/LoadingButton/components/LoadingIcon/index.js
deleted file mode 100644
index 18b0ae4024..0000000000
--- a/src/components/LoadingButton/components/LoadingIcon/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import LoadingIcon from './LoadingIcon';
-
-export default LoadingIcon;
diff --git a/src/components/LoadingButton/constants.js b/src/components/LoadingButton/constants.js
deleted file mode 100644
index df8f5f8892..0000000000
--- a/src/components/LoadingButton/constants.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export const DISABLED = 'disabled';
-export const ACTIVE = 'active';
-export const SUCCESS = 'success';
-export const ERROR = 'error';
diff --git a/src/components/LoadingButton/index.js b/src/components/LoadingButton/index.ts
similarity index 92%
rename from src/components/LoadingButton/index.js
rename to src/components/LoadingButton/index.ts
index 48d404365b..e719798147 100644
--- a/src/components/LoadingButton/index.js
+++ b/src/components/LoadingButton/index.ts
@@ -13,6 +13,6 @@
* limitations under the License.
*/
-import LoadingButton from './LoadingButton';
+import { LoadingButton } from './LoadingButton';
export default LoadingButton;
diff --git a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
index 01e0737042..5ad2a43ca4 100644
--- a/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
+++ b/src/components/Pagination/PageButton/__snapshots__/PageButton.spec.js.snap
@@ -26,6 +26,8 @@ exports[`PageButton styles should render with default styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
index d27dfa64e0..38bd8f1f13 100644
--- a/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
+++ b/src/components/Pagination/PaginationButton/__snapshots__/PaginationButton.spec.js.snap
@@ -26,6 +26,8 @@ exports[`PaginationButton styles should render with default styles 1`] = `
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
diff --git a/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap b/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
index 50472b9ef5..e6c0a6a478 100644
--- a/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
+++ b/src/components/Pagination/PaginationContainer/__snapshots__/PaginationContainer.spec.js.snap
@@ -39,6 +39,8 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -104,6 +106,8 @@ exports[`PaginationContainer styles when the current page is 1 should render wit
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -193,6 +197,8 @@ exports[`PaginationContainer styles when the current page is not the first and l
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -258,6 +264,8 @@ exports[`PaginationContainer styles when the current page is not the first and l
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -346,6 +354,8 @@ exports[`PaginationContainer styles when the current page is the last page shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -411,6 +421,8 @@ exports[`PaginationContainer styles when the current page is the last page shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
index ba764750e7..f8768fb11f 100644
--- a/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
+++ b/src/components/Pagination/__snapshots__/Pagination.spec.js.snap
@@ -39,6 +39,8 @@ exports[`Pagination styles With 5 or less pages should render only the number of
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -104,6 +106,8 @@ exports[`Pagination styles With 5 or less pages should render only the number of
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -187,6 +191,8 @@ exports[`Pagination styles With 5 or less pages should render only the number of
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -263,6 +269,8 @@ exports[`Pagination styles With 5 or less pages should render only the number of
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -390,6 +398,8 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -455,6 +465,8 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -538,6 +550,8 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -614,6 +628,8 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -673,6 +689,8 @@ exports[`Pagination styles With more than 5 pages when user is last but one page
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -834,6 +852,8 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -899,6 +919,8 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -982,6 +1004,8 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -1058,6 +1082,8 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1117,6 +1143,8 @@ exports[`Pagination styles With more than 5 pages when user is on last page shou
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1279,6 +1307,8 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1344,6 +1374,8 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1427,6 +1459,8 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -1503,6 +1537,8 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1562,6 +1598,8 @@ exports[`Pagination styles With more than 5 pages when user is on page 2 should
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1723,6 +1761,8 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1788,6 +1828,8 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -1871,6 +1913,8 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -1947,6 +1991,8 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -2006,6 +2052,8 @@ exports[`Pagination styles With more than 5 pages when user is on page in the mi
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -2173,6 +2221,8 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -2238,6 +2288,8 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -2321,6 +2373,8 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #FFFFFF;
border-color: #9DA7B1;
color: #323E49;
@@ -2397,6 +2451,8 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
@@ -2456,6 +2512,8 @@ exports[`Pagination styles With more than 5 pages when user is on page one shoul
border-radius: 5px;
border-width: 1px;
border-style: solid;
+ -webkit-transition: opacity 200ms ease-in-out;
+ transition: opacity 200ms ease-in-out;
background-color: #3388FF;
border-color: #3388FF;
color: #FFFFFF;
diff --git a/src/components/Spinner/Spinner.js b/src/components/Spinner/Spinner.js
deleted file mode 100644
index b0a71a1702..0000000000
--- a/src/components/Spinner/Spinner.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
-
-const spin = keyframes`
- 0% {
- transform: rotate3d(0, 0, 1, 0deg);
- }
- 100% {
- transform: rotate3d(0, 0, 1, 360deg);
- }
-`;
-
-const baseStyles = ({ theme }) => css`
- label: spinner;
- width: ${theme.iconSizes.mega};
- height: ${theme.iconSizes.mega};
- border-radius: ${theme.borderRadius.circle};
- border: ${theme.borderWidth.mega} solid ${theme.colors.white};
- border-top-color: transparent;
- animation: ${spin} 1s infinite linear;
- transform-origin: 50% 50%;
- opacity: 0;
- transition: opacity 200ms ease-in-out;
-`;
-
-const activeStyles = ({ active }) =>
- active &&
- css`
- opacity: 1;
- `;
-
-const darkStyles = ({ theme, dark }) =>
- dark &&
- css`
- label: spinner--dark;
- border-color: ${theme.colors.n900};
- border-top-color: transparent;
- `;
-
-/**
- * A loading spinner with ARIA labels support.
- */
-const Spinner = styled.div`
- ${baseStyles};
- ${activeStyles};
- ${darkStyles};
-`;
-
-Spinner.propTypes = {
- /**
- * Renders a dark variant of the Spinner.
- */
- dark: PropTypes.bool,
- active: PropTypes.bool
-};
-
-Spinner.defaultProps = {
- dark: false,
- active: true,
-
- /**
- * Accessibilty attributes.
- */
- /**
- * Indicates that element has been dynamically updated.
- */
- role: 'alert',
- /**
- * Tells screen reader to wait until loading is complete.
- */
- 'aria-busy': 'true',
- /**
- * Indicates that updates to the region have the highest priority.
- */
- 'aria-live': 'assertive'
-};
-
-/**
- * @component
- */
-export default Spinner;
diff --git a/src/components/Spinner/Spinner.spec.js b/src/components/Spinner/Spinner.spec.tsx
similarity index 77%
rename from src/components/Spinner/Spinner.spec.js
rename to src/components/Spinner/Spinner.spec.tsx
index 7fc9fc6de5..44dfbe31e3 100644
--- a/src/components/Spinner/Spinner.spec.js
+++ b/src/components/Spinner/Spinner.spec.tsx
@@ -15,7 +15,9 @@
import React from 'react';
-import Spinner from './Spinner';
+import { create, renderToHtml, axe } from '../../util/test-utils';
+
+import { Spinner } from './Spinner';
describe('Spinner', () => {
/**
@@ -26,16 +28,6 @@ describe('Spinner', () => {
expect(actual).toMatchSnapshot();
});
- it('should render with dark styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
- it('should render with active styles', () => {
- const actual = create();
- expect(actual).toMatchSnapshot();
- });
-
/**
* Accessibility tests.
*/
diff --git a/src/components/Spinner/Spinner.story.js b/src/components/Spinner/Spinner.story.js
deleted file mode 100644
index a67d144076..0000000000
--- a/src/components/Spinner/Spinner.story.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { boolean } from '@storybook/addon-knobs/react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
-
-import Spinner from './Spinner';
-
-const Container = styled('div')(
- ({ theme }) => css`
- align-items: center;
- background-color: ${theme.colors.n500};
- display: flex;
- height: 50px;
- justify-content: center;
- width: 50px;
- `
-);
-
-export default {
- title: 'Components/Spinner',
- component: Spinner,
- parameters: {
- jest: ['Spinner']
- }
-};
-
-export const base = () => (
-
-
-
-);
diff --git a/src/components/LoadingButton/LoadingButtonService.js b/src/components/Spinner/Spinner.story.tsx
similarity index 64%
rename from src/components/LoadingButton/LoadingButtonService.js
rename to src/components/Spinner/Spinner.story.tsx
index f43feb121a..894d77fe38 100644
--- a/src/components/LoadingButton/LoadingButtonService.js
+++ b/src/components/Spinner/Spinner.story.tsx
@@ -13,11 +13,25 @@
* limitations under the License.
*/
-import { isEqual } from 'lodash/fp';
+import React from 'react';
+import { css } from '@emotion/core';
-import { ACTIVE, DISABLED, SUCCESS, ERROR } from './constants';
+import Spinner from '.';
-export const isActive = isEqual(ACTIVE);
-export const isDisabled = isEqual(DISABLED);
-export const isSuccess = isEqual(SUCCESS);
-export const isError = isEqual(ERROR);
+export default {
+ title: 'Components/Spinner',
+ component: Spinner,
+ parameters: {
+ jest: ['Spinner']
+ }
+};
+
+export const Base = () => (
+
+ css`
+ color: ${theme.colors.n900};
+ `
+ }
+ />
+);
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000000..cb8685a275
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { HTMLProps } from 'react';
+import { css, keyframes } from '@emotion/core';
+
+import styled, { StyleProps } from '../../styles/styled';
+
+const spin = keyframes`
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+`;
+
+const baseStyles = ({ theme }: StyleProps) => css`
+ label: spinner;
+ display: block;
+ width: ${theme.iconSizes.mega};
+ height: ${theme.iconSizes.mega};
+ border-radius: ${theme.borderRadius.circle};
+ border: ${theme.borderWidth.mega} solid currentColor;
+ border-top-color: transparent;
+ animation: ${spin} 1s infinite linear;
+ transform-origin: 50% 50%;
+`;
+
+/**
+ * A spinning loading icon.
+ */
+export const Spinner = styled.span>(baseStyles);
diff --git a/src/components/Spinner/__snapshots__/Spinner.spec.js.snap b/src/components/Spinner/__snapshots__/Spinner.spec.js.snap
deleted file mode 100644
index 1f1ea61be6..0000000000
--- a/src/components/Spinner/__snapshots__/Spinner.spec.js.snap
+++ /dev/null
@@ -1,151 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spinner should render with active styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
-}
-
-
-`;
-
-exports[`Spinner should render with dark styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
- border-color: #212933;
- border-top-color: transparent;
-}
-
-
-`;
-
-exports[`Spinner should render with default styles 1`] = `
-@keyframes animation-0 {
- 0% {
- -webkit-transform: rotate3d(0,0,1,0deg);
- -ms-transform: rotate3d(0,0,1,0deg);
- transform: rotate3d(0,0,1,0deg);
- }
-
- 100% {
- -webkit-transform: rotate3d(0,0,1,360deg);
- -ms-transform: rotate3d(0,0,1,360deg);
- transform: rotate3d(0,0,1,360deg);
- }
-}
-
-.circuit-0 {
- width: 24px;
- height: 24px;
- border-radius: 100%;
- border: 2px solid #FFFFFF;
- border-top-color: transparent;
- -webkit-animation: animation-0 1s infinite linear;
- animation: animation-0 1s infinite linear;
- -webkit-transform-origin: 50% 50%;
- -ms-transform-origin: 50% 50%;
- transform-origin: 50% 50%;
- opacity: 0;
- -webkit-transition: opacity 200ms ease-in-out;
- transition: opacity 200ms ease-in-out;
- opacity: 1;
-}
-
-
-`;
diff --git a/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
new file mode 100644
index 0000000000..ea30f31433
--- /dev/null
+++ b/src/components/Spinner/__snapshots__/Spinner.spec.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner should render with default styles 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+.circuit-0 {
+ display: block;
+ width: 24px;
+ height: 24px;
+ border-radius: 100%;
+ border: 2px solid currentColor;
+ border-top-color: transparent;
+ -webkit-animation: animation-0 1s infinite linear;
+ animation: animation-0 1s infinite linear;
+ -webkit-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+}
+
+
+`;
diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.ts
similarity index 94%
rename from src/components/Spinner/index.js
rename to src/components/Spinner/index.ts
index 28ffcf32b6..1d06008e66 100644
--- a/src/components/Spinner/index.js
+++ b/src/components/Spinner/index.ts
@@ -13,6 +13,6 @@
* limitations under the License.
*/
-import Spinner from './Spinner';
+import { Spinner } from './Spinner';
export default Spinner;