@arc-ui/community-components 11.21.0

package/dist/_shared/esm/index-a6133951.js

@@ -0,0 +1,113 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 23 Aug 2024 15:46:35 GMT
+ */
+var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
+var SemSizeBreakpointsL = "1024px"; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
+var SemSizeBreakpointsXl = "1280px"; // Extra Large (XL) - 1280px and above: This breakpoint is used for very large desktop screens.
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+export { SemSizeBreakpointsL as S, __rest as _, __assign as a, SemSizeBreakpointsXl as b, classNames as c, SemSizeBreakpointsM as d };

package/dist/index.es.js

@@ -0,0 +1,310 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import { Columns } from '@arc-ui/components/dist/Columns';
+import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { Heading } from '@arc-ui/components/dist/Heading';
+import { Text } from '@arc-ui/components/dist/Text';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
+import { Image as Image$2 } from '@arc-ui/components/dist/Image';
+import { Icon } from '@arc-ui/components/dist/Icon';
+import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
+import { AppButton } from '@arc-ui/components/dist/AppButton';
+import { Grid } from '@arc-ui/components/dist/Grid';
+import { Avatar } from '@arc-ui/components/dist/Avatar';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+  __assign = Object.assign || function __assign(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+      return t;
+  };
+  return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+          if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+              t[p[i]] = s[p[i]];
+      }
+  return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 23 Aug 2024 15:46:35 GMT
+ */
+var SemSizeBreakpointsM = "768px"; // Medium (MD) - 768px to 991px: This is commonly used for larger tablets and smaller desktop screens.
+var SemSizeBreakpointsL = "1024px"; // Large (LG) - 1024px - 1279px: This breakpoint is often applied to larger desktop screens and some laptops.
+var SemSizeBreakpointsXl = "1280px"; // Extra Large (XL) - 1280px and above: This breakpoint is used for very large desktop screens.
+
+var styles$7 = {"container":"MediaContent-module_container__zJvhV","content":"MediaContent-module_content__3VTWr"};
+
+var MediaContent = function (_a) {
+    var heading = _a.heading, children = _a.children;
+    return (React.createElement("div", { className: styles$7.container },
+        React.createElement(Heading, { level: "2", size: "xl" }, heading),
+        children && (React.createElement("div", { className: styles$7.content },
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(Text, { size: "l" }, children)))));
+};
+
+var styles$6 = {"imgWrapper":"Image-module_imgWrapper__8IEXh"};
+
+var Image$1 = function (_a) {
+    var sources = _a.sources, props = __rest(_a, ["sources"]);
+    return (React.createElement("div", { className: styles$6.imgWrapper },
+        React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React.createElement(Image$2.Source, __assign({ key: source.srcSet }, source))); }))));
+};
+
+var styles$5 = {"list":"IconList-module_list__J9ei6","listItem":"IconList-module_listItem__gNx5-","listItemCentered":"IconList-module_listItemCentered__0HGoP","listItemIconContainer":"IconList-module_listItemIconContainer__4SYoW","listItemTextContainer":"IconList-module_listItemTextContainer__PfFZS"};
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					classes.push(arg.toString());
+					continue;
+				}
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes.push(key);
+					}
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+var IconList = function (_a) {
+    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
+    return (React.createElement("ul", { className: styles$5.list }, listItems.map(function (_a) {
+        var _b;
+        var icon = _a.icon, heading = _a.heading, text = _a.text;
+        return (React.createElement("li", { key: heading, className: classNames(styles$5.listItem, (_b = {},
+                _b[styles$5.listItemCentered] = !text,
+                _b)) },
+            React.createElement("div", { className: styles$5.listItemIconContainer },
+                React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
+            React.createElement("div", { className: styles$5.listItemTextContainer },
+                React.createElement(Heading, { level: "3", size: "s" }, heading),
+                text && (React.createElement(React.Fragment, null,
+                    React.createElement(VerticalSpace, { size: "8", sizeL: "16" }),
+                    React.createElement(Text, null, text))))));
+    })));
+};
+
+var styles$4 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
+
+var Button = function (props) { return (React.createElement("div", { className: styles$4.buttonContainer },
+    React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
+
+var styles$3 = {"container":"Container-module_container__JZgGy","container--content":"Container-module_container--content__ScwIb","container--media":"Container-module_container--media__KIzMa","container--reverse":"Container-module_container--reverse__-B82g","container--align-center":"Container-module_container--align-center__qneG2","container--align-top":"Container-module_container--align-top__TE6Ah"};
+
+var Container = function (_a) {
+    var _b;
+    var children = _a.children, isReverseOrder = _a.isReverseOrder, type = _a.type, alignment = _a.alignment;
+    return (React.createElement("div", { "data-testid": "copy-lead-container", className: classNames(styles$3.container, styles$3["container--".concat(type)], styles$3["container--align-".concat(alignment)], (_b = {},
+            _b[styles$3["container--reverse"]] = isReverseOrder,
+            _b)) }, children));
+};
+
+var styles$2 = {"col":"Column-module_col__9bKZy"};
+
+var Column = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: styles$2.col }, children));
+};
+
+var VideoPlayer = React.lazy(function () {
+    return import('@arc-ui/components/dist/VideoPlayer').then(function (_a) {
+        var VideoPlayer = _a.VideoPlayer;
+        return ({
+            "default": VideoPlayer
+        });
+    });
+});
+var MediaTemplate = function (_a) {
+    var button = _a.button, title = _a.title, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    var _c = useState(false), isClient = _c[0], setIsClient = _c[1];
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsXl, ")"));
+    useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React.createElement("div", null,
+        !isMinWidthArcBreakpointXl && (React.createElement(Columns, null,
+            React.createElement(Columns.Col, { span: 12, spanM: 9 },
+                React.createElement(MediaContent, { heading: title }, content)))),
+        React.createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
+            React.createElement(Column, null,
+                isMinWidthArcBreakpointXl && (React.createElement(MediaContent, { heading: title }, content)),
+                React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+                button && React.createElement(Button, __assign({}, button))),
+            React.createElement(Column, null,
+                video && isClient && (React.createElement(Suspense, { fallback: null },
+                    React.createElement(VideoPlayer, __assign({}, video)))),
+                image && !video && React.createElement(Image$1, __assign({}, image))))));
+};
+
+var ContentTemplate = function (_a) {
+    var button = _a.button, title = _a.title, listItems = _a.listItems, content = _a.content;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsL, ")"));
+    return (React.createElement(Container, { type: "content", alignment: "top" },
+        React.createElement(Column, null,
+            React.createElement(Heading, { level: "2", size: "xl" }, title),
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(Text, { size: "l" }, content),
+            button && isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button))),
+        React.createElement(Column, null,
+            React.createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+            button && !isMinWidthArcBreakpointM && React.createElement(Button, __assign({}, button)))));
+};
+
+/**
+ * Use `CopyLead` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link to a supporting explanatory video. An optional CTA can be used to link to further information or trigger a sales or enquiry journey.
+ */
+var CopyLead = function (_a) {
+    var button = _a.button, title = _a.title, listItems = _a.listItems, video = _a.video, image = _a.image, content = _a.content, _b = _a.isReverseOrder, isReverseOrder = _b === void 0 ? false : _b;
+    if (video || image) {
+        return (React.createElement(MediaTemplate, { content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }));
+    }
+    if (content) {
+        return (React.createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+    }
+    return null;
+};
+
+var styles$1 = {"imgWrapper":"Image-module_imgWrapper__flS1n"};
+
+var Image = function (_a) {
+    var sources = _a.sources, props = __rest(_a, ["sources"]);
+    return (React.createElement("div", { className: styles$1.imgWrapper },
+        React.createElement(Image$2, __assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React.createElement(Image$2.Source, __assign({ key: source.srcSet }, source))); }))));
+};
+
+var styles = {"featurePost":"FeaturePost-module_featurePost__PDoVH","featurePostReversed":"FeaturePost-module_featurePostReversed__tQZSX","col":"FeaturePost-module_col__x2s9L","labelDate":"FeaturePost-module_labelDate__eiCmw","contentContainer":"FeaturePost-module_contentContainer__dqJOS","authorContent":"FeaturePost-module_authorContent__QD4Nv","googlePlayButtonWrapper":"FeaturePost-module_googlePlayButtonWrapper__nGdyh"};
+
+var FeaturePost = function (_a) {
+    var _b;
+    var heading = _a.heading, label = _a.label, image = _a.image, content = _a.content, footer = _a.footer, _c = _a.isReverseOrder, isReverseOrder = _c === void 0 ? false : _c;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
+    return (React.createElement("div", { "data-testid": "feature-post", className: classNames(styles.featurePost, (_b = {},
+            _b[styles.featurePostReversed] = isReverseOrder,
+            _b)) },
+        React.createElement("div", { className: styles.col },
+            React.createElement("div", { className: styles.contentContainer },
+                label && (React.createElement(Grid, { isGutterless: true, isFluid: true },
+                    React.createElement(Grid.Row, { align: "baseline" },
+                        React.createElement(Grid.Col, { xs: 12, m: "auto" },
+                            React.createElement(Heading, { size: "xxs" }, label.text.toUpperCase())),
+                        React.createElement(Grid.Col, { xs: 12, m: "auto" },
+                            React.createElement("div", { className: styles.labelDate },
+                                React.createElement(Text, { size: "xs", tone: "muted" }, label.date)))),
+                    React.createElement(VerticalSpace, { size: "24" }))),
+                React.createElement(Heading, { level: "2", size: "xl" }, heading),
+                !isMinWidthArcBreakpointM && (React.createElement("div", { "data-testid": "mobile-img" },
+                    React.createElement(VerticalSpace, { size: "40" }),
+                    React.createElement(Image, __assign({}, image)))),
+                React.createElement(VerticalSpace, { size: "40" }),
+                React.createElement(Text, { size: "l" }, content),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React.createElement(React.Fragment, null,
+                    footer.author && (React.createElement(React.Fragment, null,
+                        React.createElement(VerticalSpace, { size: "24" }),
+                        React.createElement(Grid, { isFluid: true, isGutterless: true },
+                            React.createElement(Grid.Row, { align: "center" },
+                                React.createElement(Grid.Col, { xs: "auto" },
+                                    React.createElement(Avatar, __assign({ size: "m" }, footer.author.avatar))),
+                                React.createElement(Grid.Col, null,
+                                    React.createElement("div", { className: styles.authorContent },
+                                        React.createElement(Heading, { size: "xs" }, footer.author.name),
+                                        React.createElement(Text, { size: "s" }, footer.author.title))))))),
+                    React.createElement(VerticalSpace, { size: "40" }),
+                    React.createElement(ButtonV2, __assign({ buttonStyle: "secondary" }, footer.button)))),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React.createElement(React.Fragment, null,
+                    React.createElement(VerticalSpace, { size: "40" }),
+                    React.createElement(Grid, { isGutterless: true, isFluid: true },
+                        React.createElement(Grid.Row, null,
+                            footer.appStore && (React.createElement(Grid.Col, { xs: 12, s: "auto" },
+                                React.createElement(AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
+                            footer.googlePlay && (React.createElement(Grid.Col, { xs: 12, s: "auto" },
+                                React.createElement("div", { className: styles.googlePlayButtonWrapper },
+                                    React.createElement(AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
+        isMinWidthArcBreakpointM && (React.createElement("div", { className: styles.col },
+            React.createElement("div", { "data-testid": "desktop-img", className: styles.imgContainer },
+                React.createElement(Image, __assign({}, image)))))));
+};
+
+export { CopyLead, FeaturePost };
+//# sourceMappingURL=index.es.js.map