@ukic/react 3.5.0 → 3.7.0

package/dist/performance-tests/pages/IcButton/IcButtonWithEvents/index.js

@@ -0,0 +1,18 @@
+// IcButtonMultiplePage displays multiple buttons with events for the purpose of performance testing of the IcButton component.
+import React from "react";
+import { IcButton, IcTheme, IcTypography } from "../../../../components";
+var IcButtonEventsPage = function (_a) {
+    var theme = _a.theme;
+    var handleClick = function () { return console.log("Button clicked"); };
+    var handleFocus = function () { return console.log("Button gained focus"); };
+    var handleBlur = function () { return console.log("Button lost focus"); };
+    var buttons = Array.from({ length: 100 }, function (_, index) { return (React.createElement(IcButton, { key: index, style: { padding: "var(--ic-space-xs)" }, onClick: handleClick, onIcFocus: handleFocus, onIcBlur: handleBlur },
+        "Button ",
+        index + 1)); });
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Button With Event Listeners Page")),
+            buttons)));
+};
+export default IcButtonEventsPage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxBasicMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcCheckboxBasicMultiplePage: React.FC<PageProps>;
+export default IcCheckboxBasicMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxBasicMultiple/index.js

@@ -0,0 +1,44 @@
+// IcCheckboxBasicMultiplePage displays multiple basic checkbox groups for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTheme, IcTypography, } from "../../../../components";
+var COLOURS = [
+    { value: "black", label: "Black" },
+    { value: "grey", label: "Grey" },
+    { value: "blue", label: "Blue" },
+    { value: "navy", label: "Navy" },
+    { value: "purple", label: "Purple" },
+    { value: "pink", label: "Pink" },
+    { value: "orange", label: "Orange" },
+    { value: "red", label: "Red" },
+    { value: "green", label: "Green" },
+    { value: "yellow", label: "Yellow" },
+    { value: "cream", label: "Cream" },
+    { value: "white", label: "White" },
+    { value: "brown", label: "Brown" },
+    { value: "silver", label: "Silver" },
+    { value: "gold", label: "Gold" },
+    { value: "multi", label: "Multi" },
+];
+var handleCheckboxGroupChange = function (ev) {
+    console.log("onIcChange", ev.detail.value);
+};
+var handleCheckboxCheck = function (ev) {
+    console.log("onIcCheck", ev);
+};
+var Checkbox = function () { return (React.createElement(IcCheckboxGroup, { label: "Select a colour or colours", name: "default", onIcChange: handleCheckboxGroupChange }, COLOURS.map(function (colour) { return (React.createElement(IcCheckbox, { key: colour.value, value: colour.value, label: colour.label, onIcCheck: handleCheckboxCheck })); }))); };
+var IcCheckboxBasicMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var checkboxes = Array.from({ length: 10 }, function (_, index) { return (React.createElement(Checkbox, { key: index })); });
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Checkbox Basic Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, checkboxes)));
+};
+export default IcCheckboxBasicMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcCheckboxMultiplePage: React.FC<PageProps>;
+export default IcCheckboxMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxMultiple/index.js

@@ -0,0 +1,33 @@
+// IcCheckboxMultiplePage displays multiple checkbox groups for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTextField, IcTheme, IcTypography, } from "../../../../components";
+var handleCheckboxGroupChange = function (ev) {
+    console.log("onIcChange", ev.detail.value);
+};
+var handleCheckboxCheck = function (ev) {
+    console.log("onIcCheck", ev);
+};
+var Checkbox = function () { return (React.createElement(IcCheckboxGroup, { label: "Select your extras", name: "default", onIcChange: handleCheckboxGroupChange },
+    React.createElement(IcCheckbox, { value: "extra", label: "Extra shot (50p)", onIcCheck: handleCheckboxCheck }),
+    React.createElement(IcCheckbox, { value: "Soya milk", label: "Soya milk", checked: true }),
+    React.createElement(IcCheckbox, { value: "keep cup", label: "Takeaway cup", disabled: true }),
+    React.createElement(IcCheckbox, { value: "other", label: "Other" },
+        React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })),
+    React.createElement(IcCheckbox, { additionalFieldDisplay: "dynamic", value: "other", label: "Other" },
+        React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })))); };
+var IcCheckboxMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var checkboxes = Array.from({ length: 20 }, function (_, index) { return (React.createElement(Checkbox, { key: index })); });
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Checkbox Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+            } }, checkboxes)));
+};
+export default IcCheckboxMultiplePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcCheckboxSinglePage: React.FC<PageProps>;
+export default IcCheckboxSinglePage;

package/dist/performance-tests/pages/IcCheckbox/IcCheckboxSingle/index.js

@@ -0,0 +1,25 @@
+// IcCheckboxSinglePage displays a single checkbox group for the purpose of performance testing of the IcCheckbox component.
+import React from "react";
+import { IcCheckbox, IcCheckboxGroup, IcTextField, IcTheme, IcTypography, } from "../../../../components";
+var IcCheckboxSinglePage = function (_a) {
+    var theme = _a.theme;
+    var handleCheckboxGroupChange = function (ev) {
+        console.log("onIcChange", ev.detail.value);
+    };
+    var handleCheckboxCheck = function (ev) {
+        console.log("onIcCheck", ev);
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Checkbox Page")),
+            React.createElement(IcCheckboxGroup, { label: "Select your extras", name: "default", onIcChange: handleCheckboxGroupChange },
+                React.createElement(IcCheckbox, { value: "extra", label: "Extra shot (50p)", onIcCheck: handleCheckboxCheck }),
+                React.createElement(IcCheckbox, { value: "Soya milk", label: "Soya milk", checked: true }),
+                React.createElement(IcCheckbox, { value: "keep cup", label: "Takeaway cup", disabled: true }),
+                React.createElement(IcCheckbox, { value: "other", label: "Other" },
+                    React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." })),
+                React.createElement(IcCheckbox, { additionalFieldDisplay: "dynamic", value: "other", label: "Other" },
+                    React.createElement(IcTextField, { slot: "additional-field", label: "Please let us know..." }))))));
+};
+export default IcCheckboxSinglePage;

package/dist/performance-tests/pages/IcDialog/IcDialogAllOpen/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcDialogAllOpenPage: React.FC<PageProps>;
+export default IcDialogAllOpenPage;

package/dist/performance-tests/pages/IcDialog/IcDialogAllOpen/index.js

@@ -0,0 +1,16 @@
+// IcDialogAllOpenPage displays multiple dialogs that are all open on page render for the purpose of performance testing of the IcDialog component.
+import React from "react";
+import { IcDialog, IcTypography, IcTheme } from "../../../../components";
+var IcDialogAllOpenPage = function (_a) {
+    var theme = _a.theme;
+    var dialogs = Array.from({ length: 20 }, function (_, index) { return (React.createElement(IcDialog, { key: index, open: true, label: "Default dialog ".concat(index + 1), heading: "This is default dialog ".concat(index + 1) },
+        React.createElement(IcTypography, null,
+            "This is default dialog ",
+            index + 1,
+            ". It is used to display information to the user."))); });
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Dialog All Open Page")),
+        dialogs));
+};
+export default IcDialogAllOpenPage;

package/dist/performance-tests/pages/IcDialog/IcDialogMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcDialogMultiplePage: React.FC<PageProps>;
+export default IcDialogMultiplePage;

package/dist/performance-tests/pages/IcDialog/IcDialogMultiple/index.js

@@ -0,0 +1,146 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// IcDialogMultiplePage displays multiple dialogs for the purpose of performance testing of the IcDialog component.
+import React from "react";
+import { IcButton, IcDialog, IcTypography, IcTheme, } from "../../../../components";
+var DialogLauncher = function (_a) {
+    var id = _a.id, heading = _a.heading, label = _a.label, size = _a.size, content = _a.content, buttonText = _a.buttonText, _b = _a.closeOnBackdropClick, closeOnBackdropClick = _b === void 0 ? true : _b, _c = _a.open, open = _c === void 0 ? false : _c, _d = _a.destructive, destructive = _d === void 0 ? false : _d, _e = _a.disableWidthConstraint, disableWidthConstraint = _e === void 0 ? false : _e, _f = _a.disableHeightConstraint, disableHeightConstraint = _f === void 0 ? false : _f, _g = _a.hideCloseButton, hideCloseButton = _g === void 0 ? false : _g, onOpened = _a.onOpened, onConfirmed = _a.onConfirmed, onCancelled = _a.onCancelled, onClosed = _a.onClosed;
+    var showDialog = function () {
+        var dialog = document.querySelector("#".concat(id));
+        if (dialog) {
+            dialog.open = true;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(IcButton, { onClick: showDialog }, buttonText),
+        React.createElement(IcDialog, { id: id, heading: heading, label: label, size: size, closeOnBackdropClick: closeOnBackdropClick, open: open, destructive: destructive, disableWidthConstraint: disableWidthConstraint, disableHeightConstraint: disableHeightConstraint, hideCloseButton: hideCloseButton, onIcDialogOpened: onOpened, onIcDialogConfirmed: onConfirmed, onIcDialogCancelled: onCancelled, onIcDialogClosed: onClosed },
+            React.createElement(IcTypography, null, content))));
+};
+var dialogs = [
+    {
+        id: "auto-opening-dialog",
+        heading: "This dialog opens automatically using the open prop",
+        label: "Auto opening dialog",
+        buttonText: "Launch auto opening dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        open: true,
+    },
+    {
+        id: "small-dialog",
+        heading: "This is a small dialog",
+        label: "Small",
+        size: "small",
+        buttonText: "Launch small dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "medium-dialog",
+        heading: "This is a medium dialog",
+        label: "Medium",
+        size: "medium",
+        buttonText: "Launch medium dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "large-dialog",
+        heading: "This is a large dialog",
+        label: "Large",
+        size: "large",
+        buttonText: "Launch large dialog",
+        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    },
+    {
+        id: "scrollable-dialog",
+        heading: "This dialog has overflowing content",
+        label: "Scrollable",
+        buttonText: "Launch scrollable dialog",
+        content: (React.createElement(React.Fragment, null,
+            "What is Lorem Ipsum?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Why do we use it?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).")),
+    },
+    {
+        id: "background-close-prevented-dialog",
+        heading: "This dialog can't be closed by clicking the background",
+        label: "Background close prevented",
+        buttonText: "Launch background close prevented dialog",
+        content: "You are about to add 'Americano' to your basket. Are you sure you want to continue?",
+        closeOnBackdropClick: false,
+    },
+    {
+        id: "default-dialog",
+        heading: "This is a default dialog",
+        label: "Default dialog",
+        buttonText: "Launch default dialog",
+        content: "Dialog content goes here.",
+    },
+    {
+        id: "destructive-dialog",
+        heading: "This is a destructive dialog",
+        label: "Destructive dialog",
+        buttonText: "Launch destructive dialog",
+        content: "Dialog content goes here.",
+        destructive: true,
+    },
+    {
+        id: "height-width-constraint-disabled-dialog",
+        heading: "This is a dialog where the height and width constraints are disabled",
+        label: "Height/width dialog",
+        buttonText: "Launch height/width constraint disabled dialog",
+        content: (React.createElement(React.Fragment, null,
+            "What is Lorem Ipsum?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "Why do we use it?",
+            React.createElement("br", null),
+            React.createElement("br", null),
+            "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).")),
+        disableWidthConstraint: true,
+        disableHeightConstraint: true,
+        size: "large",
+    },
+    {
+        id: "no-close-button-dialog",
+        heading: "This is a dialog with close button hidden",
+        label: "No close button dialog",
+        buttonText: "Launch no close button dialog",
+        content: "Dialog content goes here.",
+        hideCloseButton: true,
+    },
+];
+var IcDialogMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var handleDialogOpened = function () { return console.log("Dialog opened"); };
+    var handleDialogClosed = function () { return console.log("Dialog closed"); };
+    var handleDialogCancelled = function () { return console.log("Dialog cancelled"); };
+    var handleDialogConfirmed = function () { return console.log("Dialog confirmed"); };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Dialog Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "1rem",
+                padding: "var(--ic-space-md)",
+            } }, dialogs.map(function (dialog) { return (React.createElement(DialogLauncher, __assign({ key: dialog.id }, dialog, { onOpened: handleDialogOpened, onConfirmed: handleDialogConfirmed, onCancelled: handleDialogCancelled, onClosed: handleDialogClosed }))); }))));
+};
+export default IcDialogMultiplePage;

package/dist/performance-tests/pages/IcDialog/IcDialogSingle/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcDialogSinglePage: React.FC<PageProps>;
+export default IcDialogSinglePage;

package/dist/performance-tests/pages/IcDialog/IcDialogSingle/index.js

@@ -0,0 +1,27 @@
+// IcDialogSinglePage displays a single dialog for the purpose of performance testing of the IcDialog component.
+import React, { useState } from "react";
+import { IcButton, IcDialog, IcTypography, IcTheme, } from "../../../../components";
+var IcDialogSinglePage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(true), openDialog = _b[0], setOpenDialog = _b[1];
+    var handleDialogOpen = function () {
+        console.log("Dialog opened");
+        setOpenDialog(true);
+    };
+    var handleDialogClose = function () {
+        console.log("Dialog closed");
+        setOpenDialog(false);
+    };
+    var handleDialogConfirmed = function () {
+        console.log("Dialog confirmed");
+        setOpenDialog(false);
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Dialog Page")),
+            React.createElement(IcButton, { variant: "primary", onClick: handleDialogOpen }, "Launch auto opening dialog"),
+            React.createElement(IcDialog, { id: "auto-opening-dialog", heading: "This dialog opens automatically using the open prop", label: "Auto opening dialog", open: openDialog, onIcDialogClosed: handleDialogClose, onIcDialogConfirmed: handleDialogConfirmed },
+                React.createElement(IcTypography, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")))));
+};
+export default IcDialogSinglePage;

package/dist/performance-tests/pages/IcDialog/IcDialogSlottedContent/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcDialogSlottedContentPage: React.FC<PageProps>;
+export default IcDialogSlottedContentPage;

package/dist/performance-tests/pages/IcDialog/IcDialogSlottedContent/index.js

@@ -0,0 +1,38 @@
+// IcDialogSlottedContentPage displays a single dialog with slotted content for the purpose of performance testing of the IcDialog component.
+import React, { useState } from "react";
+import { IcButton, IcDialog, IcTypography, IcAlert, IcLink, IcTheme, } from "../../../../components";
+var IcDialogSlottedContentPage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(true), openDialog = _b[0], setOpenDialog = _b[1];
+    var handleDialogOpen = function () {
+        console.log("Dialog opened");
+        setOpenDialog(true);
+    };
+    var handleDialogClose = function () {
+        console.log("Dialog closed");
+        setOpenDialog(false);
+    };
+    var handleAddToBasket = function () {
+        console.log("Added to basket");
+        setOpenDialog(false);
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement("div", { style: { padding: "var(--ic-space-md)" } },
+            React.createElement(IcTypography, { variant: "subtitle-small" },
+                React.createElement("h1", null, "Dialog With Slotted Content Page")),
+            React.createElement(IcButton, { variant: "primary", onClick: handleDialogOpen }, "Launch dialog"),
+            React.createElement(IcDialog, { id: "auto-opening-dialog", disableWidthConstraint: true, hideDefaultControls: true, size: "large", open: openDialog, onIcDialogClosed: handleDialogClose },
+                React.createElement(IcTypography, { slot: "heading", variant: "h4" }, "This is a slotted heading"),
+                React.createElement(IcTypography, { slot: "label", variant: "label" }, "Slotted label"),
+                React.createElement(IcAlert, { variant: "info", heading: "Info", message: "This alert is for displaying information", slot: "alert" },
+                    React.createElement(IcTypography, { slot: "message" },
+                        "This is some text and",
+                        " ",
+                        React.createElement(IcLink, { href: "/" }, "this is an inline link"),
+                        " within the text."),
+                    React.createElement(IcButton, { slot: "action", variant: "secondary" }, "Button")),
+                React.createElement(IcTypography, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+                React.createElement(IcButton, { slot: "dialog-controls", variant: "secondary", onClick: handleDialogClose }, "Go back"),
+                React.createElement(IcButton, { slot: "dialog-controls", onClick: handleAddToBasket }, "Add to basket")))));
+};
+export default IcDialogSlottedContentPage;

package/dist/performance-tests/pages/IcFooter/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcFooterPage: React.FC<PageProps>;
+export default IcFooterPage;

package/dist/performance-tests/pages/IcFooter/index.js

@@ -0,0 +1,38 @@
+// IcFooterPage displays a footer for the purpose of performance testing of the IcFooter component.
+import React from "react";
+import { IcFooter, IcFooterLink, IcClassificationBanner, IcTheme, IcTypography, } from "../../../components";
+var IcFooterPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Footer Page")),
+        React.createElement(React.Fragment, null,
+            React.createElement(IcClassificationBanner, { classification: "official" }),
+            React.createElement(IcFooter, { description: "The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, please get in touch.", caption: "All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.", style: { position: "fixed", bottom: "0", left: "0", right: "0" } },
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Get Started"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Accessibility"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Styles"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Components"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Patterns"),
+                React.createElement(IcFooterLink, { slot: "link", href: "/" }, "Design toolkit"),
+                React.createElement("div", { slot: "logo", role: "list", style: {
+                        display: "flex",
+                        gap: "var(--ic-space-lg)",
+                    } },
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 1"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))),
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 2"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))),
+                    React.createElement(IcFooterLink, { href: "/" },
+                        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "48px", viewBox: "0 0 24 24", width: "48px", fill: "#FFFFFF" },
+                            React.createElement("title", null, "Footer logo link 3"),
+                            React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+                            React.createElement("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z" }))))))));
+};
+export default IcFooterPage;

package/dist/performance-tests/pages/IcHero/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcHeroPage: React.FC<PageProps>;
+export default IcHeroPage;

package/dist/performance-tests/pages/IcHero/index.js

@@ -0,0 +1,18 @@
+// IcHeroPage displays a hero for the purpose of performance testing of the IcHero component.
+import React from "react";
+import { IcHero, IcButton, IcTextField, IcLink, IcCardVertical, IcSearchBar, IcTheme, IcTypography, } from "../../../components";
+var IcHeroPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Hero Page")),
+        React.createElement(IcHero, { heading: "Hero heading", subheading: "Hero description. This is a Hero component, it should be used as a page heading.", secondaryHeading: "Secondary Heading", secondarySubheading: "This is a secondary description.", aligned: "center" },
+            React.createElement("div", { slot: "interaction", style: { display: "flex" } },
+                React.createElement(IcTextField, { placeholder: "Filter display", label: "Filter display", "hide-label": true }),
+                React.createElement(IcButton, { variant: "primary", style: { marginLeft: "var(--ic-space-md)" } }, "Filter")),
+            React.createElement(IcButton, { variant: "secondary", slot: "interaction" }, "See all"),
+            React.createElement(IcSearchBar, { slot: "interaction", label: "Label", hideLabel: true }),
+            React.createElement(IcLink, { href: "https://google.com", slot: "interaction", style: { marginTop: "var(--ic-space-sm)" } }, "Help"),
+            React.createElement(IcCardVertical, { heading: "Latest announcement", message: "This is some example text that can be included in the card copy.", slot: "secondary" }))));
+};
+export default IcHeroPage;

package/dist/performance-tests/pages/IcPageHeader/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPageHeaderPage: React.FC<PageProps>;
+export default IcPageHeaderPage;

package/dist/performance-tests/pages/IcPageHeader/index.js

@@ -0,0 +1,24 @@
+// IcPageHeaderPage displays a page header for the purpose of performance testing of the IcPageHeader component.
+import React from "react";
+import { IcPageHeader, IcStatusTag, IcBreadcrumbGroup, IcBreadcrumb, IcButton, IcTextField, IcNavigationItem, IcTheme, IcTypography, } from "../../../components";
+import { SlottedSVG } from "../../../react-component-lib/slottedSVG";
+var IcPageHeaderPage = function (_a) {
+    var theme = _a.theme;
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Page Header Page")),
+        React.createElement(IcPageHeader, { heading: "Page header", subheading: "This is a simple page header component and this is the text. This page header is only sticky for viewport widths of 992px and above..", stickyDesktopOnly: true, aligned: "full-width" },
+            React.createElement(IcStatusTag, { slot: "heading-adornment", label: "Beta" }),
+            React.createElement(IcBreadcrumbGroup, { slot: "breadcrumbs" },
+                React.createElement(IcBreadcrumb, { pageTitle: "Breadcrumb 1", href: "/breadcrumb-1" }),
+                React.createElement(IcBreadcrumb, { current: true, pageTitle: "Breadcrumb 2", href: "/breadcrumb-2" })),
+            React.createElement(IcButton, { slot: "actions", variant: "primary" },
+                "Create coffee",
+                React.createElement(SlottedSVG, { slot: "left-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { d: "M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z", fill: "currentColor" }))),
+            React.createElement(IcButton, { slot: "actions", variant: "secondary" }, "Filter coffee"),
+            React.createElement(IcTextField, { slot: "input", placeholder: "Enter your input", label: "Input", hideLabel: true }),
+            React.createElement(IcNavigationItem, { slot: "tabs", label: "All recipes", href: "/", selected: true }),
+            React.createElement(IcNavigationItem, { slot: "tabs", label: "Favourites", href: "/" }))));
+};
+export default IcPageHeaderPage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultiple/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPopoverMenuMultiplePage: React.FC<PageProps>;
+export default IcPopoverMenuMultiplePage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultiple/index.js

@@ -0,0 +1,51 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+// IcPopoverMenuMultiplePage displays multiple popover menus for the purpose of performance testing of the IcPopoverMenu component.
+import React, { useState } from "react";
+import { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu, IcTheme, IcTypography, } from "../../../../components";
+var NUM_POPOVERS = 15;
+var IcPopoverMenuMultiplePage = function (_a) {
+    var theme = _a.theme;
+    var _b = useState(__spreadArray([
+        true
+    ], Array(NUM_POPOVERS - 1).fill(false), true)), popoverOpen = _b[0], setPopoverOpen = _b[1];
+    var handlePopoverToggled = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? !open : open); }); });
+    };
+    var handlePopoverClosed = function (idx) {
+        setPopoverOpen(function (prev) { return prev.map(function (open, i) { return (i === idx ? false : open); }); });
+    };
+    return (React.createElement(IcTheme, { id: "theme-wrapper", theme: theme },
+        React.createElement(IcTypography, { variant: "subtitle-small", style: { padding: "var(--ic-space-md)" } },
+            React.createElement("h1", null, "Popover Menu Multiple Page")),
+        React.createElement("div", { style: {
+                display: "flex",
+                flexWrap: "wrap",
+                gap: "1rem",
+                margin: "1rem",
+                width: "fit-content",
+                padding: "10px",
+                marginTop: "540px",
+            } }, Array.from({ length: NUM_POPOVERS }).map(function (_, idx) { return (React.createElement("div", { key: idx },
+            React.createElement(IcButton, { title: "Show/hide popover ".concat(idx + 1), id: "button-".concat(idx), onClick: function () { return handlePopoverToggled(idx); }, "aria-expanded": popoverOpen[idx] },
+                "Show/hide popover ",
+                idx + 1),
+            React.createElement(IcPopoverMenu, { anchor: "button-".concat(idx), "aria-label": "popover-".concat(idx), open: popoverOpen[idx], onIcPopoverClosed: function (event) {
+                    handlePopoverClosed(idx);
+                    console.log("Popover menu closed: ", event);
+                } },
+                React.createElement(IcMenuGroup, { label: "Edit options" },
+                    React.createElement(IcMenuItem, { label: "Copy", disabled: true }),
+                    React.createElement(IcMenuItem, { label: "Paste", keyboardShortcutLabel: "Cmd + V" })),
+                React.createElement(IcMenuGroup, null,
+                    React.createElement(IcMenuItem, { label: "Format" }),
+                    React.createElement(IcMenuItem, { label: "Help" }))))); }))));
+};
+export default IcPopoverMenuMultiplePage;

package/dist/performance-tests/pages/IcPopoverMenu/IcPopoverMenuMultipleNotRendered/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+type PageProps = {
+    theme: "light" | "dark";
+};
+declare const IcPopoverMenuNotRenderedPage: React.FC<PageProps>;
+export default IcPopoverMenuNotRenderedPage;