@steroidsjs/bootstrap 3.0.0-beta.2 → 3.0.0-beta.21

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

package/content/Collapse/CollapseItemView.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ICollapseItemViewProps } from '@steroidsjs/core/ui/content/Collapse/CollapseItem';
-export default function CollapseItemView(props: ICollapseItemViewProps): JSX.Element;

package/content/Collapse/CollapseItemView.js

@@ -1,64 +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/icon/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 () {
-                    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;

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,3 +0,0 @@
-/// <reference types="react" />
-import { ICollapseViewProps } from '@steroidsjs/core/ui/content/Collapse/Collapse';
-export default function CollapseView(props: ICollapseViewProps): JSX.Element;

package/content/Collapse/CollapseView.scss

@@ -1,15 +0,0 @@
-.CollapseView {
-  height: fit-content;
-
-  display: grid;
-  grid-gap: 0;
-
-  & > :first-child {
-    border-radius: 4px 4px 0 0;
-  }
-
-  & > :last-child {
-    border-radius: 0 0 4px 4px;
-    border: unset;
-  }
-}

package/icon/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/Icon/index.d.ts

@@ -1 +0,0 @@
-export { default } from './IconView';

package/icon/Icon/index.js

@@ -1,16 +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];
-}));
-exports.__esModule = true;
-exports["default"] = void 0;
-var IconView_1 = require("./IconView");
-__createBinding(exports, IconView_1, "default");

package/scss/variables/colors.scss

@@ -1,74 +0,0 @@
-$primary: #651FFF !default;
-$primary-dark: darken($primary, 25) !default;
-$primary-light: lighten($primary, 50) !default;
-
-$secondary: #97A7C8 !default;
-$secondary-dark: darken($secondary, 25) !default;
-$secondary-light: lighten($secondary, 50) !default;
-
-$success: #64D03E !default;
-$success-dark: darken($success, 25) !default;
-$success-light: lighten($success, 50) !default;
-
-$danger: #FF4557 !default;
-$danger-dark: darken($danger, 25) !default;
-$danger-light: lighten($danger, 50) !default;
-
-$warning: #fad826 !default;
-$warning-dark: darken($warning, 25) !default;
-$warning-light: lighten($warning, 50) !default;
-
-$info: #39bbd8 !default;
-$info-dark: darken($info, 25) !default;
-$info-light: lighten($info, 50) !default;
-
-$light: #f8f9fa !default;
-$light-dark: darken($light, 25) !default;
-$light-light: lighten($light, 50) !default;
-
-$dark: #343a40 !default;
-$dark-dark: darken($dark, 25) !default;
-$dark-light: lighten($dark, 50) !default;
-
-$heading: #152536 !default;
-$body: #68717A !default;
-$white: #FFFFFF !default;
-
-$color-themes: () !default;
-$color-themes: map-merge(
-                (
-                        "primary": ("color": $primary, "color-dark": $primary-dark, "color-light": $primary-light, "text-color": $white),
-                        "secondary": ("color": $secondary, "color-dark": $secondary-dark, "color-light": $secondary-light, "text-color": $white),
-                        "success": ("color": $success, "color-dark": $success-dark, "color-light": $success-light, "text-color": $white),
-                        "danger": ("color": $danger, "color-dark": $danger-dark, "color-light": $danger-light, "text-color": $white),
-                        "warning": ("color": $warning, "color-dark": $warning-dark, "color-light": $warning-light, "text-color": $dark),
-                        "info": ("color": $info, "color-dark": $info-dark, "color-light": $info-light, "text-color": $white),
-                        "light": ("color": $light, "color-dark": $light-dark, "color-light": $light-light, "text-color": $dark),
-                        "dark": ("color": $dark, "color-dark": $dark-dark, "color-light": $dark-light, "text-color": $white)
-                ),
-                $color-themes
-);
-
-$grey-light: #D9D9D9;
-$grey-lighter: #F8F8F8;
-$grey: #F8F9FA;
-$grey-dark: #2D2D2D;
-$grey-darker: #78848E;
-$grey-disabled: #F1F1F1;
-
-$additional: #0596FF;
-
-$border-default: #CCCCCC;
-$border-hover: #B0B0B0;
-$border-action: #39BBD8;
-$border-typing: #A7EFFF;
-$back-disabled: #EBEBEB;
-$back-success: #F1FFEC;
-$border-success: #64D03E;
-$back-error: #FCE7E7;
-$border-error: #FF4557;
-$back-info: #ECFCFF;
-$back-warning: #FFFCEA;
-
-$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
-

package/scss/variables/components/alert.scss

@@ -1,9 +0,0 @@
-$alert-padding-y: 12px !default;
-$alert-padding-x: 16px !default;
-
-$alert-border-radius: 4px !default;
-$alert-description-font-size: 18px !default;
-$alert-message-font-size: 16px !default;
-
-$alert-icon-size: 24px !default;
-$alert-close-icon-size: 15px !default;

package/scss/variables/components/avatar.scss

@@ -1,17 +0,0 @@
-$avatar-x-large-size: 64px !default;
-$avatar-x-large-font-size: 20px !default;
-
-$avatar-large-size: 46px !default;
-$avatar-large-font-size: 16px !default;
-
-$avatar-middle-size: 36px !default;
-$avatar-middle-font-size: 14px !default;
-
-$avatar-small-size: 28px !default;
-$avatar-small-font-size: 14px !default;
-
-$avatar-status-color: $success !default;
-$avatar-status-border: 2px solid $white !default;
-
-$avatar-background-color: $primary !default;
-$avatar-text-color: $white !default;