@qite/tide-booking-component 1.4.66 → 1.4.67

package/build/build-cjs/index.js

@@ -45222,6 +45222,89 @@ var Breadcrumbs = function (_a) {
   );
 };
 
+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: {} };
@@ -49119,6 +49202,7 @@ 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/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

@@ -11,6 +11,7 @@ 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';
@@ -33,5 +34,6 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ
 };

package/build/build-esm/index.js

@@ -44925,6 +44925,89 @@ var Breadcrumbs = function (_a) {
   );
 };
 
+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: {} };
@@ -48824,6 +48907,7 @@ export {
   BookingWizard,
   Breadcrumbs,
   DepartureRange,
+  FAQ,
   Footer,
   Header,
   ImageCardGrid,

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

@@ -11,6 +11,7 @@ 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';
@@ -33,5 +34,6 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qite/tide-booking-component",
-  "version": "1.4.66",
+  "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/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

@@ -11,6 +11,7 @@ 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';
@@ -35,5 +36,6 @@ export {
   ImageWithTextSection,
   Slider,
   PhotoGallery,
-  Breadcrumbs
+  Breadcrumbs,
+  FAQ
 };