beem-component 1.6.1 → 1.6.2

package/dist/components/PaymentBox/paymentBox.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _excluded = ["children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmPaymentBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 240px;\n  min-height: 280px;\n  border: 0.071rem solid ", ";\n  border-radius: 0.5rem;\n  > * {\n    margin-bottom: 1rem;\n  }\n  &:hover {\n    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);\n  }\n"])), _colors.BmGrey200);
+
+var BmPaymentBox = function BmPaymentBox(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BmPaymentBoxWrapper, rest, children);
+};
+
+BmPaymentBox.Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.5rem 0rem;\n  border-radius: 0.5rem 0.5rem 0rem 0rem;\n  background: ", "} \n"])), function (_ref2) {
+  var headerColor = _ref2.headerColor;
+  return headerColor || _colors.BmPrimaryBlue;
+});
+BmPaymentBox.Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n"])));
+BmPaymentBox.Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  margin-top: auto;\n"])));
+BmPaymentBox.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = BmPaymentBox;
+exports.default = _default;

package/dist/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SamplePaymentBox = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _paymentBox = _interopRequireDefault(require("./paymentBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _paymentBox.default,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var SamplePaymentBox = function SamplePaymentBox() {
+  return /*#__PURE__*/_react.default.createElement(_paymentBox.default, null, /*#__PURE__*/_react.default.createElement(_paymentBox.default.Header, null, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_paymentBox.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer")));
+};
+
+exports.SamplePaymentBox = SamplePaymentBox;

package/dist/components/index.js

@@ -210,6 +210,12 @@ Object.defineProperty(exports, "BmNoteBar", {
     return _noteBar.BmNoteBar;
   }
 });
+Object.defineProperty(exports, "BmPaymentBox", {
+  enumerable: true,
+  get: function get() {
+    return _paymentBox.default;
+  }
+});
 Object.defineProperty(exports, "BmProfileIcon", {
   enumerable: true,
   get: function get() {
@@ -381,6 +387,8 @@ var _ProfileIcon = require("./ProfileIcon/ProfileIcon");
 
 var _checkboxToggler = require("./Checkbox/checkboxToggler");
 
+var _paymentBox = _interopRequireDefault(require("./PaymentBox/paymentBox"));
+
 var _iconStyles = require("./iconStyles");
 
 var _noteBar = require("./NoteBar/noteBar");

package/package.json

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

package/src/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { GlobalStyle, BmModal, BmButton } from './lib/components';
 import { BmCheckboxToggle } from './lib/components/Checkbox/checkboxToggler';
+import BmPaymentBox from './lib/components/PaymentBox/paymentBox';
 
 const Chat = () => {
   const [checked, setChecked] = useState(false);
@@ -31,6 +32,18 @@ const Chat = () => {
           <p>This is a footer</p>
         </BmModal.Footer>
       </BmModal>
+
+      <BmPaymentBox>
+        <BmPaymentBox.Header>
+          <h2>Header</h2>
+        </BmPaymentBox.Header>
+        <BmPaymentBox.Body>
+          <p>This is a body</p>
+        </BmPaymentBox.Body>
+        <BmPaymentBox.Footer>
+          <p>This is a footer</p>
+        </BmPaymentBox.Footer>
+      </BmPaymentBox>
     </>
   );
 };

package/src/lib/components/PaymentBox/paymentBox.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BmGrey200, BmPrimaryBlue } from '../colors';
+
+const BmPaymentBoxWrapper = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 240px;
+  min-height: 280px;
+  border: 0.071rem solid ${BmGrey200};
+  border-radius: 0.5rem;
+  > * {
+    margin-bottom: 1rem;
+  }
+  &:hover {
+    box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
+  }
+`;
+
+const BmPaymentBox = ({ children, ...rest }) => {
+  return <BmPaymentBoxWrapper {...rest}>{children}</BmPaymentBoxWrapper>;
+};
+
+BmPaymentBox.Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0rem;
+  border-radius: 0.5rem 0.5rem 0rem 0rem;
+  background: ${({ headerColor }) => headerColor || BmPrimaryBlue}} 
+`;
+
+BmPaymentBox.Body = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+BmPaymentBox.Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: auto;
+`;
+
+BmPaymentBox.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default BmPaymentBox;

package/src/lib/components/PaymentBox/paymentBox.stories.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-anonymous-default-export */
+import React from 'react';
+import BmPaymentBox from './paymentBox';
+
+export default {
+  component: BmPaymentBox,
+  title: 'components/PaymentBox',
+  argTypes: {
+    headerColor: {
+      description: 'Color of the box header ',
+      defaultValue: { summary: undefined },
+    },
+  },
+};
+
+export const SamplePaymentBox = () => {
+  return (
+    <BmPaymentBox>
+      <BmPaymentBox.Header>
+        <h2>Header</h2>
+      </BmPaymentBox.Header>
+      <BmPaymentBox.Body>
+        <p>This is a body</p>
+      </BmPaymentBox.Body>
+      <BmPaymentBox.Footer>
+        <p>This is a footer</p>
+      </BmPaymentBox.Footer>
+    </BmPaymentBox>
+  );
+};

package/src/lib/components/index.js

@@ -22,6 +22,7 @@ import BmBanner from './BannerCard/bannerCards';
 import BmProgressRing from './ProgressRing/progressRing';
 import { BmProfileIcon } from './ProfileIcon/ProfileIcon';
 import { BmCheckboxToggle } from './Checkbox/checkboxToggler';
+import BmPaymentBox from './PaymentBox/paymentBox';
 import {
   BmTagIcon,
   BmAvatarIcon,
@@ -80,6 +81,7 @@ export {
   BmProgressRing,
   BmProfileIcon,
   BmCheckboxToggle,
+  BmPaymentBox,
   // Fix height and if there is dropdown option inside the modal body
   BmModal,
   BmNoteBar,