@steroidsjs/bootstrap 3.0.0-beta.3 → 3.0.0-beta.31

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/colors.scss

@@ -23,62 +23,90 @@
     --light-gray: #f8f8f8;
     --dark: #6f6b76;
     --light: #9088a1;
+    --text-color: #312c3a;
+    --background-color: #fff;
+    --is-dark: "false";
+    --border-color: #eef1f2;
+    --border-color-hover: #e5e9eb;
+    --placeholder-color: rgba(0, 0, 0, 0.3);
+    --placeholder-disabled-color: rgba(0, 0, 0, 0.3);
+    --background-disabled-color: #eef1f2;
+    --element-background-color: #FFFFFF;
+}
 
-    html[data-theme="dark"] {
-        --primary: #8b57ff;
-        --primary-dark: #6648a7;
-        --primary-light: #ba9bff;
-        --secondary: #9ea8db;
-        --secondary-dark: #616a95;
-        --secondary-light: #bcc3e9;
-        --success: #3cf25a;
-        --success-dark: #34cc4d;
-        --success-light: #74ff8b;
-        --danger: #fc6666;
-        --danger-dark: #dc5858;
-        --danger-light: #ffa1a1;
-        --info: #9ae1f1;
-        --info-dark: #77c4d6;
-        --info-light: #ccf6ff;
-        --warning: #ffe457;
-        --warning-dark: #ebd251;
-        --warning-light: #fff6c8;
-        --graphite: #414141;
-        --gray-dark: #4e4f57;
-        --gray: #5b5c6b;
-        --light-gray: #928b9d;
-        --dark: #6b6477;
-        --light: #b7afc7;
-    }
+html[data-theme="dark"] {
+    --primary: #8b57ff;
+    --primary-dark: #6648a7;
+    --primary-light: #ba9bff;
+    --secondary: #9ea8db;
+    --secondary-dark: #616a95;
+    --secondary-light: #bcc3e9;
+    --success: #3cf25a;
+    --success-dark: #34cc4d;
+    --success-light: #74ff8b;
+    --danger: #fc6666;
+    --danger-dark: #dc5858;
+    --danger-light: #ffa1a1;
+    --info: #9ae1f1;
+    --info-dark: #77c4d6;
+    --info-light: #ccf6ff;
+    --warning: #ffe457;
+    --warning-dark: #ebd251;
+    --warning-light: #fff6c8;
+    --graphite: #414141;
+    --gray-dark: #4e4f57;
+    --gray: #5b5c6b;
+    --light-gray: #928b9d;
+    --dark: #6b6477;
+    --light: #b7afc7;
+    --text-color: #ffffff;
+    --background-color: #323030;
+    --is-dark: "true";
+    --border-color: #5B5C6B;
+    --border-color-hover: #4e4f57;
+    --placeholder-color: rgba(255, 255, 255, 0.3);
+    --placeholder-disabled-color: rgba(255, 255, 255, 0.1);
+    --background-disabled-color: #5b5c6b;
+    --element-background-color: #414141;
 }
 
 /*
  *  SCSS variables implementation
  */
-$primary: var(--primary) !default;
-$primary-dark: var(--primary-dark) !default;
-$primary-light: var(--primary-light) !default;
-$secondary: var(--secondary) !default;
-$secondary-dark: var(--secondary-dark) !default;
-$secondary-light: var(--secondary-light) !default;
-$success: var(--success) !default;
-$success-dark: var(--success-dark) !default;
-$success-light: var(--success-light) !default;
-$danger: var(--danger) !default;
-$danger-dark: var(--danger-dark) !default;
-$danger-light: var(--danger-light) !default;
-$info: var(--info) !default;
-$info-dark: var(--info-dark) !default;
-$info-light: var(--info-light) !default;
-$warning: var(--warning) !default;
-$warning-dark: var(--warning-dark) !default;
-$warning-light: var(--warning-light) !default;
-$graphite: var(--graphite) !default;
-$gray-dark: var(--gray-dark) !default;
-$gray: var(--gray) !default;
-$light-gray: var(--light-gray) !default;
-$dark: var(--dark) !default;
-$light: var(--light) !default;
+$primary: var(--primary);
+$primary-dark: var(--primary-dark);
+$primary-light: var(--primary-light);
+$secondary: var(--secondary);
+$secondary-dark: var(--secondary-dark);
+$secondary-light: var(--secondary-light);
+$success: var(--success);
+$success-dark: var(--success-dark);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-dark: var(--danger-dark);
+$danger-light: var(--danger-light);
+$info: var(--info);
+$info-dark: var(--info-dark);
+$info-light: var(--info-light);
+$warning: var(--warning);
+$warning-dark: var(--warning-dark);
+$warning-light: var(--warning-light);
+$graphite: var(--graphite);
+$gray-dark: var(--gray-dark);
+$gray: var(--gray);
+$light-gray: var(--light-gray);
+$dark: var(--dark);
+$light: var(--light);
+$text-color: var(--text-color);
+$text-color-revert: var(--text-color-revert);
+$background-color: var(--background-color);
+$is-dark: var(--is-dark);
+$border-color: var(--border-color);
+$border-color-hover: var(--border-color-hover);
+$placeholder-color: var(--placeholder-color);
+$placeholder-disabled-color: var(--placeholder-disabled-color);
+$background-disabled-color: var(--background-disabled-color);
+$element-background-color: var(--element-background-color);
 
 /*
  * Common colors   
@@ -91,15 +119,19 @@ $black-10: rgba(#000, 0.1) !default;
 $black-4: rgba(#000, 0.04) !default;
 $white: #fff !default;
 
-$text-color: #312c3a !default;
 $link-color: #2ba3fb !default;
 
-$gradient-purple: linear-gradient(180deg, #7433FF, #FFA3FD);
-$gradient-red: linear-gradient(180deg, #EB0155, #FFFA80);
+$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff) !default;
 
 $color-themes: () !default;
 $color-themes: map-merge(
     (
+        "basic": (
+            "color": $gray,
+            "color-dark": $gray-dark,
+            "color-light": $light-gray,
+            "text-color": $text-color,
+        ),
         "primary": (
             "color": $primary,
             "color-dark": $primary-dark,
@@ -128,25 +160,13 @@ $color-themes: map-merge(
             "color": $warning,
             "color-dark": $warning-dark,
             "color-light": $warning-light,
-            "text-color": $dark,
+            "text-color": $text-color,
         ),
         "info": (
             "color": $info,
             "color-dark": $info-dark,
             "color-light": $info-light,
-            "text-color": $white,
-        ),
-        "light": (
-            "color": $light,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $dark,
-        ),
-        "dark": (
-            "color": $dark,
-            "color-dark": $dark,
-            "color-light": $light,
-            "text-color": $white,
+            "text-color": $text-color,
         ),
     ),
     $color-themes

package/scss/variables/common/media.scss

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

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: 17px !default;
+$line-height-sm: 20px !default;
+$line-height-base: 22px !default;
+$line-height-lg: 25px !default;
+$line-height-xl: 34px !default;
+$line-height-2xl: 45px !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,
+);

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,12 @@
+@import 'normalize.scss';
 @import 'common/colors';
+@import 'common/media';
 @import 'common/typography';
-@import 'common/spacing';
 @import 'common/radiuses';
 @import 'common/old-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,21 @@
+@import-normalize;
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+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/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.js

@@ -1,65 +0,0 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-exports.__esModule = true;
-var React = __importStar(require("react"));
-var Icon_1 = __importDefault(require("@steroidsjs/core/ui/content/Icon"));
-var hooks_1 = require("@steroidsjs/core/hooks");
-function CollapseItemView(props) {
-    var bem = (0, hooks_1.useBem)('CollapseItemView');
-    React.useEffect(function () {
-        if (props.isAccordion) {
-            props.toggleAccordion(props.activeKey - 1);
-        }
-        else {
-            props.toggleCollapse(props.activeKey - 1);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.activeKey]);
-    return (React.createElement("div", { className: bem(bem.block({
-            disable: props.disabled,
-            borderless: props.borderless
-        }), props.className), style: props.style },
-        React.createElement("div", { className: bem.element('header-container', { revert: props.iconPosition === 'left' }), onClick: !props.disabled
-                ? function () {
-                    // eslint-disable-next-line no-unused-expressions
-                    props.isAccordion
-                        ? props.toggleAccordion(props.childIndex)
-                        : props.toggleCollapse(props.childIndex);
-                }
-                : null },
-            React.createElement("div", { className: bem.element('title-container') },
-                React.createElement("p", null, props.title)),
-            React.createElement("div", { className: bem.element('icon-wrapper', { not_visible: !props.showIcon }) }, props.icon
-                ? (typeof props.icon === 'string' ? React.createElement(Icon_1["default"], { name: props.icon }) : props.icon)
-                : (React.createElement(Icon_1["default"], { className: bem.element('icon', {
-                        active: !props.disabled && props.isShowMore,
-                        disable_cursor: !props.showIcon
-                    }), name: "chevron-down" })))),
-        React.createElement("div", { className: bem.element('content', { visible: !props.disabled && props.isShowMore }) }, props.children)));
-}
-exports["default"] = CollapseItemView;