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/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(); - 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; -} - -