@steroidsjs/bootstrap 3.0.0-beta.6 → 3.0.0-beta.61

package/scss/variables/common/typography.scss

@@ -4,36 +4,104 @@
 
 $font-family-nunito: "Nunito", sans-serif;
 
-$font-size-xs: 12px;
-$font-size-sm: 14px;
-$font-size-base: 16px;
-$font-size-lg: 18px;
-$font-size-xl: 24px;
-$font-size-2xl: 32px;
+$font-size-xs: 12px !default;
+$font-size-sm: 14px !default;
+$font-size-base: 16px !default;
+$font-size-lg: 18px !default;
+$font-size-xl: 24px !default;
+$font-size-2xl: 32px !default;
 
-$line-height-xs: 17px;
-$line-height-sm: 20px;
-$line-height-base: 22px;
-$line-height-lg: 25px;
-$line-height-xl: 34px;
-$line-height-2xl: 45px;
+$line-height-xs: 16px !default;
+$line-height-sm: 18px !default;
+$line-height-base: 22px !default;
+$line-height-lg: 24px !default;
+$line-height-xl: 32px !default;
+$line-height-2xl: 44px !default;
 
-$font-weight-sm: 400;
-$font-weight-md: 500;
-$font-weight-lg: 700;
+$font-weight-sm: 400 !default;
+$font-weight-md: 500 !default;
+$font-weight-lg: 700 !default;
 
+$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
+);
 
-/* 
-*   Button font variables
-*/
-
-$btn-font-weight-sm: 400;
-$btn-font-weight-lg: 800;
-
-$btn-font-xs: 12px;
-$btn-font-sm: 14px;
-$btn-font-base: 16px;
-
-$btn-line-height: 24px;
+$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
+);
 
-$btn-letter-spacing: 0.1em;
+$typography-colors: (
+    "text-color": $text-color,
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "danger": $danger,
+    "warning": $warning,
+    "info": $info,
+) !default;

package/scss/variables/common/variables.scss

@@ -0,0 +1 @@
+$transition-duration: .15s;

package/scss/variables/components/input.scss

@@ -1,3 +1,9 @@
+$input-height-sm: 34px;
+$input-height-md: 46px;
+$input-height-lg: 56px;
+
+
+//remove after ready all inputs
 //Small
 $input-label-margin-bottom-sm: 4px;
 
@@ -52,15 +58,10 @@ $input-message-margin-top-lg: $input-message-margin-top-sm;
 $input-message-icon-size-lg: $input-message-icon-size-sm;
 $input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
 
-
-$input-height-sm: 28px !default;
-$input-height-md: 36px !default;
-$input-height-lg: 46px !default;
-
 $input-border: 1px solid $border-default !default;
 $input-border-radius: 4px !default;
 
 $input-padding-y: 0 !default;
 $input-padding-x: 8px !default;
 $input-addon-padding: 0.6rem !default;
-$input-text-padding: 0.4rem !default;
+$input-text-padding: 0.4rem !default;

package/scss/variables/index.scss

@@ -1,12 +1,13 @@
+@import 'normalize.scss';
 @import 'common/colors';
+@import 'common/media';
 @import 'common/typography';
-@import 'common/spacing';
 @import 'common/radiuses';
 @import 'common/old-variables';
+@import 'common/variables';
 
 @import 'components/button';
 @import 'components/calendar';
-@import 'components/card';
 @import 'components/icon';
 @import 'components/input';
 @import 'components/ratefield';

package/scss/variables/normalize.scss

@@ -0,0 +1,25 @@
+@import-normalize;
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+ul, li {
+    list-style-type: none;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+    font-family: inherit;
+}
+
+button {
+    font-family: inherit;
+}
+
+input {
+    outline: none;
+}

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,16 @@
+.TextView {
+  margin-bottom: 1em;
+  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,16 @@
+.TitleView {
+  margin-bottom: 1em;
+  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;
+    }
+  }
+}

package/utils/renderIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IIconProps } from '@steroidsjs/core/ui/content/Icon/Icon';
+/**
+* Функция которая проверяет соответствует ли typeof icon === 'string', если да - то вернет компонент Icon
+* с переданным в него iconProps, если нет то вернется span с классом iconProps.className со вложенным {icon}
+* @example renderIcon(props.leadIcon, {className: 'leadIcon', tabIndex: -1})
+*/
+declare const renderIcon: (icon: string | React.ReactElement, iconProps: IIconProps) => JSX.Element;
+export default renderIcon;

package/utils/renderIcon.js

@@ -0,0 +1,27 @@
+"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;
+/* eslint-disable valid-typeof */
+var react_1 = __importDefault(require("react"));
+var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon/Icon"));
+/**
+* Функция которая проверяет соответствует ли typeof icon === 'string', если да - то вернет компонент Icon
+* с переданным в него iconProps, если нет то вернется span с классом iconProps.className со вложенным {icon}
+* @example renderIcon(props.leadIcon, {className: 'leadIcon', tabIndex: -1})
+*/
+var renderIcon = function (icon, iconProps) { return typeof icon === 'string'
+    ? (react_1["default"].createElement(Icon_1["default"], __assign({ name: icon }, iconProps))) : (react_1["default"].createElement("span", { className: iconProps.className }, icon)); };
+exports["default"] = renderIcon;

package/content/Collapse/CollapseItemView.d.ts

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

package/content/Collapse/CollapseItemView.scss

@@ -1,88 +0,0 @@
-.CollapseItemView {
-  display: grid;
-  align-items: center;
-
-  background-color: #fff;
-  border-bottom: 1px solid rgba(#000, .1);
-  box-shadow: 0 0 3px 0 rgba(34, 60, 80, 0.2);
-  min-height: 48px;
-  width: 100%;
-  height: fit-content;
-
-  &_disable {
-    opacity: .4;
-    background-color: #d7d7d7;
-    color: rgba(#212529, .7);
-
-    .IconView {
-      svg {
-        fill-opacity: .6;
-      }
-    }
-  }
-
-  &_borderless {
-    border-bottom: unset;
-    box-shadow: unset;
-  }
-
-  &_active {
-    margin-bottom: 16px;
-  }
-
-  p {
-    margin: 0;
-  };
-
-  &__icon {
-    transform: rotate(0deg);
-    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-    &_active {
-    transform: rotate(180deg);
-    }
-
-    &_disable_cursor {
-      cursor: auto;
-    }
-  }
-
-  &__header-container {
-    display: flex;
-    &_revert {
-      flex-direction: row-reverse;
-    }
-  }
-
-  &__title-container {
-    width: 100%;
-    padding: 0 16px;
-    align-self: center;
-  }
-
-  &__icon-wrapper {
-    width: 48px;
-    height: 48px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &_not_visible {
-      width: 0;
-      opacity: 0;
-    }
-  }
-
-  &__content {
-    transition: all 200ms ease;
-    overflow: hidden;
-    max-height: 0;
-    padding: 0 16px;
-
-    &_visible {
-      max-height: 1024px;
-      padding: 0 16px 8px 16px
-    }
-  }
-}

package/content/Collapse/CollapseView.d.ts

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

package/icons/fontawesome.d.ts

@@ -1,2 +0,0 @@
-declare const _default: () => {};
-export default _default;