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

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.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,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;
+    }
+  }
+}