@steroidsjs/bootstrap 3.0.0-beta.7 → 3.0.0-beta.71

package/content/Calendar/CaptionElement.scss

@@ -1,133 +1,191 @@
-.CaptionElement {
-  height: 45px;
-  display: table-caption;
-  padding: 0 10px;
-  border-bottom: 1px solid $border-color;
+:root {
+    --caption-arrow-background-color: #f1f5f7;
+    --caption-arrow-color: #323232;
+    --caption-header-month-background-color: #f1f5f7;
+    --separator-background-color: rgba(0, 0, 0, 0.1);
+}
 
-  & > div {
-    font-size: 14px;
-  }
+html[data-theme="dark"] {
+    --caption-arrow-background-color: var(--gray);
+    --caption-arrow-color: #ffffff;
+    --caption-header-month-background-color: #333646;
+    --separator-background-color: rgba(255, 255, 255, 0.1);
+}
 
-  &__container {
-    height: 100%;
-    display: flex;
-  }
+$caption-arrow-background-color: var(--caption-arrow-background-color);
+$caption-arrow-color: var(--caption-arrow-color);
+$caption-header-month-background-color: var(--caption-header-month-background-color);
+$separator-background-color: var(--separator-background-color);
 
-  &__content-container {
-    margin: 0 auto;
+.CaptionElement {
+    $root: &;
+
+    height: 24px;
+    width: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &__container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &-icons {
+            display: flex;
+            flex-flow: row nowrap;
+            column-gap: 8px;
+        }
+    }
 
-    cursor: pointer;
-    transition: color .1s ease-in;
+    &__content-container {
+        margin-right: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    &:hover, &:active, &:focus {
-      color: $calendar-primary-color;
-    }
-  }
+        cursor: pointer;
+        transition: color 0.1s ease-in;
 
-  &__button {
-    width: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+        font-weight: $font-weight-lg;
+        font-size: $font-size-lg;
+        line-height: $line-height-lg;
 
-    &.IconView svg {
-      width: 12px;
-      fill: rgba(0, 0, 0, 0.25);
-      transition: fill .1s ease-in;
+        &:hover,
+        &:active,
+        &:focus {
+            color: $calendar-primary-color;
+        }
     }
 
-    &_one-arrow.IconView svg {
-      width: 8px;
+    &__button {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        rect {
+            fill: $caption-arrow-background-color;
+        }
+        path {
+            stroke: $caption-arrow-color;
+        }
     }
 
-    &:hover svg {
-      fill: rgba(0, 0, 0, .7);
-    }
-  }
-
-  &__selected-month, &__selected-year {
-    font-size: 16px;
-  }
-
-  &__selected-month {
-    margin-right: 5px;
-  }
-
-  // Panel changing Month/Year
-
-
-  &__panel {
-    z-index: 10;
-    position: absolute;
-    top: 45px;
-    left: 0;
-    right: 0;
-    bottom: 50px;
-    background-color: $white;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 0fr 1fr;
-    gap: 0 0;
-    grid-template-areas:
-      "HeaderMonths HeaderMonths HeaderYears"
-      "Months1stCol Months2ndCol YearsCol";
-
-    &_full-height {
-      bottom: 0;
+    &__selected-month,
+    &__selected-year {
+        font-size: inherit;
     }
-  }
-
-  &__panel-header {
-    padding: 5px;
-
-    text-align: center;
-    border-bottom: 1px solid $border-color;
-    background-color: $calendar-primary-light-color;
 
-    &_months {
-      grid-area: HeaderMonths;
-      border-right: 1px solid $border-color;
+    &__selected-month {
+        margin-right: 5px;
     }
 
-    &_years {
-      grid-area: HeaderYears;
+    // Panel changing Month/Year
+    &__panel {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 10;
+        position: absolute;
+        top: 45px;
+        left: 0;
+        right: 0;
+        bottom: 50px;
+        background-color: $element-background-color;
+        margin-bottom: 12px;
+        max-height: 294px;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-template-rows: 0fr 1fr;
+        gap: 0 0;
+        grid-template-areas:
+            "HeaderMonths HeaderMonths HeaderYears"
+            "Months1stCol Months2ndCol YearsCol";
+
+        &_full-height {
+            bottom: 0;
+        }
     }
-  }
 
-  &__panel-column-months {
-    border-right: 1px solid $border-color;
-
-    &_first {
-      grid-area: Months1stCol;
+    &__panel-header {
+        padding: 5px;
+
+        text-align: center;
+        background-color: $caption-header-month-background-color;
+        font-weight: $font-weight-lg;
+
+        &_months {
+            position: relative;
+            grid-area: HeaderMonths;
+            border-radius: 8px 0px 0px 8px;
+
+            //Separator
+            &::before {
+                display: block;
+                content: "";
+                position: absolute;
+                width: 1px;
+                height: 20px;
+                top: 50%;
+                right: 0;
+                background-color: $separator-background-color;
+                transform: translateY(-50%);
+            }
+        }
+
+        &_years {
+            grid-area: HeaderYears;
+            border-radius: 0px 8px 8px 0px;
+        }
     }
 
-    &_second {
-      grid-area: Months2ndCol;
-    }
-  }
+    &__panel-column {
+        &-months {
+            border-right: 1px solid $separator-background-color;
 
-  &__panel-column-years {
-    height: 100%;
-    grid-area: YearsCol;
-    overflow: auto;
-  }
+            &_first {
+                grid-area: Months1stCol;
+            }
 
-  &__panel-cell {
-    padding: 5px 15px;
-    cursor: pointer;
+            &_second {
+                grid-area: Months2ndCol;
+            }
+        }
 
-    &_selected {
-      background-color: $calendar-primary-light-color;
+        &-years {
+            grid-area: YearsCol;
+            @include scrollWrapper(294px, 0, $scroll-thumb-color, $scroll-track-color);
+        }
     }
 
-    transition: background-color .1s ease-in;
-
-    &:hover {
-      background-color: $calendar-secondary-light-color;
+    &__panel-cell {
+        &:first-child{
+            margin-top: 10px;
+        }
+        display: block;
+        width: fit-content;
+        background-color: $element-background-color;
+        padding: 4px 8px;
+        cursor: pointer;
+        transition: background-color 0.1s ease-in;
+        margin: 0 auto;
+        border-radius: $radius-large;
+
+        &_selected {
+            background-color: $primary-light;
+        }
+
+        &:hover {
+            background-color: $primary-light;
+        }
+
+        #{$root}__cell-value {
+            text-align: center;
+        }
     }
-  }
 }

package/content/Card/CardView.js

@@ -1,27 +1,50 @@
 "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 form_1 = require("@steroidsjs/core/ui/form");
+var Avatar_1 = __importDefault(require("@steroidsjs/core/ui/content/Avatar/Avatar"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
+var nav_1 = require("@steroidsjs/core/ui/nav");
 function CardView(props) {
     var bem = (0, hooks_1.useBem)('CardView');
-    return (react_1["default"].createElement("div", { className: bem(bem.block({
-            orientation: props.orientation,
-            shape: props.shape,
-            color: props.color,
-            border: props.borderColor
-        }), props.className), style: props.style },
-        props.header && (react_1["default"].createElement("div", { className: bem.element('header') }, props.header)),
+    var hasContent = !!(props.title || props.buttons || props.links || props.description || props.children);
+    return (react_1["default"].createElement("div", { className: bem(bem.block(), props.className), style: props.style },
+        props.header && (react_1["default"].createElement("div", { className: bem.element('header', {
+                withoutCover: !props.cover && hasContent
+            }) },
+            react_1["default"].createElement("div", { className: bem.element('header-data') },
+                props.header.avatar && (react_1["default"].createElement(Avatar_1["default"], __assign({}, props.header.avatar, { className: bem(props.header.avatar.className, bem.element('header-avatar')) }))),
+                react_1["default"].createElement("div", { className: bem.element('header-text-content') },
+                    react_1["default"].createElement("h3", { className: bem.element('header-head') }, props.header.head),
+                    react_1["default"].createElement("p", { className: bem.element('header-subhead') }, props.header.subhead))),
+            props.header.menu && (react_1["default"].createElement("div", { className: bem.element('header-menu'), role: 'button' },
+                react_1["default"].createElement(Icon_1["default"], { name: 'menu_dots', className: bem.element('header-dots') }))))),
         props.cover && (react_1["default"].createElement("div", { className: bem.element('cover') },
-            react_1["default"].createElement("img", { src: props.cover, alt: 'cover-img' }))),
-        react_1["default"].createElement("div", { className: bem.element('content') },
-            props.title && (react_1["default"].createElement("div", { className: bem.element('title') }, props.title)),
+            react_1["default"].createElement("img", { src: props.cover, alt: 'Card cover img' }))),
+        hasContent && (react_1["default"].createElement("div", { className: bem.element('content') },
+            props.title && (react_1["default"].createElement("h3", { className: bem.element('title') }, props.title)),
             react_1["default"].createElement("div", { className: bem.element('content-inner') },
-                react_1["default"].createElement(react_1["default"].Fragment, null,
-                    props.description && (react_1["default"].createElement("div", { className: bem.element('description') }, props.description)),
-                    props.children))),
-        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') }, props.footer))));
+                props.description && (react_1["default"].createElement("p", { className: bem.element('description') }, props.description)),
+                props.buttons && (react_1["default"].createElement("div", { className: bem.element('buttons') }, props.buttons.map(function (button, buttonIndex) { return (react_1["default"].createElement(form_1.Button, __assign({}, button, { key: buttonIndex }))); }))),
+                props.links && (react_1["default"].createElement("div", { className: bem.element('links') }, props.links.map(function (link, linkIndex) { return (react_1["default"].createElement(nav_1.Link, __assign({}, link, { key: linkIndex }))); }))),
+                props.children))),
+        props.footer && (react_1["default"].createElement("div", { className: bem.element('footer') },
+            react_1["default"].createElement("h3", { className: bem.element('footer-head') }, props.footer.head),
+            react_1["default"].createElement("p", { className: bem.element('footer-subhead') }, props.footer.subhead)))));
 }
 exports["default"] = CardView;

package/content/Card/CardView.scss

@@ -1,154 +1,186 @@
+:root {
+    --card-background-color: $white;
+    --card-footer-background-color: var(--additional-light-blue);
+    --card-dots-color: #323232;
+}
+
+html[data-theme="dark"] {
+    --card-background-color: var(--graphite);
+    --card-footer-background-color: var(--gray-dark);
+    --card-dots-color: #ffffff;
+}
+
+$card-background-color: var(--card-background-color);
+$card-footer-background-color: var(--card-footer-background-color);
+$card-dots-color: var(--card-dots-color);
+
+%headTemplate {
+    font-weight: 700;
+    font-size: $font-size-lg;
+    line-height: 24px;
+}
+
+%subheadTemplate {
+    font-weight: 400;
+    font-size: $font-size-xs;
+    line-height: 16px;
+}
+
+%dotTemplate {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background-color: $card-dots-color;
+    border-radius: $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 $element-border-color;
+    border-radius: $radius-large;
+    color: $text-color;
+    background-color: $card-background-color;
 
-        &_vertical-reverse {
-            font-size: $card-font-size;
-            flex-direction: column-reverse;
+    &__header {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        padding: 18px;
+        padding-bottom: 20px;
+
+        &_withoutCover { 
+            padding-bottom: 3px;
         }
 
-        &_horizontal {
-            flex-direction: row;
+        &-data {
+            display: flex;
+            flex-flow: row nowrap;
+            align-items: center;
+            column-gap: 8px;
+        }
 
-            #{$root}__title{
-                font-size: $card-horizontal-header-font-size;
-            }
+        &-avatar { 
+            margin-right: 2px;
+        }
 
-            #{$root}__content{
-                flex-basis: 50%;
-                font-size: $card-horizontal-font-size;
-            }
+        &-text-content {
+            display: flex;
+            flex-flow: column nowrap;
+        }
 
-            #{$root}__cover{
-                flex-basis: 50%;
-            }
+        &-head {
+            @extend %headTemplate;
         }
-    }
 
-    @each $color, $value in $color-themes {
-        &_color_#{$color} {
-            @include card-theme($root, $value)
+        &-subhead {
+            @extend %subheadTemplate;
         }
-    }
 
-    &_border {
-        &_default {
-            border: 1px solid $border-default;
+        &-menu {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
         }
 
-        @each $color, $value in $color-themes {
-            &_#{$color} {
-                @include card-border-theme($root, $value)
+        &-dots {
+            width: 24px;
+            height: 24px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            rect {
+                fill: $card-dots-color;
             }
-        }
 
-        &_light {
-            #{$root}__content {
-                color: $dark;
+            svg {
+                transform: translateX(5px);
             }
         }
     }
 
-    &_shape {
-        &_square {
-            border-radius: unset;
-        }
+    &__cover {
+        width: 100%;
+        height: 227px;
+        overflow: hidden;
+        border-radius: $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: $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/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;