linear-react-components-ui 1.1.14-beta.0 → 1.1.14

package/lib/assets/styles/hint.scss

@@ -1,4 +1,5 @@
 @import "commons.scss";
+@import "colors.scss";
 
 .hint-component {
   @extend %hint-text;
@@ -6,4 +7,24 @@
   &.-skeletonized > span {
     @extend %skeleton-component;
   }
+
+  &.-disabled > span {
+    opacity: 0.4;
+  }
+
+  &.-primary {
+    color: $primary-color;
+  }
+  &.-warning {
+    color: $warning-color;
+  }
+  &.-danger {
+    color: $danger-color;
+  }
+  &.-success {
+    color: $success-color;
+  }
+  &.-info {
+    color: $info-color;
+  }
 }

package/lib/assets/styles/icon.scss

@@ -1,15 +1,42 @@
+@import "colors.scss";
+
 /*
 * Caso altere o nome da classe, deverá pesquisar em todo projeto se existe 
 * algum lugar que esta sobescrevendo
 */
-.icon-component {
-  margin: 0px 2px;
-}
-
 .icon-component-container {
   display: inline-flex;
   place-self: center;
   padding: 2px;
   border-radius: 99999px;
   pointer-events: fill;
+
+}
+
+.icon-component {
+  margin: 0px 2px;
+  &:not([fill]) { 
+    fill: #676464;
+  }
+
+  &[data-color-style="primary"] {
+    fill: $primary-color
+  }
+
+  &[data-color-style="success"] {
+    fill: $success-color
+  }
+
+  &[data-color-style="info"] {
+    fill: $info-color
+  }
+
+  &[data-color-style="warning"] {
+    fill: $warning-color
+  }
+
+  &[data-color-style="danger"] {
+    fill: $danger-color
+  }
 }
+

package/lib/assets/styles/input.scss

@@ -5,8 +5,15 @@
 .input-base-component > .labelcontainer {
   margin: 0; 
   padding: 0;
+  line-height: 14px;
+  margin-bottom: 6px;
   > .label {
     @extend %input-label;
+    width: 100%;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -18,13 +25,6 @@
     width: 100%;
     height: 100%;
   }
-  > .errormessages {
-    width: 100%;
-    color: red;
-    font-size: 13px!important;
-    line-height: 13px;
-    margin-top: 3px;
-  }
   & .icon-component {
     height: 100%;
     display: grid;

package/lib/assets/styles/multiSelect.scss

@@ -23,6 +23,10 @@
         top: 50%;
         left: 10px;
         transform: translateY(-50%);
+
+        button {
+          all: unset;
+        }
       }
     }
 
@@ -95,6 +99,7 @@
     }
 
     .menubutton {
+      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -117,4 +122,4 @@
       }
     }
   }
-}
+}

package/lib/assets/styles/radio.scss

@@ -74,42 +74,44 @@ $radio-button-ripple-size: 15px;
   background: $default-color;
 }
 
-.-small:before{
-  width: 16px;
-  height: 16px;
-  top: 0.225rem;
-  left: 0.265rem;
-}
-.-medium:before{
-  width: 20px;
-  height: 20px;
-  top: 0.245rem;
-  left: 0.285rem;
-}
-.-large:before{
-  width: 24px;
-  height: 24px;
-  top: 0.245rem;
-  left: 0.285rem;
-}
+.radio-button {
+  .-small:before{
+    width: 16px;
+    height: 16px;
+    top: 0.225rem;
+    left: 0.265rem;
+  }
+  .-medium:before{
+    width: 20px;
+    height: 20px;
+    top: 0.245rem;
+    left: 0.285rem;
+  }
+  .-large:before{
+    width: 24px;
+    height: 24px;
+    top: 0.245rem;
+    left: 0.285rem;
+  }
 
-.-small:after{
-  width: 8px;
-  height: 8px;
-  top: 0.23rem;
-  left: 0.27rem;
-}
-.-medium:after{
-  width: 12px;
-  height: 12px;
-  top: 0.24rem;
-  left: 0.26rem;
-}
-.-large:after{
-  width: 16px;
-  height: 16px;
-  top: 0.245rem;
-  left: 0.285rem;
+  .-small:after{
+    width: 8px;
+    height: 8px;
+    top: 0.23rem;
+    left: 0.27rem;
+  }
+  .-medium:after{
+    width: 12px;
+    height: 12px;
+    top: 0.24rem;
+    left: 0.26rem;
+  }
+  .-large:after{
+    width: 16px;
+    height: 16px;
+    top: 0.245rem;
+    left: 0.285rem;
+  }
 }
 
 .radio-component:checked + .description:after,

package/lib/assets/styles/select.scss

@@ -10,14 +10,15 @@
     height: auto;
   }
 
-  .selectwrapper .actionbutton {
-    cursor: pointer;
+  .selectwrapper .actionbuttonsselect {
     display: flex;
-    align-items: center;
-    height: 100%;
+    flex-direction: row;
 
-    >.iconclear {
-      margin: 8px -3px 2px 3px;
+    .actionbutton {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -42,6 +43,10 @@
       float: left;
       margin: 2px;
       padding: 0px 8px 0px 5px;
+
+      .close {
+        all: unset;
+      }
     }
   }
 
@@ -118,6 +123,7 @@
     }
 
     .menubutton {
+      all: unset;
       background-color: transparent;
       border: 0;
       padding: 0;
@@ -145,4 +151,4 @@
     font-style: italic;
     font-size: 13px;
   }
-}
+}

package/lib/assets/styles/table.scss

@@ -58,11 +58,19 @@
     &.-noborder {
       border-bottom: 0;
     }
+    &.menu-column {
+      width: 100px;
+      text-align: center;
+      svg {
+        margin-left: 0;
+      }
+    }
   }
 
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
-    &.-selected {
+    &.-selected,
+    &[data-uitour="selected"] {
       background-color: $component-bg-selected-color !important;
       color: $font-selected-color;
     }

package/lib/assets/styles/tabs.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 
+$dropdown-width: 38px;
+
 %tab-closepanel {
   background-color: transparent;
   border: 0;
@@ -11,7 +13,6 @@
   visibility: hidden;
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
-
   &:after {
     content: "×";
     font-size: 20px;
@@ -19,10 +20,8 @@
     color: $font-color-soft;
     transition: all 0.2s ease-in-out;
   }
-
   &:hover {
     background-color: $color-light-dark;
-
     &:after {
       color: $font-color-second;
     }
@@ -30,20 +29,18 @@
 }
 
 %tab-component-menus {
+  -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
+  -moz-box-shadow: 0px -1px 0px $component-border-color inset;
+  box-shadow: 0px -1px 0px $component-border-color inset;
   .menu {
-    -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
-    -moz-box-shadow: 0px -1px 0px $component-border-color inset;
-    box-shadow: 0px -1px 0px $component-border-color inset;
     display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
     flex: 1;
+    overflow: hidden;
 
     &.-firsttabident>.menuitem:first-child {
       margin-left: 15px;
     }
   }
-
   .menu>.menuitem {
     border-bottom: 0;
     border-radius: 5px 5px 0px 0px;
@@ -55,10 +52,10 @@
     margin-right: 1px;
     padding: 0;
     width: auto;
+    min-width: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -66,9 +63,7 @@
       border-top: 2px solid $component-selected-color;
       box-shadow: 0;
       font-weight: bold;
-      /* z-index: 2; */
     }
-
     &.selected>.closepanel,
     &:hover>.closepanel {
       visibility: visible;
@@ -80,6 +75,8 @@
     text-overflow: ellipsis;
     background: transparent;
     border: 0;
+    width: 100%;
+    text-align: left
   }
 
   .menu>.menuitem>.closepanel {
@@ -103,18 +100,31 @@
   height: 100%;
   overflow: auto;
   @extend %tab-component-menus;
-
   >.menucontainer {
-    display: flex;
-    flex-wrap: nowrap;
     width: 100%;
+    display: flex;
     min-height: 35px;
     overflow: hidden;
     @extend %tab-component-menus;
-
     >.dropdownbutton {
       border-bottom: 1px solid $component-border-color;
-      padding: 0 0.8rem;
+      padding: 0;
+      width: $dropdown-width;
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0;
+      &.show {
+        visibility: visible;
+        pointer-events: all;
+        opacity: 1;
+      }
+      > svg {
+        margin: 0;
+        float: none;
+      }
+    }
+    .toolbar-component {
+      width: auto;
     }
   }
 
@@ -126,7 +136,7 @@
     overflow: auto;
   }
 
-  >.hidepanel {
+  .hidepanel {
     display: none;
   }
 }

package/lib/assets/styles/textContent.scss

@@ -0,0 +1,9 @@
+@import "colors.scss";
+@import "fonts.scss";
+
+.text-content-component {
+  @extend %component-fonts;
+  &[data-textcontent="strong"] {
+    font-weight: bold;
+  }
+}

package/lib/avatar/index.js

@@ -8,24 +8,24 @@ var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../../lib/icons"));
 require("../assets/styles/avatar.scss");
 var _withDropdown = _interopRequireDefault(require("../dropdown/withDropdown"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var getClass = function getClass(_ref) {
-  var className = _ref.className,
-    square = _ref.square,
-    disabled = _ref.disabled,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const getClass = _ref => {
+  let {
+    className,
+    square,
+    disabled,
+    size = 'default'
+  } = _ref;
   return "avatar-component ".concat(className).concat(disabled && '-disabled', " \n  ").concat(square && '-square', " ").concat(size && "-".concat(size));
 };
-var getIcon = function getIcon(iconName, icon) {
+const getIcon = (iconName, icon) => {
   if (icon) {
     return icon;
   } else if (iconName) {
@@ -36,36 +36,37 @@ var getIcon = function getIcon(iconName, icon) {
   }
   return null;
 };
-var Avatar = function Avatar(props) {
-  var width = props.width,
-    height = props.height,
-    _onClick = props.onClick,
-    color = props.color,
-    iconName = props.iconName,
-    icon = props.icon,
-    src = props.src,
-    _props$srcAlt = props.srcAlt,
-    srcAlt = _props$srcAlt === void 0 ? 'Avatar' : _props$srcAlt,
-    customClass = props.customClass,
-    targetRef = props.targetRef,
-    label = props.label,
-    dropdown = props.dropdown,
-    showDropdown = props.showDropdown,
-    getDropdownPopup = props.getDropdownPopup,
-    style = props.style,
-    id = props.id;
-  var dropdownRef = (0, _react.useRef)(null);
+const Avatar = props => {
+  const {
+    width,
+    height,
+    onClick,
+    color,
+    iconName,
+    icon,
+    src,
+    srcAlt = 'Avatar',
+    customClass,
+    targetRef,
+    label,
+    dropdown,
+    showDropdown,
+    getDropdownPopup,
+    style,
+    id
+  } = props;
+  const dropdownRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "avatar",
     id: id,
-    onKeyPress: function onKeyPress() {},
+    onKeyPress: () => {},
     role: "button",
     tabIndex: -1,
-    onClick: function onClick(event) {
-      if (_onClick) _onClick(event);
+    onClick: event => {
+      if (onClick) onClick(event);
       if (dropdown && showDropdown) showDropdown();
     },
-    ref: function ref(r) {
+    ref: r => {
       if (targetRef) targetRef(r);
       dropdownRef.current = r;
     },
@@ -86,5 +87,4 @@ var Avatar = function Avatar(props) {
     alt: srcAlt
   }), label), dropdown && getDropdownPopup && getDropdownPopup(dropdownRef.current));
 };
-var _default = (0, _withDropdown.default)(Avatar);
-exports.default = _default;
+var _default = exports.default = (0, _withDropdown.default)(Avatar);

package/lib/badge/index.js

@@ -6,18 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("../assets/styles/badge.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var Badge = function Badge(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? 'default' : _props$color,
-    customClass = props.customClass,
-    customClassForBadge = props.customClassForBadge,
-    children = props.children,
-    content = props.content,
-    _props$top = props.top,
-    top = _props$top === void 0 ? '-16px' : _props$top,
-    _props$right = props.right,
-    right = _props$right === void 0 ? '-11px' : _props$right;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Badge = props => {
+  const {
+    color = 'default',
+    customClass,
+    customClassForBadge,
+    children,
+    content,
+    top = '-16px',
+    right = '-11px'
+  } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "badge-component ".concat(customClass)
   }, children, /*#__PURE__*/_react.default.createElement("span", {
@@ -28,5 +27,4 @@ var Badge = function Badge(props) {
     }
   }, content));
 };
-var _default = Badge;
-exports.default = _default;
+var _default = exports.default = Badge;

package/lib/buttons/ActivateButton.js

@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("./Button"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 ActivateButton = function ActivateButton(props) {
-  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, props, {
-    iconName: "undo"
-  }));
-};
-var _default = ActivateButton;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const ActivateButton = props => /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, props, {
+  iconName: "undo"
+}));
+var _default = exports.default = ActivateButton;

package/lib/buttons/AddButton.js

@@ -7,15 +7,12 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SuccessButton = _interopRequireDefault(require("./SuccessButton"));
 var _icons = _interopRequireDefault(require("../icons"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 AddButton = function AddButton(props) {
-  return /*#__PURE__*/_react.default.createElement(_SuccessButton.default, _extends({}, props, {
-    icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
-      name: "new_file",
-      color: "white"
-    })
-  }));
-};
-var _default = AddButton;
-exports.default = _default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const AddButton = props => /*#__PURE__*/_react.default.createElement(_SuccessButton.default, _extends({}, props, {
+  icon: /*#__PURE__*/_react.default.createElement(_icons.default, {
+    name: "new_file",
+    color: "white"
+  })
+}));
+var _default = exports.default = AddButton;