beem-component 1.5.6 → 1.5.9

package/src/lib/components/Tags/tags.stories.js

@@ -1,36 +1,36 @@
 /* eslint-disable import/no-anonymous-default-export */
-import { Favorite } from "@material-ui/icons";
-import React from "react";
-import { BmTag } from "./tags";
+import { Favorite } from '@material-ui/icons';
+import React from 'react';
+import { BmTag } from './tags';
 
 export default {
   component: BmTag,
-  title: "components/Tags",
+  title: 'components/Tags',
   argTypes: {
     color: {
-      control: { type: "text" },
+      control: { type: 'text' },
       description:
-        "Color of the Icons and Text, will work only if variant is not present",
+        'Color of the Icons and Text, will work only if variant is not present',
     },
     closeButton: {
-      control: { type: "boolean" },
-      description: "Will display (x) - Optional",
+      control: { type: 'boolean' },
+      description: 'Will display (x) - Optional',
     },
     onHide: {
       description:
-        "Handles closing of tags, will only work if closeButton is present (Optional)",
+        'Handles closing of tags, will only work if closeButton is present (Optional)',
     },
     size: {
-      options: ["xsmall", "small", "medium", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the icons",
-      defaultValue: { summary: "small" },
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: { type: 'select' },
+      description: 'Size of the icons',
+      defaultValue: { summary: 'small' },
     },
     variant: {
-      options: ["success", "warning", "danger", "light", "neutral", undefined],
-      control: { type: "select" },
-      description: "Type of tag",
-      defaultValue: { summary: "neutral" },
+      options: ['success', 'warning', 'danger', 'light', 'neutral', undefined],
+      control: { type: 'select' },
+      description: 'Type of tag',
+      defaultValue: { summary: 'neutral' },
     },
   },
 };
@@ -42,12 +42,12 @@ Tags.args = {
   children: <p>Tags</p>,
   leadingIcon: <Favorite />,
   trailingIcon: <Favorite />,
-  variant: "success",
+  variant: 'success',
 };
 
 export const TagsWithCloseButton = () => {
   return (
-    <BmTag variant="light" closeButton onHide={() => console.log("Hide Tag")}>
+    <BmTag variant="light" closeButton onHide={() => alert('Hide Tag')}>
       <p>TAG</p>
     </BmTag>
   );

package/src/lib/components/breakpoints.js

@@ -1,7 +1,7 @@
 export const size = {
-  xs: "320px",
-  sm: "768px",
-  lg: "1200px",
+  xs: '320px',
+  sm: '768px',
+  lg: '1200px',
 };
 
 export const device = {

package/src/lib/components/checkbox.js

@@ -1,8 +1,9 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React from 'react';
-import styled from "styled-components";
-import { BmGrey400, BmPrimaryBlack, BmPrimaryBlue, BmGrey100 } from "./colors";
+import styled from 'styled-components';
+import { BmGrey400, BmPrimaryBlack, BmPrimaryBlue, BmGrey100 } from './colors';
 
-const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
   display: flex;
   border: 0;
   height: 0.071rem;
@@ -28,7 +29,7 @@ const StyledCheckbox = styled.div`
     if (!disabled && checked) return `${BmPrimaryBlue}`;
     if (disabled && !checked) return `${BmGrey100}`;
     if (disabled && checked) return `${BmGrey100}`;
-    return "";
+    return '';
   }};
   border-radius: 0.143rem;
   transition: all 150ms;
@@ -36,11 +37,11 @@ const StyledCheckbox = styled.div`
     ${({ checked, disabled }) => {
       if (!disabled && checked) return `${BmPrimaryBlue}`;
       if (disabled && !checked) return `${BmGrey400}`;
-      if (disabled && checked) return "none";
+      if (disabled && checked) return 'none';
       return `${BmGrey400}`;
     }};
   ${Icon} {
-    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
+    visibility: ${(props) => (props.checked ? 'visible' : 'hidden')};
   }
 `;
 

package/src/lib/components/colors.js

@@ -1,61 +1,63 @@
 // Primary Colors
-export const BmPrimaryBlue = "#33B1BA";
+export const BmPrimaryBlue = '#33B1BA';
 
-export const BmPrimaryGold = "#F3A929";
+export const BmPrimaryGold = '#F3A929';
 
-export const BmPrimaryWhite = "#FFFFFF";
+export const BmPrimaryWhite = '#FFFFFF';
 
-export const BmPrimaryBlack = "#000000";
+export const BmPrimaryBlack = '#000000';
 
 // Secondary Colors
-export const BmSecondaryCyan = "#56C5CE";
+export const BmSecondaryCyan = '#56C5CE';
 
-export const BmSecondaryGrey = "#575757";
+export const BmSecondaryGrey = '#575757';
 
-export const BmSecondaryRed = "#F62E48";
+export const BmSecondaryRed = '#F62E48';
 
-export const BmSecondaryGreen = "#8CC63F";
+export const BmSecondaryGreen = '#8CC63F';
 
-export const BmSecondaryYellow = "#FFB822";
+export const BmSecondaryYellow = '#FFB822';
 
-export const BmSecondaryPurple = "#7A3FC6";
+export const BmSecondaryPurple = '#7A3FC6';
 
-export const BmSecondaryDarkGreen = "#04844B";
+export const BmSecondaryDarkGreen = '#04844B';
 
-export const BmSecondaryGreen8 = "rgba(4, 132, 75, 0.8)";
+export const BmSecondaryGreen8 = 'rgba(4, 132, 75, 0.8)';
 
-export const BmSecondaryRed8 = "rgba(246, 46, 72, 0.8)";
+export const BmSecondaryRed8 = 'rgba(246, 46, 72, 0.8)';
 
-export const BmSecondaryRed15 = "rgba(246, 46, 72, 0.15)";
+export const BmSecondaryRed15 = 'rgba(246, 46, 72, 0.15)';
 
-export const BmSecondaryGreen15 = "rgba(4, 132, 75, 0.15)";
+export const BmSecondaryGreen15 = 'rgba(4, 132, 75, 0.15)';
 
-export const BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)";
+export const BmSecondaryGold15 = 'rgba(243, 169, 41, 0.15)';
 
 // #33B1BA 12%
-export const BmSecondaryBlue12="rgba(51, 177, 186, 0.12)"; 
+export const BmSecondaryBlue12 = 'rgba(51, 177, 186, 0.12)';
 
 // Background Colors
-export const BmBgLightBlue = "#E1EAFC";
+export const BmBgLightBlue = '#E1EAFC';
 
-export const BmBgGreyBlue = "#F5F6FA";
+export const BmBgGreyBlue = '#F5F6FA';
 
-export const BmBgGrey45 = "rgba(0, 0, 0, 0.5)";
+export const BmBgGrey45 = 'rgba(0, 0, 0, 0.5)';
+
+export const BmBgGrey38 = 'rgba(0, 0, 0, 0.38)';
 
 // Grey Colors
-export const BmGrey600 = "#545454";
+export const BmGrey600 = '#545454';
 
-export const BmGrey500 = "#757575";
+export const BmGrey500 = '#757575';
 
-export const BmGrey400 = "#AFAFAF";
+export const BmGrey400 = '#AFAFAF';
 
-export const BmGrey200 = "#E2E2E2";
+export const BmGrey200 = '#E2E2E2';
 
-export const BmGrey100 = "#EEEEEE";
+export const BmGrey100 = '#EEEEEE';
 
-export const BmGrey50 = "#F6F6F6";
+export const BmGrey50 = '#F6F6F6';
 
 // Pictogram Colors
-export const BmPictogramBlue = "#CCEAEB";
+export const BmPictogramBlue = '#CCEAEB';
 
-export const BmPictogramGold = "#F8D8A2";
+export const BmPictogramGold = '#F8D8A2';

package/src/lib/components/dropdownButton.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { KeyboardArrowDown } from "@material-ui/icons";
-import styled from "styled-components";
-import { BmBtnIcon } from "../components/Buttons/buttonIconsOnly";
-import { BmButton } from "../components/Buttons/buttons";
+import React from 'react';
+import { KeyboardArrowDown } from '@material-ui/icons';
+import styled from 'styled-components';
+import { BmBtnIcon } from './Buttons/buttonIconsOnly';
+import { BmButton } from './Buttons/buttons';
 import {
   BmPrimaryWhite,
   BmPrimaryBlue,
@@ -10,7 +10,7 @@ import {
   BmSecondaryDarkGreen,
   BmGrey400,
   BmGrey100,
-} from "./colors";
+} from './colors';
 
 const Wrapper = styled.div`
   display: flex;
@@ -21,51 +21,48 @@ const Wrapper = styled.div`
 export const Drop = styled(BmBtnIcon)`
   background: ${({ variant, disabled, color }) => {
     if (!disabled) {
-      if (variant === "primary") return `${color ? color : BmPrimaryBlue}`
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      if (variant === "destructive") return `${BmSecondaryRed}`;
-      if (variant === "success") return `${BmSecondaryDarkGreen}`;
-      if (variant === "neutral") return `${BmPrimaryWhite}`;
-      return `${color ? color : BmPrimaryBlue}`
-    } else {
-      if (variant === "primary") return `${BmGrey100}`;
-      if (variant === "secondary") return "none";
-      if (variant === "tertiary") return "none";
-      return `${BmGrey100}`;
+      if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+      if (variant === 'secondary') return 'none';
+      if (variant === 'tertiary') return 'none';
+      if (variant === 'destructive') return `${BmSecondaryRed}`;
+      if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+      if (variant === 'neutral') return `${BmPrimaryWhite}`;
+      return `${color || BmPrimaryBlue}`;
     }
+    if (variant === 'primary') return `${BmGrey100}`;
+    if (variant === 'secondary') return 'none';
+    if (variant === 'tertiary') return 'none';
+    return `${BmGrey100}`;
   }};
   border: 0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
-        return `${color ? color : BmPrimaryBlue}`
-      } else {
-        if (variant === "primary") return `${BmGrey100}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
+        if (variant === 'primary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
+        return `${color || BmPrimaryBlue}`;
       }
+      if (variant === 'primary') return `${BmGrey100}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
     border-left:  0.071rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
-        if (variant === "primary") return `${BmPrimaryWhite}`;
-        if (variant === "secondary") return `${color ? color : BmPrimaryBlue}`
-        if (variant === "tertiary") return "transparent";
-        if (variant === "destructive") return `${BmSecondaryRed}`;
-        if (variant === "success") return `${BmSecondaryDarkGreen}`;
-        if (variant === "neutral") return `${BmGrey400}`;
+        if (variant === 'primary') return `${BmPrimaryWhite}`;
+        if (variant === 'secondary') return `${color || BmPrimaryBlue}`;
+        if (variant === 'tertiary') return 'transparent';
+        if (variant === 'destructive') return `${BmSecondaryRed}`;
+        if (variant === 'success') return `${BmSecondaryDarkGreen}`;
+        if (variant === 'neutral') return `${BmGrey400}`;
         return `${BmPrimaryWhite}`;
-      } else {
-        if (variant === "primary") return `${BmGrey400}`;
-        if (variant === "secondary") return `${BmGrey400}`;
-        if (variant === "tertiary") return "transparent";
       }
+      if (variant === 'primary') return `${BmGrey400}`;
+      if (variant === 'secondary') return `${BmGrey400}`;
+      if (variant === 'tertiary') return 'transparent';
     }};
   border-top-left-radius: 0.071rem; */}
   border-bottom-left-radius: 0.071rem; */}

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

@@ -0,0 +1,181 @@
+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 (
+    <BmChat>
+      <BmChat.Body>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          src={image}
+          fileName={<p>attachment.jpg</p>}
+        />
+         <BmChat.Details
+          state="outbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // 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>
+        </BmChat.Details>
+        <BmChat.Details
+          state="inbound"
+          session="bot"
+          displayTime={<p>12:00pm</p>}
+          status="sent"
+          // 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>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+          // src={azam}
+          file={<p>fildjfdlkfjlkfdjfldjfldsjfldsje.jpg</p>}
+        >
+          <p>Hekkoi</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>
+            Habari! Mimi ni msaidizi wako binafsi Azam TV. Ningependa
+            nikusaidie, lakini tafadhali anza kwa kuchagua kati ya haya
+            nikuhudumie (Mfano chagua namba 2 kubadili kifurushi au 5 kwa msaada
+            zaidi). 1. Angalia Salio 2. Badilisha Kifurishi 3. Tuma Ujumbe
+            Kuwasha Kisimbuzi 4. Huduma za mteja mpya 5. Nahitaji msaada (Huduma
+            kwa mteja) 6. Change language 0. Au ungependa kutuuliza swali
+            lingine?
+          </p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>{" "}
+        <BmChat.Details
+          state="outbound"
+          session="live"
+          displayTime={<p>10:00am</p>}
+          status="failed"
+        >
+          <p>Outbound</p>
+        </BmChat.Details>
+      </BmChat.Body>
+      <BmChat.Footer style={{ justifyContent: "flex-start" }}>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+        </div>
+        <div class="chat-footer">
+          <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+          <BmIcons icon={<AttachFile />} size="xlarge" />
+          <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+          <BmInput placeholder="Enter Message" style={{ flex: 1 }} />
+          <BmIcons icon={<SendIcon />} size="xlarge" />
+        </div>
+      </BmChat.Footer>
+    </BmChat>
+  );
+};
+
+export default Chat;

package/src/{InfoAccordion.js → lib/components/examples/InfoAccordion.js}

@@ -1,4 +1,4 @@
-/* eslint-disable react/prop-types */
+
 import React from "react";
 import { BmAccordion } from "./lib/components";
 import BmForm from "./lib/components/ChatComponents/FormAccordion/FormAccordion";

package/src/{App1.js → lib/components/examples/chatBodyExample.js}

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { GlobalStyle, BmChat } from "./lib/components";
+import { GlobalStyle, BmChat } from "..";
 import "./list.scss";
-import { ScrollbarWrapper } from "./lib/components/ScrollBar/scrollBar";
+import { ScrollbarWrapper } from "../ScrollBar/scrollBar";
 
 const App = () => {
   return (

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
-import { createGlobalStyle } from "styled-components";
-import { h1, h2, h3, h4, p, input, a } from "./text";
+import { createGlobalStyle } from 'styled-components';
+import { h1, h2, h3, h4, h5, h6, p, input, a } from './text';
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}
@@ -7,10 +7,9 @@ export const GlobalStyle = createGlobalStyle`
   h2 { ${h2} }
   h3 { ${h3} }
   h4 { ${h4} }
+  h5 { ${h5} }
+  h6 { ${h6} }
   p  { ${p} }
   input {${input}}
   a {${a}}
-  ::-webkit-scrollbar-thumb: {
-  background:red;
-  maxHeight: '10px'}
 `;