@qite/tide-booking-component 1.4.61 → 1.4.62

package/build/build-cjs/index.js

@@ -44909,6 +44909,90 @@ var Login = function (_a) {
   );
 };
 
+var ImageWithTextCard = function (_a) {
+  var noCard = _a.noCard,
+    fullImage = _a.fullImage,
+    reverse = _a.reverse,
+    imageSrc = _a.imageSrc,
+    imageAlt = _a.imageAlt,
+    title = _a.title,
+    activityTitle = _a.activityTitle,
+    activityText = _a.activityText,
+    detailsTitle = _a.detailsTitle,
+    detailsText = _a.detailsText,
+    buttonText = _a.buttonText,
+    onButtonClick = _a.onButtonClick;
+  var cardClassName = 'image-with-text__card';
+  if (noCard) {
+    cardClassName += ' image-with-text__card--no-card';
+  }
+  if (fullImage) {
+    cardClassName += ' image-with-text__card--full-image';
+  }
+  if (reverse) {
+    cardClassName += ' image-with-text__card--reverse';
+  }
+  return React__default['default'].createElement(
+    'div',
+    { className: cardClassName },
+    React__default['default'].createElement(
+      'div',
+      { className: 'image-with-text__card__image__wrapper' },
+      React__default['default'].createElement('img', { src: imageSrc, alt: imageAlt, className: 'image-with-text__card__image' })
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'image-with-text__card__content' },
+      React__default['default'].createElement('h3', { className: 'image-with-text__card__title' }, title),
+      React__default['default'].createElement(
+        'div',
+        { className: 'image-with-text__card__description' },
+        React__default['default'].createElement('h5', { className: 'image-with-text__card__description__title' }, activityTitle),
+        React__default['default'].createElement('p', { className: 'image-with-text__card__description__text' }, activityText)
+      ),
+      React__default['default'].createElement(
+        'div',
+        { className: 'image-with-text__card__description' },
+        React__default['default'].createElement('h5', { className: 'image-with-text__card__description__title' }, detailsTitle),
+        React__default['default'].createElement('p', { className: 'image-with-text__card__description__text' }, detailsText)
+      ),
+      React__default['default'].createElement(
+        'div',
+        { className: 'image-with-text__card__btn' },
+        React__default['default'].createElement('button', { type: 'button', className: 'cta cta--select', onClick: onButtonClick }, buttonText)
+      )
+    )
+  );
+};
+
+var ImageWithTextSection = function (_a) {
+  var title = _a.title,
+    hasBackground = _a.hasBackground,
+    cards = _a.cards;
+  var className = 'image-with-text '.concat(hasBackground ? 'image-with-text--background' : '');
+  return React__default['default'].createElement(
+    'div',
+    { className: className },
+    React__default['default'].createElement(
+      'div',
+      { className: 'image-with-text__container' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'image-with-text__title__row' },
+        React__default['default'].createElement('h2', { className: 'image-with-text__title' }, title)
+      ),
+      React__default['default'].createElement(
+        'div',
+        { className: 'image-with-text__card__wrapper' },
+        !lodash.isEmpty(cards) &&
+          cards.map(function (card, index) {
+            return React__default['default'].createElement(ImageWithTextCard, __assign({ key: index }, card));
+          })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48808,6 +48892,7 @@ exports.BookingWizard = BookingWizard;
 exports.Footer = Footer;
 exports.Header = Header;
 exports.ImageCardGrid = ImageCardGrid;
+exports.ImageWithTextSection = ImageWithTextSection;
 exports.Login = Login;
 exports.Navbar = Navbar;
 exports.QSM = QSM;

package/build/build-cjs/src/content/components/image-with-text.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-type Variant = 'image-with-text--no-card' | 'image-with-text--full-img';
+type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';
 interface ImageWithTextCardProps {
+  variant?: Variant;
   reverse?: boolean;
   imageSrc: string;
   imageAlt: string;

package/build/build-cjs/src/content/image-with-text-section/card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImageWithTextCardProps } from './types';
+declare const ImageWithTextCard: React.FC<ImageWithTextCardProps>;
+export default ImageWithTextCard;

package/build/build-cjs/src/content/image-with-text-section/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImageWithTextSectionProps } from './types';
+declare const ImageWithTextSection: React.FC<ImageWithTextSectionProps>;
+export default ImageWithTextSection;

package/build/build-cjs/src/content/image-with-text-section/types.d.ts

@@ -0,0 +1,19 @@
+export interface ImageWithTextSectionProps {
+  title: string;
+  hasBackground?: boolean;
+  cards: ImageWithTextCardProps[];
+}
+export interface ImageWithTextCardProps {
+  noCard?: boolean;
+  fullImage?: boolean;
+  reverse?: boolean;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  activityTitle: string;
+  activityText: string;
+  detailsTitle: string;
+  detailsText: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}

package/build/build-cjs/src/index.d.ts

@@ -7,12 +7,14 @@ import QSM from './qsm';
 import SearchResults from './search-results';
 import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
+import ImageWithTextSection from './content/image-with-text-section';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
 export * from './content/image-card-grid/types';
 export * from './content/login/types';
+export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login };
+export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection };

package/build/build-esm/index.js

@@ -44617,6 +44617,90 @@ var Login = function (_a) {
   );
 };
 
+var ImageWithTextCard = function (_a) {
+  var noCard = _a.noCard,
+    fullImage = _a.fullImage,
+    reverse = _a.reverse,
+    imageSrc = _a.imageSrc,
+    imageAlt = _a.imageAlt,
+    title = _a.title,
+    activityTitle = _a.activityTitle,
+    activityText = _a.activityText,
+    detailsTitle = _a.detailsTitle,
+    detailsText = _a.detailsText,
+    buttonText = _a.buttonText,
+    onButtonClick = _a.onButtonClick;
+  var cardClassName = 'image-with-text__card';
+  if (noCard) {
+    cardClassName += ' image-with-text__card--no-card';
+  }
+  if (fullImage) {
+    cardClassName += ' image-with-text__card--full-image';
+  }
+  if (reverse) {
+    cardClassName += ' image-with-text__card--reverse';
+  }
+  return React__default.createElement(
+    'div',
+    { className: cardClassName },
+    React__default.createElement(
+      'div',
+      { className: 'image-with-text__card__image__wrapper' },
+      React__default.createElement('img', { src: imageSrc, alt: imageAlt, className: 'image-with-text__card__image' })
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'image-with-text__card__content' },
+      React__default.createElement('h3', { className: 'image-with-text__card__title' }, title),
+      React__default.createElement(
+        'div',
+        { className: 'image-with-text__card__description' },
+        React__default.createElement('h5', { className: 'image-with-text__card__description__title' }, activityTitle),
+        React__default.createElement('p', { className: 'image-with-text__card__description__text' }, activityText)
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'image-with-text__card__description' },
+        React__default.createElement('h5', { className: 'image-with-text__card__description__title' }, detailsTitle),
+        React__default.createElement('p', { className: 'image-with-text__card__description__text' }, detailsText)
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'image-with-text__card__btn' },
+        React__default.createElement('button', { type: 'button', className: 'cta cta--select', onClick: onButtonClick }, buttonText)
+      )
+    )
+  );
+};
+
+var ImageWithTextSection = function (_a) {
+  var title = _a.title,
+    hasBackground = _a.hasBackground,
+    cards = _a.cards;
+  var className = 'image-with-text '.concat(hasBackground ? 'image-with-text--background' : '');
+  return React__default.createElement(
+    'div',
+    { className: className },
+    React__default.createElement(
+      'div',
+      { className: 'image-with-text__container' },
+      React__default.createElement(
+        'div',
+        { className: 'image-with-text__title__row' },
+        React__default.createElement('h2', { className: 'image-with-text__title' }, title)
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'image-with-text__card__wrapper' },
+        !isEmpty(cards) &&
+          cards.map(function (card, index) {
+            return React__default.createElement(ImageWithTextCard, __assign({ key: index }, card));
+          })
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48511,4 +48595,4 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
   [signalR$1]
 );
 
-export { BookingProduct, BookingWizard, DepartureRange, Footer, Header, ImageCardGrid, Login, Navbar, QSM, SearchResults };
+export { BookingProduct, BookingWizard, DepartureRange, Footer, Header, ImageCardGrid, ImageWithTextSection, Login, Navbar, QSM, SearchResults };

package/build/build-esm/src/content/components/image-with-text.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-type Variant = 'image-with-text--no-card' | 'image-with-text--full-img';
+type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';
 interface ImageWithTextCardProps {
+  variant?: Variant;
   reverse?: boolean;
   imageSrc: string;
   imageAlt: string;

package/build/build-esm/src/content/image-with-text-section/card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImageWithTextCardProps } from './types';
+declare const ImageWithTextCard: React.FC<ImageWithTextCardProps>;
+export default ImageWithTextCard;

package/build/build-esm/src/content/image-with-text-section/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ImageWithTextSectionProps } from './types';
+declare const ImageWithTextSection: React.FC<ImageWithTextSectionProps>;
+export default ImageWithTextSection;

package/build/build-esm/src/content/image-with-text-section/types.d.ts

@@ -0,0 +1,19 @@
+export interface ImageWithTextSectionProps {
+  title: string;
+  hasBackground?: boolean;
+  cards: ImageWithTextCardProps[];
+}
+export interface ImageWithTextCardProps {
+  noCard?: boolean;
+  fullImage?: boolean;
+  reverse?: boolean;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  activityTitle: string;
+  activityText: string;
+  detailsTitle: string;
+  detailsText: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}

package/build/build-esm/src/index.d.ts

@@ -7,12 +7,14 @@ import QSM from './qsm';
 import SearchResults from './search-results';
 import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
+import ImageWithTextSection from './content/image-with-text-section';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
 export * from './content/image-card-grid/types';
 export * from './content/login/types';
+export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login };
+export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.61",
+  "version": "1.4.62",
   "description": "React Booking wizard & Booking product component for Tide",
   "main": "build/build-cjs/index.js",
   "types": "build/build-cjs/src/index.d.ts",

package/src/content/components/image-with-text.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-type Variant = 'image-with-text--no-card' | 'image-with-text--full-img';
+type Variant = 'image-with-text__card--no-card' | 'image-with-text__card--full-img';
 
 interface ImageWithTextCardProps {
+  variant?: Variant;
   reverse?: boolean;
   imageSrc: string;
   imageAlt: string;
@@ -16,6 +17,7 @@ interface ImageWithTextCardProps {
 }
 
 const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
+  variant,
   reverse,
   imageSrc,
   imageAlt,
@@ -27,7 +29,7 @@ const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
   buttonText,
   onButtonClick
 }) => (
-  <div className={`image-with-text__card ${reverse ? 'image-with-text__card--reverse' : ''}`}>
+  <div className={`image-with-text__card ${reverse ? 'image-with-text__card--reverse' : ''} ${variant ? variant.toString() : ''}`}>
     <div className="image-with-text__card__image__wrapper">
       <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
     </div>
@@ -62,8 +64,8 @@ interface ImageWithTextSectionProps {
 }
 
 export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ variant, sectionTitle, hasBackground = true, cards }) => {
-  const className = variant ? ['image-with-text', hasBackground && 'image-with-text--background', variant].filter(Boolean).join(' ') : 'image-with-text';
-
+  const className = ['image-with-text', hasBackground && 'image-with-text--background'].filter(Boolean).join(' ');
+  console.log('variant', variant);
   return (
     <div className={className}>
       <div className="image-with-text__container">
@@ -72,8 +74,8 @@ export const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ vari
         </div>
 
         <div className="image-with-text__card__wrapper">
-          <ImageWithTextCard {...cards[0]} />
-          <ImageWithTextCard {...cards[1]} reverse />
+          <ImageWithTextCard {...cards[0]} variant={variant} />
+          <ImageWithTextCard {...cards[1]} reverse variant={variant} />
         </div>
       </div>
     </div>

package/src/content/image-with-text-section/card.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ImageWithTextCardProps } from './types';
+
+const ImageWithTextCard: React.FC<ImageWithTextCardProps> = ({
+  noCard,
+  fullImage,
+  reverse,
+  imageSrc,
+  imageAlt,
+  title,
+  activityTitle,
+  activityText,
+  detailsTitle,
+  detailsText,
+  buttonText,
+  onButtonClick
+}) => {
+  let cardClassName = 'image-with-text__card';
+  if (noCard) {
+    cardClassName += ' image-with-text__card--no-card';
+  }
+  if (fullImage) {
+    cardClassName += ' image-with-text__card--full-image';
+  }
+  if (reverse) {
+    cardClassName += ' image-with-text__card--reverse';
+  }
+
+  return (
+    <div className={cardClassName}>
+      <div className="image-with-text__card__image__wrapper">
+        <img src={imageSrc} alt={imageAlt} className="image-with-text__card__image" />
+      </div>
+
+      <div className="image-with-text__card__content">
+        <h3 className="image-with-text__card__title">{title}</h3>
+
+        <div className="image-with-text__card__description">
+          <h5 className="image-with-text__card__description__title">{activityTitle}</h5>
+          <p className="image-with-text__card__description__text">{activityText}</p>
+        </div>
+
+        <div className="image-with-text__card__description">
+          <h5 className="image-with-text__card__description__title">{detailsTitle}</h5>
+          <p className="image-with-text__card__description__text">{detailsText}</p>
+        </div>
+
+        <div className="image-with-text__card__btn">
+          <button type="button" className="cta cta--select" onClick={onButtonClick}>
+            {buttonText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageWithTextCard;

package/src/content/image-with-text-section/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImageWithTextSectionProps } from './types';
+import ImageWithTextCard from './card';
+import { isEmpty } from 'lodash';
+
+const ImageWithTextSection: React.FC<ImageWithTextSectionProps> = ({ title, hasBackground, cards }) => {
+  const className = `image-with-text ${hasBackground ? 'image-with-text--background' : ''}`;
+
+  return (
+    <div className={className}>
+      <div className="image-with-text__container">
+        <div className="image-with-text__title__row">
+          <h2 className="image-with-text__title">{title}</h2>
+        </div>
+
+        <div className="image-with-text__card__wrapper">{!isEmpty(cards) && cards.map((card, index) => <ImageWithTextCard key={index} {...card} />)}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ImageWithTextSection;

package/src/content/image-with-text-section/types.ts

@@ -0,0 +1,20 @@
+export interface ImageWithTextSectionProps {
+  title: string;
+  hasBackground?: boolean;
+  cards: ImageWithTextCardProps[];
+}
+
+export interface ImageWithTextCardProps {
+  noCard?: boolean;
+  fullImage?: boolean;
+  reverse?: boolean;
+  imageSrc: string;
+  imageAlt: string;
+  title: string;
+  activityTitle: string;
+  activityText: string;
+  detailsTitle: string;
+  detailsText: string;
+  buttonText: string;
+  onButtonClick?: () => void;
+}

package/src/index.ts

@@ -7,14 +7,16 @@ import QSM from './qsm';
 import SearchResults from './search-results';
 import ImageCardGrid from './content/image-card-grid';
 import Login from './content/login';
+import ImageWithTextSection from './content/image-with-text-section';
 
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
 export * from './content/image-card-grid/types';
 export * from './content/login/types';
+export * from './content/image-with-text-section/types';
 export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
 
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login };
+export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection };

package/styles/components/_image-with-text.scss

@@ -108,6 +108,7 @@
 
     &__description {
       margin-bottom: 15px;
+
       &__title {
         color: var(--tide-booking-image-with-text-card-description-title-color);
         font-family: var(--tide-booking-image-with-text-card-description-title-font-family);
@@ -141,30 +142,14 @@
         }
       }
     }
-  }
-
-  &--no-card {
-    .image-with-text__card__content {
-      @include mixins.media-md {
-        padding: 50px 30px;
-        padding-left: 0px;
-      }
-    }
-
-    .image-with-text__card__image {
-      &__wrapper {
-        border-radius: 16px;
-        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
-      }
-    }
 
-    .image-with-text__card {
+    &--no-card {
       padding: 0px;
       box-shadow: none;
       border: none;
       overflow: visible;
 
-      &--reverse {
+      &.image-with-text__card--reverse {
         .image-with-text__card__content {
           @include mixins.media-md {
             padding: 50px 30px;
@@ -172,31 +157,27 @@
           }
         }
       }
-    }
-  }
-
-  &--full-img {
-    .image-with-text__card__content {
-      padding: 20px;
-      padding-top: 0px;
 
-      @include mixins.media-md {
-        padding: 50px 30px;
-        padding-left: 0px;
+      .image-with-text__card__content {
+        @include mixins.media-md {
+          padding: 50px 30px;
+          padding-left: 0px;
+        }
       }
-    }
 
-    .image-with-text__card__image {
-      &__wrapper {
-        border-radius: 0px;
+      .image-with-text__card__image {
+        &__wrapper {
+          border-radius: 16px;
+          box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+        }
       }
     }
 
-    .image-with-text__card {
+    &--full-img {
       padding: 0px;
       border: none;
 
-      &--reverse {
+      &.image-with-text__card--reverse {
         .image-with-text__card__content {
           @include mixins.media-md {
             padding: 50px 30px;
@@ -204,6 +185,22 @@
           }
         }
       }
+
+      .image-with-text__card__content {
+        padding: 20px;
+        padding-top: 0px;
+
+        @include mixins.media-md {
+          padding: 50px 30px;
+          padding-left: 0px;
+        }
+      }
+
+      .image-with-text__card__image {
+        &__wrapper {
+          border-radius: 0px;
+        }
+      }
     }
   }
 }