@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.21

package/icons/svgs/warning.svg

@@ -0,0 +1,12 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_1068)">
+<path d="M10.148 3C11.3027 0.999997 14.1895 1 15.3442 3L24.0044 18C25.1591 20 23.7157 22.5 21.4063 22.5H4.08584C1.77644 22.5 0.333063 20 1.48776 18L10.148 3Z" fill="#FFE457"/>
+<circle cx="12.7461" cy="16.75" r="0.75" fill="white"/>
+<line x1="12.7461" y1="7.25" x2="12.7461" y2="13.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_126_1068">
+<rect width="24" height="24" fill="white" transform="translate(0.746094)"/>
+</clipPath>
+</defs>
+</svg>

package/index.d.ts

@@ -20,6 +20,12 @@ declare const _default: {
     'content.DetailView': {
         lazy: () => any;
     };
+    'content.IconView': {
+        lazy: () => any;
+    };
+    'content.BadgeView': {
+        lazy: () => any;
+    };
     'form.AutoCompleteFieldView': {
         lazy: () => any;
     };
@@ -29,10 +35,10 @@ declare const _default: {
     'content.CardView': {
         lazy: () => any;
     };
-    'content.CollapseView': {
+    'content.AccordionView': {
         lazy: () => any;
     };
-    'content.CollapseItemView': {
+    'content.AccordionItemView': {
         lazy: () => any;
     };
     'form.CheckboxFieldView': {
@@ -122,9 +128,6 @@ declare const _default: {
     'format.DefaultFormatterView': {
         lazy: () => any;
     };
-    'icon.IconView': {
-        lazy: () => any;
-    };
     'layout.HeaderView': {
         lazy: () => any;
     };
@@ -215,5 +218,11 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'typography.TextView': {
+        lazy: () => any;
+    };
+    'typography.TitleView': {
+        lazy: () => any;
+    };
 };
 export default _default;

package/index.js

@@ -23,6 +23,12 @@ exports["default"] = {
     'content.DetailView': {
         lazy: function () { return require('./content/Detail/DetailView')["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"]; }
     },
@@ -32,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"]; }
@@ -125,9 +131,6 @@ exports["default"] = {
     'format.DefaultFormatterView': {
         lazy: function () { return require('./format/DefaultFormatter/DefaultFormatterView')["default"]; }
     },
-    'icon.IconView': {
-        lazy: function () { return require('./icon/Icon/IconView')["default"]; }
-    },
     'layout.HeaderView': {
         lazy: function () { return require('./layout/Header/HeaderView')["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

@@ -5,11 +5,12 @@
 @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 +39,6 @@
 @import './form/TextField/TextFieldView';
 @import './form/TimeField/TimeFieldView';
 @import './form/TimeField/TimePanelView';
-@import './icon/Icon/IconView';
 @import './layout/Header/HeaderView';
 @import './layout/Tooltip/TooltipView';
 @import './layout/Notifications/NotificationsView';
@@ -67,3 +67,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.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IHeaderViewProps } from '@steroidsjs/core/ui/layout/Header/Header';
 export default function HeaderView(props: IHeaderViewProps): JSX.Element;

package/layout/Header/HeaderView.js

@@ -40,7 +40,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var nav_1 = require("@steroidsjs/core/ui/nav");
 var Nav_1 = __importDefault(require("@steroidsjs/core/ui/nav/Nav"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function HeaderView(props) {
     var bem = (0, hooks_1.useBem)('HeaderView');

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/Loader/LoaderView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function LoaderView(props: IBemHocOutput): JSX.Element;

package/layout/Notifications/NotificationsItemView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsItemViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
 export default function NotificationsItemView(props: INotificationsItemViewProps & IBemHocOutput): JSX.Element;

package/layout/Notifications/NotificationsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INotificationsViewProps } from '@steroidsjs/core/ui/layout/Notifications/Notifications';
 export default function NotificationsView(props: INotificationsViewProps & IBemHocOutput): JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
 export default function CircleProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;

package/layout/ProgressBar/CircleProgressBarView.js

@@ -37,8 +37,11 @@ function CircleProgressBarView(props) {
         React.createElement("svg", null,
             React.createElement("g", { className: bem.element('circles') },
                 React.createElement("circle", { className: bem.element('emptyCircle'), style: { strokeDasharray: getCircumference() } }),
-                React.createElement("circle", { className: bem.element('progressCircle'), style: { strokeDashoffset: getCircumference() - Math.min(props.percent, 100) * getCircumference() / 100,
-                        strokeDasharray: getCircumference() } }))),
+                React.createElement("circle", { className: bem.element('progressCircle'), style: {
+                        // eslint-disable-next-line max-len
+                        strokeDashoffset: getCircumference() - (Math.min(props.percent, 100) * getCircumference()) / 100,
+                        strokeDasharray: getCircumference()
+                    } }))),
         React.createElement("div", { className: bem.element('content') }, props.label)));
 }
 exports["default"] = CircleProgressBarView;

package/layout/ProgressBar/LineProgressBarView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IProgressBarViewProps } from '@steroidsjs/core/ui/layout/ProgressBar/ProgressBar';
 export default function LineProgressBarView(props: IProgressBarViewProps & IBemHocOutput): JSX.Element;

package/layout/Skeleton/SkeletonView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ISkeletonViewProps } from '@steroidsjs/core/ui/layout/Skeleton/Skeleton';
 export default function SkeletonView(props: ISkeletonViewProps): JSX.Element;

package/layout/Tooltip/TooltipView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ITooltipViewProps } from '@steroidsjs/core/ui/layout/Tooltip/Tooltip';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function TooltipView(props: ITooltipViewProps & IBemHocOutput): JSX.Element;

package/list/CheckboxColumn/CheckboxColumnView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ICheckboxColumnViewProps } from '@steroidsjs/core/ui/list/CheckboxColumn/CheckboxColumn';
 export default function CheckboxColumnView(props: ICheckboxColumnViewProps & IBemHocOutput): JSX.Element;

package/list/ControlsColumnView/ControlsColumnView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IControlsColumnViewProps } from '@steroidsjs/core/ui/list/ControlsColumn/ControlsColumn';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function ControlsColumnView(props: IControlsColumnViewProps & IBemHocOutput): JSX.Element;

package/list/Empty/EmptyView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IEmptyViewProps } from '@steroidsjs/core/ui/list/Empty/Empty';
 export default function EmptyView(props: IEmptyViewProps): JSX.Element;

package/list/Grid/GridView.js

@@ -49,7 +49,7 @@ var react_1 = require("react");
 var getFormId = function (props) { return (0, get_1["default"])(props, 'searchForm.formId', props.listId); };
 exports.getFormId = getFormId;
 function GridView(props) {
-    var _a, _b;
+    var _a;
     var bem = (0, hooks_1.useBem)('GridView');
     var renderInsideSearchForm = (0, react_1.useCallback)(function () {
         if (!props.searchForm || !props.searchForm.fields || props.searchForm.layout !== 'table') {
@@ -71,9 +71,9 @@ function GridView(props) {
                 e.preventDefault();
                 props.onSort(!isActive ? sortKey : null);
             } }));
-    }, [props.onSort, (_a = props.list) === null || _a === void 0 ? void 0 : _a.sort]);
-    var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props.renderEmpty]);
-    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_b = props.list) === null || _b === void 0 ? void 0 : _b.isLoading) }), props.className) },
+    }, [bem, props]);
+    var emptyContent = (0, react_1.useMemo)(function () { return props.renderEmpty(); }, [props]);
+    return props.renderList(React.createElement("div", { className: bem(bem.block({ loading: props.isLoading || ((_a = props.list) === null || _a === void 0 ? void 0 : _a.isLoading) }), props.className) },
         props.renderSearchForm(),
         props.renderPaginationSize(),
         React.createElement("table", { className: 'table table-striped' },

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/list/List/ListItemView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IListItemViewProps } from '@steroidsjs/core/ui/list/List/List';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function ListItemView(props: IListItemViewProps & IBemHocOutput): JSX.Element;

package/list/Pagination/PaginationButtonView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IPaginationViewProps } from '@steroidsjs/core/ui/list/Pagination/Pagination';
 export default function PaginationButtonView(props: IPaginationViewProps): JSX.Element;

package/list/Pagination/PaginationMoreView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IPaginationViewProps } from '@steroidsjs/core/ui/list/Pagination/Pagination';
 export default function PaginationMoreView(props: IPaginationViewProps): JSX.Element;

package/list/PaginationSize/PaginationSizeView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IPaginationSizeViewProps } from '@steroidsjs/core/ui/list/PaginationSize/PaginationSize';
 export default function PaginationSizeView(props: IPaginationSizeViewProps): JSX.Element;

package/list/Steps/StepItemView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { IStepItemViewProps } from "@steroidsjs/core/ui/list/Steps/Steps";
+import { IStepItemViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
 export default function StepItemView(props: IStepItemViewProps): JSX.Element;

package/list/Steps/StepItemView.js

@@ -27,15 +27,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/icon/Icon"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function StepItemView(props) {
     var _a;
-    var bem = (0, hooks_1.useBem)("StepItemView");
+    var bem = (0, hooks_1.useBem)('StepItemView');
     return (React.createElement("div", { className: bem(props.className, bem.block((_a = {}, _a[props.status] = true, _a))) },
         React.createElement("div", { className: bem.element('body', { disabled: props.disabled }), onClick: props.onChange },
             React.createElement("div", { className: bem.element('header') },
-                React.createElement("span", { className: bem.element('icon') }, props.status === 'finish' ? React.createElement(Icon_1["default"], { name: 'check' }) : props.stepItem.icon || "0".concat(props.index)),
+                React.createElement("span", { className: bem.element('icon') }, props.status === 'finish' ? React.createElement(Icon_1["default"], { name: "check" }) : props.stepItem.icon || "0".concat(props.index)),
                 React.createElement("div", null,
                     React.createElement("div", { className: bem.element('title') }, props.stepItem.title),
                     React.createElement("div", { className: bem.element('subtitle') }, props.stepItem.subtitle))),

package/list/Steps/StepsView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IStepsViewProps } from '@steroidsjs/core/ui/list/Steps/Steps';
 export default function StepsView(props: IStepsViewProps): JSX.Element;

package/list/Steps/StepsView.js

@@ -26,7 +26,7 @@ exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
 function StepsView(props) {
-    var bem = (0, hooks_1.useBem)("StepsView");
+    var bem = (0, hooks_1.useBem)('StepsView');
     return (React.createElement("div", { className: bem(props.className, bem.block()) }, props.children));
 }
 exports["default"] = StepsView;

package/modal/Modal/ModalView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IModalViewProps } from '@steroidsjs/core/ui/modal/Modal/Modal';
 export default function ModalView(props: IModalViewProps & IBemHocOutput): JSX.Element;

package/modal/TwoFactorModal/TwoFactorModalView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITwoFactorModalViewProps } from '@steroidsjs/core/ui/modal/TwoFactorModal/TwoFactorModal';
 import './TwoFactorModalView.scss';

package/nav/Breadcrubms/BreadcrumbsView.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IBreadcrumbsViewProps } from '@steroidsjs/core/ui/nav/Breadcrumbs/Breadcrumbs';
 export default function BreadcrumbsView(props: IBreadcrumbsViewProps): JSX.Element;

package/nav/Controls/ControlsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IControlsViewProps } from '@steroidsjs/core/ui/nav/Controls/Controls';
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 export default function ControlsView(props: IControlsViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavBarView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavBarView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavButtonView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavButtonView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavIconView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavIconView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavLinkView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavLinkView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavListView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavListView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Nav/NavTabsView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { INavViewProps } from '@steroidsjs/core/ui/nav/Nav/Nav';
 export default function NavTabsView(props: INavViewProps & IBemHocOutput): JSX.Element;

package/nav/Tree/TreeView.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { ITreeViewProps } from '@steroidsjs/core/ui/nav/Tree/Tree';
 export default function TreeView(props: ITreeViewProps & IBemHocOutput): JSX.Element;

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;