Skip to content

Commit

Permalink
feat(components): migrate Spinner to TypeScript
Browse files Browse the repository at this point in the history 
feature/button-enums

HEAD
  • Loading branch information
@connor-baer
connor-baer committed May 2, 2020
1 parent 66d828a commit 6edb0a1
Show file tree
Hide file tree
Showing 11 changed files with 386 additions and 840 deletions.
211 changes: 77 additions & 134 deletions src/__snapshots__/storyshots.spec.js.snap
View file

Large diffs are not rendered by default.

176 changes: 66 additions & 110 deletions src/components/LoadingButton/__snapshots__/LoadingButton.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
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);
-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-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -48,33 +48,33 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
overflow: hidden;
}
.circuit-7:focus {
.circuit-6:focus {
outline: 0;
box-shadow: 0 0 0 4px #AFD0FE;
}
.circuit-7:focus::-moz-focus-inner {
.circuit-6:focus::-moz-focus-inner {
border: 0;
}
.circuit-7:disabled,
.circuit-7[disabled] {
.circuit-6:disabled,
.circuit-6[disabled] {
opacity: 0.5;
pointer-events: none;
box-shadow: none;
}
.circuit-7:hover {
.circuit-6:hover {
background-color: #1760CE;
border-color: #1760CE;
}
.circuit-7:active {
.circuit-6:active {
background-color: #003C8B;
border-color: #003C8B;
}
.circuit-2 {
.circuit-1 {
height: 24px;
width: 24px;
position: absolute;
Expand All @@ -94,22 +94,20 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
}
.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;
}
.circuit-4 {
.circuit-3 {
display: inline-block;
opacity: 1;
-webkit-transform: translate(0,0);
Expand All @@ -121,54 +119,37 @@ exports[`LoadingButton Style tests should render with default styles 1`] = `
}
<button
class="circuit-6 circuit-7"
class="circuit-5 circuit-6"
>
<div
class="circuit-2 circuit-3"
class="circuit-1 circuit-2"
>
<div
aria-busy="true"
aria-live="assertive"
class="circuit-0 circuit-1"
role="alert"
<span
class="circuit-0"
/>
</div>
<span
class="circuit-4 circuit-5"
class="circuit-3 circuit-4"
/>
</button>
`;

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);
-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-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -201,33 +182,33 @@ exports[`LoadingButton Style tests should render with default styles after loadi
overflow: hidden;
}
.circuit-7:focus {
.circuit-6:focus {
outline: 0;
box-shadow: 0 0 0 4px #AFD0FE;
}
.circuit-7:focus::-moz-focus-inner {
.circuit-6:focus::-moz-focus-inner {
border: 0;
}
.circuit-7:disabled,
.circuit-7[disabled] {
.circuit-6:disabled,
.circuit-6[disabled] {
opacity: 0.5;
pointer-events: none;
box-shadow: none;
}
.circuit-7:hover {
.circuit-6:hover {
background-color: #1760CE;
border-color: #1760CE;
}
.circuit-7:active {
.circuit-6:active {
background-color: #003C8B;
border-color: #003C8B;
}
.circuit-2 {
.circuit-1 {
height: 24px;
width: 24px;
position: absolute;
Expand All @@ -247,22 +228,20 @@ exports[`LoadingButton Style tests should render with default styles after loadi
}
.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;
}
.circuit-4 {
.circuit-3 {
display: inline-block;
opacity: 1;
-webkit-transform: translate(0,0);
Expand All @@ -274,54 +253,37 @@ exports[`LoadingButton Style tests should render with default styles after loadi
}
<button
class="circuit-6 circuit-7"
class="circuit-5 circuit-6"
>
<div
class="circuit-2 circuit-3"
class="circuit-1 circuit-2"
>
<div
aria-busy="true"
aria-live="assertive"
class="circuit-0 circuit-1"
role="alert"
<span
class="circuit-0"
/>
</div>
<span
class="circuit-4 circuit-5"
class="circuit-3 circuit-4"
/>
</button>
`;

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);
-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);
}
100% {
-webkit-transform: rotate3d(0,0,1,360deg);
-ms-transform: rotate3d(0,0,1,360deg);
transform: rotate3d(0,0,1,360deg);
}
}
.circuit-7 {
.circuit-6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand Down Expand Up @@ -354,33 +316,33 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
overflow: hidden;
}
.circuit-7:focus {
.circuit-6:focus {
outline: 0;
box-shadow: 0 0 0 4px #AFD0FE;
}
.circuit-7:focus::-moz-focus-inner {
.circuit-6:focus::-moz-focus-inner {
border: 0;
}
.circuit-7:disabled,
.circuit-7[disabled] {
.circuit-6:disabled,
.circuit-6[disabled] {
opacity: 0.5;
pointer-events: none;
box-shadow: none;
}
.circuit-7:hover {
.circuit-6:hover {
background-color: #1760CE;
border-color: #1760CE;
}
.circuit-7:active {
.circuit-6:active {
background-color: #003C8B;
border-color: #003C8B;
}
.circuit-2 {
.circuit-1 {
height: 24px;
width: 24px;
position: absolute;
Expand All @@ -400,23 +362,20 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
}
.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;
}
.circuit-4 {
.circuit-3 {
display: inline-block;
opacity: 1;
-webkit-transform: translate(0,0);
Expand All @@ -432,20 +391,17 @@ exports[`LoadingButton Style tests should render with loading styles 1`] = `
}
<button
class="circuit-6 circuit-7"
class="circuit-5 circuit-6"
>
<div
class="circuit-2 circuit-3"
class="circuit-1 circuit-2"
>
<div
aria-busy="true"
aria-live="assertive"
class="circuit-0 circuit-1"
role="alert"
<span
class="circuit-0"
/>
</div>
<span
class="circuit-4 circuit-5"
class="circuit-3 circuit-4"
/>
</button>
`;
Loading

0 comments on commit 6edb0a1

Please sign in to comment.