beem-component 2.1.8 → 2.1.29

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

@@ -1,142 +0,0 @@
-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 BackgroundStripe = styled.div`
-  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
-  padding-top: ${({ variant }) =>
-    variant === 'confirmation' ? '1rem' : '1.5rem'};
-  padding-bottom: ${({ variant }) =>
-    variant === 'confirmation' ? '1rem' : '2rem'};
-  padding-left: 1rem;
-  padding-right: 1rem;
-
-  @media (min-width: 640px) {
-    padding-top: ${({ variant }) =>
-      variant === 'confirmation' ? '1.5rem' : '2rem'};
-    padding-bottom: ${({ variant }) =>
-      variant === 'confirmation' ? '1.5rem' : '2.5rem'};
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-`;
-
-const CardContainer = styled.div`
-  background-color: ${hexToRgba('#ffffff', 0.7)};
-  padding: 1rem;
-  border-radius: 0.75rem;
-
-  @media (min-width: 640px) {
-    padding: 1.5rem;
-  }
-`;
-
-const IconWrapper = styled.div`
-  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
-  height: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
-  width: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto
-    ${({ variant }) => (variant === 'confirmation' ? '0.75rem' : '1rem')};
-
-  @media (min-width: 640px) {
-    height: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
-    width: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
-    margin-bottom: ${({ variant }) =>
-      variant === 'confirmation' ? '1rem' : '1.25rem'};
-  }
-
-  svg {
-    height: ${({ variant }) =>
-      variant === 'confirmation' ? '1.75rem' : '2rem'};
-    width: ${({ variant }) =>
-      variant === 'confirmation' ? '1.75rem' : '2rem'};
-    color: ${({ themeColor }) => themeColor};
-
-    @media (min-width: 640px) {
-      height: ${({ variant }) =>
-        variant === 'confirmation' ? '2rem' : '2.5rem'};
-      width: ${({ variant }) =>
-        variant === 'confirmation' ? '2rem' : '2.5rem'};
-    }
-  }
-`;
-
-const Title = styled.h2`
-  text-align: center;
-  font-size: 1.125rem;
-  color: ${({ themeColor }) => themeColor};
-  margin-bottom: ${({ variant }) =>
-    variant === 'confirmation' ? '0.25rem' : '0.5rem'};
-
-  @media (min-width: 640px) {
-    font-size: 1.25rem;
-    margin-bottom: ${({ variant }) =>
-      variant === 'confirmation' ? '0.5rem' : '0.75rem'};
-  }
-`;
-
-const Description = styled.p`
-  text-align: center;
-  font-size: ${({ variant }) =>
-    variant === 'confirmation' ? '0.75rem' : '0.875rem'};
-  color: #6b7280;
-
-  @media (min-width: 640px) {
-    font-size: ${({ variant }) =>
-      variant === 'confirmation' ? '0.875rem' : '1rem'};
-  }
-`;
-
-const BmCustomCardTitle = ({
-  icon: Icon,
-  themeColor = '#33B1BA',
-  title,
-  description,
-  variant = 'booking',
-  withStripe = false,
-}) => {
-  const content = (
-    <CardContainer variant={variant}>
-      <IconWrapper themeColor={themeColor} variant={variant}>
-        {Icon && <Icon />}
-      </IconWrapper>
-      {title && <Title variant={variant}>{title}</Title>}
-      {description && (
-        <Description variant={variant}>{description}</Description>
-      )}
-    </CardContainer>
-  );
-
-  return withStripe ? (
-    <BackgroundStripe themeColor={themeColor} variant={variant}>
-      {content}
-    </BackgroundStripe>
-  ) : (
-    content
-  );
-};
-
-export default BmCustomCardTitle;

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

@@ -1,83 +0,0 @@
-import React from 'react';
-
-// MUI icons
-import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import CheckIcon from '@mui/icons-material/Check';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import BmCustomCardTitle from './CustomCardTitle';
-
-// Icon options mapped by name
-const iconOptions = {
-  Calendar: CalendarTodayOutlinedIcon,
-  Check: CheckIcon,
-  Clock: AccessTimeIcon,
-  Heart: FavoriteIcon,
-};
-
-const Template = (args) => {
-  return (
-    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
-      <BmCustomCardTitle {...args} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  icon: CalendarTodayOutlinedIcon,
-  themeColor: '#33B1BA',
-  title: 'Book Your Medical Appointment',
-  description:
-    'Schedule a 30-minute consultation with our healthcare specialists',
-  variant: 'booking',
-  withStripe: true,
-};
-
-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',
-  },
-  variant: {
-    control: {
-      type: 'radio',
-    },
-    options: ['booking', 'confirmation'],
-  },
-  withStripe: {
-    control: {
-      type: 'boolean',
-    },
-  },
-};
-
-export default {
-  title: 'Components/BmCustomCardTitle',
-  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
-  />;
-};