@arc-ui/components 11.4.2 → 11.6.0

package/dist/_shared/cjs/RadioGroup-81805ef9.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "./FormControl-9aaddd54";
+/**
+ * Radio Button component.
+ */
+declare const RadioButton: FC<RadioButtonProps>;
+interface RadioButtonProps {
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+type EventType = React.ChangeEvent<HTMLInputElement>;
+type ContextProps = {
+    blurEvent: (event: EventType) => void;
+    changeEvent: (event: EventType) => void;
+    groupDisabled: boolean;
+    checkedValue: string;
+    labelSize: "s" | "l";
+    name: string;
+    size: "s" | "l";
+};
+declare const Provider: React.Provider<ContextProps>;
+declare const useRadioContext: () => ContextProps;
+type EventType$0 = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+declare const RadioGroup: FC<RadioGroupProps> & {
+    RadioButton: typeof RadioButton;
+};
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React.ReactNode;
+    /**
+     * Value of the RadioButton that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all controls be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the RadioGroup.
+     */
+    helper?: string;
+    /**
+     * ID for the RadioGroup.
+     */
+    id: string;
+    /**
+     * Label for the RadioGroup.
+     */
+    label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Name for the RadioGroup.
+     */
+    name: string;
+    /**
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType$0) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType$0) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
+}
+export { RadioButton, RadioButtonProps, Provider, useRadioContext, RadioGroup, RadioGroupProps };

package/dist/_shared/cjs/RadioGroup-81805ef9.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var React = require('react');
+var FormControl = require('./FormControl-9aaddd54.js');
+var index = require('./index-45bfb67b.js');
+var Surface = require('./Surface-6da0a78e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var RadioContext = React.createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = React.useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Radio Button component.
+ */
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = filterDataAttrs.__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 = React.useContext(Surface.Context).surface;
+    var idLabel = "".concat(id, "-label");
+    var checked = checkedValue === value ? true : false;
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.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.filterDataAttrs(props)),
+        React__default["default"].createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React__default["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["default"].createElement("span", null,
+                label,
+                helper && React__default["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 = filterDataAttrs.__rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    React.useEffect(function () {
+        React__default["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["default"].createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            size: size
+        } },
+        React__default["default"].createElement("div", filterDataAttrs.__assign({ className: "arc-RadioGroup" }, filterDataAttrs.filterDataAttrs(props)),
+            React__default["default"].createElement(FormControl.FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
+};
+RadioButton.displayName = "RadioGroup.RadioButton";
+RadioGroup.RadioButton = RadioButton;
+
+exports.RadioGroup = RadioGroup;

package/dist/_shared/cjs/{Section-780f2377.js → Section-48aca5f5.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-78b35bc1.js');
-var index$1 = require('./index-45bfb67b.js');
+var filterDataAttrs = require('./filter-data-attrs-a30dcf5f.js');
+var index = require('./index-45bfb67b.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,12 +12,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * Use `Section` to compose content into vertical page layouts.
  */
 var Section = function (_a) {
-    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = index.__rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
-    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, props = filterDataAttrs.__rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
+    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
             "arc-Section": true,
             "arc-Section--fullWidth": isFullWidth,
             "arc-Section--debugVisible": isDebugVisible
-        }) }, index.filterDataAttrs(props)), children));
+        }) }, filterDataAttrs.filterDataAttrs(props)), children));
 };
 
 exports.Section = Section;

package/dist/_shared/cjs/SiteFooter-c540b5f1.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/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 };