@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/shared/VideoSplash/SplashButton/SplashButton.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _helpers = require("../helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "SplashButton__ButtonContainer",
+  componentId: "components-web__sc-1oe22fk-0"
+})({
+  background: 'none',
+  border: 0,
+  padding: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  cursor: 'pointer'
+});
+const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButton__ButtonContent",
+  componentId: "components-web__sc-1oe22fk-1"
+})({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 64,
+  height: 64,
+  background: _ref => {
+    let {
+      buttonContentBackground
+    } = _ref;
+    return buttonContentBackground ?? 'none';
+  },
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out',
+  [`${ButtonContainer}:hover &`]: {
+    background: _ref2 => {
+      let {
+        buttonContentChildrenBackground
+      } = _ref2;
+      return buttonContentChildrenBackground;
+    }
+  }
+});
+const SplashButton = _ref3 => {
+  let {
+    copy,
+    tokens,
+    variant,
+    videoLength
+  } = _ref3;
+  const {
+    buttonContentChildrenBackground
+  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant, {
+    hover: true
+  });
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('SplashButton', tokens, variant);
+  const ariaLabel = (0, _helpers.getAriaLabel)((0, _helpers.getTimestamp)(videoLength), copy);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+    "aria-label": ariaLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContent, {
+      ...themeTokens,
+      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+        size: 27,
+        color: playIconColor
+      })
+    })
+  });
+};
+SplashButton.propTypes = {
+  videoLength: _propTypes.default.number,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = exports.default = SplashButton;

package/lib/cjs/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _helpers = require("../helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ButtonContainer = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContainer",
+  componentId: "components-web__sc-1edwy9o-0"
+})({
+  background: 'none',
+  border: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  cursor: 'pointer'
+});
+const ButtonContent = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__ButtonContent",
+  componentId: "components-web__sc-1edwy9o-1"
+})({
+  background: _ref => {
+    let {
+      buttonBackground
+    } = _ref;
+    return buttonBackground;
+  },
+  border: _ref2 => {
+    let {
+      buttonBorderColor
+    } = _ref2;
+    return `1px solid ${buttonBorderColor}`;
+  },
+  borderRadius: _ref3 => {
+    let {
+      buttonRadius
+    } = _ref3;
+    return `${buttonRadius}px`;
+  },
+  position: 'absolute',
+  left: _ref4 => {
+    let {
+      buttonLeftPosition
+    } = _ref4;
+    return `${buttonLeftPosition}px`;
+  },
+  bottom: _ref5 => {
+    let {
+      buttonBottomPosition
+    } = _ref5;
+    return `${buttonBottomPosition}px`;
+  },
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: _ref6 => {
+    let {
+      buttonMinHeight
+    } = _ref6;
+    return `${buttonMinHeight}px`;
+  },
+  paddingRight: _ref7 => {
+    let {
+      buttonPaddingLeft
+    } = _ref7;
+    return `${buttonPaddingLeft}px`;
+  },
+  paddingLeft: _ref8 => {
+    let {
+      buttonPaddingRight
+    } = _ref8;
+    return `${buttonPaddingRight}px`;
+  },
+  transition: 'background 0.2s ease-in-out',
+  [`${ButtonContainer}:hover &`]: {
+    background: _ref9 => {
+      let {
+        buttonContentChildrenBackground
+      } = _ref9;
+      return buttonContentChildrenBackground;
+    }
+  }
+});
+const PlayIconContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__PlayIconContainer",
+  componentId: "components-web__sc-1edwy9o-2"
+})({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: 32,
+  height: 32,
+  background: _ref10 => {
+    let {
+      playIconContainerBackground
+    } = _ref10;
+    return playIconContainerBackground ?? 'none';
+  },
+  borderRadius: '100%',
+  transition: 'background 0.2s ease-in-out'
+});
+const DetailsContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "SplashButtonWithDetails__DetailsContainer",
+  componentId: "components-web__sc-1edwy9o-3"
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  paddingLeft: _ref11 => {
+    let {
+      detailsContainerPadding
+    } = _ref11;
+    return `${detailsContainerPadding}px`;
+  }
+});
+const selectPlayIconContainerTokens = _ref12 => {
+  let {
+    playIconContainerBackground
+  } = _ref12;
+  return {
+    playIconContainerBackground
+  };
+};
+const selectDetailsContainerTokens = _ref13 => {
+  let {
+    detailsContainerPadding
+  } = _ref13;
+  return {
+    detailsContainerPadding
+  };
+};
+const selectButtonContentTokens = _ref14 => {
+  let {
+    buttonBackground,
+    buttonBorderColor,
+    buttonRadius,
+    buttonLeftPosition,
+    buttonBottomPosition,
+    buttonMinHeight,
+    buttonPaddingLeft,
+    buttonPaddingRight
+  } = _ref14;
+  return {
+    buttonBackground,
+    buttonBorderColor,
+    buttonRadius,
+    buttonLeftPosition,
+    buttonBottomPosition,
+    buttonMinHeight,
+    buttonPaddingLeft,
+    buttonPaddingRight
+  };
+};
+const getLabelTokens = _ref15 => {
+  let {
+    labelFontName: fontName,
+    labelFontWeight: fontWeight
+  } = _ref15;
+  return {
+    fontName,
+    fontWeight
+  };
+};
+const SplashButtonWithDetails = _ref16 => {
+  let {
+    label,
+    tokens,
+    variant,
+    copy,
+    videoLength
+  } = _ref16;
+  const {
+    buttonContentChildrenBackground
+  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant, {
+    hover: true
+  });
+  const {
+    playIcon: PlayIcon,
+    playIconColor,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('SplashButtonWithDetails', tokens, variant);
+  const mappedVideoLength = (0, _helpers.getTimestamp)(videoLength, copy);
+  const ariaLabel = (0, _helpers.getAriaLabel)(mappedVideoLength, copy);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+    "aria-label": ariaLabel,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonContent, {
+      ...selectButtonContentTokens(themeTokens),
+      buttonContentChildrenBackground: buttonContentChildrenBackground,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIconContainer, {
+        ...selectPlayIconContainerTokens(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlayIcon, {
+          size: 13,
+          color: playIconColor
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DetailsContainer, {
+        ...selectDetailsContainerTokens(themeTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: getLabelTokens(themeTokens),
+          children: label
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            colour: 'secondary' /* TODO: this is not the same color as in designs */,
+            size: 'micro'
+          },
+          children: mappedVideoLength.timestamp
+        })]
+      })]
+    })
+  });
+};
+SplashButtonWithDetails.propTypes = {
+  label: _propTypes.default.string,
+  tokens: _propTypes.default.object,
+  variant: _propTypes.default.object,
+  videoLength: _propTypes.default.number,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = exports.default = SplashButtonWithDetails;

package/lib/cjs/shared/VideoSplash/VideoSplash.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _systemConstants = require("@telus-uds/system-constants");
+var _SplashButton = _interopRequireDefault(require("./SplashButton/SplashButton"));
+var _SplashButtonWithDetails = _interopRequireDefault(require("./SplashButtonWithDetails/SplashButtonWithDetails"));
+var _videoText = _interopRequireDefault(require("../../Video/videoText"));
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const SplashBackground = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoSplash__SplashBackground",
+  componentId: "components-web__sc-1ejxt6-0"
+})(_ref => {
+  let {
+    videoPoster
+  } = _ref;
+  return {
+    backgroundImage: `url(${videoPoster})`,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    height: '100%',
+    // fixes vertical alignment on IE 11
+    cursor: 'pointer'
+  };
+});
+const VideoSplash = _ref2 => {
+  let {
+    poster,
+    videoLength,
+    simpleMode,
+    copy = 'en',
+    onClick,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _componentsBase.useViewport)();
+  const showDetails = !simpleMode && viewport !== _systemConstants.viewports.xs;
+  const label = _videoText.default[copy].watch;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SplashBackground, {
+    ...selectProps(rest),
+    onClick: onClick,
+    videoPoster: poster,
+    children: showDetails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButtonWithDetails.default, {
+      videoLength: videoLength,
+      copy: copy,
+      label: label
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButton.default, {
+      videoLength: videoLength,
+      copy: copy
+    })
+  });
+};
+VideoSplash.propTypes = {
+  ...selectedSystemPropTypes,
+  onClick: _propTypes.default.func,
+  poster: _propTypes.default.string,
+  videoLength: _propTypes.default.number.isRequired,
+  simpleMode: _propTypes.default.bool,
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = exports.default = VideoSplash;

package/lib/cjs/shared/VideoSplash/helpers.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTimestamp = exports.getAriaLabel = void 0;
+var _videoText = _interopRequireDefault(require("../../Video/videoText"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const getTimestamp = (videoLength, copy) => {
+  const minutes = Math.floor(videoLength / 60);
+  const seconds = Math.ceil(videoLength % 60);
+  const minutesText = minutes > 0 ? `${minutes}min ` : '';
+  const secondsText = `${seconds}${copy === 'fr' ? 's' : 'sec'}`;
+  const timestamp = `${minutesText}${secondsText}`;
+  return {
+    minutes,
+    seconds,
+    timestamp
+  };
+};
+exports.getTimestamp = getTimestamp;
+const getAriaLabel = (timestamp, copy) => {
+  const {
+    minutes,
+    seconds
+  } = timestamp;
+  const text = _videoText.default[copy];
+  const minutesText = `${minutes} ${minutes !== 1 ? text.minutes : text.minute}`;
+  const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`;
+  return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText);
+};
+exports.getAriaLabel = getAriaLabel;

package/lib/cjs/utils/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "contentfulProps", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.contentfulProps;
+  }
+});
+Object.defineProperty(exports, "deprecate", {
+  enumerable: true,
+  get: function () {
+    return _logger.deprecate;
+  }
+});
+Object.defineProperty(exports, "htmlAttrs", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.htmlAttrs;
+  }
+});
+Object.defineProperty(exports, "isElementFocusable", {
+  enumerable: true,
+  get: function () {
+    return _isElementFocusable.default;
+  }
+});
+Object.defineProperty(exports, "media", {
+  enumerable: true,
+  get: function () {
+    return _media.default;
+  }
+});
+Object.defineProperty(exports, "renderStructuredContent", {
+  enumerable: true,
+  get: function () {
+    return _renderStructuredContent.default;
+  }
+});
+Object.defineProperty(exports, "scrollToAnchor", {
+  enumerable: true,
+  get: function () {
+    return _scrollToAnchor.default;
+  }
+});
+Object.defineProperty(exports, "ssrStyles", {
+  enumerable: true,
+  get: function () {
+    return _ssr.default;
+  }
+});
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _transforms.transformGradient;
+  }
+});
+Object.defineProperty(exports, "useOverlaidPosition", {
+  enumerable: true,
+  get: function () {
+    return _useOverlaidPosition.default;
+  }
+});
+Object.defineProperty(exports, "useTypographyTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTypographyTheme.default;
+  }
+});
+Object.defineProperty(exports, "warn", {
+  enumerable: true,
+  get: function () {
+    return _logger.warn;
+  }
+});
+var _componentsBase = require("@telus-uds/components-base");
+var _logger = require("./logger");
+var _transforms = require("./transforms");
+var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
+var _media = _interopRequireDefault(require("./media"));
+var _ssr = _interopRequireDefault(require("./ssr"));
+var _isElementFocusable = _interopRequireDefault(require("./isElementFocusable"));
+var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
+var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
+var _scrollToAnchor = _interopRequireDefault(require("./scrollToAnchor"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/isElementFocusable.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Returns focusable elements inside of the Footnote
+ */
+const isElementFocusable = element => {
+  const focusableElements = `a[href], button, textarea, input, select, form, label, audio, video, source, track, canvas, rect, polygon, iframe[data-src], [tabindex]:not([tabindex="-1"]), [contenteditable]`;
+  return element.matches(focusableElements) && !element.hasAttribute('disabled') && !element.matches('[tabindex="-1"]');
+};
+var _default = exports.default = isElementFocusable;

package/lib/cjs/utils/logger.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.warn = exports.deprecate = exports.default = void 0;
+const deprecate = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`);
+};
+exports.deprecate = deprecate;
+const warn = (componentName, message) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  console.warn(`[Allium] ${componentName}: ${message}`);
+};
+exports.warn = warn;
+var _default = exports.default = {
+  deprecate,
+  warn
+};

package/lib/cjs/utils/media.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = media;
+var _systemConstants = require("@telus-uds/system-constants");
+function media() {
+  return {
+    query: {},
+    from(breakpoint) {
+      if (breakpoint !== _systemConstants.viewports.xs) {
+        this.query.minWidth = breakpoint;
+      }
+      return this;
+    },
+    until(breakpoint) {
+      this.query.maxWidth = breakpoint;
+      return this;
+    },
+    and(custom) {
+      this.query.and = custom;
+      return this;
+    },
+    css(style) {
+      const {
+        minWidth,
+        maxWidth,
+        and
+      } = this.query;
+      const min = minWidth ? `(min-width: ${_systemConstants.viewports.map.get(minWidth)}px)` : undefined;
+      const max = maxWidth ? `(max-width: ${_systemConstants.viewports.map.get(maxWidth) - 1}px)` : undefined;
+      if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
+        const mediaQuery = `@media ${[min, max, and].filter(a => a).join(' and ')}`;
+        this.query = {};
+        return {
+          [mediaQuery]: {
+            ...(typeof style === 'function' ? style() : style)
+          }
+        };
+      }
+      return typeof style === 'function' ? style() : style;
+    }
+  };
+}

package/lib/cjs/utils/renderStructuredContent.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _componentsBase = require("@telus-uds/components-base");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Takes a string content and marks up all the links in it by wrapping them
+ * in `Link` component.
+ */const generateLinks = content => {
+  const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g;
+  const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g;
+  const parts = content.split(linkRegex);
+  if (parts.length === 1) {
+    return parts;
+  }
+
+  // Start with first anchor text, attributes will be in the previous part
+  for (let i = 2; i < parts.length; i += 3) {
+    const o = {};
+    // Get attributes from previous part
+    const attributes = parts[i - 1].trim();
+
+    // Create object from attributes
+    const matchedAttributes = attributes.match(attributeRegex);
+    if (matchedAttributes) {
+      matchedAttributes.forEach(attribute => {
+        const split = attribute.split('=');
+        o[split[0]] = split[1].substr(1, split[1].length - 2);
+      });
+    }
+    // Remove anchor attributes from parts
+    parts[i - 1] = undefined;
+    // Replace anchor text with Link in parts
+    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, {
+      ...o,
+      key: i
+    }, parts[i]);
+  }
+  return parts;
+};
+
+/**
+ * Takes an array of strings and in each element replaces the breaks with `<br>` tags.
+ */
+const generateBreaks = parts => {
+  const breakRegex = /<br\s?\/*>/g;
+  const partsWithBreaks = parts;
+  for (let i = 0; i < partsWithBreaks.length; i += 1) {
+    if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
+      const toSplit = partsWithBreaks[i].split(breakRegex);
+      for (let x = 1; x < toSplit.length; x += 2) {
+        toSplit.splice(x, 0, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, `break-${i}-${x}`));
+      }
+      partsWithBreaks[i] = toSplit;
+    }
+  }
+  return partsWithBreaks;
+};
+const renderStructuredContent = content => {
+  if (typeof content !== 'string') {
+    return content;
+  }
+  return generateBreaks(generateLinks(content));
+};
+var _default = exports.default = renderStructuredContent;

package/lib/cjs/utils/scrollToAnchor.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Scrolls smoothly to the anchor element specified by the href.
+ *
+ * @param {string} href - The href attribute value, expected to be an anchor link starting with '#'.
+ * @param {Event} event - The event object associated with the click or navigation action.
+ * @param {Function} onAfterScroll - A callback function to be executed after the scroll action is completed.
+ */
+const scrollToAnchor = (href, event, onAfterScroll) => {
+  if (href?.startsWith('#')) {
+    event.preventDefault();
+    const target = document.getElementById(href.slice(1));
+    target?.scrollIntoView({
+      behavior: 'smooth'
+    });
+    window.location.hash = href;
+    onAfterScroll(event);
+  }
+};
+var _default = exports.default = scrollToAnchor;