beem-component 2.1.5 → 2.1.6

package/dist/components/Alert/Alert.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const AlertWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Alert__AlertWrapper"
+})(["border:1px solid ", ";background-color:", ";border-radius:0.5rem;padding:0.75rem;@media (min-width:640px){padding:1rem;}"], _ref => {
+  let {
+    themeColor
+  } = _ref;
+  return hexToRgba(themeColor, 0.2);
+}, _ref2 => {
+  let {
+    themeColor
+  } = _ref2;
+  return hexToRgba(themeColor, 0.05);
+});
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "Alert__Content"
+})(["display:flex;align-items:flex-start;gap:0.75rem;"]);
+const IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "Alert__IconContainer"
+})(["background-color:", ";border-radius:9999px;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-top:0.125rem;@media (min-width:640px){width:2.1rem;height:2.1rem;}svg{width:1rem;height:1rem;color:", ";@media (min-width:640px){width:1.25rem;height:1.25rem;}}"], _ref3 => {
+  let {
+    themeColor
+  } = _ref3;
+  return hexToRgba(themeColor, 0.1);
+}, _ref4 => {
+  let {
+    themeColor
+  } = _ref4;
+  return themeColor;
+});
+const TextContent = _styledComponents.default.div.withConfig({
+  displayName: "Alert__TextContent"
+})(["flex:1;"]);
+const Title = _styledComponents.default.h3.withConfig({
+  displayName: "Alert__Title"
+})(["font-weight:500;color:", ";font-size:0.875rem;margin-bottom:0.25rem;"], _ref5 => {
+  let {
+    themeColor
+  } = _ref5;
+  return themeColor;
+});
+const Description = _styledComponents.default.p.withConfig({
+  displayName: "Alert__Description"
+})(["color:#6b7280;font-size:0.75rem;@media (min-width:640px){font-size:0.875rem;}"]);
+const AlertBox = _ref6 => {
+  let {
+    icon: Icon,
+    themeColor = '#EF4444',
+    title,
+    description
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(AlertWrapper, {
+    themeColor: themeColor
+  }, /*#__PURE__*/_react.default.createElement(Content, null, Icon && /*#__PURE__*/_react.default.createElement(IconContainer, {
+    themeColor: themeColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(TextContent, null, /*#__PURE__*/_react.default.createElement(Title, {
+    themeColor: themeColor
+  }, title), /*#__PURE__*/_react.default.createElement(Description, null, description))));
+};
+var _default = exports.default = AlertBox;

package/dist/components/Alert/Alert.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
+var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
+var _Alert = _interopRequireDefault(require("./Alert"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const iconOptions = {
+  AccessTimeIcon: _AccessTime.default,
+  PersonIcon: _Person.default,
+  CalendarTodayOutlinedIcon: _CalendarTodayOutlined.default,
+  None: null
+};
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 500,
+      margin: '2rem auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Alert.default, args));
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  icon: _AccessTime.default,
+  themeColor: '#EF4444',
+  title: 'Submission Failed',
+  description: 'There was an issue processing your request. Please try again later.'
+};
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions)
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions
+  },
+  themeColor: {
+    control: 'color'
+  },
+  title: {
+    control: 'text'
+  },
+  description: {
+    control: 'text'
+  }
+};
+var _default = exports.default = {
+  title: 'Components/AlertBox',
+  component: _Alert.default,
+  argTypes: Default.argTypes
+};
+const Example = () => {
+  return /*#__PURE__*/_react.default.createElement(_Alert.default, {
+    icon: _AccessTime.default,
+    themeColor: "#DC2626",
+    title: "Payment Error",
+    description: "We couldn't process your payment. Please try again later or contact support."
+  });
+};
+exports.Example = Example;

package/dist/components/BmCustomCardTitle/CustomCardTitle.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.Example = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
 var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
@@ -21,29 +21,12 @@ const iconOptions = {
   Heart: _Favorite.default
 };
 const Template = args => {
-  var _Object$entries$find;
-  const iconName = (_Object$entries$find = Object.entries(iconOptions).find(_ref => {
-    let [, comp] = _ref;
-    return comp === args.icon;
-  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: 500,
       margin: '2rem auto'
     }
-  }, /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, args), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      marginTop: '2rem',
-      fontSize: '0.875rem'
-    }
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Example usage:"), /*#__PURE__*/_react.default.createElement("pre", {
-    style: {
-      background: '#f5f5f5',
-      padding: '1rem',
-      borderRadius: 8,
-      overflowX: 'auto'
-    }
-  }, "<BmCustomCardTitle\n  icon={".concat(iconName, "}\n  themeColor=\"").concat(args.themeColor, "\"\n  title=\"").concat(args.title, "\"\n  description=\"").concat(args.description, "\"\n  variant=\"").concat(args.variant, "\"\n  withStripe={").concat(args.withStripe, "}\n/>"))));
+  }, /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, args));
 };
 const Default = exports.Default = Template.bind({});
 Default.args = {
@@ -88,4 +71,15 @@ var _default = exports.default = {
   title: 'Components/BmCustomCardTitle',
   component: _CustomCardTitle.default,
   argTypes: Default.argTypes
-};
+};
+const Example = () => {
+  /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
+    icon: _CalendarTodayOutlined.default,
+    themeColor: "#33B1BA",
+    title: "Book Your Medical Appointment",
+    description: "Schedule a 30-minute consultation with our healthcare specialists",
+    variant: "booking",
+    withStripe: true
+  });
+};
+exports.Example = Example;

package/dist/components/InfoPanel/InfoPanel.js

@@ -30,7 +30,7 @@ const SectionSummaryContainer = _styledComponents.default.div.withConfig({
 })(["display:flex;align-items:center;margin-bottom:1rem;@media (min-width:45.7143rem){margin-bottom:1.25rem;}"]);
 const IconBox = _styledComponents.default.div.withConfig({
   displayName: "InfoPanel__IconBox"
-})(["display:flex;align-items:center;justify-content:center;text-align:center;margin-right:0.5rem;padding:0.5rem;border-radius:714.2143rem;background-color:", ";svg{height:1.2rem;width:1.2rem;color:", ";@media (min-width:45.7143rem){height:1.5rem;width:1.5rem;}}"], _ref => {
+})(["display:flex;align-items:center;justify-content:center;text-align:center;margin-right:0.5rem;padding:0.5rem;border-radius:714.2143rem;background-color:", ";svg{height:1.2rem;width:1.2rem;color:", ";@media (min-width:45.7143rem){height:1.4rem;width:1.4rem;}}"], _ref => {
   let {
     iconBackgroundColor,
     iconColor

package/package.json

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

package/src/App.js

@@ -37,6 +37,7 @@ import {
   BmSelector,
   BmCustomCardTitle,
 } from './lib/components';
+import AlertBox from './lib/components/Alert/Alert';
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -1011,6 +1012,20 @@ const Chat = () => {
       <GlobalStyle />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
         <div>
+          <BmInfoPanel.SectionSummary
+            iconColor="#33B1BA"
+            textColor="#fcba03"
+            icon={CalendarTodayOutlinedIcon}
+            title={formData.departmentName}
+            subtitle="Department"
+            // iconBackgroundColor
+          />
+          <AlertBox
+            icon={AccessTimeIcon}
+            themeColor="#DC2626"
+            title="Payment Error"
+            description="We couldn't process your payment. Please try again later or contact support."
+          />
           <BmCustomCardTitle
             icon={CalendarTodayOutlinedIcon}
             themeColor="#33B1BA"

package/src/lib/components/Alert/Alert.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const hexToRgba = (hex, opacity = 0.6) => {
+  try {
+    const normalizedHex = hex?.replace('#', '');
+    if (
+      !normalizedHex ||
+      normalizedHex.length !== 6 ||
+      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
+    ) {
+      throw new Error('Invalid hex');
+    }
+
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  } catch (e) {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+};
+
+const AlertWrapper = styled.div`
+  border: 1px solid ${({ themeColor }) => hexToRgba(themeColor, 0.2)};
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.05)};
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+
+  @media (min-width: 640px) {
+    padding: 1rem;
+  }
+`;
+
+const Content = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+`;
+
+const IconContainer = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin-top: 0.125rem;
+
+  @media (min-width: 640px) {
+    width: 2.1rem;
+    height: 2.1rem;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    color: ${({ themeColor }) => themeColor};
+
+    @media (min-width: 640px) {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+`;
+
+const TextContent = styled.div`
+  flex: 1;
+`;
+
+const Title = styled.h3`
+  font-weight: 500;
+  color: ${({ themeColor }) => themeColor};
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+`;
+
+const Description = styled.p`
+  color: #6b7280;
+  font-size: 0.75rem;
+
+  @media (min-width: 640px) {
+    font-size: 0.875rem;
+  }
+`;
+
+const AlertBox = ({
+  icon: Icon,
+  themeColor = '#EF4444',
+  title,
+  description,
+}) => {
+  return (
+    <AlertWrapper themeColor={themeColor}>
+      <Content>
+        {Icon && (
+          <IconContainer themeColor={themeColor}>
+            <Icon />
+          </IconContainer>
+        )}
+        <TextContent>
+          <Title themeColor={themeColor}>{title}</Title>
+          <Description>{description}</Description>
+        </TextContent>
+      </Content>
+    </AlertWrapper>
+  );
+};
+
+export default AlertBox;

package/src/lib/components/Alert/Alert.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import PersonIcon from '@mui/icons-material/Person';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import AlertBox from './Alert';
+
+const iconOptions = {
+  AccessTimeIcon,
+  PersonIcon,
+  CalendarTodayOutlinedIcon,
+  None: null,
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
+      <AlertBox {...args} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: AccessTimeIcon,
+  themeColor: '#EF4444',
+  title: 'Submission Failed',
+  description:
+    'There was an issue processing your request. Please try again later.',
+};
+
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions),
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions,
+  },
+  themeColor: {
+    control: 'color',
+  },
+  title: {
+    control: 'text',
+  },
+  description: {
+    control: 'text',
+  },
+};
+
+export default {
+  title: 'Components/AlertBox',
+  component: AlertBox,
+  argTypes: Default.argTypes,
+};
+
+export const Example = () => {
+  return (
+    <AlertBox
+      icon={AccessTimeIcon}
+      themeColor="#DC2626"
+      title="Payment Error"
+      description="We couldn't process your payment. Please try again later or contact support."
+    />
+  );
+};

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.stories.jsx

@@ -16,33 +16,9 @@ const iconOptions = {
 };
 
 const Template = (args) => {
-  const iconName = Object.entries(iconOptions).find(
-    ([, comp]) => comp === args.icon
-  )?.[0];
-
   return (
     <div style={{ maxWidth: 500, margin: '2rem auto' }}>
       <BmCustomCardTitle {...args} />
-      <div style={{ marginTop: '2rem', fontSize: '0.875rem' }}>
-        <strong>Example usage:</strong>
-        <pre
-          style={{
-            background: '#f5f5f5',
-            padding: '1rem',
-            borderRadius: 8,
-            overflowX: 'auto',
-          }}
-        >
-          {`<BmCustomCardTitle
-  icon={${iconName}}
-  themeColor="${args.themeColor}"
-  title="${args.title}"
-  description="${args.description}"
-  variant="${args.variant}"
-  withStripe={${args.withStripe}}
-/>`}
-        </pre>
-      </div>
     </div>
   );
 };
@@ -94,3 +70,14 @@ export default {
   component: BmCustomCardTitle,
   argTypes: Default.argTypes,
 };
+
+export const Example = () => {
+  <BmCustomCardTitle
+    icon={CalendarTodayOutlinedIcon}
+    themeColor="#33B1BA"
+    title="Book Your Medical Appointment"
+    description="Schedule a 30-minute consultation with our healthcare specialists"
+    variant="booking"
+    withStripe
+  />;
+};

package/src/lib/components/InfoPanel/InfoPanel.js

@@ -53,8 +53,8 @@ const IconBox = styled.div`
     color: ${({ iconColor }) => iconColor || '#00000'};
 
     @media (min-width: 45.7143rem) {
-      height: 1.5rem;
-      width: 1.5rem;
+      height: 1.4rem;
+      width: 1.4rem;
     }
   }
 `;