Introduce animation helpers for loading icons

README.md

@@ -36,11 +36,12 @@ To use React UI in your app:
    import '@react-ui-org/react-ui/src/lib/theme.scss';
    import '@react-ui-org/react-ui/src/lib/foundation.scss';
    ```
-4. Optionally add the **utility classes** bundle:
+4. Optionally add the **helper and utility classes** bundles:
    ```js
    // app.jsx
    import '@react-ui-org/react-ui/src/lib/theme.scss';
    import '@react-ui-org/react-ui/src/lib/foundation.scss';
+   import '@react-ui-org/react-ui/src/lib/helpers.scss';
    import '@react-ui-org/react-ui/src/lib/utilities.scss';
    ```
 5. Finally, use React UI **components** just like you are used to:

demo/index.html

@@ -51,8 +51,8 @@
     }
 
     .loader--rotate {
-      -webkit-animation: spin 1s infinite linear;
-      animation: spin 1s infinite linear;
+      -webkit-animation: spin 2.2s infinite cubic-bezier(0.31, 0.3, 0.34, -0.17);
+      animation: spin 2.2s infinite cubic-bezier(0.31, 0.3, 0.34, -0.17);
     }
 
     @-webkit-keyframes spin {
@@ -62,8 +62,8 @@
       }
 
       to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
+        -webkit-transform: rotate(1440deg);
+        transform: rotate(1440deg);
       }
     }
 
@@ -74,8 +74,8 @@
       }
 
       to {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
+        -webkit-transform: rotate(1440deg);
+        transform: rotate(1440deg);
       }
     }
   </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.23.2",
+  "version": "0.24.0",
   "license": "MIT",
   "main": "dist/lib.js",
   "repository": {

src/demo/pages/DemoContainer.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 // React UI CSS theme and foundation
 import '../../lib/theme.scss';
 import '../../lib/foundation.scss';
+import '../../lib/helpers.scss';
 
 // React UI components
 import {
@@ -635,13 +636,13 @@ class DemoContainer extends React.Component {
                   <Button
                     clickHandler={loggerClick}
                     label="Loading button"
-                    loadingIcon={<Icon icon="sync" />}
+                    loadingIcon={<span className="d-inline-flex animation-spin-counterclockwise"><Icon icon="sync" /></span>}
                   />
                   <Button
                     clickHandler={loggerClick}
                     label="Loading button with icon and badge"
                     afterLabel={<Icon icon="stars" />}
-                    loadingIcon={<Icon icon="sync" />}
+                    loadingIcon={<span className="d-inline-flex animation-spin-counterclockwise"><Icon icon="sync" /></span>}
                     startCorner={<Badge label={3} />}
                   />
                 </>
@@ -2464,12 +2465,42 @@ class DemoContainer extends React.Component {
             />
           </section>
           <hr />
+          <section id="helpers" className="mb-7">
+            <h2 className="typography-size-5 mb-6">Helpers</h2>
+            <p>
+              Helpers are CSS class names for common situations.
+            </p>
+            <h3 id="helpers-animation" className="typography-size-4 mb-6">Animation</h3>
+            <p>
+              Remember that non-block inline elements cannot be animated.
+            </p>
+            <Documentation
+              name="Animation"
+              component={(
+                <>
+                  <p>
+                    <code className="mr-3">.animation-spin-clockwise</code>
+                    <span className="d-inline-flex animation-spin-clockwise">
+                      <Icon icon="sync" />
+                    </span>
+                  </p>
+                  <p>
+                    <code className="mr-3">.animation-spin-counterclockwise</code>
+                    <span className="d-inline-flex animation-spin-counterclockwise">
+                      <Icon icon="sync" />
+                    </span>
+                  </p>
+                </>
+              )}
+            />
+          </section>
+          <hr />
           <section id="utilities" className="mb-7">
             <h2 className="typography-size-5 mb-6">Utilities</h2>
             <p>
               Utilities are CSS class names that do just one thing.
             </p>
-            <h3 id="utilities-block-alignment" className="typography-size-4 mb-6">Box Alignment</h3>
+            <h3 id="utilities-box-alignment" className="typography-size-4 mb-6">Box Alignment</h3>
             <p>
               Class name notation is
               {' '}

src/demo/pages/navigation.js

@@ -135,6 +135,16 @@ export default [
     link: '#screens',
     title: 'Screens',
   },
+  {
+    items: [
+      {
+        link: '#helpers-animation',
+        title: 'Animation',
+      },
+    ],
+    link: '#helpers',
+    title: 'Helpers',
+  },
   {
     items: [
       {

src/lib/components/ui/Button/Button.scss

@@ -5,16 +5,6 @@
 @import 'mixins';
 @import 'variables';
 
-@keyframes rotateIcon {
-  from {
-    transform: rotate(0);
-  }
-
-  to {
-    transform: rotate(-360deg);
-  }
-}
-
 .root {
   @include button();
   @include form-field-horizontal-neighbor();
@@ -34,10 +24,6 @@
   justify-content: center;
 }
 
-.loadingIcon {
-  animation: rotateIcon 2s linear infinite;
-}
-
 .beforeLabel {
   margin-right: $button-icon-offset;
 }

src/lib/helpers.scss

@@ -0,0 +1,24 @@
+// General purpose helpers for common situations. Unlike utilities, helpers usually cover more CSS
+// properties than one. And unlike with utilities, using `!important` is not allowed here.
+
+$_spin-count: 4;
+$_spin-duration: 2.2s;
+$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
+
+@keyframes spin {
+  0% {
+    transform: rotate(0 * 360deg);
+  }
+
+  100% {
+    transform: rotate($_spin-count * 360deg);
+  }
+}
+
+:global(.animation-spin-clockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite;
+}
+
+:global(.animation-spin-counterclockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite reverse;
+}