@steroidsjs/bootstrap 3.0.0-beta.8 → 3.0.0-beta.81

package/content/CopyToClipboard/CopyToClipboardView.scss

@@ -0,0 +1,41 @@
+:root { 
+  --copy-icon-stroke: #323232;
+  --copy-disabled-stroke: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="dark"] {
+  --copy-icon-stroke: #FFFFFF;
+  --copy-disabled-stroke: rgba(255, 255, 255, 0.1);
+}
+
+$copy-icon-stroke: var(--copy-icon-stroke);
+$copy-disabled-stroke: var(--copy-disabled-stroke);
+
+.CopyToClipboardView {
+  display: inline-block;
+  cursor: pointer;
+
+  .IconView {
+      width: 24px;
+      height: 24px;
+  }
+
+  svg {
+      width: 100%;
+      height: 100%;
+
+      path {
+          stroke: $copy-icon-stroke;
+      }
+  }
+
+  &_disabled { 
+      cursor: not-allowed;
+
+      svg { 
+          path {
+              stroke: $copy-disabled-stroke;
+          }
+      }
+  }
+}

package/content/Detail/DetailView.scss

@@ -1,66 +1,86 @@
-.DetailView {
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 32px;
-  }
+:root {
+    --detail-background-color-value: $white;
+    --detail-background-color-label: var(--additional-light-blue);
+}
 
-  &__title {
-    color: #343a40;
-    font-size: 28px;
-    line-height: 34px;
-    font-weight: 800;
-  }
+html[data-theme="dark"] {
+    --detail-background-color-value: var(--graphite);
+    --detail-background-color-label: var(--additional-gray-dark);
+}
 
-  &__controls {
-    margin-left: auto;
-  }
+$detail-background-color-value: var(--detail-background-color-value);
+$detail-background-color-label: var(--detail-background-color-label);
 
-  &__table-container {
-    display: flex;
-    border-radius: 10px;
-    border: 1px solid #cccccc;
-    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
-    overflow: hidden;
-  }
+.DetailView {
+    font-family: $font-family-nunito;
 
-  &__table {
-    background: #ffffff;
-    height: 100%;
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: none;
-  }
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32px;
+    }
+
+    &__title {
+        color: $black-30;
+        font-size: 56px;
+        line-height: 56px;
+        font-weight: $font-weight-lg;
+    }
 
-  &__row:not(:last-child) {
-    border-bottom: 1px solid #cccccc;
-  }
+    &__controls {
+        margin-left: auto;
+    }
 
-  &__label,
-  &__value {
-    &:not(:last-child) {
-      border-right: 1px solid #cccccc;
+    &__table-container {
+        display: flex;
+        border-radius: 10px;
+        border: 1px solid $gray;
+        overflow: hidden;
     }
 
-    padding: 14px 16px;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 140%;
+    &__table {
+        background: #ffffff;
+        height: 100%;
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        border: none;
+    }
 
-    &_size_md {
-      padding: 18px 20px;
-      font-size: 16px;
+    &__row:not(:last-child) {
+        border-bottom: 1px solid $gray;
     }
 
-    &_size_lg {
-      padding: 22px 24px;
-      font-size: 18px;
+    &__label,
+    &__value {
+        &:not(:last-child) {
+            border-right: 1px solid $gray;
+        }
+
+        padding: 12px;
+
+        font-weight: $font-weight-md;
+        font-size: $font-size-sm;
+        line-height: 18px;
+        color: $text-color;
+        background-color: $detail-background-color-value;
+        text-align: start;
+
+        &_size_md {
+            padding: 16px 12px;
+            font-size: $font-size-base;
+            line-height: 22px;
+        }
+
+        &_size_lg {
+            padding: 18px 12px;
+            font-size: $font-size-lg;
+            line-height: 24px;
+        }
     }
-  }
 
-  &__label {
-    background: #f8f8f8;
-  }
+    &__label {
+        background: $detail-background-color-label;
+    }
 }

package/content/DropDown/DropDownView.d.ts

@@ -1,3 +1,2 @@
 import { IDropDownViewProps } from '@steroidsjs/core/ui/content/DropDown/DropDown';
-import './DropDownView.scss';
 export default function DropDownView(props: IDropDownViewProps): JSX.Element;

package/content/DropDown/DropDownView.js

@@ -30,7 +30,6 @@ var isFunction_1 = __importDefault(require("lodash-es/isFunction"));
 var React = __importStar(require("react"));
 var react_use_1 = require("react-use");
 var hooks_1 = require("@steroidsjs/core/hooks");
-require("./DropDownView.scss");
 var react_1 = require("react");
 function DropDownView(props) {
     var _a;
@@ -42,14 +41,18 @@ function DropDownView(props) {
     var contentProps = (0, react_1.useMemo)(function () { return ({
         onClose: props.onClose
     }); }, [props.onClose]);
-    var content = props.content();
-    if ((0, isFunction_1["default"])(content)) {
-        content = ui.renderView(content, contentProps);
+    var content;
+    if (props.content) {
+        content = props.content();
+        if ((0, isFunction_1["default"])(content)) {
+            content = ui.renderView(content, contentProps);
+        }
     }
     return (React.createElement("div", { ref: props.forwardedRef, className: bem(bem.block((_a = {
                 show: props.isComponentVisible
             },
             _a["position-".concat(props.position)] = !!props.position,
+            _a.hasArrow = props.hasArrow,
             _a)), props.className), style: props.style }, content));
 }
 exports["default"] = DropDownView;

package/content/DropDown/DropDownView.scss

@@ -1,31 +1,210 @@
+:root {
+    --dropdown-background: #fff;
+    --dropdown-border: #dbe2e6;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='11' viewBox='0 0 21 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0416 0.5L10.1719 10.2567L1.30215 0.499998L19.0416 0.5Z' fill='white' stroke='%23dbe2e6'/%3E%3C/svg%3E%0A");
+}
+
+html[data-theme="dark"] {
+    --dropdown-background: var(--gray-dark);
+    --dropdown-border: transparent;
+    --dropdown-triangle-svg: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5859 11.222L0.585938 0.222044L20.5859 0.222046L10.5859 11.222Z' fill='%23272A37'/%3E%3C/svg%3E");
+}
+
+$dropdown-background: var(--dropdown-background);
+$dropdown-border: var(--dropdown-border);
+$dropdown-triangle-svg: var(--dropdown-triangle-svg);
+
 $gap: 12px;
 
+%triangle {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 11px;
+    z-index: 2;
+    background-image: $dropdown-triangle-svg;
+}
+
+%borderShaper {
+    content: "";
+    position: absolute;
+    z-index: 3;
+
+    width: 16px;
+    height: 1px;
+    background-color: $dropdown-background;
+    border-left: 2px solid $dropdown-border;
+    border-right: 2px solid $dropdown-border;
+}
+
+@mixin drop($edge, $padding) {
+    @if ($edge == "top") {
+        &::before {
+            @extend %triangle;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            top: 100%;
+            left: $padding;
+            transform: translateX(-50%);
+        }
+    } @else if ($edge == "bottom") {
+        &::before {
+            @extend %triangle;
+
+            top: 0;
+            left: $padding;
+            top: -11px;
+            transform: translateX(-50%) rotate(180deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            transform: translateX(-50%);
+            top: -1px;
+            left: $padding;
+        }
+    } @else if($edge == "left") {
+        &::before {
+            @extend %triangle;
+
+            left: 100%;
+            top: $padding;
+            transform: translateX(-22.5%) rotate(-90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            left: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, -7.5px);
+        }
+    } @else if($edge == "right") {
+        &::before {
+            @extend %triangle;
+
+            right: 100%;
+            top: $padding;
+            transform: translateX(22.5%) rotate(90deg);
+        }
+
+        &::after {
+            @extend %borderShaper;
+
+            right: 100%;
+            top: $padding;
+            transform: rotate(-90deg) translate(-30%, 7.5px);
+        }
+    }
+}
+
 .DropDownView {
-  z-index: 1000;
-  position: absolute;
-
-  transform: translate(0,0);
-  opacity: 0;
-  transition: opacity .15s ease-in, transform .15s ease-in;
-
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
-
-  &_show {
-    opacity: 1;
-  }
-  &_position-top, &_position-topLeft, &_position-topRight {
-    transform: translateY(-$gap);
-  }
-  &_position-bottom, &_position-bottomLeft, &_position-bottomRight {
-    transform: translateY($gap);
-  }
-  &_position-left, &_position-leftTop, &_position-leftBottom {
-    transform: translateX(-$gap);
-  }
-  &_position-right, &_position-rightTop, &_position-rightBottom{
-    transform: translateX($gap);
-  }
+    $root: &;
+
+    z-index: 1000;
+    position: absolute;
+    color: $text-color;
+
+    transform: translate(0, 0);
+    opacity: 0;
+    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+
+    z-index: 4;
+    min-width: 200px;
+    padding: 12px;
+    border-radius: $radius-large;
+    background-color: $dropdown-background;
+    border: 1px solid $dropdown-border;
+
+    &_show {
+        opacity: 1;
+    }
+    &_position-top,
+    &_position-topLeft,
+    &_position-topRight {
+        transform: translateY(-$gap);
+    }
+    &_position-bottom,
+    &_position-bottomLeft,
+    &_position-bottomRight {
+        transform: translateY($gap);
+    }
+    &_position-left,
+    &_position-leftTop,
+    &_position-leftBottom {
+        transform: translateX(-$gap);
+    }
+    &_position-right,
+    &_position-rightTop,
+    &_position-rightBottom {
+        transform: translateX($gap);
+    }
+
+    &_position-top {
+        @include drop("top", 50%);
+    }
+
+    &_position-topLeft {
+        @include drop("top", 15%);
+    }
+
+    &_position-topRight {
+        @include drop("top", 85%);
+    }
+
+    &_position-bottom {
+        @include drop("bottom", 50%);
+    }
+
+    &_position-bottomLeft {
+        @include drop("bottom", 15%);
+    }
+
+    &_position-bottomRight {
+        @include drop("bottom", 85%);
+    }
+
+    &_position-left {
+        @include drop("left", 46.5%);
+    }
+
+    &_position-leftTop {
+        @include drop("left", 12.5%);
+    }
+
+    &_position-leftBottom {
+        @include drop("left", 80%);
+    }
+
+    &_position-right {
+        @include drop("right", 46.5%);
+    }
+
+    &_position-rightTop {
+        @include drop("right", 12.5%);
+    }
+
+    &_position-rightBottom {
+        @include drop("right", 80%);
+    }
+
+    &::before,
+    &::after {
+        opacity: 0;
+    }
+
+    &_hasArrow {
+        &::before,
+        &::after {
+            opacity: 1;
+        }
+    }
 }

package/content/Icon/IconView.d.ts

@@ -1,3 +1,2 @@
-import { IBemHocOutput } from '@steroidsjs/core/hoc/bem';
 import { IIconViewProps } from '@steroidsjs/core/ui/content/Icon/Icon';
-export default function IconView(props: IIconViewProps & IBemHocOutput): JSX.Element;
+export default function IconView(props: IIconViewProps): JSX.Element;

package/content/Icon/IconView.js

@@ -28,9 +28,9 @@ var hooks_1 = require("@steroidsjs/core/hooks");
 function IconView(props) {
     var bem = (0, hooks_1.useBem)('IconView');
     if (typeof props.icon === 'string' && props.icon.indexOf('<svg') === 0) {
-        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 }));
+        return (React.createElement("span", { dangerouslySetInnerHTML: { __html: props.icon } /* eslint-disable-line react/no-danger */, "aria-label": props.title, title: props.title, className: bem(bem.block(), props.className), onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 }));
     }
-    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: 0 },
+    return (React.createElement("span", { onClick: props.onClick, onKeyPress: props.onClick, role: 'button', tabIndex: props.tabIndex || 0 },
         React.createElement("img", { alt: props.title, title: props.title, src: props.icon, className: bem(bem.block(), props.className) })));
 }
 exports["default"] = IconView;

package/content/Icon/IconView.scss

@@ -1,25 +1,3 @@
 .IconView {
-  svg {
-    width: $icon-size;
-  }
-
-  &_size_sm svg {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg svg {
-    width: $icon-size-lg;
-  }
-}
-
-img.IconView {
-  width: $icon-size;
-
-  &_size_sm {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg {
-    width: $icon-size-lg;
-  }
+    display: inline-flex;
 }

package/content/Menu/MenuItemView.d.ts

@@ -0,0 +1,2 @@
+import { IMenuItem } from '@steroidsjs/core/ui/content/Menu/Menu';
+export default function MenuItemView(props: IMenuItem): JSX.Element;

package/content/Menu/MenuItemView.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("@steroidsjs/core/hooks");
+var react_1 = __importDefault(require("react"));
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuItemView(props) {
+    var bem = (0, hooks_1.useBem)('MenuItemView');
+    return (react_1["default"].createElement("div", { onClick: props.onClick, className: bem.block({ hasBorder: props.hasBorder, noneIcon: !props.icon }) },
+        props.icon && (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') }),
+        react_1["default"].createElement("span", { className: bem.element('label') }, props.label)));
+}
+exports["default"] = MenuItemView;

package/content/Menu/MenuItemView.scss

@@ -0,0 +1,63 @@
+:root {
+    --color-menu-item: #323232;
+    --color-border: rgba(0, 0, 0, 0.1);
+  }
+  
+  html[data-theme="dark"] { 
+    --color-menu-item: #ffffff;
+    --color-border: rgba(255, 255, 255, 0.1);
+  }
+
+  $color-menu-item: var(--color-menu-item);
+  $color-border: var(--color-border);
+
+.MenuItemView {
+    cursor: pointer;
+    display: flex;
+    padding: 8px 12px;
+
+    &:first-child {
+      border-top-right-radius: 12px;
+      border-top-left-radius: 12px;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 12px;
+      border-bottom-left-radius: 12px;
+    }
+
+    &__label {
+        color: $color-menu-item;
+        font-size: $font-size-xs;
+        line-height: $line-height-xs;
+    }
+
+    &__icon {
+        display: flex;
+        margin-right: 8px;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            stroke: $color-menu-item;
+            width: $icon-size;
+            height: $icon-size;
+          }
+
+        svg > * {
+            stroke:inherit;
+        }
+    }
+
+    &_noneIcon {
+      padding-left: 36px;
+    }
+
+    &:hover {
+        background-color: $gray;
+    }
+
+    &_hasBorder{
+        border-bottom: 1px solid $color-border;
+    }
+}

package/content/Menu/MenuView.d.ts

@@ -0,0 +1,2 @@
+import { IMenuViewProps } from '@steroidsjs/core/ui/content/Menu/Menu';
+export default function MenuView(props: IMenuViewProps): JSX.Element;

package/content/Menu/MenuView.js

@@ -0,0 +1,30 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var content_1 = require("@steroidsjs/core/ui/content");
+var hooks_1 = require("@steroidsjs/core/hooks");
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function MenuView(props) {
+    var bem = (0, hooks_1.useBem)('MenuView');
+    var MenuItemView = props.itemView;
+    var renderMenuItems = react_1["default"].useCallback(function () { return (react_1["default"].createElement(react_1["default"].Fragment, null, props.items.map(function (item, index) { return (react_1["default"].createElement(MenuItemView, __assign({ key: index }, item))); }))); }, [MenuItemView, props.items]);
+    return (react_1["default"].createElement(content_1.DropDown, __assign({}, props.dropDownProps, { className: bem(bem.block(), props.className), content: renderMenuItems }),
+        react_1["default"].createElement("span", { className: bem.element('button') }, props.icon
+            ? (0, renderIcon_1["default"])(props.icon, { className: bem.element('icon') })
+            : (react_1["default"].createElement(content_1.Icon, { name: 'menu_dots', className: bem.element('icon') })))));
+}
+exports["default"] = MenuView;

package/content/Menu/MenuView.scss

@@ -0,0 +1,43 @@
+:root {
+    --color-icon: #323232;
+  }
+  
+  html[data-theme="dark"] { 
+    --color-icon: #ffffff;
+  }
+
+  $color-icon: var(--color-icon);
+
+.MenuView {
+    width: 248px;
+    padding: 0;
+    border: none;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    
+    &::before, &::after {
+        content: none;
+    }
+
+    &__button {
+        display: inline-flex;
+        cursor: pointer;
+    }
+
+    &__icon {
+        display: inline-flex;
+        
+        svg {
+            stroke: $color-icon;
+            width: $icon-size-lg;
+            height: $icon-size-lg;
+        }
+
+        svg rect {
+           fill : $color-icon;
+        }
+
+        svg > * {
+            stroke:inherit;
+        }
+    }
+}

package/content/Slider/SliderView.d.ts

@@ -0,0 +1,2 @@
+import { ISliderViewProps } from '@steroidsjs/core/ui/content/Slider/Slider';
+export default function SliderView(props: ISliderViewProps): JSX.Element;

package/content/Slider/SliderView.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable import/no-extraneous-dependencies */
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var react_splide_1 = require("@splidejs/react-splide");
+function SliderView(props) {
+    var _a;
+    var bem = (0, useBem_1["default"])('Slider');
+    var ItemView = props.itemView;
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        react_1["default"].createElement(react_splide_1.Splide, { options: props.sliderOptions, extensions: props.extensions, hasTrack: props.hasTrack, tag: props.tag, transition: props.transition }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item, itemIndex) { return (react_1["default"].createElement(react_splide_1.SplideSlide, { key: itemIndex },
+            react_1["default"].createElement(ItemView, { item: item }))); }))));
+}
+exports["default"] = SliderView;