linear-react-components-ui 0.4.75 → 0.4.76-rc.0

package/.eslintrc.js

@@ -1,19 +1,16 @@
 module.exports = {
   "extends": "airbnb",
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "parser": "babel-eslint",
   "rules": {
     "prefer-destructuring": ["error", {"object": true, "array": false}],
-    // overried eslint-config-airbnb defaults
-    //react.js
     'react/forbid-prop-types': ['error', { forbid: ['array'] }],
     'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
     'react/jsx-closing-bracket-location': ['error', 'after-props'],
     'react/no-unused-prop-types': ['0'],
-
-    //react-a11y.js
     "jsx-a11y/anchor-is-valid": [ "error", {
       "components": [ "Link" ],
       "specialLink": [ "hrefLeft", "hrefRight" ],

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.16.0

package/.vscode/settings.json

@@ -1,12 +1,11 @@
 {
   "files.exclude": {
-		"__error": "Not found",
-		"config": true,
-		"coverage": true,
-		"node_modules": true,
-		"scripts": true,
-		"yarn.lock": true,
-		".eslintrc.js": false,
-		".gitignore": false,
-	}
+    "config": true,
+    "coverage": true,
+    "node_modules": true,
+    "scripts": true,
+    "yarn.lock": true,
+    ".eslintrc.js": true,
+    ".gitignore": true,
+  }
 }

package/README.md

@@ -36,6 +36,29 @@ Compilar para publicação:
 
 `npm run demo:prod`
 
+### Publicação da lib no NPM
+A princípio precisaremos fazer o login no npm para isso rode o comando abaixo:
+
+  `npm login`
+
+Para gerar uma build nova e fazer a publicação no npm rode os comandos a seguir:
+
+  `npm version <versão>`
+
+  `npm run publish:npm`
+
+Caso queira gerar uma build com versão beta e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag beta`
+
+no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, um exemplo: 0.4.75 ou para o caso de uma 
+versão beta siga o seguinte exemplo: 0.4.75-beta.1, ficando da seguinte maneira:
+
+  `npm version 0.4.75`
+
+
 ### Publicar versão de demonstração no Heroku
 
     

package/config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

package/config/jest/fileTransform.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

package/config/jest/storageMock.js

@@ -0,0 +1,40 @@
+export const sessionStorageValueMock = '{"SG_CADASTROS":[{"nome":"Empresas","codigo":"SG_CADASTROS_EMPRESAS","permissoes":[{"codigo":"SG_CADASTROS_EMPRESAS_GRAVAR"},{"codigo":"SG_CADASTROS_EMPRESAS_CONSULTAR"},{"codigo":"SG_CADASTROS_EMPRESAS_EXCLUIR"},{"codigo":"SG_CADASTROS_EMPRESAS_RESTAURAR"},{"codigo":"SG_CADASTROS_EMPRESAS_ATIVAR"},{"codigo":"SG_CADASTROS_EMPRESAS_INATIVAR"}],"descricao":"Gestão das Empresas","itens":[]},{"nome":"Parceiros","codigo":"SG_CADASTROS_PARCEIROS","permissoes":[{"codigo":"SG_CADASTROS_PARCEIROS_GRAVAR"},{"codigo":"SG_CADASTROS_PARCEIROS_CONSULTAR"},{"codigo":"SG_CADASTROS_PARCEIROS_EXCLUIR"},{"codigo":"SG_CADASTROS_PARCEIROS_CONTATOS_GRAVAR"},{"codigo":"SG_CADASTROS_PARCEIROS_CONTATOS_CONSULTAR"},{"codigo":"SG_CADASTROS_PARCEIROS_RESTAURAR"},{"codigo":"SG_CADASTROS_PARCEIROS_ATIVAR"},{"codigo":"SG_CADASTROS_PARCEIROS_INATIVAR"}],"descricao":"Gestão de Pessoas que se relacionam com as Empresas","itens":[]},{"nome":"Produtos","codigo":"SG_CADASTROS_PRODUTOS","permissoes":[],"itens":[{"nome":"Produtos em Promoção","codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO","permissoes":[{"codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO_CONSULTAR"},{"codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO_VISUALIZAR"},{"codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO_NAO_EXPIRADAS"},{"codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO_UPLOAD_IMAGEM"},{"codigo":"SG_CADASTROS_PRODUTOS_EM_PROMOCAO_TROCAR_IMAGEM"}],"descricao":"Manutenção de Produtos em Promoção E-PROMO","itens":[]},{"nome":"Imagens dos Produtos","codigo":"SG_CADASTROS_PRODUTOS_IMAGENS","permissoes":[{"codigo":"SG_CADASTROS_PRODUTOS_IMAGENS_CONSULTAR"},{"codigo":"SG_CADASTROS_PRODUTOS_IMAGENS_VISUALIZAR"},{"codigo":"SG_CADASTROS_PRODUTOS_IMAGENS_INCLUIR"},{"codigo":"SG_CADASTROS_PRODUTOS_IMAGENS_EDITAR"},{"codigo":"SG_CADASTROS_PRODUTOS_IMAGENS_EXCLUIR"}],"descricao":"Manutenção das imagens privadas dos produtos","itens":[]}]},{"nome":"Tabelas Auxiliares","codigo":"SG_CADASTROS_TABELAS_AUXILIARES","permissoes":[],"descricao":"Cadastros de Tabelas Auxliliares","itens":[{"nome":"Grupo vendedor","codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR","permissoes":[{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_INCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_ALTERAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_PESQUISAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_VISUALIZAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_EXCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_VENDEDOR_RESTAURAR"}],"descricao":"Gestão de grupos de vendedores","itens":[]},{"nome":"Cadastro de Setor Colaborador","codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR","permissoes":[{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_INCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_ALTERAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_PESQUISAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_VISUALIZAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_EXCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_SETOR_COLABORADOR_RESTAURAR"}],"descricao":"Permite o cadastro de setor colaborador","itens":[]},{"nome":"Grupos de empresas","codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA","permissoes":[{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_INCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_ALTERAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_PESQUISAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_VISUALIZAR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_EXCLUIR"},{"codigo":"SG_CADASTROS_TABELAS_AUXILIARES_GRUPO_EMPRESA_RESTAURAR"}],"descricao":"Gestão de grupos de empresas","itens":[]}]},{"nome":"Cadastro de turnos","codigo":"SG_CADASTROS_TURNO","permissoes":[{"codigo":"SG_CADASTROS_TURNO_INCLUIR"},{"codigo":"SG_CADASTROS_TURNO_ALTERAR"},{"codigo":"SG_CADASTROS_TURNO_PESQUISAR"},{"codigo":"SG_CADASTROS_TURNO_VISUALIZAR"},{"codigo":"SG_CADASTROS_TURNO_EXCLUIR"},{"codigo":"SG_CADASTROS_TURNO_RESTAURAR"}],"descricao":"Permite o cadastro de turnos","itens":[],"codigoPaiExibicao":"SG_ADMINISTRATIVO_TABELAS_SISTEMA"}]}';
+
+const storageMock = () => {
+  const storage = {
+    permissionsStorage: sessionStorageValueMock,
+  };
+
+  return {
+    setItem: (key, value) => {
+      storage[key] = value || '';
+    },
+    getItem: key => storage[key] || null,
+    removeItem: (key) => {
+      delete storage[key];
+    },
+    get length() {
+      return Object.keys(storage).length;
+    },
+    key: (i) => {
+      const keys = Object.keys(storage);
+      return keys[i] || null;
+    },
+  };
+};
+
+export default storageMock;
+
+export const permissionAttrMockAuthorized = onDenied => ({
+  module: 'SG_CADASTROS',
+  feature: 'SG_CADASTROS_EMPRESAS',
+  operation: 'SG_CADASTROS_EMPRESAS_GRAVAR',
+  onDenied,
+});
+
+export const permissionAttrMockUnauthorized = onDenied => ({
+  module: 'SG_COMPRAS_CADASTROS',
+  feature: 'SG_COMPRAS_CADASTROS_MOTIVO_BAIXAS_PEDIDOS_COMPRAS',
+  operation: 'SG_COMPRAS_CADASTROS_MOTIVO_BAIXAS_PEDIDOS_COMPRAS_INCLUIR',
+  onDenied,
+});

package/jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  transform: {
+    '\\.(js|jsx)?$': 'babel-jest',
+  },
+  testMatch: [
+    '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}',
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
+  testPathIgnorePatterns: ['/node_modules/', '/public/'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/config/jest/fileTransform.js',
+    '.+\\.(css|scss)$': 'identity-obj-proxy',
+  },
+};

package/lib/alerts/alert.spec.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("babel-polyfill");
+
+require("@testing-library/jest-dom");
+
+var _react2 = require("@testing-library/react");
+
+var _Message = _interopRequireDefault(require("./Message"));
+
+var _icons = _interopRequireDefault(require("../icons"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var mockAlert = function mockAlert(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Message["default"], _extends({
+    id: 3,
+    message: "Alerta",
+    position: "rightTop",
+    closeButton: true,
+    customClass: "mock-alert",
+    timeout: 500
+  }, props));
+};
+
+describe('Alert', function () {
+  describe('Message', function () {
+    it('should render correctly', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose
+      })),
+          container = _render.container;
+
+      expect(container.firstChild).toBeTruthy();
+      expect(container.firstChild).toHaveTextContent('Alerta');
+    });
+    it('should close with timeout 500ms', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var mockHandleClose;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              mockHandleClose = jest.fn();
+              (0, _react2.render)(mockAlert({
+                handleClose: mockHandleClose
+              }));
+              _context.next = 4;
+              return (0, _react2.waitFor)(function () {
+                return expect(mockHandleClose).toBeCalledTimes(1);
+              });
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should apply custom class', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render2 = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose
+      })),
+          container = _render2.container;
+
+      expect(container.firstChild).toHaveClass('mock-alert');
+    });
+    it('should render icon', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render3 = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose,
+        icon: /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+          name: "user"
+        })
+      })),
+          container = _render3.container,
+          getByTestId = _render3.getByTestId;
+
+      expect(container.querySelector('.-icon')).toContainElement(getByTestId('icon'));
+    });
+    it('should render icon by iconName', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render4 = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose,
+        iconName: 'user'
+      })),
+          container = _render4.container,
+          getByTestId = _render4.getByTestId;
+
+      expect(container.querySelector('.-icon')).toContainElement(getByTestId('icon'));
+    });
+    it('should change icon color', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render5 = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose,
+        iconName: 'user',
+        color: 'red'
+      })),
+          getByTestId = _render5.getByTestId;
+
+      expect(getByTestId('icon')).toHaveAttribute('fill', 'red');
+    });
+    it('should fire event on click', function () {
+      var mockHandleClose = jest.fn();
+
+      var _render6 = (0, _react2.render)(mockAlert({
+        handleClose: mockHandleClose
+      })),
+          container = _render6.container,
+          getByRole = _render6.getByRole;
+
+      _react2.fireEvent.click(getByRole('button'));
+
+      expect(container.querySelector('.close')).toBeInTheDocument();
+      expect(container.querySelector('.close-button')).toBeInTheDocument();
+      expect(mockHandleClose).toBeCalledTimes(1);
+    });
+  });
+});

package/lib/assets/styles/dropdown.scss

@@ -76,12 +76,12 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenulink {
+    > .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenulink .-items {
+    > .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;
@@ -106,6 +106,29 @@
       transition: all 0.2s ease-in-out;
       &:hover {
         background: $default-hover-color;
+
+        > .floatmenudropdown {
+          visibility: visible;
+          pointer-events: initial;
+          opacity: 1;
+        }
+      }
+      > .floatmenudropdown {
+        position: absolute;
+        padding: 0;
+        top: 5px;
+        right: 5px;
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+      > .floatmenulink {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 100%;
       }
       &.iconcontainer {
         padding-bottom: 10px;

package/lib/assets/styles/effects.scss

@@ -2,9 +2,11 @@
 @keyframes slideInFromTop {
   0% {
     transform: translateY(-60%);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
   30% {
     transform: translateY(0);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -719,3 +721,13 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+// SlideWithPosition
+@keyframes slideWithPositionFromLeft {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -15,4 +15,3 @@
     }
   }
 }
-

package/lib/assets/styles/multiSelect.scss

@@ -0,0 +1,105 @@
+@import "commons.scss";
+@import "effects.scss";
+.multiSelect-component {
+  width: 100%;
+  display: block;
+  .selectwrapper {
+    height: auto;
+
+    > .multiselect {
+      flex-wrap: wrap;
+      position: relative;
+      > .textinput {
+        order: 1;
+        display: inline-block;
+      }
+      > .selecteditem {
+        font-size: 14px;
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+      }
+    }
+
+    > .actionbutton {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0 3px;
+      padding: 0 3px;
+
+      > svg {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.multiSelect-component > .dropdown {
+  animation: 0.5s ease-in 0s 1 slideDown;
+  background-color: #fff;
+  border: $component-border-color;
+  @extend %component-menu-dropdown;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  z-index: 9999;
+  > .filtercontainer {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    border: 1px solid $component-border-color;
+    margin: 4px;
+    > .filterinput {
+      border: 0;
+      font-size: 13px;
+      text-indent: 4px;
+      padding: 10px 5px;
+    }
+    > .filtericon {
+      position: absolute;
+      right: 5px;
+      top: 10px;
+    }
+  }
+  > .listcontainer > .item {
+    margin: 0;
+    padding: 6px 10px;
+    display: flex;
+    cursor: pointer;
+    justify-content: stretch;
+    border-bottom: solid 1px #e1e1e1;
+    &:last-child {
+      border-bottom: none;
+    }
+    &:hover {
+      background-color: $default-hover-color;
+    }
+    &.-selected {
+      background-color: $default-hover-color;
+    }
+    .menubutton {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      > .checkboxicon {
+        margin-right: 5px;
+      }
+      > .label {
+        flex-grow: 1;
+      }
+      > .menuicon {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/assets/styles/panel.scss

@@ -48,7 +48,6 @@
   }
   > .panel-content {
     height: auto;
-    overflow: auto;
     padding: 15px;
   }
 }

package/lib/assets/styles/periodpicker.scss

@@ -0,0 +1,65 @@
+@import "commons.scss";
+@import "effects.scss";
+.periodpicker-component {
+  height: auto;
+  position: relative;
+  display: flex;
+  border-radius: 2px;
+  border: 1px solid #dae1e8;
+
+  .inputwrapper {
+      border: none;
+  }
+
+  .separation_icon {
+    font-size: 16px;
+    flex: 0 0 10px;
+  }
+
+  .calendar-button {
+    flex: 0 0 20px;
+    padding: 4px;
+    border: none;
+  }
+ 
+  .input-base-component {
+    flex: 1;
+  }
+
+}
+
+.dropdown-period>.item {
+  margin: 0;
+  padding: 6px 10px;
+  display: flex;
+  cursor: pointer;
+  justify-content: stretch;
+  border-bottom: solid 1px #e1e1e1;
+
+  &:hover {
+    background-color: $default-hover-color;
+  }
+  &.-selected {
+    background-color: $default-hover-color;
+  }
+  &.-disabled {
+    @extend %component-menu-disabled;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.dropdown-period {
+  width: 100%;
+  /* animation: 0.5s ease-in 0s 1 slideDown; */
+  background-color: #FFF;
+  border: #dae1e8;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* margin-top: 2px; */
+  z-index: 99999999999;
+}

package/lib/assets/styles/popover.scss

@@ -1,7 +1,7 @@
 .popover-component {
   > .buttonicon {
-    width: auto!important;
-    height: auto!important;
+    width: auto !important;
+    height: auto !important;
     margin-top: 0 !important;
   }
   &:hover {
@@ -17,15 +17,13 @@
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
   max-width: 350px;
   padding: 10px 12px;
-  > .text {
-    .title:first-child {
-      margin-top: 0px;
-    }
-    > .title {
-      font-weight: bold;
-      width: 100%;
-      margin: 10px 0 5px;
-    }
+  .title:first-child {
+    margin-top: 0px;
+  }
+  > .title {
+    font-weight: bold;
+    width: 100%;
+    margin: 10px 0 5px;
   }
   &.-dark {
     background: #777;

package/lib/assets/styles/progress.scss

@@ -1,14 +1,15 @@
 @import "colors.scss";
 @import "commons.scss";
+
 .container-progress {
   display: flex;
   overflow: hidden;
-  height: 24px;
   margin-bottom: 20px;
   background-color: #f5f5f5; 
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  position: relative;
 }
 
 .bar {
@@ -50,6 +51,12 @@
     -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
   }
+  &.-indeterminate {
+    animation: slideWithPositionFromLeft infinite;
+    position: absolute;
+    left: -100%;
+    top: 0;
+  }
   >.progressbar-label {
     display: flex;
     align-items: center;

package/lib/assets/styles/select.scss

@@ -3,6 +3,7 @@
 .select-component {
   width: 100%;
   display: block;
+  position: relative;
   .selectwrapper {
     height: auto;
   }