@steroidsjs/bootstrap 3.0.0-beta.11 → 3.0.0-beta.110

package/content/Card/CardView.scss

@@ -1,154 +1,185 @@
+@use "../../scss/variables";
+
+:root {
+    --card-footer-background-color: var(--additional-light-blue);
+    --card-dots-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --card-footer-background-color: var(--gray-dark);
+    --card-dots-color: #ffffff;
+}
+
+$card-footer-background-color: var(--card-footer-background-color);
+$card-dots-color: var(--card-dots-color);
+
+%headTemplate {
+    font-weight: 700;
+    font-size: variables.$font-size-lg;
+    line-height: 24px;
+}
+
+%subheadTemplate {
+    font-weight: 400;
+    font-size: variables.$font-size-xs;
+    line-height: 16px;
+}
+
+%dotTemplate {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background-color: $card-dots-color;
+    border-radius: variables.$radius-circle;
+}
+
 .CardView {
     $root: &;
 
-    background: $white;
-    box-sizing: border-box;
-    height: fit-content;
-    position: relative;
     display: flex;
-    flex-direction: column;
+    flex-flow: column;
     overflow: hidden;
+    height: fit-content;
 
-    &_orientation {
-        &_vertical {
-            font-size: $card-font-size;
-        }
+    border: 1px solid variables.$element-border-color;
+    border-radius: variables.$radius-large;
+    color: variables.$text-color;
+    background-color: variables.$element-background-color;
 
-        &_vertical-reverse {
-            font-size: $card-font-size;
-            flex-direction: column-reverse;
-        }
+    &__header {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
 
-        &_horizontal {
-            flex-direction: row;
+        padding: 18px;
+        padding-bottom: 20px;
 
-            #{$root}__title{
-                font-size: $card-horizontal-header-font-size;
-            }
+        &_withoutCover {
+            padding-bottom: 3px;
+        }
 
-            #{$root}__content{
-                flex-basis: 50%;
-                font-size: $card-horizontal-font-size;
-            }
+        &-data {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 8px;
+        }
 
-            #{$root}__cover{
-                flex-basis: 50%;
-            }
+        &-avatar {
+            margin-right: 2px;
         }
-    }
 
-    @each $color, $value in $color-themes {
-        &_color_#{$color} {
-            @include card-theme($root, $value)
+        &-text-content {
+            display: flex;
+            flex-flow: column nowrap;
         }
-    }
 
-    &_border {
-        &_default {
-            border: 1px solid $border-default;
+        &-head {
+            @extend %headTemplate;
         }
 
-        @each $color, $value in $color-themes {
-            &_#{$color} {
-                @include card-border-theme($root, $value)
-            }
+        &-subhead {
+            @extend %subheadTemplate;
         }
 
-        &_light {
-            #{$root}__content {
-                color: $dark;
+        &-menu {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            .MenuView__icon {
+                width: 24px;
+                height: 24px;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                rect {
+                    fill: $card-dots-color;
+                }
+
+                svg {
+                    transform: translateX(5px);
+                }
             }
         }
     }
 
-    &_shape {
-        &_square {
-            border-radius: unset;
-        }
+    &__cover {
+        width: 100%;
+        height: 227px;
+        overflow: hidden;
+        border-radius: variables.$radius-large;
 
-        &_circle {
-            border-radius: $card-border-radius;
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
     }
 
-    &__content-inner {
-        display: grid;
-        grid-row-gap: 16px;
+    &__content {
+        padding: 16px;
     }
 
-    &__children {
-        font-size: $card-children-font-size;
-        line-height: $card-children-line-height;
-        box-sizing: border-box;
-        width: 100%;
-        word-break: break-all;
+    &__content-inner {
+        display: flex;
+        flex-flow: column nowrap;
+        row-gap: 16px;
     }
 
-    &__header {
-        background: $card-header-background;
-        padding: 20px;
-        border-bottom: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__title {
+        @extend %headTemplate;
+        margin-bottom: 8px;
     }
 
-    &__footer {
-        background: $card-header-background;
-        padding: 20px;
-        border-top: 1px solid $border-default;
-        font-weight: bold;
-        font-size: $card-header-font-size;
-        line-height: $card-header-line-height;
-        word-break: break-all;
+    &__description {
+        font-size: variables.$font-size-base;
+        line-height: 22px;
     }
 
-    &__cover {
-        overflow: hidden;
+    &__buttons {
+        display: flex;
+        flex-flow: row wrap;
+        $columnGap: 8px;
+        row-gap: 8px;
+        column-gap: $columnGap;
+
+        button:only-of-type {
+            width: 100%;
+        }
+
+        button:not(:only-of-type) {
+            width: calc(50% - $columnGap / 2);
+        }
     }
 
-    &__title{
+    &__links {
         display: flex;
-        align-items: center;
-        font-weight: bold;
-        font-size: $card-title-font-size;
-        line-height: $card-title-line-height;
-        border-bottom: 8px;
-        margin-bottom: 8px;
-    }
+        flex-flow: row wrap;
+        column-gap: 16px;
 
-    &__content{
-        padding: 20px;
+        a {
+            line-height: 18px;
+        }
     }
 
-    button {
+    &__footer {
         display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        padding: 10px 20px;
-        position: static;
-        width: 140px;
-        height: 28px;
-        border: none;
-        color: $white;
-        background: $primary;
-        border-radius: $card-button-border-radius;
-    }
+        flex-flow: column wrap;
 
-    img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+        padding: 16px;
+        background-color: $card-footer-background-color;
 
-    a {
-        color: $primary;
-        font-size: $card-link-font-size;
-    }
-    p{
-        margin: 0;
+        &-head {
+            @extend %headTemplate;
+        }
+
+        &-subhead {
+            @extend %subheadTemplate;
+        }
     }
 }

package/content/Chart/ChartView.d.ts

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

package/content/Chart/ChartView.js

@@ -0,0 +1,47 @@
+"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 hooks_1 = require("@steroidsjs/core/hooks");
+var DEFAULT_AXIS_PARAMS = {
+    tickSize: 5,
+    tickPadding: 5,
+    tickRotation: 0,
+    legend: '',
+    legendPosition: 'middle'
+};
+var DEFAULT_LINE_CHART_CONFIG = {
+    yScale: {
+        type: 'linear',
+        min: 'auto',
+        max: 'auto',
+        stacked: true,
+        reverse: false
+    },
+    xScale: { type: 'point' },
+    axisBottom: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: 36 }),
+    axisLeft: __assign(__assign({}, DEFAULT_AXIS_PARAMS), { legendOffset: -40 }),
+    pointSize: 8,
+    useMesh: true
+};
+function ChartView(props) {
+    var bem = (0, hooks_1.useBem)('ChartView');
+    var ChartComponent = props.chartComponent;
+    var defaultChartConfig = (props.useDefaultLineChartConfig && DEFAULT_LINE_CHART_CONFIG) || {};
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: __assign({ height: "".concat(props.height, "px") }, props.style) },
+        react_1["default"].createElement(ChartComponent, __assign({ data: props.data }, defaultChartConfig, props.config))));
+}
+exports["default"] = ChartView;

package/content/Chart/ChartView.scss

@@ -0,0 +1,8 @@
+@use "../../scss/variables";
+
+.ChartView {
+
+  text {
+    fill: variables.$text-color !important;
+  }
+}

package/content/CopyToClipboard/CopyToClipboardView.d.ts

@@ -0,0 +1,3 @@
+import { ICopyToClipboardViewProps } from '@steroidsjs/core/ui/content/CopyToClipboard/CopyToClipboard';
+declare function CopyToClipboardView(props: ICopyToClipboardViewProps): JSX.Element;
+export default CopyToClipboardView;

package/content/CopyToClipboard/CopyToClipboardView.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = __importDefault(require("react"));
+var useBem_1 = __importDefault(require("@steroidsjs/core/hooks/useBem"));
+var renderIcon_1 = __importDefault(require("../../utils/renderIcon"));
+function CopyToClipboardView(props) {
+    var bem = (0, useBem_1["default"])('CopyToClipboardView');
+    return (react_1["default"].createElement("div", { className: bem(bem.block({
+            disabled: props.disabled
+        })), onClick: props.onClick },
+        props.children,
+        props.showCopyIcon && (0, renderIcon_1["default"])(props.icon || 'copy', {
+            className: bem.element('icon')
+        })));
+}
+exports["default"] = CopyToClipboardView;

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