@steroidsjs/bootstrap 3.0.0-beta.16 → 3.0.0-beta.18

package/content/Accordion/AccordionItemView.scss

@@ -4,14 +4,14 @@
     --accordion-background-dark: #312c3a;
     --accordion-rect-background: #ffffff;
     --accordion-chevron-color: #323232;
+}
 
-    html[data-theme="dark"] {
-        --accordion-background-light: #414141;
-        --accordion-background-intermediate: #5b5c6b;
-        --accordion-background-dark: #4e4f57;
-        --accordion-rect-background: #6f6b76;
-        --accordion-chevron-color: #ffffff;
-    }
+html[data-theme="dark"] {
+    --accordion-background-light: #414141;
+    --accordion-background-intermediate: #5b5c6b;
+    --accordion-background-dark: #4e4f57;
+    --accordion-rect-background: #6f6b76;
+    --accordion-chevron-color: #ffffff;
 }
 
 $accordionBackgroundMap: (

package/content/DropDown/DropDownView.scss

@@ -4,12 +4,12 @@
     --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"] {
-        --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");
-    }
+html[data-theme="dark"] {
+    --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");
 }
 
 $dropdown-background: var(--dropdown-background);

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.16",
+    "version": "3.0.0-beta.18",
     "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/colors.scss

@@ -25,35 +25,35 @@
     --light: #9088a1;
     --text-color: #312C3A;
     --is-dark: 'false';
+}
 
-    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;
-        --is-dark: 'true';
-    }
+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;
+    --is-dark: 'true';
 }
 
 /*

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,4 +1,5 @@
 @import 'common/colors';
+@import 'common/media';
 @import 'common/typography';
 @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;
+    }
+  }
+}