New loader

components/button/button.examples.html

@@ -8,17 +8,11 @@
     :global(.dark) {
       background: #000;
     }
-
-    :global(.inline) {
-      display: inline-block;
-      padding: 8px;
-    }
   </file>
 
   <file type="html">
     <div id="buttons"></div>
     <div id="dark"></div>
-    <div id="dynamic"></div>
   </file>
 
   <file type="js">
@@ -47,6 +41,20 @@
           href="/"
         >Button link</Button>
 
+        <Button
+          loader
+        >Button loader</Button>
+
+        <Button
+          primary
+          loader
+        >Primary loader</Button>
+
+        <Button
+          icon={PencilIcon}
+          loader
+        >Icon loader</Button>
+
         {
           [
             'active', 'primary', 'danger', 'delayed', 'disabled'
@@ -88,6 +96,11 @@
           href="/"
         >Button link</Button>
 
+        <Button
+          theme={Button.Theme.DARK}
+          loader
+        >Dark loader</Button>
+
         {
           [
             'active', 'primary', 'danger', 'delayed', 'disabled'
@@ -104,37 +117,13 @@
 
     render(dark, document.getElementById('dark'));
 
-    const dynamic = (
-      <div className="buttons">
-        <Button
-          loader
-        >Button loader</Button>
-        <Button
-          primary
-          loader
-        >Primary loader</Button>
-        <Button
-          icon={PencilIcon}
-          loader
-        >Icon loader</Button>
-        <div className="dark inline">
-          <Button
-            theme={Button.Theme.DARK}
-            loader
-          >Dark loader</Button>
-        </div>
-      </div>
-    );
-
-    render(dynamic, document.getElementById('dynamic'));
-
   </file>
 </example>
 
 <example name="Perform a heavy operation while loading">
 
   <file type="css">
-    :global(.icon) {
+    #example > :not(:first-child) {
       margin-left: 8px;
     }
   </file>
@@ -147,6 +136,7 @@
     import React, {Component, Fragment} from 'react';
     import {render} from 'react-dom';
     import Button from '@jetbrains/ring-ui/components/button/button';
+    import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
     import {HourglassIcon} from '@jetbrains/ring-ui/components/icon';
 
     class Sleeper extends Component {
@@ -175,6 +165,7 @@
           <Fragment>
             <Button loader={loading} onClick={this.load}>Sleep</Button>
             <Button loader={loading} icon={HourglassIcon} onClick={this.load} />
+            {loading && <Loader/>}
           </Fragment>
         );
       }

components/button/button.gemini.js

@@ -2,7 +2,7 @@
 
 gemini.suite('Button', suite => {
   suite.
-    setUrl('button/button.html').
+    setUrl('button/button.html?block-animations').
     setCaptureElements('#buttons', '#dark').
     capture('button');
 });

components/global/conic-gradient.js

@@ -0,0 +1,18 @@
+/* global ConicGradient */
+import 'conic-gradient';
+
+import memoize from './memoize';
+
+const needsFallback = memoize(() => {
+  const div = document.createElement('div');
+  div.style.backgroundImage = 'conic-gradient(white, black)';
+  return !div.style.backgroundImage;
+});
+
+const conicGradient = memoize(stops => (
+  needsFallback()
+    ? new ConicGradient({stops}).toString()
+    : `conic-gradient(${stops})`
+));
+
+export default stops => conicGradient(stops.join(','));

components/global/inject-styles.js

@@ -0,0 +1,12 @@
+export const injectStyleSheet = styles => {
+  const styleTag = document.createElement('style');
+  styleTag.setAttribute('type', 'text/css');
+  styleTag.textContent = styles;
+  document.head.appendChild(styleTag);
+};
+
+export const injectRuleSet = (selector, declarations) =>
+  injectStyleSheet(`
+${selector} {${Object.entries(declarations).map(([property, value]) => `
+  ${property}: ${value};`)}
+}`);

components/global/memoize.js

@@ -1,7 +1,7 @@
 export default function memoize(fn) {
   const primitiveCache = new Map();
   const objectCache = new WeakMap();
-  return function memoized(arg) {
+  return function memoized(arg = '__singleValue__') {
     const cache = arg instanceof Object ? objectCache : primitiveCache;
     if (cache.has(arg)) {
       return cache.get(arg);

components/loader-inline/loader-inline.css

@@ -0,0 +1,62 @@
+@value unit, black-color, white-color from "../global/global.css";
+
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(calc(12 / 16));
+  }
+
+  100% {
+    transform: scale(calc(17 / 16));
+  }
+}
+
+.loader {
+  position: relative;
+
+  display: inline-block;
+
+  width: calc(unit * 2);
+  height: calc(unit * 2);
+
+  animation: spin 1s linear infinite;
+  vertical-align: -3px;
+
+  &,
+  &::after {
+    transform-origin: center;
+
+    border-radius: unit;
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    content: '';
+    transform: scale(calc(12 / 16));
+    animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;
+
+    background-color: inherit;
+  }
+}
+
+.light {
+  background-color: white-color;
+}
+
+.dark {
+  background-color: black-color;
+}

components/loader-inline/loader-inline.examples.html

@@ -0,0 +1,85 @@
+<example name="Inline loader">
+  <file type="html">
+    <span>some text on top</span>
+    <div>before <span id="loader-inline"></span> Some text after</div>
+    <div>some text under loader</div>
+  </file>
+
+  <file type="js">
+    import React from 'react';
+    import {render} from 'react-dom';
+    import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
+
+    render(<Loader/>, document.getElementById('loader-inline'));
+  </file>
+</example>
+
+<example name="Inline loader on black background">
+  <file type="html">
+    <div class="container">
+      <span>some text on top</span>
+      <div>before <span id="loader-inline"></span> Some text after</div>
+      <div>some text under loader</div>
+    </div>
+  </file>
+
+  <file type="css">
+    body {
+      background-color: #000;
+    }
+
+    :global(.container) {
+      color: #fff;
+    }
+  </file>
+
+  <file type="js">
+    import React from 'react';
+    import {render} from 'react-dom';
+    import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
+
+    render(<Loader theme={Loader.Theme.DARK} />, document.getElementById('loader-inline'));
+  </file>
+</example>
+
+<example name="Inline loader on custom background">
+  <file type="html">
+    <div class="container">
+      <span>some text on top</span>
+      <div>before <span id="loader-inline"></span> Some text after</div>
+      <div>some text under loader</div>
+    </div>
+  </file>
+
+  <file type="css">
+    body {
+      background-color: #E5F4FF;
+    }
+
+    :global(.loader) {
+      background-color: #E5F4FF;
+    }
+  </file>
+
+  <file type="js">
+    import React from 'react';
+    import {render} from 'react-dom';
+    import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
+
+    render(<Loader className="loader" />, document.getElementById('loader-inline'));
+  </file>
+</example>
+
+
+<example name="Inline loader without React [deprecated]">
+  <file type="html">
+    <div class="ring-loader-inline">
+      <div class="ring-loader-inline__ball"></div>
+      <div class="ring-loader-inline__ball ring-loader-inline__ball_second"></div>
+      <div class="ring-loader-inline__ball ring-loader-inline__ball_third"></div>
+    </div>
+  </file>
+  <file type="js">
+    import '@jetbrains/ring-ui/components/loader-inline/loader-inline.scss';
+  </file>
+</example>

components/loader-inline/loader-inline.gemini.js

@@ -0,0 +1,24 @@
+/* global gemini: false */
+
+gemini.suite('Loader inline', () => {
+  gemini.suite('White background', suite => {
+    suite.
+      setUrl('loader-inline/inline-loader.html?block-animations').
+      setCaptureElements('body').
+      capture('loader');
+  });
+
+  gemini.suite('Black background', suite => {
+    suite.
+      setUrl('loader-inline/inline-loader-on-black-background.html?block-animations').
+      setCaptureElements('body').
+      capture('loader');
+  });
+
+  gemini.suite('Custom background', suite => {
+    suite.
+      setUrl('loader-inline/inline-loader-on-custom-background.html?block-animations').
+      setCaptureElements('body').
+      capture('loader');
+  });
+});