CAKE-3226 | Update spinner for integration into FC

src/components/Spinner/README.md

@@ -8,5 +8,8 @@ Custom size and stroke:
 <div>
 	<Spinner size={'78'} stroke={'6'}/>
 	<Spinner size={70} stroke={2}/>
+	<Spinner size={70} block/>
+	<Spinner inline/>
+	<Spinner inline block/>
 </div>
 ```

src/components/Spinner/__snapshots__/index.spec.js.snap

@@ -1,8 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Spinner renders correctly with additional classname 1`] = `
+<div
+  className="fandom-spinner custom-class or-multiple-classes"
+  style={
+    Object {
+      "height": 30,
+      "width": 30,
+    }
+  }
+>
+  <svg
+    height={30}
+    viewBox="0 0 30 30"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      transform="translate(15, 15)"
+    >
+      <circle
+        fill="none"
+        r={14}
+        strokeDasharray={87.96459430051421}
+        strokeDashoffset={87.96459430051421}
+        strokeLinecap="round"
+        strokeWidth={2}
+      />
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`Spinner renders correctly with custom block  1`] = `
+<div
+  className="fandom-spinner is-block"
+  style={
+    Object {
+      "height": 30,
+      "width": 30,
+    }
+  }
+>
+  <svg
+    height={30}
+    viewBox="0 0 30 30"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      transform="translate(15, 15)"
+    >
+      <circle
+        fill="none"
+        r={14}
+        strokeDasharray={87.96459430051421}
+        strokeDashoffset={87.96459430051421}
+        strokeLinecap="round"
+        strokeWidth={2}
+      />
+    </g>
+  </svg>
+</div>
+`;
+
 exports[`Spinner renders correctly with custom colors (named color) 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
   style={
     Object {
       "height": 30,
@@ -34,7 +98,7 @@ exports[`Spinner renders correctly with custom colors (named color) 1`] = `
 
 exports[`Spinner renders correctly with custom colors (rgb) 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
   style={
     Object {
       "height": 30,
@@ -66,7 +130,39 @@ exports[`Spinner renders correctly with custom colors (rgb) 1`] = `
 
 exports[`Spinner renders correctly with custom colors (short hex) 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
+  style={
+    Object {
+      "height": 30,
+      "width": 30,
+    }
+  }
+>
+  <svg
+    height={30}
+    viewBox="0 0 30 30"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      transform="translate(15, 15)"
+    >
+      <circle
+        fill="none"
+        r={14}
+        strokeDasharray={87.96459430051421}
+        strokeDashoffset={87.96459430051421}
+        strokeLinecap="round"
+        strokeWidth={2}
+      />
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`Spinner renders correctly with custom inline  1`] = `
+<div
+  className="fandom-spinner is-inline"
   style={
     Object {
       "height": 30,
@@ -98,7 +194,7 @@ exports[`Spinner renders correctly with custom colors (short hex) 1`] = `
 
 exports[`Spinner renders correctly with custom size (number) 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
   style={
     Object {
       "height": "20",
@@ -130,7 +226,7 @@ exports[`Spinner renders correctly with custom size (number) 1`] = `
 
 exports[`Spinner renders correctly with custom size (string) 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
   style={
     Object {
       "height": "78",
@@ -162,7 +258,7 @@ exports[`Spinner renders correctly with custom size (string) 1`] = `
 
 exports[`Spinner renders correctly with default values 1`] = `
 <div
-  className="fandom-spinner "
+  className="fandom-spinner"
   style={
     Object {
       "height": 30,

src/components/Spinner/index.js

@@ -12,6 +12,8 @@ const Spinner = ({
   className,
   size,
   stroke,
+  block,
+  inline,
 }) => {
   const style = {
     width: size,
@@ -21,9 +23,22 @@ const Spinner = ({
   const r = (size - stroke) / 2;
   const translate = r + (stroke / 2);
   const dash = 2 * Math.PI * r;
+  const classes = ['fandom-spinner'];
+
+  if (block) {
+    classes.push('is-block');
+  }
+
+  if (inline) {
+    classes.push('is-inline');
+  }
+
+  if (className) {
+    classes.push(className);
+  }
 
   return (
-    <div className={`fandom-spinner ${className}`} style={style}>
+    <div className={classes.join(' ')} style={style}>
       <svg
         width={size}
         height={size}
@@ -58,12 +73,22 @@ Spinner.propTypes = {
    * Stroke width
    */
   stroke: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Display block and center
+   */
+  block: PropTypes.bool,
+  /**
+   * Display contentinline based on line height
+   */
+  inline: PropTypes.bool,
 };
 
 Spinner.defaultProps = {
   className: '',
   size: 30,
   stroke: 2,
+  block: false,
+  inline: false,
 };
 
 export default Spinner;

src/components/Spinner/index.spec.js

@@ -44,3 +44,24 @@ test('Spinner renders correctly with custom colors (rgb)', () => {
   );
   expect(component.toJSON()).toMatchSnapshot();
 });
+
+test('Spinner renders correctly with custom inline ', () => {
+  const component = renderer.create(
+    <Spinner inline />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Spinner renders correctly with custom block ', () => {
+  const component = renderer.create(
+    <Spinner block />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('Spinner renders correctly with additional classname', () => {
+  const component = renderer.create(
+    <Spinner className="custom-class or-multiple-classes" />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/Spinner/styles.scss

@@ -30,4 +30,21 @@
 			stroke: $wds-color-link;
 		}
 	}
+
+	&.is-block {
+		display: block;
+		left: auto;
+		margin: auto;
+		position: relative;
+	}
+
+	&.is-inline {
+		height: 1em;
+		left: 0;
+		margin: 0;
+		position: static;
+		top: 0;
+		width: auto;
+	}
+
 }