@qite/tide-booking-component 1.4.65 → 1.4.67

package/build/build-cjs/index.js

@@ -45185,6 +45185,126 @@ var PhotoGallery = function (_a) {
   );
 };
 
+var Breadcrumbs = function (_a) {
+  var items = _a.items,
+    _b = _a.noHeader,
+    noHeader = _b === void 0 ? false : _b;
+  var lastIndex = items.length - 1;
+  return React__default['default'].createElement(
+    'nav',
+    { className: 'breadcrumb'.concat(noHeader ? ' breadcrumb--no-header' : ''), 'aria-label': 'Breadcrumb' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'breadcrumb__container' },
+      React__default['default'].createElement(
+        'ol',
+        { className: 'breadcrumb__list' },
+        items.map(function (item, idx) {
+          var _a;
+          var isCurrent = (_a = item.isCurrent) !== null && _a !== void 0 ? _a : idx === lastIndex;
+          var content = React__default['default'].createElement(
+            'span',
+            { className: 'breadcrumb__content' },
+            item.icon && React__default['default'].createElement('span', { className: 'breadcrumb__icon', 'aria-hidden': 'true' }, item.icon),
+            item.label && React__default['default'].createElement('span', { className: 'breadcrumb__label', title: item.label }, item.label)
+          );
+          return React__default['default'].createElement(
+            'li',
+            { key: idx, className: 'breadcrumb__item' },
+            idx > 0 && React__default['default'].createElement('span', { className: 'breadcrumb__separator', 'aria-hidden': 'true' }, '/'),
+            isCurrent || !item.href
+              ? React__default['default'].createElement('span', { className: 'breadcrumb__current', 'aria-current': isCurrent ? 'page' : undefined }, content)
+              : React__default['default'].createElement('a', { className: 'breadcrumb__link', href: item.href, onClick: item.onClick }, content)
+          );
+        })
+      )
+    )
+  );
+};
+
+function Accordion(_a) {
+  var summary = _a.summary,
+    children = _a.children,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    _c = _a.className,
+    className = _c === void 0 ? '' : _c;
+  var _d = React__default['default'].useState(defaultOpen),
+    open = _d[0],
+    setOpen = _d[1];
+  return React__default['default'].createElement(
+    'div',
+    { className: ['accordion', open && 'accordion--open', className].filter(Boolean).join(' ') },
+    React__default['default'].createElement(
+      'button',
+      {
+        className: 'accordion__trigger',
+        type: 'button',
+        'aria-expanded': open,
+        onClick: function () {
+          return setOpen(function (v) {
+            return !v;
+          });
+        }
+      },
+      React__default['default'].createElement('span', null, summary),
+      React__default['default'].createElement(
+        'span',
+        { className: 'accordion__icon', 'aria-hidden': true },
+        React__default['default'].createElement(Icon$3, { name: 'ui-chevron', width: 20, height: 20 })
+      )
+    ),
+    React__default['default'].createElement(
+      'div',
+      { className: 'accordion__panel' },
+      React__default['default'].createElement(
+        'div',
+        { className: 'accordion__panelInner' },
+        React__default['default'].createElement('div', { className: 'accordion__content' }, children)
+      )
+    )
+  );
+}
+
+var FAQ = function (_a) {
+  var items = _a.items,
+    _b = _a.title,
+    title = _b === void 0 ? 'Frequently Asked Questions' : _b;
+  if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    return React__default['default'].createElement(
+      'section',
+      { className: 'faq' },
+      React__default['default'].createElement('h2', { className: 'faq__title' }, title),
+      React__default['default'].createElement('p', { className: 'faq__empty' }, 'No FAQs available.')
+    );
+  }
+  return React__default['default'].createElement(
+    'div',
+    { className: 'content' },
+    React__default['default'].createElement(
+      'div',
+      { className: 'content__container content__container--small' },
+      React__default['default'].createElement(
+        'section',
+        { className: 'faq' },
+        React__default['default'].createElement('h2', { className: 'faq__title' }, title),
+        React__default['default'].createElement(
+          'div',
+          { className: 'faq__list' },
+          items.map(function (item, idx) {
+            var _a;
+            return React__default['default'].createElement(
+              Accordion,
+              { key: (_a = item.question) !== null && _a !== void 0 ? _a : idx, summary: item.question },
+              React__default['default'].createElement('div', { className: 'faq__answer' }, item.answer)
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -49081,6 +49201,8 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
 
 exports.BookingProduct = BookingProduct;
 exports.BookingWizard = BookingWizard;
+exports.Breadcrumbs = Breadcrumbs;
+exports.FAQ = FAQ;
 exports.Footer = Footer;
 exports.Header = Header;
 exports.ImageCardGrid = ImageCardGrid;

package/build/build-cjs/src/content/components/breadcrumb.d.ts

@@ -6,11 +6,9 @@ export type BreadcrumbItem = {
   icon?: React.ReactNode;
   isCurrent?: boolean;
 };
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
-export default function Breadcrumbs({ items, separator, ariaLabel, noHeader }: BreadcrumbsProps): React.JSX.Element;
-export {};
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

package/build/build-cjs/src/content/components/faq.d.ts

@@ -7,4 +7,5 @@ export interface FAQProps {
   items: FAQItem[];
   title?: string;
 }
-export default function FAQ({ items, title }: FAQProps): React.JSX.Element;
+declare const FAQ: React.FC<FAQProps>;
+export default FAQ;

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

@@ -10,6 +10,8 @@ import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
+import FAQ from './content/components/faq';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -19,4 +21,19 @@ 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, ImageWithTextSection, Slider, PhotoGallery };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs,
+  FAQ
+};

package/build/build-esm/index.js

@@ -44888,6 +44888,126 @@ var PhotoGallery = function (_a) {
   );
 };
 
+var Breadcrumbs = function (_a) {
+  var items = _a.items,
+    _b = _a.noHeader,
+    noHeader = _b === void 0 ? false : _b;
+  var lastIndex = items.length - 1;
+  return React__default.createElement(
+    'nav',
+    { className: 'breadcrumb'.concat(noHeader ? ' breadcrumb--no-header' : ''), 'aria-label': 'Breadcrumb' },
+    React__default.createElement(
+      'div',
+      { className: 'breadcrumb__container' },
+      React__default.createElement(
+        'ol',
+        { className: 'breadcrumb__list' },
+        items.map(function (item, idx) {
+          var _a;
+          var isCurrent = (_a = item.isCurrent) !== null && _a !== void 0 ? _a : idx === lastIndex;
+          var content = React__default.createElement(
+            'span',
+            { className: 'breadcrumb__content' },
+            item.icon && React__default.createElement('span', { className: 'breadcrumb__icon', 'aria-hidden': 'true' }, item.icon),
+            item.label && React__default.createElement('span', { className: 'breadcrumb__label', title: item.label }, item.label)
+          );
+          return React__default.createElement(
+            'li',
+            { key: idx, className: 'breadcrumb__item' },
+            idx > 0 && React__default.createElement('span', { className: 'breadcrumb__separator', 'aria-hidden': 'true' }, '/'),
+            isCurrent || !item.href
+              ? React__default.createElement('span', { className: 'breadcrumb__current', 'aria-current': isCurrent ? 'page' : undefined }, content)
+              : React__default.createElement('a', { className: 'breadcrumb__link', href: item.href, onClick: item.onClick }, content)
+          );
+        })
+      )
+    )
+  );
+};
+
+function Accordion(_a) {
+  var summary = _a.summary,
+    children = _a.children,
+    _b = _a.defaultOpen,
+    defaultOpen = _b === void 0 ? false : _b,
+    _c = _a.className,
+    className = _c === void 0 ? '' : _c;
+  var _d = React__default.useState(defaultOpen),
+    open = _d[0],
+    setOpen = _d[1];
+  return React__default.createElement(
+    'div',
+    { className: ['accordion', open && 'accordion--open', className].filter(Boolean).join(' ') },
+    React__default.createElement(
+      'button',
+      {
+        className: 'accordion__trigger',
+        type: 'button',
+        'aria-expanded': open,
+        onClick: function () {
+          return setOpen(function (v) {
+            return !v;
+          });
+        }
+      },
+      React__default.createElement('span', null, summary),
+      React__default.createElement(
+        'span',
+        { className: 'accordion__icon', 'aria-hidden': true },
+        React__default.createElement(Icon$3, { name: 'ui-chevron', width: 20, height: 20 })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'accordion__panel' },
+      React__default.createElement(
+        'div',
+        { className: 'accordion__panelInner' },
+        React__default.createElement('div', { className: 'accordion__content' }, children)
+      )
+    )
+  );
+}
+
+var FAQ = function (_a) {
+  var items = _a.items,
+    _b = _a.title,
+    title = _b === void 0 ? 'Frequently Asked Questions' : _b;
+  if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    return React__default.createElement(
+      'section',
+      { className: 'faq' },
+      React__default.createElement('h2', { className: 'faq__title' }, title),
+      React__default.createElement('p', { className: 'faq__empty' }, 'No FAQs available.')
+    );
+  }
+  return React__default.createElement(
+    'div',
+    { className: 'content' },
+    React__default.createElement(
+      'div',
+      { className: 'content__container content__container--small' },
+      React__default.createElement(
+        'section',
+        { className: 'faq' },
+        React__default.createElement('h2', { className: 'faq__title' }, title),
+        React__default.createElement(
+          'div',
+          { className: 'faq__list' },
+          items.map(function (item, idx) {
+            var _a;
+            return React__default.createElement(
+              Accordion,
+              { key: (_a = item.question) !== null && _a !== void 0 ? _a : idx, summary: item.question },
+              React__default.createElement('div', { className: 'faq__answer' }, item.answer)
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
 var signalR$1 = {};
 
 var jqueryDeferred$1 = { exports: {} };
@@ -48785,7 +48905,9 @@ var signalR = /*#__PURE__*/ _mergeNamespaces(
 export {
   BookingProduct,
   BookingWizard,
+  Breadcrumbs,
   DepartureRange,
+  FAQ,
   Footer,
   Header,
   ImageCardGrid,

package/build/build-esm/src/content/components/breadcrumb.d.ts

@@ -6,11 +6,9 @@ export type BreadcrumbItem = {
   icon?: React.ReactNode;
   isCurrent?: boolean;
 };
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
-export default function Breadcrumbs({ items, separator, ariaLabel, noHeader }: BreadcrumbsProps): React.JSX.Element;
-export {};
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

package/build/build-esm/src/content/components/faq.d.ts

@@ -7,4 +7,5 @@ export interface FAQProps {
   items: FAQItem[];
   title?: string;
 }
-export default function FAQ({ items, title }: FAQProps): React.JSX.Element;
+declare const FAQ: React.FC<FAQProps>;
+export default FAQ;

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

@@ -10,6 +10,8 @@ import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
+import FAQ from './content/components/faq';
 export * from './content/navbar/types';
 export * from './content/header/types';
 export * from './content/footer/types';
@@ -19,4 +21,19 @@ 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, ImageWithTextSection, Slider, PhotoGallery };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs,
+  FAQ
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.65",
+  "version": "1.4.67",
   "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/breadcrumb.tsx

@@ -8,27 +8,16 @@ export type BreadcrumbItem = {
   isCurrent?: boolean;
 };
 
-type BreadcrumbsProps = {
+export type BreadcrumbsProps = {
   items: BreadcrumbItem[];
-  separator?: React.ReactNode;
-  ariaLabel?: string;
   noHeader?: boolean;
 };
 
-export default function Breadcrumbs({
-  items,
-  separator = (
-    <span className="breadcrumb__separator" aria-hidden="true">
-      /
-    </span>
-  ),
-  ariaLabel = 'Breadcrumb',
-  noHeader = false
-}: BreadcrumbsProps) {
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, noHeader = false }) => {
   const lastIndex = items.length - 1;
 
   return (
-    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label={ariaLabel}>
+    <nav className={`breadcrumb${noHeader ? ' breadcrumb--no-header' : ''}`} aria-label="Breadcrumb">
       <div className="breadcrumb__container">
         <ol className="breadcrumb__list">
           {items.map((item, idx) => {
@@ -51,7 +40,11 @@ export default function Breadcrumbs({
 
             return (
               <li key={idx} className="breadcrumb__item">
-                {idx > 0 && separator}
+                {idx > 0 && (
+                  <span className="breadcrumb__separator" aria-hidden="true">
+                    /
+                  </span>
+                )}
 
                 {isCurrent || !item.href ? (
                   <span className="breadcrumb__current" aria-current={isCurrent ? 'page' : undefined}>
@@ -69,4 +62,6 @@ export default function Breadcrumbs({
       </div>
     </nav>
   );
-}
+};
+
+export default Breadcrumbs;

package/src/content/components/faq.tsx

@@ -11,7 +11,7 @@ export interface FAQProps {
   title?: string;
 }
 
-export default function FAQ({ items, title = 'Frequently Asked Questions' }: FAQProps) {
+const FAQ: React.FC<FAQProps> = ({ items, title = 'Frequently Asked Questions' }) => {
   if (!items?.length) {
     return (
       <section className="faq">
@@ -22,15 +22,21 @@ export default function FAQ({ items, title = 'Frequently Asked Questions' }: FAQ
   }
 
   return (
-    <section className="faq">
-      <h2 className="faq__title">{title}</h2>
-      <div className="faq__list">
-        {items.map((item, idx) => (
-          <Accordion key={item.question ?? idx} summary={item.question}>
-            <div className="faq__answer">{item.answer}</div>
-          </Accordion>
-        ))}
+    <div className="content">
+      <div className="content__container content__container--small">
+        <section className="faq">
+          <h2 className="faq__title">{title}</h2>
+          <div className="faq__list">
+            {items.map((item, idx) => (
+              <Accordion key={item.question ?? idx} summary={item.question}>
+                <div className="faq__answer">{item.answer}</div>
+              </Accordion>
+            ))}
+          </div>
+        </section>
       </div>
-    </section>
+    </div>
   );
-}
+};
+
+export default FAQ;

package/src/index.ts

@@ -10,6 +10,8 @@ import Login from './content/login';
 import ImageWithTextSection from './content/image-with-text-section';
 import Slider from './content/components/slider';
 import PhotoGallery from './content/components/gallery';
+import Breadcrumbs from './content/components/breadcrumb';
+import FAQ from './content/components/faq';
 
 export * from './content/navbar/types';
 export * from './content/header/types';
@@ -21,4 +23,19 @@ export * from './search-results/types';
 export * from './qsm/types';
 export * from './shared/types';
 
-export { BookingProduct, BookingWizard, QSM, SearchResults, Navbar, Header, Footer, ImageCardGrid, Login, ImageWithTextSection, Slider, PhotoGallery };
+export {
+  BookingProduct,
+  BookingWizard,
+  QSM,
+  SearchResults,
+  Navbar,
+  Header,
+  Footer,
+  ImageCardGrid,
+  Login,
+  ImageWithTextSection,
+  Slider,
+  PhotoGallery,
+  Breadcrumbs,
+  FAQ
+};