beem-component 1.8.1 → 1.8.3

package/src/lib/components/Chats/chatInput.js

@@ -1,14 +1,14 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
+import { Send } from '@material-ui/icons';
 import {
   BmGrey400,
   BmGrey50,
   BmPrimaryWhite,
   BmSecondaryGrey,
-} from "../colors";
-import { BmEmojiIcon } from "../iconStyles";
-import { Send } from "@material-ui/icons";
-import { BmInputField } from "../input";
+} from '../colors';
+import { BmEmojiIcon } from '../iconStyles';
+import { BmInputField } from '../input';
 
 // Main wrapper
 export const BmMessageTab = styled.div`
@@ -49,13 +49,13 @@ export const BmSend = (props) => {
 };
 
 // Div for attachments
-export const BmAttachment = styled("div")`
+export const BmAttachment = styled('div')`
   justify-content: center;
   padding-right: 1.143rem !important;
 `;
 
 // Div for message input
-export const BmMessage = styled("div")`
+export const BmMessage = styled('div')`
   display: flex;
   flex-direction: row;
   align-items: center;

package/src/lib/components/Chats/chatwrapper.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { BmBgGreyBlue, BmGrey400 } from "../colors";
+import styled from 'styled-components';
+import { BmBgGreyBlue, BmGrey400 } from '../colors';
 
 // Main wrapper
 export const Main = styled.div`

package/src/lib/components/Checkbox/checkboxToggler.stories.js

@@ -61,4 +61,3 @@ export const hiddenToggleLabel = () => {
     />
   );
 };
-

package/src/lib/components/InputDatePicker.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const InputDatePicker = ({ value, placeholder, onClick }) => (
+  <>
+    <input
+      type="text"
+      className="form-control"
+      placeholder={placeholder}
+      value={value}
+      onFocus={onClick}
+    />
+    <i className="icon-schedule-date form-control-icon" />
+  </>
+);
+
+InputDatePicker.propTypes = {
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+InputDatePicker.defaultProps = {
+  value: undefined,
+  placeholder: undefined,
+};
+
+export const ScheduleDateInput = ({ onClick, value, placeholder }) => (
+  <button
+    type="button"
+    aria-label="button"
+    className="btn btn-warning my-1 mr-2"
+    onClick={onClick}
+  >
+    {value || placeholder} <i className="fa fa-calendar-alt" />
+  </button>
+);
+
+ScheduleDateInput.propTypes = {
+  value: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  placeholder: PropTypes.string.isRequired,
+};
+
+export default InputDatePicker;

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/chatHeader.js

@@ -1,5 +1,10 @@
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryBlack, BmPrimaryWhite, BmSecondaryGrey } from "./colors";
+import styled from 'styled-components';
+import {
+  BmGrey400,
+  BmPrimaryBlack,
+  BmPrimaryWhite,
+  BmSecondaryGrey,
+} from './colors';
 
 export const BmChatHeaderWrapper = styled.div`
   display: flex;
@@ -33,6 +38,6 @@ export const BmChatHeader = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding : 1.286rem 0rem;
+  padding: 1.286rem 0rem;
   margin: 0rem;
 `;

package/src/lib/components/contacts.js

@@ -1,11 +1,11 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 import {
   BmGrey100,
   BmPrimaryBlack,
   BmPrimaryBlue,
   BmPrimaryWhite,
-} from "./colors";
+} from './colors';
 
 export const BmContactSideBar = styled.div`
   display: flex;

package/src/lib/components/dropdown.js

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import { BmPrimaryWhite, BmSecondaryGrey, BmGrey400 } from "./colors";
-import { BmDropdownIcon } from "./iconStyles";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { BmPrimaryWhite, BmSecondaryGrey, BmGrey400 } from './colors';
+import { BmDropdownIcon } from './iconStyles';
 
 const BmDropdownWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: static;
-  ${"" /* box-sizing: border-box; */}
+  ${'' /* box-sizing: border-box; */}
   margin: 0rem;
   padding: 0.5rem 1.143rem;
   background: ${BmPrimaryWhite};
@@ -80,8 +80,8 @@ export const BmDropdown = ({ ...rest }) => {
       <DownIcon />
       {isOpen && (
         <DropDownContent>
-          <BmDropdownItem onClick={() => setValue("any")}>ANY</BmDropdownItem>
-          <BmDropdownItem onClick={() => setValue("all")}>ALL</BmDropdownItem>
+          <BmDropdownItem onClick={() => setValue('any')}>ANY</BmDropdownItem>
+          <BmDropdownItem onClick={() => setValue('all')}>ALL</BmDropdownItem>
         </DropDownContent>
       )}
     </BmDropdownWrapper>

package/src/lib/components/dropdownItems.js

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
-import { BmGrey100, BmGrey400, BmPrimaryBlack, BmPrimaryWhite } from "./colors";
-import { BmIcons } from "./iconStyles";
+import React from 'react';
+import styled from 'styled-components';
+import { BmGrey100, BmGrey400, BmPrimaryBlack, BmPrimaryWhite } from './colors';
+import { BmIcons } from './iconStyles';
 
 export const BmCustomizedDropdown = styled.div`
   display: flex;
@@ -9,8 +9,8 @@ export const BmCustomizedDropdown = styled.div`
 `;
 
 export const BmButtonDropdownItem = styled.div`
-  ${"" /* display: inline-block; */}
-  display: ${({ isOpen }) => (isOpen ? "flex" : "none")}};
+  ${'' /* display: inline-block; */}
+  display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')}};
   flex-direction: column;
   ${'' /* align-items: flex-start; */}
   padding: 0.286rem 0rem;

package/src/lib/components/examples/App.js

@@ -1,11 +1,11 @@
-import React from "react";
-import { AttachFile } from "@material-ui/icons";
-import EmojiEmotionsIcon from "@material-ui/icons/EmojiEmotions";
-import QuickreplyIcon from "@mui/icons-material/Quickreply";
-import SendIcon from "@mui/icons-material/Send";
-import { BmChat, BmIcons, BmInput } from "./lib/components";
-import "../src/lib/assets/css/sidebar.scss";
-import image from "../src/lib/assets/chart-img.png";
+import React from 'react';
+import { AttachFile } from '@material-ui/icons';
+import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
+import QuickreplyIcon from '@mui/icons-material/Quickreply';
+import SendIcon from '@mui/icons-material/Send';
+import { BmChat, BmIcons, BmInput } from './lib/components';
+import '../src/lib/assets/css/sidebar.scss';
+import image from '../src/lib/assets/chart-img.png';
 
 const Chat = () => {
   return (
@@ -19,7 +19,7 @@ const Chat = () => {
           src={image}
           fileName={<p>attachment.jpg</p>}
         />
-         <BmChat.Details
+        <BmChat.Details
           state="outbound"
           session="bot"
           displayTime={<p>12:00pm</p>}
@@ -27,19 +27,24 @@ const Chat = () => {
           // src={image}
           // fileName={<p>attachment.jpg</p>}
         >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+          <p>
+            Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa
+            wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal
+            vizuri kutoka kwenye dish kwa kutumia remote control. Bonyeza MENU,
+            Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST. Angalia
+            asilimia ya QUALITY pale chini. Angalia Transponder zote, 001, 002,
+            003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%. Au
+            kama una aina nyingine ya kisimbuzi; Bonyeza MENU, Bonyeza OK kwenye
+            SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye
+            AUTOMATIC SEARCH. Shuka kwenye frequency na uangalie frequency zote
+            kuanzia 11044, 10981, 11106 na 10971. Au Bonyeza MENU, Bonyeza OK
+            kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C
+            bonyeza kitufe cha KIJANI. Angalia QUALITY kwenye frequency zote
+            kuanzia 11044, 10981, 11106 na 10971. Angalia asilimia ya QUALITY
+            pale chini. QUALITY inatakiwa isiwe pungufu ya asilimia 60%. Je,
+            kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na
+            aliyekufungia dish arekebishe.
+          </p>
         </BmChat.Details>
         <BmChat.Details
           state="inbound"
@@ -49,19 +54,24 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           // src={image}
           // fileName={<p>attachment.jpg</p>}
         >
-          <p>Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal vizuri kutoka kwenye dish kwa kutumia remote control.
-Bonyeza MENU, Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST.
-Angalia asilimia ya QUALITY pale chini.
-Angalia Transponder zote, 001, 002, 003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%.
-Au kama una aina nyingine ya kisimbuzi;
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye AUTOMATIC SEARCH.
-Shuka kwenye frequency na uangalie frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Au
-Bonyeza MENU, Bonyeza OK kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C bonyeza kitufe cha KIJANI.
-Angalia QUALITY kwenye frequency zote kuanzia 11044, 10981, 11106 na 10971.
-Angalia asilimia ya QUALITY pale chini.
-QUALITY inatakiwa isiwe pungufu ya asilimia 60%.
-Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish arekebishe.</p>
+          <p>
+            Technical No Signal - Ili kupata chaneli au chaneli zifunguke kwa
+            wakati ukilipia kifurushi, hakikisha kwanza kama unapata signal
+            vizuri kutoka kwenye dish kwa kutumia remote control. Bonyeza MENU,
+            Bonyeza OK kwenye SEARCH, Bonyeza OK kwenye TP LIST. Angalia
+            asilimia ya QUALITY pale chini. Angalia Transponder zote, 001, 002,
+            003 na 004 zinatakiwa ziwe na QUALITY si pungufu ya asilimia 60%. Au
+            kama una aina nyingine ya kisimbuzi; Bonyeza MENU, Bonyeza OK kwenye
+            SETTINGS, Bonyeza OK kwenye INSTALLATION, Bonyeza OK kwenye
+            AUTOMATIC SEARCH. Shuka kwenye frequency na uangalie frequency zote
+            kuanzia 11044, 10981, 11106 na 10971. Au Bonyeza MENU, Bonyeza OK
+            kwenye SETTINGS, Bonyeza OK kwenye INSTALLATION, kwenye EUTELSAT 7C
+            bonyeza kitufe cha KIJANI. Angalia QUALITY kwenye frequency zote
+            kuanzia 11044, 10981, 11106 na 10971. Angalia asilimia ya QUALITY
+            pale chini. QUALITY inatakiwa isiwe pungufu ya asilimia 60%. Je,
+            kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na
+            aliyekufungia dish arekebishe.
+          </p>
         </BmChat.Details>
         <BmChat.Details
           state="outbound"
@@ -96,7 +106,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -112,7 +122,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
             kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
             lingine?
           </p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -120,7 +130,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -128,7 +138,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -136,7 +146,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -144,7 +154,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -152,7 +162,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           status="failed"
         >
           <p>Outbound</p>
-        </BmChat.Details>{" "}
+        </BmChat.Details>{' '}
         <BmChat.Details
           state="outbound"
           session="live"
@@ -162,7 +172,7 @@ Je, kwako inasoma ngapi? Kama ipo chini ya 60%, wasiliana na aliyekufungia dish
           <p>Outbound</p>
         </BmChat.Details>
       </BmChat.Body>
-      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+      <BmChat.Footer style={{ justifyContent: 'flex-start' }}>
         <div class="chat-footer">
           <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
         </div>

package/src/lib/components/examples/InfoAccordion.js

@@ -1,7 +1,6 @@
-
-import React from "react";
-import { BmAccordion } from "./lib/components";
-import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";
+import React from 'react';
+import { BmAccordion } from './lib/components';
+import BmForm from './lib/components/ChatComponents/FormAccordion/FormAccordion';
 
 const InfoAccordion = () => {
   return (
@@ -12,7 +11,9 @@ const InfoAccordion = () => {
         </BmAccordion.Title>
         <BmAccordion.Body>
           <BmForm>
-            <BmForm.Label><h4>Hello</h4></BmForm.Label>
+            <BmForm.Label>
+              <h4>Hello</h4>
+            </BmForm.Label>
             <BmForm.Input placeholder="Hello" />
           </BmForm>
         </BmAccordion.Body>

package/src/lib/components/examples/chatBodyExample.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { GlobalStyle, BmChat } from "..";
-import "./list.scss";
-import { ScrollbarWrapper } from "../ScrollBar/scrollBar";
+import React, { useState } from 'react';
+import { GlobalStyle, BmChat } from '..';
+import './list.scss';
+import { ScrollbarWrapper } from '../ScrollBar/scrollBar';
 
 const App = () => {
   return (
@@ -62,7 +62,7 @@ const App = () => {
               status="failed"
               fileName={<p>file.csv</p>}
               onDownload={() => {
-                alert("hello");
+                alert('hello');
               }}
             />
           </BmChat.Body>

package/src/lib/components/examples/selectExample.js

@@ -1,14 +1,14 @@
-import React, { useState } from "react";
-import map from "lodash/map";
-import { GlobalStyle, BmModal, BmButton } from "./lib/components";
-import Select from "react-select";
+import React, { useState } from 'react';
+import map from 'lodash/map';
+import Select from 'react-select';
+import { GlobalStyle, BmModal, BmButton } from './lib/components';
 
 const App = () => {
   const [showModal, setShowModal] = useState(false);
 
   const VENDOR_ACCOUNT_STATUSES = {
-    0: "Inactive",
-    1: "Active",
+    0: 'Inactive',
+    1: 'Active',
   };
 
   const VENDOR_ACCOUNT_STATUS_OPTIONS = map(
@@ -16,7 +16,7 @@ const App = () => {
     (type, key) => ({
       value: key,
       label: type,
-    }),
+    })
   );
   return (
     <>