@arc-ui/components 10.8.0 → 11.0.0

package/dist/SiteFooter/SiteFooter.cjs.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var index_es = require('../_shared/cjs/index.es-77def0c9.js');
+var BtIconChevronDown2Px = require('../_shared/cjs/BtIconChevronDown2Px-8fb4e2eb.js');
+var React = require('react');
+var BrandLogo = require('../_shared/cjs/BrandLogo-3c6102ef.js');
+var Curve = require('../_shared/cjs/Curve-e72ce25b.js');
+var Section = require('../_shared/cjs/Section-780f2377.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('../_shared/cjs/suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+var SiteFooter = function (_a) {
+    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = index.__rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem) {
+                throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        curve ? (React__default["default"].createElement(Curve.Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React__default["default"].createElement("footer", index.__assign({ className: "arc-SiteFooter" }, index.filterDataAttrs(props)),
+            React__default["default"].createElement(Surface.Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Section.Section, null,
+                        siteName && (React__default["default"].createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React__default["default"].createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React__default["default"].createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React__default["default"].createElement(Section.Section, null,
+                    React__default["default"].createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React__default["default"].createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React__default["default"].createElement("div", { className: "arc-SiteFooter-brand" },
+                            React__default["default"].createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React__default["default"].createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React__default["default"].createElement(BrandLogo.BrandLogo, { label: logoLabel }))))))));
+};
+var SiteFooterItemGroup = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMinWidthArcBreakpointM = index_es.useMediaQuery("(min-width: ".concat(index_es.ArcBreakpointM, "px)"));
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem && item.type !== React.Fragment) {
+                throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default["default"].createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
+        React__default["default"].createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default["default"].createElement("span", { className: "arc-SiteFooter-icon" },
+                React__default["default"].createElement(BtIconChevronDown2Px.BtIconChevronDown2Px_2, null)),
+            React__default["default"].createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React__default["default"].createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+};
+var SiteFooterItem = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, props = index.__rest(_a, ["children", "href", "onClick"]);
+    return (React__default["default"].createElement("li", index.__assign({ className: "arc-SiteFooter-item" }, index.filterDataAttrs(props)),
+        React__default["default"].createElement("a", { onClick: handleLinkClick.handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+};
+SiteFooterItem.displayName = "SiteFooter.Item";
+SiteFooter.Item = SiteFooterItem;
+SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
+SiteFooter.ItemGroup = SiteFooterItemGroup;
+
+var SiteFooter_rehydrator = (function (el, rehydrateChildren) { return index.__awaiter(void 0, void 0, void 0, function () {
+    var children, titleElement, title, props;
+    return index.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, rehydrateChildren(el.querySelector(".arc-SiteFooter-mainItems"))];
+            case 1:
+                children = _a.sent();
+                titleElement = el.querySelector(".arc-SiteFooter-title");
+                title = "";
+                if (titleElement) {
+                    title = titleElement.textContent || /* istanbul ignore next */ "";
+                }
+                props = {
+                    children: children,
+                    title: title
+                };
+                return [2 /*return*/, React__default["default"].createElement(SiteFooter.ItemGroup, index.__assign({}, props), children)];
+        }
+    });
+}); });
+
+exports.SiteFooter = SiteFooter;
+exports.SiteFooterRehydrator = SiteFooter_rehydrator;

package/dist/SiteFooter/SiteFooter.esm.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { FC, ReactNode } from "react";
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+declare const SiteFooter: FC<SiteFooterProps> & {
+    Item: typeof SiteFooterItem;
+    ItemGroup: typeof SiteFooterItemGroup;
+};
+declare const SiteFooterItemGroup: FC<SiteFooterItemGroupProps>;
+declare const SiteFooterItem: FC<SiteFooterItemProps>;
+interface SiteFooterItemGroupProps {
+    /**
+     * Contents of the SiteFooterItemGroup. Must be SiteFooter.Item components.
+     */
+    children: ReactNode;
+    /**
+     * Title text for the SiteFooterItemGroup.
+     */
+    title: string;
+}
+interface SiteFooterItemProps {
+    /**
+     * Contents of the SiteFooterItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+interface SiteFooterProps {
+    /**
+     * Secondary content of the SiteFooter. Must be SiteFooter.Item components.
+     */
+    children?: ReactNode;
+    /**
+     * Copyright year.
+     */
+    currentYear?: string;
+    /**
+     * Should the SiteFooter include a Curve?
+     */
+    curve?: boolean;
+    /**
+     * Accessible text for the SiteFooter logo.
+     */
+    logoLabel?: string;
+    /**
+     * Main content of the SiteFooter. Must be SiteFooter.ItemGroup components.
+     */
+    main?: ReactNode;
+    /**
+     * Text that appears at the top of the footer. Can be the name of the site, a
+     * brand strapline, or similar.
+     */
+    siteName?: string;
+}
+declare const _default: (el: HTMLDivElement, rehydrateChildren: any) => Promise<JSX.Element>;
+export { SiteFooter, _default as SiteFooterRehydrator };

package/dist/SiteFooter/{index.js → SiteFooter.esm.js}

@@ -1,14 +1,14 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/index-e3c83626.js';
-import { A as ArcBreakpointM } from '../_shared/index.es-ff960629.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, d as __awaiter, e as __generator } from '../_shared/esm/index-229fc864.js';
+import { u as useMediaQuery, A as ArcBreakpointM } from '../_shared/esm/index.es-00cb3bcb.js';
+import { B as BtIconChevronDown2Px_2 } from '../_shared/esm/BtIconChevronDown2Px-4abd079b.js';
 import React, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from '../_shared/BrandLogo-6cc8202e.js';
-import { C as Curve } from '../_shared/Curve-5f476d0b.js';
-import { u as useMediaQuery } from '../_shared/use-media-query-f11805d4.js';
-import { S as Section } from '../_shared/Section-927988cb.js';
-import { S as Surface } from '../_shared/Surface-3fe44a2a.js';
-import { h as handleLinkClick } from '../_shared/handle-link-click-35e09d0c.js';
-import '../_shared/index-56d9df62.js';
-import '../_shared/suffix-modifier-2a93822c.js';
+import { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
+import { C as Curve } from '../_shared/esm/Curve-cfdca379.js';
+import { S as Section } from '../_shared/esm/Section-f1256c87.js';
+import { S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
+import '../_shared/esm/index-2ae58626.js';
+import '../_shared/esm/suffix-modifier-f5e28822.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.
@@ -51,6 +51,8 @@ var SiteFooterItemGroup = function (_a) {
     }, [children]);
     return (React.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React.createElement("span", { className: "arc-SiteFooter-icon" },
+                React.createElement(BtIconChevronDown2Px_2, null)),
             React.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };

package/dist/SiteFooter/package.json

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

package/dist/SiteHeader/{index.d.ts → SiteHeader.cjs.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FC, ReactNode, ReactElement } from "react";
-import { subBrands } from "../_shared/BrandLogo-6cc8202e";
+import { subBrands } from "../_shared/cjs/BrandLogo-3c6102ef";
 declare const Column: FC<ColumnProps>;
 interface ColumnProps {
     /**