@steroidsjs/bootstrap 3.0.0-beta.4 → 3.0.0-beta.40

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/content/Icon/IconView.scss

@@ -1,25 +0,0 @@
-.IconView {
-  svg {
-    width: $icon-size;
-  }
-
-  &_size_sm svg {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg svg {
-    width: $icon-size-lg;
-  }
-}
-
-img.IconView {
-  width: $icon-size;
-
-  &_size_sm {
-    width: $icon-size-sm;
-  }
-
-  &_size_lg {
-    width: $icon-size-lg;
-  }
-}

package/icon/fontawesome.d.ts

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

package/list/List/ListItemView.scss

@@ -1,3 +0,0 @@
-.ListItemView {
-
-}

package/scss/mixins/card.scss

@@ -1,26 +0,0 @@
-@mixin card-theme($root, $color) {
-  background: map-get($color, color);
-  color: map-get($color, text-color);
-
-  #{$root}__header{
-    background: map-get($color, color);
-    border-bottom: 1px solid map-get($color, color-dark);
-  }
-  #{$root}__footer{
-    background: map-get($color, color);
-    border-top: 1px solid map-get($color, color-dark);
-  }
-}
-
-@mixin card-border-theme($root, $color) {
-  border: 1px solid map-get($color, color);
-  #{$root}__content{
-    color: map-get($color, color);
-  }
-  #{$root}__header{
-    border-bottom: 1px solid map-get($color, color);
-  }
-  #{$root}__footer{
-    border-top: 1px solid map-get($color, color);
-  }
-}

package/scss/variables/components/card.scss

@@ -1,20 +0,0 @@
-$card-header-font-size: 20px !default;
-$card-header-line-height: 24px !default;
-
-$card-title-font-size: 20px !default;
-$card-title-line-height: 24px !default;
-
-$card-font-size: 14px !default;
-
-$card-children-font-size: 16px !default;
-$card-children-line-height: 28px !default;
-
-$card-horizontal-header-font-size: 28px !default;
-$card-horizontal-font-size: 16px !default;
-
-$card-link-font-size: 16px !default;
-
-$card-border-radius: 3px !default;
-$card-button-border-radius: 4px !default;
-
-$card-header-background: $grey-lighter !default;