Skip to content

Commit

Permalink
feat: Add a pancake spinner (#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RabbitDoge
RabbitDoge authored Jan 18, 2021
1 parent 78227f1 commit eec4478
Show file tree
Hide file tree
Showing 8 changed files with 275 additions and 0 deletions.
105 changes: 105 additions & 0 deletions src/__tests__/components/spinner.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React from "react";
import { renderWithTheme } from "../../testHelpers";
import { Spinner } from "../../components/Spinner";

it("renders correctly", () => {
const { asFragment } = renderWithTheme(<Spinner />);
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<div
class="sc-gsTCUz khJLZs"
>
<svg
class="sc-bdfBwQ jvKaGz sc-dlfnbm mabrO"
color="text"
viewBox="0 0 211 247"
width="122.99999999999999px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M98.5 69.2202C98.5 86.8899 95.5393 106.687 90.406 121.977C87.8347 129.636 84.7771 135.985 81.4054 140.359C78.0035 144.771 74.6547 146.72 71.5 146.72C65.4042 146.72 58.0548 144.022 50.2894 139.078C42.5767 134.169 34.7154 127.21 27.6574 119.102C13.4446 102.776 3 82.4039 3 65.5C3 47.8712 6.44849 32.1936 13.6468 21.0232C20.7417 10.0131 31.5601 3.22022 47 3.22022C62.3893 3.22022 75.1799 10.9068 84.2185 23.0496C93.2871 35.2326 98.5 51.8347 98.5 69.2202Z"
fill="#FEDC90"
stroke="#D1884F"
stroke-width="6"
/>
<path
d="M152.625 135.068C137.447 126.305 119.709 120.859 104.759 119.506C97.2807 118.83 90.649 119.192 85.4495 120.574C80.2215 121.963 76.7975 124.277 75.0982 127.22C68.7665 138.187 68.033 157.294 73.0037 176.254C77.9571 195.149 88.3001 212.823 102.875 221.238C117.995 229.967 133.879 233.799 147.803 232.137C161.633 230.487 173.655 223.419 181.402 210C189.157 196.568 189.451 182.272 184.128 169.125C178.778 155.911 167.701 143.772 152.625 135.068Z"
fill="#D1884F"
stroke="#633001"
stroke-width="6"
/>
<path
clip-rule="evenodd"
d="M60 1.72027C69.5 4.22036 79.8963 9.24883 88 20.7203C106.014 46.2203 108.5 83.7202 93 126.221C77.5 168.721 84.4973 189.114 99.7486 206.667C115 224.22 160 229.72 172 217.22C175.5 213.574 187 204.721 180.5 216.22C174 227.72 158 238.22 138 238.22C118 238.22 105.228 232.22 87 212.721C68.7718 193.221 58.9999 158.328 72.5 120.72C89.14 74.366 82.0307 44.8748 69.6781 27.3887C63.3443 18.4226 55.6252 12.1371 48.6945 8.11743C41.4173 3.89675 34.5002 3.22031 30 3.22031C38 -0.779691 50.5 -0.779826 60 1.72027Z"
fill="#633001"
fill-rule="evenodd"
/>
</svg>
<svg
class="sc-bdfBwQ jvKaGz sc-hKgILt cMmkZP"
color="text"
viewBox="0 0 512 512"
width="300px"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M333.796 408.559C344.804 381.59 340.394 352.254 333.884 327.267C329.493 310.415 313.045 298.086 286.679 292.678C260.579 287.325 226.46 289.24 190.424 299.316C154.388 309.393 123.973 325.523 104.018 343.754C83.8589 362.171 75.6327 381.4 80.0235 398.252C86.5337 423.239 96.9713 450.889 119.584 468.456C141.893 485.788 177.54 494.387 236.923 477.782C296.305 461.178 322.935 435.165 333.796 408.559ZM238.535 483.972C359.492 450.15 353.027 376.145 339.857 325.597C329.244 284.861 262.212 272.603 188.811 293.127C115.411 313.651 63.4366 359.186 74.0503 399.922C87.2204 450.47 117.578 517.794 238.535 483.972Z"
fill="#464649"
fill-rule="evenodd"
/>
<path
d="M311.602 351.361C317.307 373.257 360.701 363.153 429.955 343.788C499.208 324.424 514.315 301.156 508.61 279.26C502.905 257.364 489.369 242.105 433.356 257.768C364.102 277.132 305.897 329.465 311.602 351.361Z"
fill="#606063"
/>
<path
d="M319.939 357.474L350.875 357.417C356.567 357.407 357.046 348.858 354.948 329.629C353.64 317.633 346.914 308.202 342.54 310.954L319.885 327.749L319.939 357.474Z"
fill="#464649"
/>
<path
clip-rule="evenodd"
d="M324.521 355.992C320.118 354.639 318.316 352.533 317.575 349.691C317.289 348.592 317.273 346.749 318.207 343.93C319.133 341.135 320.865 337.779 323.508 333.96C328.794 326.323 337.225 317.55 348.183 308.664C370.074 290.913 401.199 273.4 434.968 263.957C462.681 256.209 478.402 256.595 487.554 260.383C496.035 263.893 500.011 270.851 502.637 280.93C503.802 285.401 503.855 289.696 502.566 293.925C501.268 298.183 498.47 302.823 493.243 307.717C482.624 317.66 462.683 327.996 428.342 337.599C393.597 347.314 365.934 354.526 346.298 356.672C336.432 357.75 329.288 357.457 324.521 355.992ZM429.955 343.788C360.701 363.153 317.307 373.257 311.602 351.361C305.897 329.465 364.102 277.132 433.356 257.768C489.369 242.105 502.905 257.364 508.61 279.26C514.315 301.156 499.208 324.424 429.955 343.788Z"
fill="#464649"
fill-rule="evenodd"
/>
<path
d="M339.851 322.049C353.021 372.597 359.486 446.602 238.529 480.424C117.572 514.246 87.2141 446.922 74.0439 396.374C63.4303 355.638 115.404 310.103 188.805 289.579C262.205 269.054 329.237 281.313 339.851 322.049Z"
fill="#606063"
/>
<path
d="M124.464 435.024C91.015 424.239 84.9224 407.59 80.7693 392.104L83.9186 422.551L100.47 451.37L128.875 476.962L161.894 488.655C164.813 487.225 178.997 486.598 166.206 484.057C153.414 481.516 145.495 469.513 139.983 462.756C136.527 452.967 135.473 438.573 124.464 435.024Z"
fill="#464649"
/>
<path
clip-rule="evenodd"
d="M333.789 405.01C344.798 378.042 340.388 348.706 333.878 323.719C329.487 306.867 313.039 294.538 286.672 289.13C260.573 283.777 226.453 285.692 190.418 295.768C154.382 305.845 123.966 321.975 104.011 340.206C83.8526 358.623 75.6264 377.852 80.0171 394.704C86.5274 419.691 96.965 447.341 119.577 464.908C141.886 482.24 177.534 490.839 236.916 474.234C296.299 457.63 322.929 431.617 333.789 405.01ZM238.529 480.424C359.486 446.602 353.021 372.597 339.851 322.049C329.237 281.313 262.205 269.054 188.805 289.579C115.404 310.103 63.4303 355.638 74.0439 396.374C87.2141 446.922 117.572 514.246 238.529 480.424Z"
fill="#464649"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M328.466 363.372C330.037 364.644 330.314 366.995 329.086 368.622C325.959 372.765 322.374 376.844 318.375 380.825C316.938 382.256 314.653 382.209 313.272 380.719C311.891 379.23 311.936 376.863 313.373 375.432C317.153 371.668 320.505 367.85 323.4 364.014C324.628 362.387 326.896 362.099 328.466 363.372ZM114.843 432.477C115.313 430.47 117.265 429.238 119.202 429.726C146.58 436.617 183.409 435.586 222.071 424.775C240.524 419.615 257.559 412.74 272.541 404.748C274.314 403.803 276.49 404.525 277.402 406.361C278.315 408.198 277.618 410.453 275.846 411.398C260.39 419.643 242.876 426.705 223.952 431.996C184.409 443.053 146.318 444.247 117.499 436.994C115.562 436.506 114.373 434.484 114.843 432.477Z"
fill="#979797"
fill-rule="evenodd"
/>
<path
d="M319.671 326.585C328.81 361.659 282.119 390.763 219.714 408.212C157.31 425.661 102.959 425.365 93.6857 389.775C84.4128 354.185 131.239 325.597 193.643 308.147C256.047 290.698 310.533 291.51 319.671 326.585Z"
fill="#464649"
/>
<path
clip-rule="evenodd"
d="M291.662 367.099C309.016 353.996 314.924 341.157 311.707 328.812C308.491 316.466 297.15 308.451 275.788 306.173C254.666 303.92 226.562 307.797 195.793 316.4C164.997 325.011 138.797 336.187 121.626 349.08C104.305 362.086 98.3601 374.921 101.65 387.548C104.94 400.174 116.311 408.167 137.597 410.378C158.698 412.569 186.768 408.57 217.564 399.959C248.333 391.356 274.503 380.056 291.662 367.099ZM220.527 410.226C282.931 392.776 328.81 361.659 319.671 326.585C310.533 291.51 256.047 290.698 193.643 308.147C131.239 325.597 84.4128 354.185 93.6857 389.775C102.959 425.365 158.123 427.675 220.527 410.226Z"
fill="#737373"
fill-rule="evenodd"
/>
<path
clip-rule="evenodd"
d="M207.754 362.306C178.111 370.595 152.995 384.144 136.234 399.239C134.729 400.593 132.45 400.428 131.142 398.869C129.835 397.31 129.994 394.948 131.498 393.593C149.244 377.612 175.401 363.605 205.872 355.085C212.067 353.353 218.214 351.911 224.269 350.75C226.229 350.374 228.112 351.716 228.475 353.747C228.838 355.778 227.543 357.729 225.583 358.104C219.72 359.228 213.763 360.626 207.754 362.306ZM247.694 351.317C247.584 349.255 249.108 347.49 251.098 347.377C264.757 346.594 277.548 347.364 288.849 349.595C290.807 349.981 292.092 351.939 291.719 353.968C291.346 355.997 289.457 357.328 287.499 356.942C276.862 354.842 264.666 354.09 251.497 354.845C249.507 354.959 247.804 353.379 247.694 351.317Z"
fill="#606063"
fill-rule="evenodd"
/>
</svg>
</div>
</DocumentFragment>
`);
});
68 changes: 68 additions & 0 deletions src/components/Spinner/PanIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from "react";
import Svg from "../Svg/Svg";
import { SvgProps } from "../Svg/types";

const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 512 512" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M333.796 408.559C344.804 381.59 340.394 352.254 333.884 327.267C329.493 310.415 313.045 298.086 286.679 292.678C260.579 287.325 226.46 289.24 190.424 299.316C154.388 309.393 123.973 325.523 104.018 343.754C83.8589 362.171 75.6327 381.4 80.0235 398.252C86.5337 423.239 96.9713 450.889 119.584 468.456C141.893 485.788 177.54 494.387 236.923 477.782C296.305 461.178 322.935 435.165 333.796 408.559ZM238.535 483.972C359.492 450.15 353.027 376.145 339.857 325.597C329.244 284.861 262.212 272.603 188.811 293.127C115.411 313.651 63.4366 359.186 74.0503 399.922C87.2204 450.47 117.578 517.794 238.535 483.972Z"
fill="#464649"
/>
<path
d="M311.602 351.361C317.307 373.257 360.701 363.153 429.955 343.788C499.208 324.424 514.315 301.156 508.61 279.26C502.905 257.364 489.369 242.105 433.356 257.768C364.102 277.132 305.897 329.465 311.602 351.361Z"
fill="#606063"
/>
<path
d="M319.939 357.474L350.875 357.417C356.567 357.407 357.046 348.858 354.948 329.629C353.64 317.633 346.914 308.202 342.54 310.954L319.885 327.749L319.939 357.474Z"
fill="#464649"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M324.521 355.992C320.118 354.639 318.316 352.533 317.575 349.691C317.289 348.592 317.273 346.749 318.207 343.93C319.133 341.135 320.865 337.779 323.508 333.96C328.794 326.323 337.225 317.55 348.183 308.664C370.074 290.913 401.199 273.4 434.968 263.957C462.681 256.209 478.402 256.595 487.554 260.383C496.035 263.893 500.011 270.851 502.637 280.93C503.802 285.401 503.855 289.696 502.566 293.925C501.268 298.183 498.47 302.823 493.243 307.717C482.624 317.66 462.683 327.996 428.342 337.599C393.597 347.314 365.934 354.526 346.298 356.672C336.432 357.75 329.288 357.457 324.521 355.992ZM429.955 343.788C360.701 363.153 317.307 373.257 311.602 351.361C305.897 329.465 364.102 277.132 433.356 257.768C489.369 242.105 502.905 257.364 508.61 279.26C514.315 301.156 499.208 324.424 429.955 343.788Z"
fill="#464649"
/>
<path
d="M339.851 322.049C353.021 372.597 359.486 446.602 238.529 480.424C117.572 514.246 87.2141 446.922 74.0439 396.374C63.4303 355.638 115.404 310.103 188.805 289.579C262.205 269.054 329.237 281.313 339.851 322.049Z"
fill="#606063"
/>
<path
d="M124.464 435.024C91.015 424.239 84.9224 407.59 80.7693 392.104L83.9186 422.551L100.47 451.37L128.875 476.962L161.894 488.655C164.813 487.225 178.997 486.598 166.206 484.057C153.414 481.516 145.495 469.513 139.983 462.756C136.527 452.967 135.473 438.573 124.464 435.024Z"
fill="#464649"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M333.789 405.01C344.798 378.042 340.388 348.706 333.878 323.719C329.487 306.867 313.039 294.538 286.672 289.13C260.573 283.777 226.453 285.692 190.418 295.768C154.382 305.845 123.966 321.975 104.011 340.206C83.8526 358.623 75.6264 377.852 80.0171 394.704C86.5274 419.691 96.965 447.341 119.577 464.908C141.886 482.24 177.534 490.839 236.916 474.234C296.299 457.63 322.929 431.617 333.789 405.01ZM238.529 480.424C359.486 446.602 353.021 372.597 339.851 322.049C329.237 281.313 262.205 269.054 188.805 289.579C115.404 310.103 63.4303 355.638 74.0439 396.374C87.2141 446.922 117.572 514.246 238.529 480.424Z"
fill="#464649"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M328.466 363.372C330.037 364.644 330.314 366.995 329.086 368.622C325.959 372.765 322.374 376.844 318.375 380.825C316.938 382.256 314.653 382.209 313.272 380.719C311.891 379.23 311.936 376.863 313.373 375.432C317.153 371.668 320.505 367.85 323.4 364.014C324.628 362.387 326.896 362.099 328.466 363.372ZM114.843 432.477C115.313 430.47 117.265 429.238 119.202 429.726C146.58 436.617 183.409 435.586 222.071 424.775C240.524 419.615 257.559 412.74 272.541 404.748C274.314 403.803 276.49 404.525 277.402 406.361C278.315 408.198 277.618 410.453 275.846 411.398C260.39 419.643 242.876 426.705 223.952 431.996C184.409 443.053 146.318 444.247 117.499 436.994C115.562 436.506 114.373 434.484 114.843 432.477Z"
fill="#979797"
/>
<path
d="M319.671 326.585C328.81 361.659 282.119 390.763 219.714 408.212C157.31 425.661 102.959 425.365 93.6857 389.775C84.4128 354.185 131.239 325.597 193.643 308.147C256.047 290.698 310.533 291.51 319.671 326.585Z"
fill="#464649"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M291.662 367.099C309.016 353.996 314.924 341.157 311.707 328.812C308.491 316.466 297.15 308.451 275.788 306.173C254.666 303.92 226.562 307.797 195.793 316.4C164.997 325.011 138.797 336.187 121.626 349.08C104.305 362.086 98.3601 374.921 101.65 387.548C104.94 400.174 116.311 408.167 137.597 410.378C158.698 412.569 186.768 408.57 217.564 399.959C248.333 391.356 274.503 380.056 291.662 367.099ZM220.527 410.226C282.931 392.776 328.81 361.659 319.671 326.585C310.533 291.51 256.047 290.698 193.643 308.147C131.239 325.597 84.4128 354.185 93.6857 389.775C102.959 425.365 158.123 427.675 220.527 410.226Z"
fill="#737373"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M207.754 362.306C178.111 370.595 152.995 384.144 136.234 399.239C134.729 400.593 132.45 400.428 131.142 398.869C129.835 397.31 129.994 394.948 131.498 393.593C149.244 377.612 175.401 363.605 205.872 355.085C212.067 353.353 218.214 351.911 224.269 350.75C226.229 350.374 228.112 351.716 228.475 353.747C228.838 355.778 227.543 357.729 225.583 358.104C219.72 359.228 213.763 360.626 207.754 362.306ZM247.694 351.317C247.584 349.255 249.108 347.49 251.098 347.377C264.757 346.594 277.548 347.364 288.849 349.595C290.807 349.981 292.092 351.939 291.719 353.968C291.346 355.997 289.457 357.328 287.499 356.942C276.862 354.842 264.666 354.09 251.497 354.845C249.507 354.959 247.804 353.379 247.694 351.317Z"
fill="#606063"
/>
</Svg>
);
};

export default Icon;
30 changes: 30 additions & 0 deletions src/components/Spinner/PancakeIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";
import Svg from "../Svg/Svg";
import { SvgProps } from "../Svg/types";

const Icon: React.FC<SvgProps> = (props) => {
return (
<Svg viewBox="0 0 211 247" {...props}>
<path
d="M98.5 69.2202C98.5 86.8899 95.5393 106.687 90.406 121.977C87.8347 129.636 84.7771 135.985 81.4054 140.359C78.0035 144.771 74.6547 146.72 71.5 146.72C65.4042 146.72 58.0548 144.022 50.2894 139.078C42.5767 134.169 34.7154 127.21 27.6574 119.102C13.4446 102.776 3 82.4039 3 65.5C3 47.8712 6.44849 32.1936 13.6468 21.0232C20.7417 10.0131 31.5601 3.22022 47 3.22022C62.3893 3.22022 75.1799 10.9068 84.2185 23.0496C93.2871 35.2326 98.5 51.8347 98.5 69.2202Z"
fill="#FEDC90"
stroke="#D1884F"
strokeWidth="6"
/>
<path
d="M152.625 135.068C137.447 126.305 119.709 120.859 104.759 119.506C97.2807 118.83 90.649 119.192 85.4495 120.574C80.2215 121.963 76.7975 124.277 75.0982 127.22C68.7665 138.187 68.033 157.294 73.0037 176.254C77.9571 195.149 88.3001 212.823 102.875 221.238C117.995 229.967 133.879 233.799 147.803 232.137C161.633 230.487 173.655 223.419 181.402 210C189.157 196.568 189.451 182.272 184.128 169.125C178.778 155.911 167.701 143.772 152.625 135.068Z"
fill="#D1884F"
stroke="#633001"
strokeWidth="6"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M60 1.72027C69.5 4.22036 79.8963 9.24883 88 20.7203C106.014 46.2203 108.5 83.7202 93 126.221C77.5 168.721 84.4973 189.114 99.7486 206.667C115 224.22 160 229.72 172 217.22C175.5 213.574 187 204.721 180.5 216.22C174 227.72 158 238.22 138 238.22C118 238.22 105.228 232.22 87 212.721C68.7718 193.221 58.9999 158.328 72.5 120.72C89.14 74.366 82.0307 44.8748 69.6781 27.3887C63.3443 18.4226 55.6252 12.1371 48.6945 8.11743C41.4173 3.89675 34.5002 3.22031 30 3.22031C38 -0.779691 50.5 -0.779826 60 1.72027Z"
fill="#633001"
/>
</Svg>
);
};

export default Icon;
54 changes: 54 additions & 0 deletions src/components/Spinner/Spinner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from "react";
import styled, { keyframes } from "styled-components";
import PanIcon from "./PanIcon";
import PancakeIcon from "./PancakeIcon";
import { SpinnerProps } from "./types";

const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;

const float = keyframes`
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
`;

const Container = styled.div`
position: relative;
`;

const RotatingPancakeIcon = styled(PancakeIcon)`
position: absolute;
top: 0;
left: 0;
animation: ${rotate} 2s linear infinite;
transform: translate3d(0, 0, 0);
`;

const FloatingPanIcon = styled(PanIcon)`
animation: ${float} 6s ease-in-out infinite;
transform: translate3d(0, 0, 0);
`;

const Spinner: React.FC<SpinnerProps> = ({ size = 300 }) => {
return (
<Container>
<RotatingPancakeIcon width={`${size * 0.41}px`} />
<FloatingPanIcon width={`${size}px`} />
</Container>
);
};

export default Spinner;
12 changes: 12 additions & 0 deletions src/components/Spinner/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import Spinner from "./Spinner";

export default {
title: "Components/Spinner",
component: Spinner,
argTypes: {},
};

export const Default: React.FC = () => {
return <Spinner iconsWidth="50px" />;
};
2 changes: 2 additions & 0 deletions src/components/Spinner/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default as Spinner } from "./Spinner";
export type { SpinnerProps } from "./types";
3 changes: 3 additions & 0 deletions src/components/Spinner/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface SpinnerProps {
size?: number;
}
1 change: 1 addition & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export * from "./components/Tag";
export * from "./components/Text";
export * from "./components/Link";
export * from "./components/Progress";
export * from "./components/Spinner";
export * from "./components/Skeleton";
export * from "./components/Toggle";
export * from "./components/Table";
Expand Down

0 comments on commit eec4478

Please sign in to comment.