@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/esm/components/link/constants.js

@@ -0,0 +1,29 @@
+export const allowedValues = {
+    colors: ['default', 'mono', 'inverse'],
+    kind: ['bold', 'simple'],
+    linkButtonKind: ['secondary', 'primary', 'inverse'],
+    sizes: [
+        'default',
+        'large',
+        'medium',
+        'small',
+        'xsmall'
+    ],
+    targets: [
+        '_blank',
+        '_parent',
+        '_top',
+        '_self'
+    ]
+};
+/**
+ * Default values for props on the Link component;
+ * Shared between the component and Storybook
+ */
+export const defaults = {
+    color: 'default',
+    kind: 'bold',
+    linkButtonKind: 'secondary',
+    size: 'default',
+    target: '_self'
+};

package/dist/esm/components/link/index.js

@@ -0,0 +1,2 @@
+export * from './MrlLink';
+export * from './MrlLinkButton';

package/dist/esm/components/live-region/MrlLiveRegion/MrlLiveRegion.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import { getUniqueId } from '../../../utils';
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+/**
+ * Live region component to render an HTML live region with the provided content.
+ *
+ * @param props - The live region component props.
+ * @returns The live region component.
+ */
+export const MrlLiveRegion = (_a) => {
+    var { ariaAtomic, ariaLive, ariaRelevant, id, srContent, visible = false, shouldClearContent = false } = _a, props = __rest(_a, ["ariaAtomic", "ariaLive", "ariaRelevant", "id", "srContent", "visible", "shouldClearContent"]);
+    const [content, setContent] = useState('');
+    React.useEffect(() => {
+        setContent(srContent);
+        if (shouldClearContent) {
+            const contentTimeout = setTimeout(() => {
+                setContent('');
+                clearTimeout(contentTimeout);
+            }, 1000);
+            return () => clearTimeout(contentTimeout);
+        }
+    }, [shouldClearContent, srContent]);
+    const nodeId = useMemo(() => id || getUniqueId('live-region-'), [id]);
+    const dataQaProp = props['data-qa'];
+    const dataQa = dataQaProp || `${nodeId}-live-region`;
+    const classes = classNames('MrlLiveRegion', {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'mrl-visually-hidden': !visible
+    });
+    return (React.createElement("p", Object.assign({}, (ariaAtomic ? { 'aria-atomic': ariaAtomic } : {}), { "aria-live": ariaLive }, (ariaRelevant ? { 'aria-relevant': ariaRelevant } : {}), { className: classes, "data-qa": dataQa, id: nodeId }, props), content));
+};

package/dist/esm/components/live-region/MrlLiveRegion/index.js

@@ -0,0 +1 @@
+export { MrlLiveRegion } from './MrlLiveRegion';

package/dist/esm/components/live-region/demo/LiveRegionDemo.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { MrlButton } from '../../button';
+import { MrlLiveRegion } from '../MrlLiveRegion';
+/**
+ * Demo of a live region
+ *
+ * @returns {Element} The Live Region Demo
+ */
+export const LiveRegionDemo = () => {
+    const [content, setContent] = React.useState(null);
+    const updateContent = (content) => {
+        setContent(content);
+    };
+    const srContent = content || 'This is a live region';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 1'), text: "Button 1" }),
+        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 2'), text: "Button 2" }),
+        React.createElement(MrlButton, { onClick: () => updateContent('You clicked button 3'), text: "Button 3" }),
+        React.createElement(MrlLiveRegion, { ariaLive: "polite", visible: true, srContent: srContent })));
+};

package/dist/esm/components/live-region/index.js

@@ -0,0 +1 @@
+export * from './MrlLiveRegion';

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.js

@@ -0,0 +1,65 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { MrlTextHeading } from '../../';
+import { progressBarDefaults } from '../constants';
+import styles from './MrlProgressBar.module.scss.js';
+import '../../../styles/shared/a11y-helpers/a11y.global.css';
+/**
+ * MrlProgressBar React component.
+ *
+ * @param props - component props
+ * @returns a MrlProgressBar React component.
+ */
+export function MrlProgressBar(_a) {
+    var { children, className = '', indeterminate = false, name, percent = progressBarDefaults.percent, showText = progressBarDefaults.showText, text, time = 0 } = _a, rest = __rest(_a, ["children", "className", "indeterminate", "name", "percent", "showText", "text", "time"]);
+    const roundPercent = percent ? Math.round(percent) : 0;
+    const containerClasses = classnames(styles['MrlProgressBar-container'], 'MrlProgressBar-container', {
+        [`${className}-container`]: className !== ''
+    });
+    const progressBarClasses = classnames(styles['MrlProgressBar'], 'MrlProgressBar', className);
+    const textContainerClass = classnames(styles['MrlProgressBar--textContainer'], 'MrlProgressBar--textContainer', {
+        'mrl-visually-hidden': !showText
+    });
+    const completeClasses = classnames(styles['MrlProgressBar--complete'], {
+        [styles['MrlProgressBar--timed']]: time > 0 && !indeterminate
+    }, {
+        [styles['MrlProgressBar--indeterminate']]: indeterminate
+    });
+    const completeStyle = time > 0 && !indeterminate
+        ? {
+            'animation-duration': `${time}ms`
+        }
+        : indeterminate
+            ? {
+                width: '100%'
+            }
+            : {
+                width: `${roundPercent}%`
+            };
+    const defaultText = time > 0 || indeterminate ? 'Loading' : `${roundPercent === null || roundPercent === void 0 ? void 0 : roundPercent.toString()}% complete`;
+    const ariaValues = time > 0 || indeterminate
+        ? {}
+        : {
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+            'aria-valuetext': `${roundPercent}%`,
+            'aria-valuenow': roundPercent
+        };
+    return (React.createElement("div", Object.assign({}, rest, { className: containerClasses }),
+        React.createElement("div", Object.assign({ className: progressBarClasses, "aria-label": name, role: "progressbar" }, ariaValues),
+            React.createElement("div", { className: completeClasses, style: completeStyle })),
+        React.createElement("div", { className: textContainerClass, role: "status" },
+            React.createElement(MrlTextHeading, { hierarchy: "secondary", kind: "title", level: "2", size: "xsmall" }, text || defaultText)),
+        children));
+}

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.module.css

@@ -0,0 +1,62 @@
+.MrlProgressBar-container--ZyqY- {
+  min-width: 4.25rem;
+  padding: var(--mrl-spacing-03);
+  width: auto;
+}
+
+.MrlProgressBar--CRPfr {
+  background-color: var(--mrl-black-opacity-00);
+  border-radius: var(--mrl-radii-03);
+  height: var(--mrl-spacing-02);
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.MrlProgressBar--complete--AjvXv {
+  background-color: rgba(var(--mrl-blue-70), 1);
+  border-radius: var(--mrl-radii-03);
+  height: var(--mrl-spacing-02);
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.MrlProgressBar--textContainer--Ptaqr {
+  margin-top: var(--mrl-spacing-03);
+  text-align: center;
+}
+
+@keyframes timed--aqwDP {
+  0% {
+    width: 0;
+  }
+  15% {
+    width: 25%;
+  }
+  70% {
+    width: 72.5%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+.MrlProgressBar--timed--ngaEW {
+  animation-name: timed--aqwDP;
+  animation-timing-function: var(--mrl-timing-m1);
+  width: 100%;
+}
+
+@keyframes indeterminate--glrdG {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}
+.MrlProgressBar--indeterminate--YbxYt {
+  animation: 2s indeterminate--glrdG var(--mrl-timing-m1) infinite;
+  left: -100%;
+  width: 200%;
+}

package/dist/esm/components/loader/MrlProgressBar/MrlProgressBar.module.scss.js

@@ -0,0 +1,11 @@
+import "./MrlProgressBar.module.css";
+export default {
+	"MrlProgressBar-container": "MrlProgressBar-container--ZyqY-",
+	"MrlProgressBar": "MrlProgressBar--CRPfr",
+	"MrlProgressBar--complete": "MrlProgressBar--complete--AjvXv",
+	"MrlProgressBar--textContainer": "MrlProgressBar--textContainer--Ptaqr",
+	"MrlProgressBar--timed": "MrlProgressBar--timed--ngaEW",
+	"timed": "timed--aqwDP",
+	"MrlProgressBar--indeterminate": "MrlProgressBar--indeterminate--YbxYt",
+	"indeterminate": "indeterminate--glrdG"
+};

package/dist/esm/components/loader/MrlProgressBar/index.js

@@ -0,0 +1 @@
+export * from './MrlProgressBar';

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { spinnerDefaults } from '../constants';
+import styles from './MrlSpinner.module.scss.js';
+import '../../../styles/shared/a11y-helpers/a11y.global.css';
+/**
+ * MrlSpinner React component.
+ *
+ * @param props - component props
+ * @returns a MrlSpinner React component.
+ */
+export function MrlSpinner(_a) {
+    var { className = '', logo = false, kind = spinnerDefaults.kind, role = spinnerDefaults.role, size = spinnerDefaults.size, text = spinnerDefaults.text } = _a, rest = __rest(_a, ["className", "logo", "kind", "role", "size", "text"]);
+    const containerClasses = classnames(styles['MrlSpinner-container'], 'MrlSpinner-container', {
+        [`${className}-container`]: className !== '',
+        [styles[`MrlSpinner-container--${size}`]]: size !== spinnerDefaults.size,
+        [styles[`MrlSpinner-container--logo`]]: logo !== spinnerDefaults.logo,
+        ['MrlSpinner-container--logo']: logo !== spinnerDefaults.logo
+    });
+    const spinnerClasses = classnames(styles['MrlSpinner'], 'MrlSpinner', className, {
+        [styles[`MrlSpinner--${kind}`]]: kind !== spinnerDefaults.kind,
+        [styles[`MrlSpinner--${size}`]]: size !== spinnerDefaults.size
+    });
+    return (React.createElement("span", Object.assign({}, rest, { className: containerClasses, role: role }),
+        React.createElement("span", { className: spinnerClasses }),
+        logo && (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 99 30", "data-mrl-svg-name": "brandWordmark", role: "presentation", className: styles.MrlSpinnerLogo },
+            React.createElement("path", { fill: "#00843F", d: "M80.557 29.328c-5.36 0-9.722-4.577-9.722-10.194 0-5.617 4.361-10.194 9.722-10.194 5.36 0 9.721 4.577 9.721 10.194 0 5.617-4.374 10.194-9.721 10.194Zm.594-15.73c-2.836 0-5.131 2.484-5.131 5.522 0 3.052 2.309 5.523 5.13 5.523 2.823 0 5.132-2.484 5.132-5.523 0-3.038-2.31-5.522-5.131-5.522Z" }),
+            React.createElement("path", { fill: "#000", d: "M35.836 9.21h-5.185v19.794h5.185V9.21Z" }),
+            React.createElement("path", { fill: "#FF4B4B", d: "M11.234 29.004V9.21A3.028 3.028 0 0 0 8.21 6.185 3.02 3.02 0 0 0 5.185 9.21H0c0-4.524 3.686-8.197 8.21-8.197 4.523 0 8.21 3.687 8.21 8.21v14.61h3.01V9.21c0-4.524 3.686-8.21 8.21-8.21 4.523 0 8.21 3.686 8.21 8.21h-5.186a3.028 3.028 0 0 0-3.024-3.025 3.028 3.028 0 0 0-3.025 3.025v19.794h-13.38Z" }),
+            React.createElement("path", { fill: "#000", d: "M5.185 9.21H0v19.794h5.185V9.21Zm50.702 0h-5.185v11.166h5.185V9.21Z" }),
+            React.createElement("path", { fill: "#5887FF", d: "M46.908 29.328c-4.942 0-8.966-4.023-8.966-8.965h5.185c0 2.08 1.702 3.78 3.781 3.78 2.08 0 3.78-1.7 3.78-3.78h5.186c0 4.942-4.024 8.965-8.966 8.965Z" }),
+            React.createElement("path", { fill: "#000", d: "M43.141 9.21h-5.185v11.166h5.185V9.21Z" }),
+            React.createElement("path", { fill: "#FC83FF", d: "M98.772 1.324h-5.185V9.21h5.185V1.324Z" }),
+            React.createElement("path", { fill: "#000", d: "M91.467 9.21h-5.185v19.794h5.185V9.21Zm7.305 0h-5.185v19.794h5.185V9.21Zm-35.58 5.171h-5.185v14.61h5.185V14.38Z" }),
+            React.createElement("path", { fill: "#FA0", d: "M70.767 9.21h-12.76v5.185h12.76V9.21Z" }))),
+        React.createElement("span", { className: "mrl-visually-hidden" }, text || spinnerDefaults.text)));
+}

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.module.css

@@ -0,0 +1,98 @@
+@keyframes spin--Jnujm {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.MrlSpinner-container--jyBxd {
+  height: var(--mrl-spacing-06);
+  overflow: hidden;
+  position: relative;
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner-container--xsmall--12m-l {
+  align-items: center;
+  display: flex;
+  height: var(--mrl-spacing-05);
+  justify-content: center;
+  width: var(--mrl-spacing-05);
+}
+.MrlSpinner-container--medium--wsy20 {
+  height: var(--mrl-spacing-07);
+  width: var(--mrl-spacing-07);
+}
+.MrlSpinner-container--large--WyXIK {
+  height: var(--mrl-spacing-09);
+  width: var(--mrl-spacing-09);
+}
+.MrlSpinner-container--large--WyXIK.MrlSpinner-container--logo--tmSHs {
+  height: 93px;
+}
+
+.MrlSpinner--xYJKA {
+  align-items: center;
+  animation: 500ms spin--Jnujm var(--mrl-timing-m3) infinite;
+  display: flex;
+  height: var(--mrl-spacing-06);
+  justify-content: center;
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner--xYJKA::before {
+  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-blue-70), 0) 0deg, rgba(var(--mrl-blue-70), 0) 0.26deg, rgba(var(--mrl-blue-70), 0) 60deg, rgba(var(--mrl-blue-70), 0.26) 114.38deg, rgba(var(--mrl-blue-70), 1) 217.5deg, rgba(var(--mrl-blue-70), 1) 360deg);
+  border-radius: 6px;
+  clip-path: path("M10 1c0-.552-.449-1.005-.999-.95C3.947.55 0 4.813 0 10c0 5.523 4.477 10 10 10s10-4.477 10-10a9.987 9.987 0 0 0-4.152-8.112c-.452-.327-1.073-.154-1.347.332-.268.477-.099 1.077.337 1.408a8 8 0 1 1-5.836-1.566C9.55 1.993 10 1.552 10 1Z");
+  content: "";
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+.MrlSpinner--xsmall--B4qhm {
+  height: var(--mrl-spacing-06);
+  width: var(--mrl-spacing-06);
+}
+.MrlSpinner--xsmall--B4qhm::before {
+  transform: scale(0.6);
+}
+.MrlSpinner--medium--ez6JK {
+  height: var(--mrl-spacing-07);
+  width: var(--mrl-spacing-07);
+}
+.MrlSpinner--medium--ez6JK::before {
+  transform: scale(1.2);
+}
+.MrlSpinner--large--xL-m0 {
+  height: var(--mrl-spacing-09);
+  width: var(--mrl-spacing-09);
+}
+.MrlSpinner--large--xL-m0::before {
+  transform: scale(2);
+}
+.MrlSpinner--inverse--Gz0IY::before {
+  background: conic-gradient(from 11.31deg at 50% 50%, rgba(var(--mrl-white), 0) 0deg, rgba(var(--mrl-white), 0) 0.26deg, rgba(var(--mrl-white), 0) 60deg, rgba(var(--mrl-white), 0.26) 114.38deg, rgba(var(--mrl-white), 1) 217.5deg, rgba(var(--mrl-white), 1) 360deg);
+}
+
+.MrlSpinner-container--logo--tmSHs {
+  text-align: center;
+}
+.MrlSpinner-container--logo--tmSHs.MrlSpinner-container--jyBxd {
+  display: block;
+  min-height: calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));
+  width: 99px;
+}
+.MrlSpinner-container--logo--tmSHs .MrlSpinner--xYJKA {
+  margin: 0 auto;
+}
+
+.MrlSpinnerLogo--v-Y-u {
+  display: block;
+  margin-top: var(--mrl-spacing-07);
+  width: 99px;
+}
+
+@media (prefers-reduced-motion) {
+  .MrlSpinner--xYJKA {
+    animation: 1.5s spin--Jnujm linear 4;
+  }
+}

package/dist/esm/components/loader/MrlSpinner/MrlSpinner.module.scss.js

@@ -0,0 +1,15 @@
+import "./MrlSpinner.module.css";
+export default {
+	"MrlSpinner-container": "MrlSpinner-container--jyBxd",
+	"MrlSpinner-container--xsmall": "MrlSpinner-container--xsmall--12m-l",
+	"MrlSpinner-container--medium": "MrlSpinner-container--medium--wsy20",
+	"MrlSpinner-container--large": "MrlSpinner-container--large--WyXIK",
+	"MrlSpinner-container--logo": "MrlSpinner-container--logo--tmSHs",
+	"MrlSpinner": "MrlSpinner--xYJKA",
+	"spin": "spin--Jnujm",
+	"MrlSpinner--xsmall": "MrlSpinner--xsmall--B4qhm",
+	"MrlSpinner--medium": "MrlSpinner--medium--ez6JK",
+	"MrlSpinner--large": "MrlSpinner--large--xL-m0",
+	"MrlSpinner--inverse": "MrlSpinner--inverse--Gz0IY",
+	"MrlSpinnerLogo": "MrlSpinnerLogo--v-Y-u"
+};

package/dist/esm/components/loader/MrlSpinner/index.js

@@ -0,0 +1 @@
+export * from './MrlSpinner';

package/dist/esm/components/loader/constants.js

@@ -0,0 +1,20 @@
+/**
+ * Default values for props on the MrlProgressBar component;
+ * Shared between the component and Storybook
+ */
+export const progressBarDefaults = {
+    percent: 0,
+    showText: false,
+    name: 'Progress Bar'
+};
+/**
+ * Default values for props on the MrlSpinner component;
+ * Shared between the component and Storybook
+ */
+export const spinnerDefaults = {
+    kind: 'default',
+    role: 'status',
+    size: 'small',
+    text: 'Loading',
+    logo: false
+};

package/dist/esm/components/loader/index.js

@@ -0,0 +1,3 @@
+export * from './MrlProgressBar';
+export * from './MrlSpinner';
+export * from './constants';