@arc-ui/components 1.1.0 → 1.2.0

package/dist/index.es.js

@@ -339,6 +339,7 @@ const ArcIconSocialFacebook = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.
 const ArcIconSocialInstagram = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16 2c-3.803 0-4.278.018-5.771.084-1.491.07-2.506.305-3.399.651A6.856 6.856 0 004.35 4.35a6.83 6.83 0 00-1.615 2.48c-.346.893-.582 1.908-.651 3.399C2.014 11.722 2 12.197 2 16s.018 4.278.084 5.772c.07 1.49.305 2.506.651 3.398a6.86 6.86 0 001.615 2.48 6.846 6.846 0 002.48 1.615c.894.345 1.909.582 3.399.651 1.493.07 1.968.084 5.771.084s4.278-.017 5.772-.084c1.49-.07 2.506-.306 3.398-.65a6.881 6.881 0 002.48-1.616 6.836 6.836 0 001.615-2.48c.345-.892.582-1.909.651-3.398.07-1.494.084-1.969.084-5.772s-.017-4.278-.084-5.771c-.07-1.49-.306-2.508-.65-3.399a6.871 6.871 0 00-1.616-2.48 6.821 6.821 0 00-2.48-1.615c-.892-.346-1.909-.582-3.398-.651C20.278 2.014 19.803 2 16 2zm0 2.52c3.737 0 4.183.019 5.658.083 1.365.064 2.106.29 2.599.484.655.253 1.12.557 1.612 1.045.489.49.792.956 1.045 1.612.192.492.42 1.233.482 2.598.067 1.477.082 1.92.082 5.658 0 3.738-.018 4.183-.087 5.658-.07 1.365-.298 2.106-.49 2.599a4.445 4.445 0 01-1.05 1.612 4.368 4.368 0 01-1.61 1.045c-.49.192-1.242.42-2.607.482-1.486.067-1.924.082-5.669.082-3.746 0-4.184-.018-5.669-.087-1.366-.07-2.118-.298-2.608-.49a4.336 4.336 0 01-1.61-1.05 4.251 4.251 0 01-1.05-1.61c-.192-.49-.418-1.242-.49-2.607-.052-1.47-.07-1.924-.07-5.651 0-3.73.018-4.184.07-5.672.072-1.365.298-2.116.49-2.606.246-.665.56-1.12 1.05-1.611.49-.489.946-.804 1.61-1.048.49-.193 1.226-.421 2.59-.491 1.488-.052 1.926-.07 5.67-.07L16 4.52zm0 4.291A7.189 7.189 0 008.811 16 7.189 7.189 0 0016 23.19 7.189 7.189 0 0023.19 16 7.189 7.189 0 0016 8.811zm0 11.856A4.665 4.665 0 0111.333 16 4.665 4.665 0 0116 11.333 4.665 4.665 0 0120.667 16 4.665 4.665 0 0116 20.667zm9.154-12.14a1.681 1.681 0 01-3.36 0 1.68 1.68 0 013.36 0z\" fill=\"currentColor\"/></svg>";
 const ArcIconSocialLinkedin = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.856 25.86H21.71v-6.496c0-1.55-.032-3.544-2.161-3.544-2.162 0-2.492 1.686-2.492 3.43v6.61H12.91V12.5h3.983v1.821h.053c.557-1.05 1.91-2.158 3.932-2.158 4.201 0 4.978 2.765 4.978 6.364v7.334zM8.226 10.673a2.406 2.406 0 01-2.406-2.41 2.408 2.408 0 112.407 2.41zm2.08 15.189H6.148V12.5h4.158v13.36zM27.929 2H4.066C2.924 2 2 2.903 2 4.017v23.966C2 29.098 2.924 30 4.066 30h23.86c1.14 0 2.074-.902 2.074-2.017V4.017C30 2.903 29.067 2 27.926 2h.003z\" fill=\"currentColor\"/></svg>";
 const ArcIconSocialTwitter = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M29.945 7.331a11.667 11.667 0 01-3.295.905 5.784 5.784 0 002.523-3.177 11.856 11.856 0 01-3.648 1.381 5.74 5.74 0 00-9.93 3.918c0 .455.053.892.149 1.31-4.772-.224-9-2.515-11.83-5.98a5.625 5.625 0 00-.778 2.888 5.74 5.74 0 002.553 4.779 5.722 5.722 0 01-2.6-.719v.071a5.743 5.743 0 004.604 5.632 5.828 5.828 0 01-2.58.099 5.76 5.76 0 005.37 3.986 11.512 11.512 0 01-7.118 2.456c-.455 0-.909-.027-1.365-.078a16.327 16.327 0 008.816 2.577c10.563 0 16.332-8.745 16.332-16.317 0-.244 0-.49-.018-.735A11.59 11.59 0 0030 7.355l-.055-.024z\" fill=\"currentColor\"/></svg>";
+const ArcIconSocialYouTube = "<svg viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M29.414 9.128a3.542 3.542 0 0 0-2.437-2.477c-2.18-.594-10.965-.594-10.965-.594s-8.76-.012-10.966.594A3.542 3.542 0 0 0 2.61 9.128 37.587 37.587 0 0 0 2 16.012c-.007 2.301.198 4.598.61 6.86a3.542 3.542 0 0 0 2.436 2.477c2.181.594 10.966.594 10.966.594s8.76 0 10.965-.594a3.542 3.542 0 0 0 2.437-2.477c.405-2.263.6-4.559.585-6.86a37.574 37.574 0 0 0-.585-6.884ZM13.21 20.272V11.74l7.31 4.272-7.31 4.26Z\" fill=\"currentColor\"/></svg>";
 const ArcColorBlack = "#000000";
 const ArcColorWhite = "#ffffff";
 const ArcColorDebug = "#cf3a8a";
@@ -1297,6 +1298,7 @@ const icons = [
   "arcSocialInstagram",
   "arcSocialLinkedin",
   "arcSocialTwitter",
+  "arcSocialYouTube",
   "bt4G",
   "bt5G",
   "btAccessibility",
@@ -1789,7 +1791,7 @@ const BtGradientDarkPathwayBackgroundBrand = BtLinearGradient90;
 
 dist.ArcBreakpointL = ArcBreakpointL;
 dist.ArcBreakpointLPx = ArcBreakpointLPx;
-dist.ArcBreakpointM = ArcBreakpointM;
+var ArcBreakpointM_1 = dist.ArcBreakpointM = ArcBreakpointM;
 dist.ArcBreakpointMPx = ArcBreakpointMPx;
 dist.ArcBreakpointS = ArcBreakpointS;
 dist.ArcBreakpointSPx = ArcBreakpointSPx;
@@ -1895,6 +1897,7 @@ dist.ArcIconSocialFacebook = ArcIconSocialFacebook;
 dist.ArcIconSocialInstagram = ArcIconSocialInstagram;
 dist.ArcIconSocialLinkedin = ArcIconSocialLinkedin;
 dist.ArcIconSocialTwitter = ArcIconSocialTwitter;
+dist.ArcIconSocialYouTube = ArcIconSocialYouTube;
 dist.ArcLeading = ArcLeading;
 dist.ArcLeadingPx = ArcLeadingPx;
 dist.ArcLineHeight01 = ArcLineHeight01;
@@ -3413,11 +3416,47 @@ var Section = function (_a) {
         }) }, filterDataAttrs(props)), children));
 };
 
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+var useMediaQuery = function (mediaQuery) {
+    var mediaQueryList = typeof window !== "undefined" ? window.matchMedia(mediaQuery) : undefined;
+    var _a = useState(false), matches = _a[0], setMatches = _a[1];
+    useEffect(function () {
+        setMatches(typeof window !== "undefined"
+            ? window.matchMedia(mediaQuery).matches
+            : false);
+    }, [mediaQuery]);
+    useEffect(function () {
+        var onMatchMedia = function (event) { return setMatches(event.matches); };
+        // Using deprecated addListener methods here for IE & Safari 13 support
+        if (mediaQueryList) {
+            mediaQueryList.addListener(onMatchMedia);
+        }
+        return function () { return mediaQueryList && mediaQueryList.removeListener(onMatchMedia); };
+    }, [mediaQueryList]);
+    return matches;
+};
+
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 var SiteFooter = function (_a) {
-    var children = _a.children, currentYear = _a.currentYear, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "siteName"]);
+    var children = _a.children, currentYear = _a.currentYear, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "main", "siteName"]);
     useEffect(function () {
         React.Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
@@ -3426,21 +3465,37 @@ var SiteFooter = function (_a) {
         });
     }, [children]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Curve, { bottomColor: "brand", size: "s" }),
-        React.createElement("div", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
-            React.createElement(Surface, { background: "brand", paddingVertical: "16" },
+        React.createElement(Curve, { bottomColor: "brand-flat", size: "s" }),
+        React.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                React.createElement(Section, null,
+                    siteName && React.createElement("div", { className: "arc-SiteFooter-name" }, siteName),
+                    main && React.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                (siteName || main) && React.createElement("hr", { className: "arc-SiteFooter-rule" }),
                 React.createElement(Section, null,
-                    children && React.createElement("ul", { className: "arc-SiteFooter-items" }, children),
-                    React.createElement(Columns, null,
-                        React.createElement(Columns.Col, { span: 5 }, siteName && (React.createElement(Align, { vertical: "center" },
-                            React.createElement("strong", null, siteName)))),
-                        React.createElement(Columns.Col, { span: 7 },
-                            React.createElement("div", { className: "arc-SiteFooter-brand" },
-                                React.createElement("div", { className: "arc-SiteFooter-copyright" },
-                                    React.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"),
-                                    " ",
-                                    currentYear || new Date().getFullYear()),
-                                React.createElement(BrandLogo, { size: 32 })))))))));
+                    React.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"),
+                                " ",
+                                currentYear || new Date().getFullYear()),
+                            React.createElement(BrandLogo, { size: 32 }))))))));
+};
+var SiteFooterItemGroup = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: " + ArcBreakpointM_1 + "px)");
+    useEffect(function () {
+        React.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem) {
+                throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM || typeof window === "undefined" },
+        React.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM && typeof window !== "undefined" ? -1 : 0 },
+            React.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
 var SiteFooterItem = function (_a) {
     var children = _a.children, href = _a.href, props = __rest(_a, ["children", "href"]);
@@ -3449,6 +3504,8 @@ var SiteFooterItem = function (_a) {
 };
 SiteFooterItem.displayName = "SiteFooter.Item";
 SiteFooter.Item = SiteFooterItem;
+SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
+SiteFooter.ItemGroup = SiteFooterItemGroup;
 
 /**
  * Use `SiteHeader` to display brand logo and navigation at the top of a page.