@arc-ui/community-components 11.21.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 BT plc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/CopyLead/CopyLead.cjs.js

@@ -0,0 +1,160 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../_shared/cjs/index-8f36002b.js');
+var Columns = require('@arc-ui/components/dist/Columns');
+var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
+var Heading = require('@arc-ui/components/dist/Heading');
+var Text = require('@arc-ui/components/dist/Text');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+var Image$1 = require('@arc-ui/components/dist/Image');
+var Icon = require('@arc-ui/components/dist/Icon');
+var ButtonV2 = require('@arc-ui/components/dist/ButtonV2');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles$5 = {"container":"MediaContent-module_container__zJvhV","content":"MediaContent-module_content__3VTWr"};
+
+var MediaContent = function (_a) {
+    var heading = _a.heading, children = _a.children;
+    return (React__default["default"].createElement("div", { className: styles$5.container },
+        React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
+        children && (React__default["default"].createElement("div", { className: styles$5.content },
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement(Text.Text, { size: "l" }, children)))));
+};
+
+var styles$4 = {"imgWrapper":"Image-module_imgWrapper__8IEXh"};
+
+var Image = function (_a) {
+    var sources = _a.sources, props = index.__rest(_a, ["sources"]);
+    return (React__default["default"].createElement("div", { className: styles$4.imgWrapper },
+        React__default["default"].createElement(Image$1.Image, index.__assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React__default["default"].createElement(Image$1.Image.Source, index.__assign({ key: source.srcSet }, source))); }))));
+};
+
+var styles$3 = {"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 IconList = function (_a) {
+    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
+    return (React__default["default"].createElement("ul", { className: styles$3.list }, listItems.map(function (_a) {
+        var _b;
+        var icon = _a.icon, heading = _a.heading, text = _a.text;
+        return (React__default["default"].createElement("li", { key: heading, className: index.classNames(styles$3.listItem, (_b = {},
+                _b[styles$3.listItemCentered] = !text,
+                _b)) },
+            React__default["default"].createElement("div", { className: styles$3.listItemIconContainer },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
+            React__default["default"].createElement("div", { className: styles$3.listItemTextContainer },
+                React__default["default"].createElement(Heading.Heading, { level: "3", size: "s" }, heading),
+                text && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "8", sizeL: "16" }),
+                    React__default["default"].createElement(Text.Text, null, text))))));
+    })));
+};
+
+var styles$2 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
+
+var Button = function (props) { return (React__default["default"].createElement("div", { className: styles$2.buttonContainer },
+    React__default["default"].createElement(ButtonV2.ButtonV2, index.__assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
+
+var styles$1 = {"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__default["default"].createElement("div", { "data-testid": "copy-lead-container", className: index.classNames(styles$1.container, styles$1["container--".concat(type)], styles$1["container--align-".concat(alignment)], (_b = {},
+            _b[styles$1["container--reverse"]] = isReverseOrder,
+            _b)) }, children));
+};
+
+var styles = {"col":"Column-module_col__9bKZy"};
+
+var Column = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("div", { className: styles.col }, children));
+};
+
+var VideoPlayer = React__default["default"].lazy(function () {
+    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@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 = React.useState(false), isClient = _c[0], setIsClient = _c[1];
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsL, ")"));
+    var isMinWidthArcBreakpointXl = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsXl, ")"));
+    React.useEffect(function () {
+        setIsClient(true);
+    }, []);
+    return (React__default["default"].createElement("div", null,
+        !isMinWidthArcBreakpointXl && (React__default["default"].createElement(Columns.Columns, null,
+            React__default["default"].createElement(Columns.Columns.Col, { span: 12, spanM: 9 },
+                React__default["default"].createElement(MediaContent, { heading: title }, content)))),
+        React__default["default"].createElement(Container, { type: "media", isReverseOrder: isReverseOrder, alignment: !isMinWidthArcBreakpointXl ? "top" : "center" },
+            React__default["default"].createElement(Column, null,
+                isMinWidthArcBreakpointXl && (React__default["default"].createElement(MediaContent, { heading: title }, content)),
+                React__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+                button && React__default["default"].createElement(Button, index.__assign({}, button))),
+            React__default["default"].createElement(Column, null,
+                video && isClient && (React__default["default"].createElement(React.Suspense, { fallback: null },
+                    React__default["default"].createElement(VideoPlayer, index.__assign({}, video)))),
+                image && !video && React__default["default"].createElement(Image, index.__assign({}, image))))));
+};
+
+var ContentTemplate = function (_a) {
+    var button = _a.button, title = _a.title, listItems = _a.listItems, content = _a.content;
+    var isMinWidthArcBreakpointM = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsM, ")"));
+    var isMinWidthArcBreakpointL = useMediaQuery.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsL, ")"));
+    return (React__default["default"].createElement(Container, { type: "content", alignment: "top" },
+        React__default["default"].createElement(Column, null,
+            React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, title),
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement(Text.Text, { size: "l" }, content),
+            button && isMinWidthArcBreakpointM && React__default["default"].createElement(Button, index.__assign({}, button))),
+        React__default["default"].createElement(Column, null,
+            React__default["default"].createElement(IconList, { listItems: listItems, isLgScreen: isMinWidthArcBreakpointL }),
+            button && !isMinWidthArcBreakpointM && React__default["default"].createElement(Button, index.__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__default["default"].createElement(MediaTemplate, { content: content, video: video, image: image, listItems: listItems, title: title, button: button, isReverseOrder: isReverseOrder }));
+    }
+    if (content) {
+        return (React__default["default"].createElement(ContentTemplate, { listItems: listItems, title: title, button: button, content: content }));
+    }
+    return null;
+};
+
+exports.CopyLead = CopyLead;

package/dist/CopyLead/CopyLead.esm.js

@@ -0,0 +1,134 @@
+import React, { useState, useEffect, Suspense } from 'react';
+import { _ as __rest, a as __assign, c as classNames, S as SemSizeBreakpointsL, b as SemSizeBreakpointsXl, d as SemSizeBreakpointsM } from '../_shared/esm/index-a6133951.js';
+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$1 } from '@arc-ui/components/dist/Image';
+import { Icon } from '@arc-ui/components/dist/Icon';
+import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
+
+var styles$5 = {"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$5.container },
+        React.createElement(Heading, { level: "2", size: "xl" }, heading),
+        children && (React.createElement("div", { className: styles$5.content },
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement(Text, { size: "l" }, children)))));
+};
+
+var styles$4 = {"imgWrapper":"Image-module_imgWrapper__8IEXh"};
+
+var Image = function (_a) {
+    var sources = _a.sources, props = __rest(_a, ["sources"]);
+    return (React.createElement("div", { className: styles$4.imgWrapper },
+        React.createElement(Image$1, __assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React.createElement(Image$1.Source, __assign({ key: source.srcSet }, source))); }))));
+};
+
+var styles$3 = {"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 IconList = function (_a) {
+    var listItems = _a.listItems, isLgScreen = _a.isLgScreen;
+    return (React.createElement("ul", { className: styles$3.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$3.listItem, (_b = {},
+                _b[styles$3.listItemCentered] = !text,
+                _b)) },
+            React.createElement("div", { className: styles$3.listItemIconContainer },
+                React.createElement(Icon, { color: "brand", icon: icon, size: isLgScreen ? 64 : 48 })),
+            React.createElement("div", { className: styles$3.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$2 = {"buttonContainer":"Button-module_buttonContainer__o8TSz"};
+
+var Button = function (props) { return (React.createElement("div", { className: styles$2.buttonContainer },
+    React.createElement(ButtonV2, __assign({ isFullWidth: true, buttonStyle: "secondary" }, props)))); };
+
+var styles$1 = {"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$1.container, styles$1["container--".concat(type)], styles$1["container--align-".concat(alignment)], (_b = {},
+            _b[styles$1["container--reverse"]] = isReverseOrder,
+            _b)) }, children));
+};
+
+var styles = {"col":"Column-module_col__9bKZy"};
+
+var Column = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: styles.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, __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;
+};
+
+export { CopyLead };

package/dist/CopyLead/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/copylead",
+  "types": "../types/components/CopyLead/index.d.ts",
+  "main": "./CopyLead.cjs.js",
+  "module": "./CopyLead.esm.js",
+  "private": true
+}

package/dist/FeaturePost/FeaturePost.cjs.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-8f36002b.js');
+var React = require('react');
+var AppButton = require('@arc-ui/components/dist/AppButton');
+var Grid = require('@arc-ui/components/dist/Grid');
+var ButtonV2 = require('@arc-ui/components/dist/ButtonV2');
+var Avatar = require('@arc-ui/components/dist/Avatar');
+var Heading = require('@arc-ui/components/dist/Heading');
+var Text = require('@arc-ui/components/dist/Text');
+var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
+var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
+var Image$1 = require('@arc-ui/components/dist/Image');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var styles$1 = {"imgWrapper":"Image-module_imgWrapper__flS1n"};
+
+var Image = function (_a) {
+    var sources = _a.sources, props = index.__rest(_a, ["sources"]);
+    return (React__default["default"].createElement("div", { className: styles$1.imgWrapper },
+        React__default["default"].createElement(Image$1.Image, index.__assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React__default["default"].createElement(Image$1.Image.Source, index.__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.useMediaQuery("(min-width: ".concat(index.SemSizeBreakpointsM, ")"));
+    return (React__default["default"].createElement("div", { "data-testid": "feature-post", className: index.classNames(styles.featurePost, (_b = {},
+            _b[styles.featurePostReversed] = isReverseOrder,
+            _b)) },
+        React__default["default"].createElement("div", { className: styles.col },
+            React__default["default"].createElement("div", { className: styles.contentContainer },
+                label && (React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                    React__default["default"].createElement(Grid.Grid.Row, { align: "baseline" },
+                        React__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
+                            React__default["default"].createElement(Heading.Heading, { size: "xxs" }, label.text.toUpperCase())),
+                        React__default["default"].createElement(Grid.Grid.Col, { xs: 12, m: "auto" },
+                            React__default["default"].createElement("div", { className: styles.labelDate },
+                                React__default["default"].createElement(Text.Text, { size: "xs", tone: "muted" }, label.date)))),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }))),
+                React__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, heading),
+                !isMinWidthArcBreakpointM && (React__default["default"].createElement("div", { "data-testid": "mobile-img" },
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default["default"].createElement(Image, index.__assign({}, image)))),
+                React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                React__default["default"].createElement(Text.Text, { size: "l" }, content),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "cta" && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    footer.author && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+                        React__default["default"].createElement(Grid.Grid, { isFluid: true, isGutterless: true },
+                            React__default["default"].createElement(Grid.Grid.Row, { align: "center" },
+                                React__default["default"].createElement(Grid.Grid.Col, { xs: "auto" },
+                                    React__default["default"].createElement(Avatar.Avatar, index.__assign({ size: "m" }, footer.author.avatar))),
+                                React__default["default"].createElement(Grid.Grid.Col, null,
+                                    React__default["default"].createElement("div", { className: styles.authorContent },
+                                        React__default["default"].createElement(Heading.Heading, { size: "xs" }, footer.author.name),
+                                        React__default["default"].createElement(Text.Text, { size: "s" }, footer.author.title))))))),
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default["default"].createElement(ButtonV2.ButtonV2, index.__assign({ buttonStyle: "secondary" }, footer.button)))),
+                (footer === null || footer === void 0 ? void 0 : footer.type) === "appButton" && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "40" }),
+                    React__default["default"].createElement(Grid.Grid, { isGutterless: true, isFluid: true },
+                        React__default["default"].createElement(Grid.Grid.Row, null,
+                            footer.appStore && (React__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
+                                React__default["default"].createElement(AppButton.AppButton, { type: "apple-app-store", screenReaderText: footer.appStore.screenReaderText, url: footer.appStore.url }))),
+                            footer.googlePlay && (React__default["default"].createElement(Grid.Grid.Col, { xs: 12, s: "auto" },
+                                React__default["default"].createElement("div", { className: styles.googlePlayButtonWrapper },
+                                    React__default["default"].createElement(AppButton.AppButton, { type: "google-play", screenReaderText: footer.googlePlay.screenReaderText, url: footer.googlePlay.url })))))))))),
+        isMinWidthArcBreakpointM && (React__default["default"].createElement("div", { className: styles.col },
+            React__default["default"].createElement("div", { "data-testid": "desktop-img", className: styles.imgContainer },
+                React__default["default"].createElement(Image, index.__assign({}, image)))))));
+};
+
+exports.FeaturePost = FeaturePost;

package/dist/FeaturePost/FeaturePost.esm.js

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign, d as SemSizeBreakpointsM, c as classNames } from '../_shared/esm/index-a6133951.js';
+import React from 'react';
+import { AppButton } from '@arc-ui/components/dist/AppButton';
+import { Grid } from '@arc-ui/components/dist/Grid';
+import { ButtonV2 } from '@arc-ui/components/dist/ButtonV2';
+import { Avatar } from '@arc-ui/components/dist/Avatar';
+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 { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { Image as Image$1 } from '@arc-ui/components/dist/Image';
+
+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$1, __assign({ fadeOnLoad: true }, props), sources &&
+            sources.map(function (source) { return (React.createElement(Image$1.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 { FeaturePost };

package/dist/FeaturePost/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/featurepost",
+  "types": "../types/components/FeaturePost/index.d.ts",
+  "main": "./FeaturePost.cjs.js",
+  "module": "./FeaturePost.esm.js",
+  "private": true
+}

package/dist/_shared/cjs/index-8f36002b.js

@@ -0,0 +1,119 @@
+'use strict';
+
+/******************************************************************************
+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.
+***************************************************************************** */
+
+exports.__assign = function() {
+  exports.__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 exports.__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;
+
+exports.SemSizeBreakpointsL = SemSizeBreakpointsL;
+exports.SemSizeBreakpointsM = SemSizeBreakpointsM;
+exports.SemSizeBreakpointsXl = SemSizeBreakpointsXl;
+exports.__rest = __rest;
+exports.classNames = classNames;