feat(loader): add new component

Kevin Manson · Kevin Manson · commit 5acef4178516 · 2017-09-21T12:00:10.000-04:00
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
   ],
   "repository": "ovh-ux/ovh-ui-angular",
   "main": "./packages/oui-angular/dist/oui-angular.js",
-  "webpack": "packages/oui-angular/src/index.js",
+  "browser": "./packages/oui-angular/dist/oui-angular.js",
+  "module": "packages/oui-angular/src/index.js",
   "scripts": {
     "bootstrap": "lerna bootstrap",
     "wipe": "lerna clean",
diff --git a/packages/oui-angular/dist/oui-angular.js b/packages/oui-angular/dist/oui-angular.js
diff --git a/packages/oui-angular/dist/oui-angular.js.map b/packages/oui-angular/dist/oui-angular.js.map
diff --git a/packages/oui-angular/package.json b/packages/oui-angular/package.json
@@ -13,7 +13,8 @@
     "@oui-angular/checkbox": "^1.0.0",
     "@oui-angular/message": "^1.0.0",
     "@oui-angular/radio": "^1.0.0",
-    "@oui-angular/radio-group": "^1.0.0"
+    "@oui-angular/radio-group": "^1.0.0",
+    "@oui-angular/loader": "^1.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js
@@ -2,10 +2,12 @@ import '@oui-angular/checkbox/src'
 import '@oui-angular/radio/src'
 import '@oui-angular/radio-group/src'
 import '@oui-angular/message/src'
+import '@oui-angular/loader/src'
 
 angular.module('oui', [
   'oui.checkbox',
   'oui.radio',
   'oui.radio-group',
-  'oui.message'
+  'oui.message',
+  'oui.loader'
 ])
diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js
@@ -2,6 +2,7 @@ loadTests(require.context('../../oui-checkbox/src/', true, /.*((\.spec)|(index))
 loadTests(require.context('../../oui-message/src/', true, /.*((\.spec)|(index))$/))
 loadTests(require.context('../../oui-radio/src/', true, /.*((\.spec)|(index))$/))
 loadTests(require.context('../../oui-radio-group/src/', true, /.*((\.spec)|(index))$/))
+loadTests(require.context('../../oui-loader/src/', true, /.*((\.spec)|(index))$/))
 
 function loadTests (context) {
   context.keys().forEach(context)
diff --git a/packages/oui-loader/.gitignore b/packages/oui-loader/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+dist/
+coverage/
+*.log
+yarn.lock
diff --git a/packages/oui-loader/README.md b/packages/oui-loader/README.md
@@ -0,0 +1,32 @@
+# Loader
+
+<component-status cx-design="partial" ux="rc"></component-status>
+
+## Usage
+
+### Small
+```html:preview
+<oui-loader size="s"></oui-loader>
+```
+
+By default, small loader is the only one displayed as an inline element.
+
+### Medium
+```html:preview
+<oui-loader size="m"></oui-loader>
+```
+
+### Big
+```html:preview
+<oui-loader size="l"></oui-loader>
+```
+
+### Inline
+```html:preview
+<oui-loader size="m" inline="true"></oui-loader>
+```
+
+| Name            | Type            | Values              | Default             | Description         |
+| ----            | ----            | ----                | ----                | ----                |
+| `size`          | String          | s, m, l             | m                   | Loader size         |
+| `inline`        | Boolean         |                     | `false` (`true` for small loader)               | Inline display         |
diff --git a/packages/oui-loader/karma.conf.js b/packages/oui-loader/karma.conf.js
@@ -0,0 +1,13 @@
+import { configure as configureKarma } from '../../build/karma.single.conf'
+
+module.exports = (config) => {
+  const karmaConfig = configureKarma(__dirname)
+
+  karmaConfig.files.unshift(require.resolve('angular-mocks'))
+  karmaConfig.files.unshift(require.resolve('angular'))
+  karmaConfig.webpack.devtool = 'inline-source-map'
+
+  config.set({
+    ...karmaConfig
+  })
+}
diff --git a/packages/oui-loader/package.json b/packages/oui-loader/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@oui-angular/loader",
+  "version": "1.0.0",
+  "main": "dist/component.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "rimraf dist && webpack --progress --colors --hide-modules --config webpack.config.babel.js",
+    "karma:watch": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start karma.conf.js --watch",
+    "karma:chrome": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start karma.conf.js --browsers Chromium",
+    "karma": "cross-env NODE_ENV=test babel-node $(npm bin)/karma start karma.conf.js --reporters spec,coverage-istanbul --single-run",
+    "webdriver:update": "webdriver-manager update",
+    "protractor": "babel-node $(yarn bin)/protractor",
+    "test": "yarn karma && yarn protractor"
+  },
+  "dependencies": {
+    "angular": "^1.6.5"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "cross-env": "^3.2.4",
+    "karma": "^1.7.0",
+    "protractor": "^4.0.14",
+    "rimraf": "^2.6.1",
+    "webpack": "^1.15.0"
+  },
+  "engines": {
+    "node": ">= 6.9.0",
+    "npm": ">= 3.10.0",
+    "yarn": ">= 0.17.0"
+  }
+}
diff --git a/packages/oui-loader/protractor.conf.js b/packages/oui-loader/protractor.conf.js
@@ -0,0 +1,8 @@
+import fs from 'fs'
+import path from 'path'
+import protractorConfig from '../../build/protractor.conf'
+
+exports.config = Object.assign(protractorConfig, {
+  specs: [path.join('.', 'e2e', '**', '*.spec.js')],
+  baseUrl: fs.readFileSync('.preview-host').toString()
+})
diff --git a/packages/oui-loader/src/index.js b/packages/oui-loader/src/index.js
@@ -0,0 +1,3 @@
+import Loader from './loader.component.js'
+
+angular.module('oui.loader', []).component('ouiLoader', Loader)
diff --git a/packages/oui-loader/src/index.spec.js b/packages/oui-loader/src/index.spec.js
@@ -0,0 +1,100 @@
+describe('ouiLoader', () => {
+  let $componentController
+
+  beforeEach(angular.mock.module('oui.loader'))
+
+  beforeEach(inject((_$componentController_) => {
+    $componentController = _$componentController_
+  }))
+
+  describe('Controller', () => {
+    it('should exist', () => {
+      const ctrl = $componentController('ouiLoader', {
+        $attrs: {}
+      })
+      ctrl.$onInit()
+      expect(ctrl).toBeDefined()
+    })
+
+    describe('Default', () => {
+      it('should have default size and not inline', () => {
+        const ctrl = $componentController('ouiLoader', {
+          $attrs: {}
+        })
+        ctrl.$onInit()
+        expect(ctrl.size).toEqual('m')
+        expect(ctrl.inline).toBeFalsy()
+      })
+    })
+
+    describe('Small', () => {
+      it('should have right size and inline', () => {
+        const ctrl = $componentController('ouiLoader', {
+          $attrs: {}
+        }, {
+          size: 's'
+        })
+        ctrl.$onInit()
+        expect(ctrl.size).toEqual('s')
+        expect(ctrl.inline).toBeTruthy()
+      })
+
+      describe('forced not inline', () => {
+        it('should not be inline', () => {
+          const ctrl = $componentController('ouiLoader', {
+            $attrs: {
+              inline: 'false'
+            }
+          }, {
+            size: 's',
+            inline: false
+          })
+          ctrl.$onInit()
+          expect(ctrl.size).toEqual('s')
+          expect(ctrl.inline).toBeFalsy()
+        })
+      })
+    })
+
+    describe('Medium', () => {
+      it('should have default size', () => {
+        const ctrl = $componentController('ouiLoader', {
+          $attrs: {}
+        }, {
+          size: 'm'
+        })
+        ctrl.$onInit()
+        expect(ctrl.size).toEqual('m')
+        expect(ctrl.inline).toBeFalsy()
+      })
+
+      describe('forced inline', () => {
+        it('should be inline', () => {
+          const ctrl = $componentController('ouiLoader', {
+            $attrs: {
+              inline: {}
+            }
+          }, {
+            size: 'm'
+          })
+          ctrl.$onInit()
+          expect(ctrl.size).toEqual('m')
+          expect(ctrl.inline).toBeTruthy()
+        })
+      })
+    })
+
+    describe('Large', () => {
+      it('should have default size', () => {
+        const ctrl = $componentController('ouiLoader', {
+          $attrs: {}
+        }, {
+          size: 'l'
+        })
+        ctrl.$onInit()
+        expect(ctrl.size).toEqual('l')
+        expect(ctrl.inline).toBeFalsy()
+      })
+    })
+  })
+})
diff --git a/packages/oui-loader/src/loader.component.js b/packages/oui-loader/src/loader.component.js
@@ -0,0 +1,11 @@
+import template from './loader.html'
+import controller from './loader.controller'
+
+export default {
+  template,
+  controller,
+  bindings: {
+    inline: '<?',
+    size: '@?'
+  }
+}
diff --git a/packages/oui-loader/src/loader.controller.js b/packages/oui-loader/src/loader.controller.js
@@ -0,0 +1,21 @@
+import _ from 'lodash'
+
+export default class {
+  constructor ($attrs) {
+    'ngInject'
+
+    this.$attrs = $attrs
+  }
+
+  $onInit () {
+    this.size = this.size || 'm'
+
+    if (_.has(this.$attrs, 'inline') && _.isEmpty(this.$attrs.inline)) {
+      this.inline = true
+    }
+
+    if (this.size === 's' && !_.has(this.$attrs, 'inline')) {
+      this.inline = true
+    }
+  }
+}
diff --git a/packages/oui-loader/src/loader.html b/packages/oui-loader/src/loader.html
@@ -0,0 +1,9 @@
+<div class="oui-loader"
+  data-ng-class="[
+    { 'oui-loader_inline': $ctrl.inline },
+    'oui-loader_' + $ctrl.size
+  ]">
+  <div class="oui-loader__container">
+    <div class="oui-loader__image"></div>
+  </div>
+</div>
diff --git a/packages/oui-loader/webpack.config.babel.js b/packages/oui-loader/webpack.config.babel.js
@@ -0,0 +1,7 @@
+import merge from 'webpack-merge'
+
+const env = process.env.NODE_ENV || 'dist'
+
+export default merge(require(`../../build/webpack.${env}.config`).default, {
+  context: __dirname
+})
