@steroidsjs/bootstrap 3.0.0-beta.3 → 3.0.0-beta.30

package/index.js

@@ -26,6 +26,9 @@ exports["default"] = {
     'content.IconView': {
         lazy: function () { return require('./content/Icon/IconView')["default"]; }
     },
+    'content.BadgeView': {
+        lazy: function () { return require('./content/Badge/BadgeView')["default"]; }
+    },
     'form.AutoCompleteFieldView': {
         lazy: function () { return require('./form/AutoCompleteField/AutoCompleteFieldView')["default"]; }
     },
@@ -35,11 +38,11 @@ exports["default"] = {
     'content.CardView': {
         lazy: function () { return require('./content/Card/CardView')["default"]; }
     },
-    'content.CollapseView': {
-        lazy: function () { return require('./content/Collapse/CollapseView')["default"]; }
+    'content.AccordionView': {
+        lazy: function () { return require('./content/Accordion/AccordionView')["default"]; }
     },
-    'content.CollapseItemView': {
-        lazy: function () { return require('./content/Collapse/CollapseItemView')["default"]; }
+    'content.AccordionItemView': {
+        lazy: function () { return require('./content/Accordion/AccordionItemView')["default"]; }
     },
     'form.CheckboxFieldView': {
         lazy: function () { return require('./form/CheckboxField/CheckboxFieldView')["default"]; }
@@ -217,5 +220,11 @@ exports["default"] = {
     },
     'nav.TreeView': {
         lazy: function () { return require('./nav/Tree/TreeView')["default"]; }
+    },
+    'typography.TextView': {
+        lazy: function () { return require('./typography/Text/TextView')["default"]; }
+    },
+    'typography.TitleView': {
+        lazy: function () { return require('./typography/Title/TitleView')["default"]; }
     }
 };

package/index.scss

@@ -1,15 +1,17 @@
 @import './scss/mixins';
 @import './scss/variables';
+@import './scss/fonts';
 
 @import './crud/Crud/CrudView';
 @import './content/Alert/AlertView';
 @import './content/Avatar/AvatarView';
 @import './content/Avatar/AvatarGroupView';
+@import './content/Badge/BadgeView';
 @import './content/Calendar/CalendarView';
 @import './content/Calendar/CaptionElement';
 @import './content/Card/CardView';
-@import './content/Collapse/CollapseView';
-@import './content/Collapse/CollapseItemView';
+@import './content/Accordion/AccordionView';
+@import './content/Accordion/AccordionItemView';
 @import './content/Detail/DetailView';
 @import './form/AutoCompleteField/AutoCompleteFieldView';
 @import './form/Button/ButtonView';
@@ -38,7 +40,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './content/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';
@@ -67,3 +68,5 @@
 @import './nav/Nav/NavListView';
 @import './nav/Nav/NavTabsView';
 @import './nav/Tree/TreeView';
+@import './typography/Text/TextView';
+@import './typography/Title/TitleView';

package/layout/Header/HeaderView.scss

@@ -1,9 +1,9 @@
+$body-bg: transparent;
+
 .HeaderView {
   box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
   background-color: $body-bg;
-  &, a {
-    color: $body-color;
-  }
+
   a:hover {
     opacity: .7;
   }

package/layout/Tooltip/TooltipView.js

@@ -27,18 +27,18 @@ var React = __importStar(require("react"));
 var react_1 = require("react");
 var hooks_1 = require("@steroidsjs/core/hooks");
 function TooltipView(props) {
-    var _a;
     var tooltipRef = (0, react_1.useRef)(null);
     var arrowRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         props.calculatePosition(tooltipRef.current.getBoundingClientRect(), arrowRef.current.getBoundingClientRect());
     }, [props.calculatePosition]);
     var bem = (0, hooks_1.useBem)('TooltipView');
-    return (React.createElement("div", { ref: tooltipRef, className: bem(bem.block({
-            show: props.isTooltipVisible
-        }), 'tooltip', 'tooltip-position-' + props.position), style: props.style },
-        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', (_a = {}, _a['position-' + props.position] = true, _a)), style: props.arrowPosition }),
-        React.createElement("div", { className: bem(bem.element('content'), 'tooltip-inner') },
+    return (React.createElement("div", { ref: tooltipRef, className: bem.block({
+            show: props.isTooltipVisible,
+            position: props.position
+        }), style: props.style },
+        React.createElement("div", { ref: arrowRef, className: bem.element('arrow', { position: props.position }), style: props.arrowPosition }),
+        React.createElement("div", { className: bem.element('content') },
             React.createElement("span", null, props.content))));
 }
 exports["default"] = TooltipView;

package/layout/Tooltip/TooltipView.scss

@@ -1,8 +1,7 @@
 @use 'sass:math';
 
-$tooltip-arrow-color: #000;
-$tooltip-arrow-width: 8px;
-$tooltip-arrow-height: 8px;
+$tooltip-arrow-width: 10px;
+$tooltip-arrow-height: 10px;
 $tooltip-arrow-border: math.div($tooltip-arrow-width, 2);
 $tooltip-gap: 12px;
 
@@ -10,10 +9,18 @@ $tooltip-arrow-offset-horizontal: 20px;
 $tooltip-arrow-offset-vertical-top: 15px;
 $tooltip-arrow-offset-vertical-bottom: 7px;
 
+$tooltip-background-color: rgba(65, 65, 65, 0.95);
+
 .TooltipView {
   position: absolute;
   top: 0;
   left: 0;
+  max-width: 300px;
+  word-break: break-all;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: $tooltip-background-color;
+
   transform: translate(0,0);
   opacity: 0;
   transition: opacity .15s ease-in, transform .15s ease-in;
@@ -22,99 +29,100 @@ $tooltip-arrow-offset-vertical-bottom: 7px;
   &_show {
     opacity: 1;
   }
-  &_show.tooltip-position-top, &_show.tooltip-position-topLeft,  &_show.tooltip-position-topRight{
+
+  &_position{
+    &_top, &_topLeft, &_topRight {
       transform: translateY(-$tooltip-gap);
-  }
-  &_show.tooltip-position-bottom, &_show.tooltip-position-bottomLeft,  &_show.tooltip-position-bottomRight{
-    transform: translateY($tooltip-gap);
-  }
-  &_show.tooltip-position-left, &_show.tooltip-position-leftTop,  &_show.tooltip-position-leftBottom{
-    transform: translateX(-$tooltip-gap);
-  }
-  &_show.tooltip-position-right, &_show.tooltip-position-rightTop,  &_show.tooltip-position-rightBottom{
-    transform: translateX($tooltip-gap);
-  }
+    }
+
+    &_bottom, &_bottomLeft, &_bottomRight {
+      transform: translateY($tooltip-gap);
+    }
+
+    &_left, &_leftTop, &_leftBottom {
+      transform: translateX(-$tooltip-gap);
+    }
 
+    &_right, &_rightTop, &_rightBottom {
+      transform: translateX($tooltip-gap);
+    }
+  }
 
   &__arrow{
     position: absolute;
-
+    
     width: $tooltip-arrow-width;
     height: $tooltip-arrow-height;
 
     border-style: solid;
     border-width: math.div($tooltip-arrow-height, 2);
+    border-color: $tooltip-background-color;
     box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
 
-
-    &_position-top, &_position-topLeft, &_position-topRight{
+    &_position_top, &_position_topLeft, &_position_topRight{
       bottom: -$tooltip-arrow-border;
       left: 50%;
-
       border-top-color: transparent;
       border-left-color: transparent;
-      border-right-color:  $tooltip-arrow-color;
-      border-bottom-color:  $tooltip-arrow-color;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-topLeft{
+    &_position_topLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-topRight{
+    &_position_topRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-bottom, &_position-bottomLeft, &_position-bottomRight{
+    &_position_bottom, &_position_bottomLeft, &_position_bottomRight{
       top: -$tooltip-arrow-border;
       left: 50%;
-      border-top-color: $tooltip-arrow-color;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: translateX(-50%) rotate(45deg);
     }
-    &_position-bottomLeft{
+    &_position_bottomLeft{
       left: $tooltip-arrow-offset-horizontal;
     }
-    &_position-bottomRight{
+    &_position_bottomRight{
       left: unset;
       right: $tooltip-arrow-offset-horizontal;
     }
 
-    &_position-left, &_position-leftTop, &_position-leftBottom{
+    &_position_left, &_position_leftTop, &_position_leftBottom{
       right: -$tooltip-arrow-border;
       top: 50%;
-      border-top-color: $tooltip-arrow-color;
       border-left-color: transparent;
-      border-right-color: $tooltip-arrow-color;
       border-bottom-color: transparent;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-leftTop{
+    &_position_leftTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-leftBottom{
+    &_position_leftBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
 
-    &_position-right, &_position-rightTop, &_position-rightBottom{
+    &_position_right, &_position_rightTop, &_position_rightBottom{
       left: -$tooltip-arrow-border;
       top: 50%;
       border-top-color: transparent;
-      border-left-color: $tooltip-arrow-color;
       border-right-color: transparent;
-      border-bottom-color: $tooltip-arrow-color;
       transform: translateY(-50%) rotate(45deg);
     }
-    &_position-rightTop{
+    &_position_rightTop{
       top: $tooltip-arrow-offset-vertical-top;
     }
-    &_position-rightBottom{
+    &_position_rightBottom{
       top: unset;
       bottom: $tooltip-arrow-offset-vertical-bottom;
     }
   }
 
+  &__content{
+    color: $white;
+    font-size: 14px;
+    line-height: 24px;
+  }
 }

package/list/Grid/GridView.scss

@@ -1,5 +1,3 @@
-@import '~bootstrap/scss/mixins/_breakpoints.scss';
-
 .GridView {
   opacity: 1;
   transition: opacity .2s;
@@ -9,34 +7,34 @@
   }
 
   //adaptive styles
-  @include media-breakpoint-down(sm) {
-    thead, tbody, th, tr {
-      display: block;
-    }
-
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
-
-    td {
-      position: relative;
-      width: 100% !important;
-      text-align: left !important;
-
-      display: flex;
-      align-items: center;
-      white-space: pre-wrap;
-    }
-
-    td:before {
-      padding-right: 1rem;
-      width: 50%;
-      flex-shrink: 0;
-      content: attr(data-label);
-    }
-  }
+  // @include media-breakpoint-down(sm) {
+  //   thead, tbody, th, tr {
+  //     display: block;
+  //   }
+
+  //   thead tr {
+  //     position: absolute;
+  //     top: -9999px;
+  //     left: -9999px;
+  //   }
+
+  //   td {
+  //     position: relative;
+  //     width: 100% !important;
+  //     text-align: left !important;
+
+  //     display: flex;
+  //     align-items: center;
+  //     white-space: pre-wrap;
+  //   }
+
+  //   td:before {
+  //     padding-right: 1rem;
+  //     width: 50%;
+  //     flex-shrink: 0;
+  //     content: attr(data-label);
+  //   }
+  // }
 
   &__sort-button {
     opacity: 0.5;

package/nav/Tree/TreeView.scss

@@ -17,22 +17,22 @@
     padding: 5px 10px;
     display: flex;
     flex-direction: row;
-    color: $list-group-action-color;
-    background-color: $list-group-bg;
+    color: $text-color;
+    background-color: $background-color;
 
-    &:hover {
-      color: $list-group-action-hover-color;
-      background-color: $list-group-hover-bg;
-    }
+    // &:hover {
+    //   color: $list-group-action-hover-color;
+    //   background-color: $list-group-hover-bg;
+    // }
 
     &, &:hover {
       text-decoration: none !important;
     }
   }
   &__item_selected &__item-label {
-    background-color: $list-group-active-bg;
+    background-color: $secondary;
     &, &::before {
-      color: $list-group-active-color;
+      color: $text-color;
     }
   }
   &__item-label::before {
@@ -43,9 +43,8 @@
     height: 20px;
     font-size: 12px;
     font-weight: bold;
-    font-family: $font-family-monospace;
     margin-left: 10px;
-    color: $list-group-action-color;
+    color: $text-color;
     position: relative;
     top: 3px;
     left: 3px;

package/package.json

@@ -1,58 +1,58 @@
 {
-  "name": "@steroidsjs/bootstrap",
-  "version": "3.0.0-beta.3",
-  "description": "",
-  "main": "index.js",
-  "author": "Vladimir Kozhin <hello@kozhindev.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/steroids/react-bootstrap"
-  },
-  "scripts": {
-    "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
-    "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" dist"
-  },
-  "license": "MIT",
-  "homepage": "https://github.com/steroids/react-bootstrap",
-  "bugs": {
-    "url": "https://github.com/steroids/react-bootstrap/issues"
-  },
-  "dependencies": {
-    "@ckeditor/ckeditor5-react": "^3.0.2",
-    "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
-    "bootstrap": "^4.5.2",
-    "date-fns": "^2.29.3",
-    "lodash": "^4.17.20",
-    "lodash-es": "^4.17.20",
-    "rc-slider": "^9.7.4",
-    "react": "^18.2.0",
-    "react-collapse": "^5.0.1",
-    "react-day-picker": "^7.4.10",
-    "react-dom": "^18.2.0",
-    "react-image-crop": "^9.0.2",
-    "react-modal": "^3.11.2",
-    "react-transition-group": "^2.9.0",
-    "react-use": "^17.4.0"
-  },
-  "devDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6",
-    "@steroidsjs/eslint-config": "^2.1.3",
-    "@types/enzyme": "^3.10.8",
-    "@types/googlemaps": "^3.43.3",
-    "@types/jest": "^26.0.22",
-    "@types/markdown-to-jsx": "^6.11.3",
-    "@types/node": "^14.14.37",
-    "@types/overlayscrollbars": "^1.12.0",
-    "@types/reach__router": "^1.3.7",
-    "@types/react": "^18.0.27",
-    "@types/react-color": "^3.0.4",
-    "@types/react-syntax-highlighter": "^13.5.0",
-    "@types/webpack-env": "^1.16.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.34.0",
-    "typescript": "^4.9.5"
-  },
-  "peerDependencies": {
-    "@steroidsjs/core": "^3.0 || >=3.0.0-beta.6"
-  }
+    "name": "@steroidsjs/bootstrap",
+    "version": "3.0.0-beta.30",
+    "description": "",
+    "main": "index.js",
+    "author": "Vladimir Kozhin <hello@kozhindev.com>",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/steroids/react-bootstrap"
+    },
+    "scripts": {
+        "lint": "eslint -c ./.eslintrc --ext .js,.jsx,.ts,.tsx ./src --quiet",
+        "build": "tsc && cp ./{package.json,LICENSE,README.md} dist && copyfiles -u 1 \"src/**/*.scss\" \"src/icons/svgs/*.svg\" dist"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/steroids/react-bootstrap",
+    "bugs": {
+        "url": "https://github.com/steroids/react-bootstrap/issues"
+    },
+    "dependencies": {
+        "@ckeditor/ckeditor5-react": "^3.0.2",
+        "@steroidsjs/ckeditor5": "^27.0.2-rc.2",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20",
+        "normalize.css": "^8.0.1",
+        "rc-slider": "^9.7.4",
+        "react": "^18.2.0",
+        "react-collapse": "^5.0.1",
+        "react-day-picker": "^7.4.10",
+        "react-dom": "^18.2.0",
+        "react-image-crop": "^9.0.2",
+        "react-modal": "^3.11.2",
+        "react-transition-group": "^2.9.0",
+        "react-use": "^17.4.0"
+    },
+    "devDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15",
+        "@steroidsjs/eslint-config": "^2.1.4",
+        "@types/enzyme": "^3.10.8",
+        "@types/googlemaps": "^3.43.3",
+        "@types/jest": "^26.0.22",
+        "@types/markdown-to-jsx": "^6.11.3",
+        "@types/node": "^14.14.37",
+        "@types/overlayscrollbars": "^1.12.0",
+        "@types/reach__router": "^1.3.7",
+        "@types/react": "^18.0.27",
+        "@types/react-color": "^3.0.4",
+        "@types/react-syntax-highlighter": "^13.5.0",
+        "@types/webpack-env": "^1.16.0",
+        "copyfiles": "^2.4.1",
+        "eslint": "^8.34.0",
+        "typescript": "^4.9.5"
+    },
+    "peerDependencies": {
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.15"
+    }
 }

package/scss/fonts.scss

@@ -0,0 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Nunito:400,500,600,700&display=swap');
+
+html {
+  font-family: 'Nunito', sans-serif;
+}
+

package/scss/mixins/button.scss

@@ -1,33 +1,59 @@
-@mixin button-theme($color) {
-    background-color: map-get($color, color);
-    color: map-get($color, text-color);
+@mixin button-theme($colorMap, $colorName, $root) {
+    background-color: map-get($colorMap, color);
+    color: map-get($colorMap, text-color);
 
-    &:hover {
-      background-color: map-get($color, color-dark);
+    &:not(:disabled):hover {
+        background-color: map-get($colorMap, color-dark);
     }
-    &:focus, &:focus-visible {
-      border: 3px solid map-get($color, color-light);
+    &:not(:disabled):focus,
+    &:not(:disabled):focus-visible {
+        border: 4px solid map-get($colorMap, color-light);
     }
-    &:active {
-      background-color: map-get($color, color-light);
+    &:not(:disabled):active {
+        background-color: map-get($colorMap, color-light);
+    }
+
+    #{$root}__loader { 
+        svg {
+            path { 
+                stroke: map-get($colorMap, color-light);
+
+                @if ($colorName == 'basic' ) {
+                    stroke: map-get($colorMap, color-dark);
+                }
+            }
+        }
     }
 }
 
-@mixin button-outline-theme($color) {
-  background-color: #fff;
-  color: map-get($color, color);
-  border: 1px solid map-get($color, color);
+@mixin button-outline-theme($colorMap, $colorName, $root) {
+    background-color: transparent;
+    color: map-get($colorMap, color);
+    border: 1px solid map-get($colorMap, color);
 
-  &:hover{
-    color:  map-get($color, color-dark);
-    border-color:  map-get($color, color-dark);
-  }
-  &:focus {
-    box-shadow: 0 0 0 3px map-get($color, color-light), 0 0 0 3px map-get($color, color-light);
-  }
-  &:active {
-    color: map-get($color, color-light);
-    border-color: map-get($color, color-light);
-    box-shadow: none;
-  }
+    &:not(:disabled):hover {
+        color: map-get($colorMap, color-dark);
+        border-color: map-get($colorMap, color-dark);
+    }
+    &:not(:disabled):focus {
+        box-shadow: 0 0 0 4px map-get($colorMap, color-light), 0 0 0 4px map-get($colorMap, color-light);
+        border: none;
+    }
+    &:not(:disabled):active {
+        color: map-get($colorMap, color-light);
+        border-color: map-get($colorMap, color-light);
+        box-shadow: none;
+    }
+
+    @if ($colorName == "basic") {
+        color: $text-color;
+    } 
+
+    #{$root}__loader { 
+        svg {
+            path { 
+                stroke: map-get($colorMap, color);
+            }
+        }
+    }
 }

package/scss/mixins/index.scss

@@ -1,2 +1,3 @@
 @import "button";
-@import "card";
+@import "typography";
+@import "scroll";

package/scss/mixins/scroll.scss

@@ -0,0 +1,31 @@
+@mixin custom-scroll($thumbColor, $backgroundColor) {
+    scrollbar-color: $thumbColor $backgroundColor;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+        border-radius: 3px;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: 3px;
+        background-color: $backgroundColor;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: $thumbColor;
+    }
+}
+
+@mixin scrollWrapper($maxHeight, $paddingRight: 0, $thumbColor, $backgroundColor) {
+    @include custom-scroll($thumbColor, $backgroundColor);
+    padding-right: $paddingRight;
+    max-height: $maxHeight;
+    overflow: auto;
+}

package/scss/mixins/typography.scss

@@ -0,0 +1,26 @@
+@mixin typography-type($typeMap) {
+  font-family: map-get($typeMap, font-family);
+  font-size: map-get($typeMap, font-size);
+  font-weight: map-get($typeMap, font-weight);
+  line-height: map-get($typeMap, line-height);
+  color: map-get($typeMap, color);
+  text-transform: map-get($typeMap, text-transform);
+  text-decoration: map-get($typeMap, text-decoration);
+  text-align: map-get($typeMap, text-align);
+
+  @media (max-width: $tablet-width) {
+    font-size: map-get($typeMap, tablet-font-size);
+    font-weight: map-get($typeMap, tablet-font-weight);
+    line-height: map-get($typeMap, tablet-line-height);
+    text-transform: map-get($typeMap, tablet-text-transform);
+    text-align: map-get($typeMap, tablet-text-align);
+  }
+
+  @media (max-width: $mobile-width) {
+    font-size: map-get($typeMap, mobile-font-size);
+    font-weight: map-get($typeMap, mobile-font-weight);
+    line-height: map-get($typeMap, mobile-line-height);
+    text-transform: map-get($typeMap, mobile-text-transform);
+    text-align: map-get($typeMap, mobile-text-align);
+  }
+}