@steroidsjs/bootstrap 3.0.0-beta.15 → 3.0.0-beta.17

package/content/Accordion/AccordionItemView.js

@@ -86,11 +86,11 @@ function AccordionItemView(props) {
         React.createElement("div", { className: bem.element('header-container'), onClick: handleHeaderClick },
             React.createElement("div", { className: bem.element('title-container') },
                 React.createElement("p", null, props.title)),
-            React.createElement("div", { className: bem.element('icon-wrapper') }, props.showIcon && props.icon
+            props.showIcon && (React.createElement("div", { className: bem.element('icon-wrapper') }, props.icon
                 ? renderIcon()
                 : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
                         active: !props.disabled && props.isShowMore
-                    }), name: "accordion-chevron" })))),
+                    }), name: "accordion-chevron" }))))),
         React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
 }
 exports["default"] = AccordionItemView;

package/content/Accordion/AccordionItemView.scss

@@ -140,7 +140,7 @@ $accordion-chevron-color: var(--accordion-chevron-color);
 
     &__title-container {
         width: 100%;
-        padding: $spacing-16;
+        padding: 16px;
         align-self: center;
         font-size: $font-size-lg;
         line-height: 24px;
@@ -164,21 +164,16 @@ $accordion-chevron-color: var(--accordion-chevron-color);
         transition: all 200ms ease;
         overflow: hidden;
         max-height: 0;
-        padding: 0 $spacing-16;
+        padding: 0 16px;
         color: #343a40;
 
         &_visible {
             max-height: 1024px;
-            padding: 18px 32px 18px $spacing-16;
+            padding: 18px 32px 18px 16px;
             border: 1px solid rgba(#000, 0.1);
         }
     }
 
-    &__close-icon,
-    &__open-icon {
-        transition: opacity 150ms ease-in-out;
-    }
-
     &__close-icon {
         position: absolute;
         opacity: 0;

package/content/Alert/AlertView.scss

@@ -2,7 +2,7 @@
     $root: &;
 
     position: relative;
-    padding: $spacing-16;
+    padding: 16px;
     border-radius: $radius-large;
     font-family: $font-family-nunito;
 

package/content/Badge/BadgeView.scss

@@ -57,15 +57,15 @@
     }
 
     &_large {
-        padding: $spacing-4 $spacing-8;
+        padding: 4px 8px;
     }
 
     &_medium {
-        padding: $spacing-2 $spacing-8;
+        padding: 2px 8px;
     }
 
     &_small {
-        padding: 0 $spacing-8;
+        padding: 0 8px;
     }
 
     &_has-counter {
@@ -74,13 +74,7 @@
 
         background: $light-gray;
         color: $text-color;
-        padding: $spacing-4 12px;
-
-        #{$root}__counter-content {
-            background: $white;
-            padding: $spacing-2 5px;
-            border-radius: 20px;
-        }
+        padding: 4px 12px;
 
         #{$root}__message {
             margin-right: 8px;
@@ -88,11 +82,23 @@
 
         #{$root}__counter {
             margin-right: 8px;
+            width: 18px;
+            background-color: $white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: $radius-circle;
+        }
+
+        #{$root}__counter-content { 
+            font-weight: $font-weight-sm;
+            font-size: $font-size-xs;
+            line-height: 16px;
         }
 
-        #{$root}__close { 
+        #{$root}__close {
             svg {
-                path { 
+                path {
                     stroke: #000;
                 }
             }

package/content/DropDown/DropDownView.js

@@ -42,9 +42,12 @@ 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

package/content/DropDown/DropDownView.scss

@@ -1,18 +1,117 @@
 @import "../../scss/variables/";
 
 :root {
-    --drop-down-background: #fff;
+    --dropdown-background: #fff;
+    --dropdown-triangle-border: #eef1f2;
+    --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='%23EEF1F2'/%3E%3C/svg%3E%0A");
 
     html[data-theme="dark"] {
-        --drop-down-background: #4e4f57;
+        --dropdown-background: #4e4f57;
+        --dropdown-triangle-border: transparent;
+        --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='M10.1719 11L0.171876 -1.74846e-06L20.1719 0L10.1719 11Z' fill='%234E4F57'/%3E%3C/svg%3E%0A");
     }
 }
 
-$drop-down-background: var(--drop-down-background);
+$dropdown-background: var(--dropdown-background);
+$dropdown-triangle-border: var(--triangle-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-triangle-border;
+    border-right: 2px solid $dropdown-triangle-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 {
+    $root: &;
+
     z-index: 1000;
     position: absolute;
 
@@ -20,10 +119,11 @@ $gap: 12px;
     opacity: 0;
     transition: opacity 0.15s ease-in, transform 0.15s ease-in;
 
+    z-index: 4;
     width: 200px;
     padding: 12px;
     border-radius: $radius-large;
-    background-color: $drop-down-background;
+    background-color: $dropdown-background;
     border: 1px solid $gray;
 
     &_show {
@@ -50,14 +150,51 @@ $gap: 12px;
         transform: translateX($gap);
     }
 
-    &::before {
-        content: "";
-        position: absolute;
-        left: -10px;
-        top: 50%;
-        transform: translateY(-50%);
-        border-top: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-right: 10px solid #fff;
+    &_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%);
     }
 }

package/form/Button/ButtonView.js

@@ -57,10 +57,11 @@ function ButtonView(props) {
         _a.size = props.size,
         _a.disabled = props.disabled,
         _a.submitting = props.submitting,
-        _a.loading = !!props.isLoading,
+        _a.loading = props.isLoading,
         _a.failed = props.isFailed,
-        _a.link = props.tag === 'a',
-        _a)), props.block && 'btn-block', props.link && 'btn-link', props.className);
+        _a.link = props.link,
+        _a.block = props.block,
+        _a)), props.className);
     if (props.tag === 'a') {
         return (React.createElement("a", { className: className, href: props.url, onClick: props.onClick, style: props.style, target: props.target },
             renderLabel(),

package/form/Button/ButtonView.scss

@@ -42,6 +42,23 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
+    &_block {
+        display: block;
+        width: 100%;
+
+        #{$root}__label {
+            justify-content: center;
+        }
+    }
+
+    &_link { 
+        display: inline;
+        width: auto;
+        #{$root}__label {
+            display: inline;
+        }
+    }
+
     &_disabled {
         opacity: 0.5;
         color: rgba(0, 0, 0, 0.25);
@@ -69,9 +86,10 @@ $btn-letter-spacing: 0.1em;
         }
     }
 
-    &_link {
-        justify-content: center;
-        background-color: transparent;
+    &__label {
+        display: flex;
+        flex-direction: row;
+        column-gap: 10px;
     }
 
     &__icon {
@@ -107,12 +125,6 @@ $btn-letter-spacing: 0.1em;
             animation: rotate 1.45s linear infinite;
         }
     }
-
-    &__label { 
-        display: flex;
-        flex-direction: row;
-        column-gap: 10px;
-    }
 }
 
 @keyframes rotate {

package/form/CheckboxField/CheckboxFieldView.scss

@@ -56,6 +56,7 @@
             color: $text-color;
             font-size: $font-size-sm;
             font-weight: $font-weight-md;
+            transform: translateY(1px);
         }
     }
 

package/index.d.ts

@@ -218,5 +218,11 @@ declare const _default: {
     'nav.TreeView': {
         lazy: () => any;
     };
+    'typography.TextView': {
+        lazy: () => any;
+    };
+    'typography.TitleView': {
+        lazy: () => any;
+    };
 };
 export default _default;

package/index.js

@@ -220,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

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.0-beta.15",
+    "version": "3.0.0-beta.17",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.8",
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9",
         "@steroidsjs/eslint-config": "^2.1.3",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",
@@ -53,6 +53,6 @@
         "typescript": "^4.9.5"
     },
     "peerDependencies": {
-        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.8"
+        "@steroidsjs/core": "^3.0 || >=3.0.0-beta.9"
     }
 }

package/scss/mixins/index.scss

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

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);
+  }
+}

package/scss/variables/common/media.scss

@@ -0,0 +1,2 @@
+$mobile-width: 540px !default;
+$tablet-width: 960px !default;

package/scss/variables/common/typography.scss

@@ -21,3 +21,87 @@ $line-height-2xl: 45px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
 $font-weight-lg: 700;
+
+$title-types: () !default;
+$title-types: map-merge(
+    (
+        "h1": (
+            "font-size": $font-size-2xl,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-2xl,
+            "color": $text-color,
+        ),
+        "h2": (
+            "font-size": $font-size-xl,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-xl,
+            "color": $text-color,
+        ),
+        "h3": (
+            "font-size": $font-size-lg,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-lg,
+            "color": $text-color,
+        ),
+        "h4": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-base,
+            "color": $text-color,
+        ),
+        "h5": (
+            "font-size": $font-size-sm,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-sm,
+            "color": $text-color,
+        ),
+        "h6": (
+            "font-size": $font-size-xs,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-xs,
+            "color": $text-color,
+        ),
+        "subtitle": (
+            "font-size": $font-size-2xl,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-2xl,
+            "color": $text-color,
+        ),
+    ),
+    $title-types
+);
+
+$text-types: () !default;
+$text-types: map-merge(
+    (
+        "body": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-base,
+            "color": $text-color,
+        ),
+        "span": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-base,
+            "color": $text-color,
+        ),
+        "boldSpan": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-base,
+            "color": $text-color,
+        ),
+    ),
+    $text-types
+);
+
+$typography-colors: (
+    "text-color": $text-color,
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info,
+);

package/scss/variables/index.scss

@@ -1,6 +1,6 @@
 @import 'common/colors';
+@import 'common/media';
 @import 'common/typography';
-@import 'common/spacing';
 @import 'common/radiuses';
 @import 'common/old-variables';
 

package/typography/Text/TextView.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITextViewProps } from '@steroidsjs/core/ui/typography/Text/Text';
+export default function TextView(props: ITextViewProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/typography/Text/TextView.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var TYPE_MAPPING = {
+    body: 'p',
+    span: 'span',
+    boldSpan: 'span'
+};
+function TextView(props) {
+    var bem = (0, hooks_1.useBem)('TextView');
+    var tag = props.tag || TYPE_MAPPING[props.type || ''] || 'p';
+    return (React.createElement(tag, {
+        className: bem(bem.block({
+            type: props.type,
+            color: props.color
+        }), props.className),
+        style: props.style
+    }, React.createElement(React.Fragment, null,
+        props.content,
+        props.children)));
+}
+exports["default"] = TextView;

package/typography/Text/TextView.scss

@@ -0,0 +1,15 @@
+.TextView {
+  font-family: $font-family-nunito;
+
+  @each $typeName, $typeMap in $text-types {
+    &_type_#{$typeName} {
+        @include typography-type($typeMap);
+    }
+  }
+
+  @each $colorName, $color in $typography-colors {
+    &_color_#{$colorName} {
+      color: $color;
+    }
+  }
+}

package/typography/Title/TitleView.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITitleViewProps } from '@steroidsjs/core/ui/typography/Title/Title';
+export default function TitleView(props: ITitleViewProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/typography/Title/TitleView.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var TYPE_MAPPING = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'h6'
+};
+function TitleView(props) {
+    var bem = (0, hooks_1.useBem)('TitleView');
+    var tag = props.tag || TYPE_MAPPING[props.type || ''] || 'h2';
+    return (React.createElement(tag, {
+        className: bem(bem.block({
+            type: props.type,
+            color: props.color
+        }), props.className),
+        style: props.style
+    }, React.createElement(React.Fragment, null,
+        props.content,
+        props.children)));
+}
+exports["default"] = TitleView;

package/typography/Title/TitleView.scss

@@ -0,0 +1,15 @@
+.TitleView {
+  font-family: $font-family-nunito;
+
+  @each $typeName, $typeMap in $title-types {
+    &_type_#{$typeName} {
+        @include typography-type($typeMap);
+    }
+  }
+
+  @each $colorName, $color in $typography-colors {
+    &_color_#{$colorName} {
+      color: $color;
+    }
+  }
+}