@arc-ui/community-components 12.0.0-beta.6 → 12.0.0-beta7

package/dist/FeaturePost/styles.css

@@ -1 +1 @@
-.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20)}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-xl);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}
+.FeaturePost-module_labelDate__NXOgY{padding-top:var(--sem-space-padding-20)}.FeaturePost-module_authorContent__FEuRO{padding-left:var(--sem-space-padding-70)}.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:var(--sem-space-padding-70) 0 0}.FeaturePost-module_imgWrapper__r6omd{border-radius:var(--sem-border-radius-s);overflow:hidden}@media (min-width:636px){.FeaturePost-module_googlePlayButtonWrapper__GI-ag{padding:0 0 0 var(--sem-space-padding-70)}}@media (min-width:768px){.FeaturePost-module_featurePost__9jY21{display:flex;gap:24px}.FeaturePost-module_featurePostReversed__WQRXm{flex-direction:row-reverse}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-110) 0 0}.FeaturePost-module_col__eW8gY{flex:0 1 auto;width:50%}.FeaturePost-module_labelDate__NXOgY{padding-left:var(--sem-space-padding-70)}}@media (min-width:1280px){.FeaturePost-module_featurePost__9jY21{gap:32px}.FeaturePost-module_contentContainer__kdus7{padding:0 var(--sem-space-padding-130) 0 0}}

package/dist/Highlights/Highlights.cjs.js

@@ -2,40 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React__default = require('react');
+var React = require('react');
+var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
+var index = require('../_shared/cjs/index-9947ac13.js');
 var Heading = require('@arc-ui/components/dist/Heading');
 var Icon = require('@arc-ui/components/dist/Icon');
 var Text = require('@arc-ui/components/dist/Text');
 var Link = require('@arc-ui/components/dist/Link');
-var components = require('@arc-ui/components');
-var index = require('../_shared/cjs/index-9947ac13.js');
 var VerticalSpace = require('@arc-ui/components/dist/VerticalSpace');
-var useMediaQuery = require('@arc-ui/components/dist/use-media-query');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default__default = /*#__PURE__*/_interopDefaultLegacy(React__default);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","header":"Highlights-module_header__hIdDj","highlightItem":"Highlights-module_highlightItem__-N6le","headerContent":"Highlights-module_headerContent__rt-Oj","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 
 var HighlightItem = function (_a) {
     var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
-    return (React__default__default["default"].createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
-        icon && (React__default__default["default"].createElement("div", { className: styles.Icon },
-            React__default__default["default"].createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
-        React__default__default["default"].createElement(components.VerticalSpace, { size: "16" }),
-        React__default__default["default"].createElement(Heading.Heading, { level: "3", size: "m" }, heading),
-        React__default__default["default"].createElement(components.VerticalSpace, { size: "16" }),
-        React__default__default["default"].createElement(Text.Text, null, text),
-        React__default__default["default"].createElement(components.VerticalSpace, { size: "16" }),
-        link && (React__default__default["default"].createElement(Link.Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+    return (React__default["default"].createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
+        icon && (React__default["default"].createElement("div", { className: styles.Icon },
+            React__default["default"].createElement(Icon.Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React__default["default"].createElement(Heading.Heading, { level: "3", size: "m" }, heading),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        React__default["default"].createElement(Text.Text, null, text),
+        React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "16" }),
+        link && (React__default["default"].createElement(Link.Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
 };
 
 var HighlightList = function (_a) {
     var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
-    return (React__default__default["default"].createElement("div", { "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
+    return (React__default["default"].createElement("div", { "data-testid": "highlights-list", className: index.classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
         var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
-        return (React__default__default["default"].createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
+        return (React__default["default"].createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
     })));
 };
 
@@ -43,23 +42,23 @@ var HighlightList = function (_a) {
  * Use `Highlights` 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 HighlightHeader = function (_a) {
-    var title = _a.title, content = _a.content;
-    return (React__default__default["default"].createElement("div", { "data-testid": "highlights-header", className: styles.header },
-        React__default__default["default"].createElement(Heading.Heading, { level: "2", size: "xl" }, title),
-        content && (React__default__default["default"].createElement(React__default__default["default"].Fragment, null,
-            React__default__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
-            React__default__default["default"].createElement("p", { className: styles.headerContent }, content)))));
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React__default["default"].createElement("div", { "data-testid": "highlights-header", className: styles.header },
+        React__default["default"].createElement(Heading.Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(VerticalSpace.VerticalSpace, { size: "24" }),
+            React__default["default"].createElement("p", { className: styles.headerContent }, content)))));
 };
 
 /**
  * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
  */
 var Highlights = function (_a) {
-    var title = _a.title, content = _a.content, listItems = _a.listItems, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, listItems = _a.listItems, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
     var isMaxWidthArcBreakpointXs = useMediaQuery.useMediaQuery("(max-width: 767px)");
-    return (React__default__default["default"].createElement("div", null,
-        React__default__default["default"].createElement(HighlightHeader, { title: title, content: content }),
-        React__default__default["default"].createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement(HighlightHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React__default["default"].createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
 };
 
 exports.Highlights = Highlights;

package/dist/Highlights/Highlights.esm.js

@@ -1,33 +1,32 @@
-import React__default__default from 'react';
+import React from 'react';
+import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import { Heading } from '@arc-ui/components/dist/Heading';
 import { Icon } from '@arc-ui/components/dist/Icon';
 import { Text } from '@arc-ui/components/dist/Text';
 import { Link } from '@arc-ui/components/dist/Link';
-import { VerticalSpace } from '@arc-ui/components';
-import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { VerticalSpace as VerticalSpace$1 } from '@arc-ui/components/dist/VerticalSpace';
-import { useMediaQuery } from '@arc-ui/components/dist/use-media-query';
+import { VerticalSpace } from '@arc-ui/components/dist/VerticalSpace';
 
 var styles = {"highlights":"Highlights-module_highlights__Hf7Zq","header":"Highlights-module_header__hIdDj","highlightItem":"Highlights-module_highlightItem__-N6le","headerContent":"Highlights-module_headerContent__rt-Oj","highlights2Column":"Highlights-module_highlights2Column__6qIuI","highlights3Column":"Highlights-module_highlights3Column__qsCMP"};
 
 var HighlightItem = function (_a) {
     var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link, isSmallIcon = _a.isSmallIcon;
-    return (React__default__default.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
-        icon && (React__default__default.createElement("div", { className: styles.Icon },
-            React__default__default.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
-        React__default__default.createElement(VerticalSpace, { size: "16" }),
-        React__default__default.createElement(Heading, { level: "3", size: "m" }, heading),
-        React__default__default.createElement(VerticalSpace, { size: "16" }),
-        React__default__default.createElement(Text, null, text),
-        React__default__default.createElement(VerticalSpace, { size: "16" }),
-        link && (React__default__default.createElement(Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
+    return (React.createElement("div", { "data-testid": "highlight-item-container", className: styles.highlightItem },
+        icon && (React.createElement("div", { className: styles.Icon },
+            React.createElement(Icon, { "data-testid": "highlight-icon", color: "brand", icon: icon, size: isSmallIcon ? 64 : 76 }))),
+        React.createElement(VerticalSpace, { size: "16" }),
+        React.createElement(Heading, { level: "3", size: "m" }, heading),
+        React.createElement(VerticalSpace, { size: "16" }),
+        React.createElement(Text, null, text),
+        React.createElement(VerticalSpace, { size: "16" }),
+        link && (React.createElement(Link, { href: link.url, id: link.url, onClick: function noRefCheck() { }, rel: "", size: "m", target: "_self", title: link.textLink }, link.textLink))));
 };
 
 var HighlightList = function (_a) {
     var listItems = _a.listItems, columns = _a.columns, isSmallIcon = _a.isSmallIcon;
-    return (React__default__default.createElement("div", { "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
+    return (React.createElement("div", { "data-testid": "highlights-list", className: classNames(styles.highlights, styles["highlights".concat(columns, "Column")]) }, listItems.map(function (_a) {
         var icon = _a.icon, heading = _a.heading, text = _a.text, link = _a.link;
-        return (React__default__default.createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
+        return (React.createElement(HighlightItem, { icon: icon, heading: heading, text: text, link: link, isSmallIcon: isSmallIcon }));
     })));
 };
 
@@ -35,23 +34,23 @@ var HighlightList = function (_a) {
  * Use `Highlights` 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 HighlightHeader = function (_a) {
-    var title = _a.title, content = _a.content;
-    return (React__default__default.createElement("div", { "data-testid": "highlights-header", className: styles.header },
-        React__default__default.createElement(Heading, { level: "2", size: "xl" }, title),
-        content && (React__default__default.createElement(React__default__default.Fragment, null,
-            React__default__default.createElement(VerticalSpace$1, { size: "24" }),
-            React__default__default.createElement("p", { className: styles.headerContent }, content)))));
+    var heading = _a.heading, headingLevel = _a.headingLevel, content = _a.content;
+    return (React.createElement("div", { "data-testid": "highlights-header", className: styles.header },
+        React.createElement(Heading, { level: headingLevel, size: "xl" }, heading),
+        content && (React.createElement(React.Fragment, null,
+            React.createElement(VerticalSpace, { size: "24" }),
+            React.createElement("p", { className: styles.headerContent }, content)))));
 };
 
 /**
  * Use `Highlights` to give supporting information about a page or proposition. It can be used to call out key benefits in bullet points, or link. Both two and three column options are available.
  */
 var Highlights = function (_a) {
-    var title = _a.title, content = _a.content, listItems = _a.listItems, _b = _a.columns, columns = _b === void 0 ? "2" : _b;
+    var heading = _a.heading, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, content = _a.content, listItems = _a.listItems, _c = _a.columns, columns = _c === void 0 ? "2" : _c;
     var isMaxWidthArcBreakpointXs = useMediaQuery("(max-width: 767px)");
-    return (React__default__default.createElement("div", null,
-        React__default__default.createElement(HighlightHeader, { title: title, content: content }),
-        React__default__default.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
+    return (React.createElement("div", null,
+        React.createElement(HighlightHeader, { heading: heading, headingLevel: headingLevel, content: content }),
+        React.createElement(HighlightList, { "data-testid": "highlights-list-container", listItems: listItems, columns: columns, isSmallIcon: isMaxWidthArcBreakpointXs })));
 };
 
 export { Highlights };