beem-component 2.1.10 → 2.1.11

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -147,6 +147,9 @@ const Description = _styledComponents.default.p.withConfig({
   } = _ref20;
   return variant === 'confirmation' ? '0.875rem' : '1rem';
 });
+const ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__ImageWrapper"
+})(["width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:0.75rem;margin-top:1rem;img{width:100%;height:100%;object-fit:cover;display:block;}"]);
 const BmCustomCardTitle = _ref21 => {
   let {
     icon: Icon,
@@ -154,7 +157,8 @@ const BmCustomCardTitle = _ref21 => {
     title,
     description,
     variant = 'booking',
-    withStripe = false
+    withStripe = false,
+    imageSrc
   } = _ref21;
   const content = /*#__PURE__*/_react.default.createElement(CardContainer, {
     variant: variant
@@ -165,7 +169,10 @@ const BmCustomCardTitle = _ref21 => {
     variant: variant
   }, title), description && /*#__PURE__*/_react.default.createElement(Description, {
     variant: variant
-  }, description));
+  }, description), imageSrc && /*#__PURE__*/_react.default.createElement(ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: imageSrc,
+    alt: title || 'Card image'
+  })));
   return withStripe ? /*#__PURE__*/_react.default.createElement(BackgroundStripe, {
     themeColor: themeColor,
     variant: variant

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

@@ -20,6 +20,7 @@ const iconOptions = {
   Clock: _AccessTime.default,
   Heart: _Favorite.default
 };
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = args => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -35,7 +36,8 @@ Default.args = {
   title: 'Book Your Medical Appointment',
   description: 'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
-  withStripe: true
+  withStripe: true,
+  imageSrc: imgs
 };
 Default.argTypes = {
   icon: {
@@ -65,6 +67,10 @@ Default.argTypes = {
     control: {
       type: 'boolean'
     }
+  },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card'
   }
 };
 var _default = exports.default = {
@@ -73,13 +79,14 @@ var _default = exports.default = {
   argTypes: Default.argTypes
 };
 const Example = () => {
-  /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
+  return /*#__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
+    withStripe: true,
+    imageSrc: imgs
   });
 };
 exports.Example = Example;

package/package.json

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

package/src/App.js

@@ -1013,6 +1013,7 @@ const Chat = () => {
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
   console.log({ selectedSlotId });
+  const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
   return (
     <>
       <GlobalStyle />
@@ -1098,6 +1099,7 @@ const Chat = () => {
             description="Schedule a 30-minute consultation with our healThcare specialists"
             variant="booking"
             withStripe
+            imageSrc={imgs}
           />
         </div>
         <div>

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.js

@@ -110,6 +110,20 @@ const Description = styled.p`
   }
 `;
 
+const ImageWrapper = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin-top: 1rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
 const BmCustomCardTitle = ({
   icon: Icon,
   themeColor = '#33B1BA',
@@ -117,6 +131,7 @@ const BmCustomCardTitle = ({
   description,
   variant = 'booking',
   withStripe = false,
+  imageSrc,
 }) => {
   const content = (
     <CardContainer variant={variant}>
@@ -127,6 +142,11 @@ const BmCustomCardTitle = ({
       {description && (
         <Description variant={variant}>{description}</Description>
       )}
+      {imageSrc && (
+        <ImageWrapper>
+          <img src={imageSrc} alt={title || 'Card image'} />
+        </ImageWrapper>
+      )}
     </CardContainer>
   );
 

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

@@ -15,6 +15,7 @@ const iconOptions = {
   Heart: FavoriteIcon,
 };
 
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = (args) => {
   return (
     <div style={{ maxWidth: 500, margin: '2rem auto' }}>
@@ -32,6 +33,7 @@ Default.args = {
     'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
   withStripe: true,
+  imageSrc: imgs,
 };
 
 Default.argTypes = {
@@ -63,6 +65,10 @@ Default.argTypes = {
       type: 'boolean',
     },
   },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card',
+  },
 };
 
 export default {
@@ -72,12 +78,15 @@ export default {
 };
 
 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
-  />;
+  return (
+    <BmCustomCardTitle
+      icon={CalendarTodayOutlinedIcon}
+      themeColor="#33B1BA"
+      title="Book Your Medical Appointment"
+      description="Schedule a 30-minute consultation with our healthcare specialists"
+      variant="booking"
+      withStripe
+      imageSrc={imgs}
+    />
+  );
 };