beem-component 1.8.1 → 1.8.2

package/dist/components/Jumbotron/Jumbotron.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = require("../colors");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Title = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding: 1rem 0.5rem;\n  background: ", ";\n"])), function (props) {
+  return props.bgColor ? props.bgColor : _colors.BmPrimaryBlue;
+});
+var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 0.5rem;\n  > * {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    overflow-wrap: break-word !important;\n    word-wrap: break-word !important;\n    flex-grow: grow;\n    > *:not(:last-child) {\n      margin-bottom: 0.5rem;\n    }\n  }\n  @media all and (max-width: 960px) {\n    flex-direction: column;\n  }\n"])));
+var BmJumbotron = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border: 0.071rem solid ", ";\n  border-radius: 0.25rem;\n"])), _colors.BmGrey200);
+var text = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var image = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 20%;\n  @media all and (max-width: 960px) {\n    width: 100%;\n  }\n"])));
+BmJumbotron.Title = Title;
+BmJumbotron.Body = Body;
+BmJumbotron.Body.Text = text;
+BmJumbotron.Body.Image = image;
+var _default = BmJumbotron;
+exports.default = _default;

package/dist/components/Jumbotron/Jumbotron.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BasicJumbotronSample = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonKnobs = require("@storybook/addon-knobs");
+var _Jumbotron = _interopRequireDefault(require("./Jumbotron"));
+var _beem = _interopRequireDefault(require("../../assets/beem.jpeg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _Jumbotron.default,
+  title: 'components/Jumbotron',
+  argTypes: {
+    children: {
+      description: 'Accordion Title Text',
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+var BasicJumbotronSample = function BasicJumbotronSample() {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Jumbotron.default, null, /*#__PURE__*/_react.default.createElement(_Jumbotron.default.Title, null, /*#__PURE__*/_react.default.createElement("h3", null, (0, _addonKnobs.text)('children', 'Title'))), /*#__PURE__*/_react.default.createElement(_Jumbotron.default.Body.Text, null, "Body Text"), /*#__PURE__*/_react.default.createElement(_Jumbotron.default.Body.Image, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _beem.default,
+    alt: "sampleImage"
+  }))));
+};
+exports.BasicJumbotronSample = BasicJumbotronSample;

package/dist/components/index.js

@@ -179,6 +179,12 @@ Object.defineProperty(exports, "BmInput", {
     return _input.BmInput;
   }
 });
+Object.defineProperty(exports, "BmJumbotron", {
+  enumerable: true,
+  get: function get() {
+    return _Jumbotron.default;
+  }
+});
 Object.defineProperty(exports, "BmListBox", {
   enumerable: true,
   get: function get() {
@@ -361,6 +367,7 @@ var _progressRing = _interopRequireDefault(require("./ProgressRing/progressRing"
 var _ProfileIcon = require("./ProfileIcon/ProfileIcon");
 var _checkboxToggler = require("./Checkbox/checkboxToggler");
 var _paymentBox = _interopRequireDefault(require("./PaymentBox/paymentBox"));
+var _Jumbotron = _interopRequireDefault(require("./Jumbotron/Jumbotron"));
 var _iconStyles = require("./iconStyles");
 var _noteBar = require("./NoteBar/noteBar");
 var _MainWrapper = require("./MainWrapper");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -1,11 +1,12 @@
 import React from 'react';
-
+import Image from './lib/assets/beem.jpeg';
 import {
   BmInput,
   GlobalStyle,
 
   // BmCheckboxToggle,
 } from './lib/components';
+import BmJumbotron from './lib/components/Jumbotron/Jumbotron';
 
 // const Chat = () => {
 //   // const [test, setTest] = useState(false);
@@ -254,6 +255,17 @@ const Chat = () => {
     <>
       <GlobalStyle />
       <BmInput placeholder="tejal" state="positive" action="incomplete" />
+      <BmJumbotron>
+        <BmJumbotron.Title>
+          <h3>Title</h3>
+        </BmJumbotron.Title>
+        <BmJumbotron.Body>
+          <BmJumbotron.Body.Text>Body Text</BmJumbotron.Body.Text>
+          <BmJumbotron.Body.Image>
+            <img src={Image} alt="sampleImage" />
+          </BmJumbotron.Body.Image>
+        </BmJumbotron.Body>
+      </BmJumbotron>
     </>
   );
 };

package/src/lib/components/Jumbotron/Jumbotron.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable react/jsx-props-no-spreading */
+import styled from 'styled-components';
+import { BmPrimaryBlue, BmGrey200 } from '../colors';
+
+const Title = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0.5rem;
+  background: ${(props) => (props.bgColor ? props.bgColor : BmPrimaryBlue)};
+`;
+
+const Body = styled.div`
+  display: flex;
+  padding: 0.5rem;
+  > * {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+    flex-grow: grow;
+    > *:not(:last-child) {
+      margin-bottom: 0.5rem;
+    }
+  }
+  @media all and (max-width: 960px) {
+    flex-direction: column;
+  }
+`;
+
+const BmJumbotron = styled.div`
+  display: flex;
+  flex-direction: column;
+  border: 0.071rem solid ${BmGrey200};
+  border-radius: 0.25rem;
+`;
+
+const text = styled.div`
+  width: 100%;
+`;
+const image = styled.div`
+  width: 20%;
+  @media all and (max-width: 960px) {
+    width: 100%;
+  }
+`;
+
+BmJumbotron.Title = Title;
+BmJumbotron.Body = Body;
+BmJumbotron.Body.Text = text;
+BmJumbotron.Body.Image = image;
+
+export default BmJumbotron;

package/src/lib/components/Jumbotron/Jumbotron.stories.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from 'react';
+import { text } from '@storybook/addon-knobs';
+import BmJumbotron from './Jumbotron';
+import Image from '../../assets/beem.jpeg';
+
+export default {
+  component: BmJumbotron,
+  title: 'components/Jumbotron',
+  argTypes: {
+    children: {
+      description: 'Accordion Title Text',
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+export const BasicJumbotronSample = () => {
+  return (
+    <div>
+      <BmJumbotron>
+        <BmJumbotron.Title>
+          <h3>{text('children', 'Title')}</h3>
+        </BmJumbotron.Title>
+        <BmJumbotron.Body.Text>Body Text</BmJumbotron.Body.Text>
+        <BmJumbotron.Body.Image>
+          <img src={Image} alt="sampleImage" />
+        </BmJumbotron.Body.Image>
+      </BmJumbotron>
+    </div>
+  );
+};

package/src/lib/components/index.js

@@ -23,6 +23,7 @@ import BmProgressRing from './ProgressRing/progressRing';
 import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
 import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
 import BmPaymentBox from './PaymentBox/paymentBox';
+import BmJumbotron from './Jumbotron/Jumbotron';
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -82,6 +83,7 @@ export {
   BmProfileIcon,
   BmCheckboxToggle,
   BmPaymentBox,
+  BmJumbotron,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,