@arc-ui/components 11.5.0 → 11.7.0

package/dist/_shared/esm/RadioGroup-65b8c8bf.js

@@ -0,0 +1,64 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
+import { F as FormControl } from './FormControl-2fa7aae5.js';
+import { c as classNames } from './index-2ae58626.js';
+import { C as Context } from './Surface-dde51789.js';
+
+var RadioContext = createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Radio Button component.
+ */
+var RadioButton = forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var surface = useContext(Context).surface;
+    var idLabel = "".concat(id, "-label");
+    var checked = checkedValue === value ? true : false;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-RadioButton": true,
+            "arc-RadioButton--disabled": isDisabled || groupDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
+            "arc-RadioButton--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React__default.createElement("span", null,
+                label,
+                helper && React__default.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+});
+
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+var RadioGroup = function (_a) {
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            size: size
+        } },
+        React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
+};
+RadioButton.displayName = "RadioGroup.RadioButton";
+RadioGroup.RadioButton = RadioButton;
+
+export { RadioGroup as R };

package/dist/_shared/esm/SiteFooter-51bdc7df.d.ts

@@ -0,0 +1,62 @@
+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;
+}
+export { SiteFooter, SiteFooterItemGroup, SiteFooterItem, SiteFooterItemGroupProps, SiteFooterItemProps, SiteFooterProps };

package/dist/_shared/esm/SiteFooter-51bdc7df.js

@@ -0,0 +1,67 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { u as useMediaQuery, A as ArcBreakpointM } from './index.es-00cb3bcb.js';
+import { B as BtIconChevronDown2Px_2 } from './BtIconChevronDown2Px-782876e2.js';
+import React__default, { useEffect, Fragment } from 'react';
+import { B as BrandLogo } from './BrandLogo-9ec620e8.js';
+import { C as Curve } from './Curve-3e87b1bc.js';
+import { S as Section } from './Section-b8038d66.js';
+import { S as Surface } from './Surface-dde51789.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+
+/**
+ * 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 = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    useEffect(function () {
+        React__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.createElement(React__default.Fragment, null,
+        curve ? (React__default.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React__default.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React__default.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Section, null,
+                        siteName && (React__default.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React__default.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React__default.createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React__default.createElement(Section, null,
+                    React__default.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React__default.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React__default.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React__default.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React__default.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React__default.createElement(BrandLogo, { label: logoLabel }))))))));
+};
+var SiteFooterItemGroup = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
+        React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default.createElement("span", { className: "arc-SiteFooter-icon" },
+                React__default.createElement(BtIconChevronDown2Px_2, null)),
+            React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+};
+var SiteFooterItem = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
+    return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+};
+SiteFooterItem.displayName = "SiteFooter.Item";
+SiteFooter.Item = SiteFooterItem;
+SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
+SiteFooter.ItemGroup = SiteFooterItemGroup;
+
+export { SiteFooter as S };

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

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { subBrands } from "./BrandLogo-9ec620e8";
+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-382d1c03";
+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-382d1c03";
+export { SiteHeader, SiteHeaderProps, Context as SiteHeaderContext };

package/dist/_shared/esm/SiteHeader.rehydrator-382d1c03.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 };