@arc-ui/components 11.5.0 → 11.6.0

package/dist/_shared/cjs/SiteFooter-c540b5f1.js

@@ -0,0 +1,73 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index_es = require('./index.es-77def0c9.js');
+var BtIconChevronDown2Px = require('./BtIconChevronDown2Px-8fb4e2eb.js');
+var React = require('react');
+var BrandLogo = require('./BrandLogo-8008f0c4.js');
+var Curve = require('./Curve-b05589d8.js');
+var Section = require('./Section-48aca5f5.js');
+var Surface = require('./Surface-6da0a78e.js');
+var handleLinkClick = require('./handle-link-click-17a44cf4.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 = filterDataAttrs.__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", filterDataAttrs.__assign({ className: "arc-SiteFooter" }, filterDataAttrs.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 = filterDataAttrs.__rest(_a, ["children", "href", "onClick"]);
+    return (React__default["default"].createElement("li", filterDataAttrs.__assign({ className: "arc-SiteFooter-item" }, filterDataAttrs.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;
+
+exports.SiteFooter = SiteFooter;

package/dist/_shared/cjs/SiteHeader-c25ee36e.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { subBrands } from "./BrandLogo-8008f0c4";
+import { Column } from "./index-f419cf04";
+import { Item } from "./index-699086a7";
+import { ItemGroup } from "./index-e340924e";
+import { NavItem, NavItemWithSubNav } from "./index-e6d20018";
+import { NodeItem } from "./SiteHeader.rehydrator-f7fa2efe";
+import { SubNavItem } from "./index-74488a9f";
+declare const Context: React.Context<{
+    transparent: boolean;
+}>;
+/**
+ * Use `SiteHeader` to display brand logo and navigation at the top of a page.
+ */
+declare const SiteHeader: FC<SiteHeaderProps> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+};
+interface SiteHeaderProps {
+    /**
+     * Contents of the SiteHeader. Must be SiteHeader.NavItem or
+     * SiteHeader.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeader.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeader?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeader have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeader logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeader logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeader login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeader login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeader brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeader brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeader.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+export { MenuButton } from "./SiteHeader.rehydrator-f7fa2efe";
+export { SiteHeader, SiteHeaderProps, Context as SiteHeaderContext };

package/dist/_shared/cjs/SiteHeader.rehydrator-f7fa2efe.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode, ReactElement } from "react";
+declare const MenuButton: FC<MenuButtonProps>;
+interface MenuButtonProps {
+    menuOpen: boolean;
+    setMenuOpen: (arg0: boolean) => any;
+}
+declare const NodeItem: FC<NodeItemProps>;
+interface NodeItemProps {
+    /**
+     * Content to display with `SiteHeader.NodeItem`
+     */
+    children?: ReactNode;
+}
+declare const _default: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+declare const _default: (el: HTMLDivElement, hydrate: any) => Promise<JSX.Element>;
+declare const _default: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+declare const Panel: FC<PanelProps> & {
+    ViewAll: typeof ViewAll;
+};
+declare const ViewAll: FC<ViewAllProps>;
+interface ViewAllProps {
+    href: string;
+    title: string;
+    onClick?: () => void;
+}
+interface PanelProps {
+    children: ReactNode;
+    navItemRef: React.MutableRefObject<HTMLElement> | null;
+    open: boolean;
+    promo?: ReactNode;
+    setOpen: (arg0: boolean) => any;
+    subNavItemRef?: React.MutableRefObject<HTMLElement>;
+    subNavLink?: string;
+    title?: ReactNode;
+    viewAll?: ReactElement;
+    withSubNav?: boolean;
+}
+declare const BackButton: FC<BackButtonProps>;
+interface BackButtonProps {
+    setOpen: (arg0: boolean) => any;
+}
+declare const Column: FC<ColumnProps>;
+interface ColumnProps {
+    /**
+     * Contents of the Column. Must be SiteHeader.ItemGroup components.
+     */
+    children: ReactNode;
+}
+declare const _default: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+declare const Item: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Contents of the Item. Usually text to be displayed in the Item link.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * Should the Item be emphasised?
+     */
+    isEmphasised?: boolean;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+declare const SiteHeaderRehydrator: {
+    (el: HTMLDivElement, hydrate: any): Promise<JSX.Element>;
+    ItemGroupRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    NavItemWithSubNavRehydrator: (el: HTMLLIElement, hydrate: any) => Promise<JSX.Element>;
+    SubNavItemRehydrator: (el: HTMLDivElement, hydrate: any) => Promise<JSX.Element>;
+};
+export { _default as default, MenuButton, MenuButtonProps, NodeItem, NodeItemProps, Panel, ViewAll, ViewAllProps, PanelProps, BackButton, BackButtonProps, Column, ColumnProps, Item, ItemProps };