@nuskin/nextgen-header 1.6.0 → 1.7.0

package/package-dist/index.js

@@ -1611,6 +1611,166 @@ function HeaderNavigationRegion(_ref) {
 HeaderNavigationRegion.propTypes = {
   headerNavigationService: (external_prop_types_default()).object.isRequired
 };
+;// ./src/utils/common.js
+/**
+ * Validate and sanitize a URL string.
+ * Returns '#' for invalid/empty values to provide safe fallback anchors.
+ *
+ * SSR-safe: no DOM/window access.
+ *
+ * @param {*} url - The URL value to validate
+ * @returns {string} The original URL if valid, otherwise '#'
+ */
+var validateUrl = function validateUrl(url) {
+  if (!url || typeof url !== 'string' || url.trim() === '') {
+    return '#';
+  }
+  return url;
+};
+;// ./src/components/top-ribbon/types.js
+
+var NavigationLinkPropTypes = external_prop_types_default().shape({
+  label: (external_prop_types_default()).string.isRequired,
+  url: (external_prop_types_default()).string.isRequired,
+  ariaLabel: (external_prop_types_default()).string,
+  dataTestId: (external_prop_types_default()).string,
+  gtmEvent: (external_prop_types_default()).object
+});
+var TopRibbonPropTypes = {
+  links: external_prop_types_default().arrayOf(NavigationLinkPropTypes).isRequired,
+  className: (external_prop_types_default()).string,
+  ariaLabel: (external_prop_types_default()).string,
+  dataTestId: (external_prop_types_default()).string
+};
+;// ./src/components/top-ribbon/TopRibbon.styled.jsx
+
+function TopRibbon_styled_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+// Main container for the top ribbon navigation
+var StyledTopRibbon = /*#__PURE__*/createStyled("header",  true ? {
+  target: "ei9etl03"
+} : 0)( true ? {
+  name: "1i3elid",
+  styles: "background-color:#000000;width:100%;position:relative;@media (max-width: 1023px){display:none;}&:focus-within{outline:none;}"
+} : 0);
+
+// Navigation list container
+var StyledNavigationList = /*#__PURE__*/createStyled("ul",  true ? {
+  target: "ei9etl02"
+} : 0)( true ? {
+  name: "1qblcar",
+  styles: "margin:0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;gap:24px;padding:10px 24px;width:100%;box-sizing:border-box"
+} : 0);
+
+// Individual navigation item container
+var StyledNavigationItem = /*#__PURE__*/createStyled("li",  true ? {
+  target: "ei9etl01"
+} : 0)( true ? {
+  name: "qy80on",
+  styles: "margin:0;padding:0;flex-shrink:0;position:relative"
+} : 0);
+
+// Navigation link with hover effects
+var StyledNavigationLink = /*#__PURE__*/createStyled("a",  true ? {
+  target: "ei9etl00"
+} : 0)( true ? {
+  name: "1pvnuug",
+  styles: "display:inline-block;padding:0;cursor:pointer;color:#ffffff;font-family:\"Inter\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;font-size:14px;font-weight:400;line-height:20px;text-align:center;white-space:nowrap;text-decoration:underline;text-decoration-style:solid;text-decoration-color:transparent;transition:text-decoration-color 0.2s ease,background-color 0.2s ease;position:relative;&:hover{color:#ffffff;text-decoration-color:#ffffff;}&:focus-visible{outline:2px solid #ffffff;outline-offset:2px;background-color:rgba(255, 255, 255, 0.1);text-decoration-color:#ffffff;}&:focus:not(:focus-visible){outline:none;background-color:transparent;}&:active{background-color:rgba(255, 255, 255, 0.05);}@media (prefers-contrast: high){&:focus-visible{outline-color:currentColor;}}"
+} : 0);
+;// ./src/components/top-ribbon/TopRibbon.jsx
+function TopRibbon_typeof(o) { "@babel/helpers - typeof"; return TopRibbon_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, TopRibbon_typeof(o); }
+function TopRibbon_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function TopRibbon_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? TopRibbon_ownKeys(Object(t), !0).forEach(function (r) { TopRibbon_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : TopRibbon_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function TopRibbon_defineProperty(e, r, t) { return (r = TopRibbon_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function TopRibbon_toPropertyKey(t) { var i = TopRibbon_toPrimitive(t, "string"); return "symbol" == TopRibbon_typeof(i) ? i : i + ""; }
+function TopRibbon_toPrimitive(t, r) { if ("object" != TopRibbon_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != TopRibbon_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+
+
+/**
+ * TopRibbon Navigation Component
+ *
+ * Renders a desktop-only navigation ribbon with:
+ * - Pure black background (#000000) per Figma specifications
+ * - White text links (#FFFFFF) with Figma-exact hover underlines
+ * - Figma-exact typography (14px/20px, Inter font)
+ * - Full WCAG 2.1 AA accessibility compliance
+ * - Responsive behavior (hidden below 1024px breakpoint)
+ * - CSR & SSR compatible (no direct window/document access at render time)
+ *
+ * @param {Object} props - Component props
+ * @returns {JSX.Element|null} Rendered navigation component
+ */
+
+var TopRibbon = function TopRibbon(_ref) {
+  var links = _ref.links,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Top navigation' : _ref$ariaLabel,
+    _ref$dataTestId = _ref.dataTestId,
+    dataTestId = _ref$dataTestId === void 0 ? 'top-ribbon-nav' : _ref$dataTestId;
+  // Validate required props — safe to call in SSR
+  if (!links || !Array.isArray(links) || links.length === 0) {
+    return null;
+  }
+
+  /**
+   * Fires a GTM dataLayer event when a link is clicked.
+   * Does NOT call preventDefault — native target="_blank" behaviour is preserved.
+   * SSR-safe: guarded behind typeof window check.
+   *
+   * @param {Object} item - The navigation item that was clicked
+   */
+  var handleClick = function handleClick(item) {
+    if (typeof window === 'undefined' || !Array.isArray(window.dataLayer)) return;
+    window.dataLayer.push(TopRibbon_objectSpread({
+      event: 'top_ribbon_click',
+      link_text: item.label,
+      link_url: item.url
+    }, item.gtmEvent));
+  };
+  return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(StyledTopRibbon, {
+    className: className,
+    "data-testid": dataTestId,
+    children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)("nav", {
+      "aria-label": ariaLabel,
+      role: "navigation",
+      "data-testid": "".concat(dataTestId, "-nav"),
+      children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(StyledNavigationList, {
+        "data-testid": "".concat(dataTestId, "-list"),
+        children: links.map(function (item, index) {
+          if (!item || TopRibbon_typeof(item) !== 'object') return null;
+          var label = item.label,
+            url = item.url,
+            itemAriaLabel = item.ariaLabel,
+            itemTestId = item.dataTestId;
+          if (!label || !url) return null;
+          var linkHref = validateUrl(url);
+          var linkAriaLabel = itemAriaLabel || "Navigate to ".concat(label);
+          var linkTestId = itemTestId || "".concat(dataTestId, "-item-").concat(index);
+          return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(StyledNavigationItem, {
+            "data-testid": "".concat(linkTestId, "-container"),
+            children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(StyledNavigationLink, {
+              href: linkHref,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: function onClick() {
+                return handleClick(item);
+              },
+              "aria-label": linkAriaLabel,
+              "data-testid": linkTestId,
+              children: label
+            })
+          }, "nav-item-".concat(index, "-").concat(label));
+        })
+      })
+    })
+  });
+};
+TopRibbon.propTypes = TopRibbonPropTypes;
+/* harmony default export */ const top_ribbon_TopRibbon = (TopRibbon);
 ;// ./src/header/components/HeaderView.jsx
 
 
@@ -1623,6 +1783,7 @@ HeaderNavigationRegion.propTypes = {
 
 
 
+
 /**
  * Header shell: each region calls async getters on its service to load copy before rendering.
  * Layout follows docs/header-domain-language.png (logo left; utility + pill search stacked right).
@@ -1638,14 +1799,48 @@ function HeaderView(_ref) {
     headerAccountService = _ref.headerAccountService,
     headerCartService = _ref.headerCartService,
     headerSearchService = _ref.headerSearchService,
-    headerNavigationService = _ref.headerNavigationService;
+    headerNavigationService = _ref.headerNavigationService,
+    _ref$topRibbonLinks = _ref.topRibbonLinks,
+    topRibbonLinks = _ref$topRibbonLinks === void 0 ? [{
+      label: 'Hair',
+      url: '/hair',
+      ariaLabel: 'Shop Hair'
+    }, {
+      label: 'Skin',
+      url: '/skin',
+      ariaLabel: 'Shop Skin'
+    }, {
+      label: 'Body',
+      url: '/body',
+      ariaLabel: 'Shop Body'
+    }, {
+      label: 'Fragrance',
+      url: '/fragrance',
+      ariaLabel: 'Shop Fragrance'
+    }, {
+      label: 'Beauty Bio',
+      url: '/beauty-bio',
+      ariaLabel: 'Shop Beauty Bio'
+    }, {
+      label: 'Accessories',
+      url: '/accessories',
+      ariaLabel: 'Shop Accessories'
+    }, {
+      label: 'Gifts',
+      url: '/gifts',
+      ariaLabel: 'Shop Gifts'
+    }] : _ref$topRibbonLinks;
   return /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)(HeaderRoot, {
     role: "banner",
     "data-testid": "header-view",
     "data-country": country,
     "data-language": language,
     "data-locale": locale,
-    children: [/*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)(TopHeaderRow, {
+    children: [/*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(top_ribbon_TopRibbon, {
+      links: topRibbonLinks,
+      ariaLabel: "Top navigation",
+      dataTestId: "header-top-ribbon"
+    }), /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsxs)(TopHeaderRow, {
       children: [/*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(LogoSlot, {
         children: /*#__PURE__*/(0,jsx_runtime_namespaceObject.jsx)(HeaderLogoRegion, {
           headerLogoService: headerLogoService
@@ -1686,7 +1881,13 @@ HeaderView.propTypes = {
   headerAccountService: serviceProp,
   headerCartService: serviceProp,
   headerSearchService: serviceProp,
-  headerNavigationService: serviceProp
+  headerNavigationService: serviceProp,
+  topRibbonLinks: external_prop_types_default().arrayOf(external_prop_types_default().shape({
+    label: (external_prop_types_default()).string.isRequired,
+    url: (external_prop_types_default()).string.isRequired,
+    ariaLabel: (external_prop_types_default()).string,
+    dataTestId: (external_prop_types_default()).string
+  }))
 };
 ;// ./src/styles/Main.styled.js