luna-one 3.1.593 → 3.1.595

package/dist/luna/components/LinkList/LinkList.stories.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoCTA = exports.TransparentWithLightText = exports.TransparentWithDarkText = exports.LightTheme = exports.DarkTheme = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LinkListDocumentation = _interopRequireDefault(require("./LinkListDocumentation.mdx"));
+var _LinkList = _interopRequireDefault(require("./LinkList"));
+var _default = {
+  component: _LinkList["default"],
+  title: "MXP Components/LinkList",
+  parameters: {
+    docs: {
+      page: _LinkListDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var light = {
+  color: "#252A2E",
+  backgroundColor: "#ffffff"
+};
+var dark = {
+  color: "#ffffff",
+  backgroundColor: "#003054"
+};
+var transparentLightText = {
+  color: "#ffffff",
+  backgroundColor: "unset"
+};
+var transpatentDarkText = {
+  color: "#252A2E",
+  backgroundColor: "unset"
+};
+var links = [{
+  linkText: "Internal LInk",
+  destination: "/",
+  icon: true,
+  external: false
+}, {
+  linkText: "Lorem ipsum dolor sit amet a orci tincidunt lectus semper morbi sit quis leo",
+  destination: "/",
+  icon: false
+}, {
+  linkText: "Lorem ipsum dolor sit amet <3",
+  // destination: "https://trimble.com",
+  external: true,
+  icon: true
+}, {
+  linkText: "Lorem ipsum dolor sit amet a orci tincidunt lectus semper morbi sit quis leo",
+  destination: "/",
+  icon: false
+}];
+var LightTheme = function LightTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_LinkList["default"], {
+    links: links,
+    theme: light
+  });
+};
+exports.LightTheme = LightTheme;
+var DarkTheme = function DarkTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_LinkList["default"], {
+    links: links,
+    theme: dark
+  });
+};
+exports.DarkTheme = DarkTheme;
+var TransparentWithLightText = function TransparentWithLightText() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative",
+      backgroundImage: "url('https://via.placeholder.com/1920x1080/FF0000/000000')",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_LinkList["default"], {
+    links: links,
+    theme: transparentLightText
+  }));
+};
+exports.TransparentWithLightText = TransparentWithLightText;
+var TransparentWithDarkText = function TransparentWithDarkText() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative",
+      backgroundImage: "url('https://via.placeholder.com/1920x1080/A6FFFF/FFFFFF')",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_LinkList["default"], {
+    links: links,
+    theme: transpatentDarkText
+  }));
+};
+exports.TransparentWithDarkText = TransparentWithDarkText;
+var VideoCTA = function VideoCTA() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    override = _useState2[0],
+    setOverride = _useState2[1];
+  var thumbnail1 = {
+    src: "https://fpoimg.com/720x450",
+    alt: "fpo"
+  };
+  var video1 = {
+    url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+    allowFullScreen: true,
+    uuid: "UrtwArRETP23TP9yGgCEd6"
+  };
+  var videoContent1 = {
+    transcript: "View Transcript",
+    closeTranscript: "Hide Transcript",
+    transcriptText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    video: video1,
+    thumbnail: thumbnail1,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  var ctaVideo = {
+    className: "secondary--1",
+    text: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override
+  };
+  var linksWithVideo = [{
+    linkText: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override,
+    icon: true
+  }, {
+    linkText: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override,
+    icon: true
+  }, {
+    linkText: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override,
+    icon: true
+  }, {
+    linkText: "This is exceptionally long CTA",
+    video: videoContent1,
+    setOverride: setOverride,
+    override: override,
+    icon: true
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative",
+      backgroundImage: "url('https://via.placeholder.com/1920x1080/A6FFFF/FFFFFF')",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_LinkList["default"], {
+    links: linksWithVideo,
+    theme: light
+  }));
+};
+exports.VideoCTA = VideoCTA;

package/dist/luna/components/LinkList/LinkListDocumentation.mdx

@@ -0,0 +1,54 @@
+#### LinkList
+
+###### Props -
+
+- `links` - array of objects, each with `LinkText`, `destination`, `external`, and `icon` as strings to represent the icon text items. Optional to pass in "Link" for Gatsby's Link.
+  - `external` is a boolean to indicate the destination is an external link
+  - `icon` is a boolean to indiciate if an icon should render. Icons are
+- `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color.
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const theme = {
+  color: "#252A2E",
+  backgroundColor: "#ffffff",
+};
+
+
+const links = [
+  {
+    linkText: "Lorem ipsum dolor sit amet",
+    destination: "/",
+    icon: true,
+  },
+  {
+    linkText:
+      "Lorem ipsum dolor sit amet a orci tincidunt lectus semper morbi sit quis leo",
+    destination: "/",
+    icon: false,
+  },
+  {
+    linkText: "Lorem ipsum dolor sit amet",
+    destination: "https://trimble.com",
+    external: true,
+    icon: true,
+  },
+  {
+    linkText:
+      "Lorem ipsum dolor sit amet a orci tincidunt lectus semper morbi sit quis leo",
+    destination: "/",
+    icon: false,
+  },
+];
+
+
+return (
+    <LinkList
+      links={links}
+      theme={light}
+      paddingClass="custom-class"
+    />
+);
+```

package/dist/luna/components/LoadingSpinner/LoadingSpinner.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithText = exports.Default = exports.Customized = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
+var renderComponentWithPadding = function renderComponentWithPadding(component) {
+  var fullWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var content = arguments.length > 2 ? arguments[2] : undefined;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "default-layout"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "default-layout__grid"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: fullWidth ? "default-layout__full-content-child" : "default-layout__children"
+  }, component)));
+};
+var _default = {
+  component: _LoadingSpinner["default"],
+  title: "MXP Components/Loading Spinner"
+};
+exports["default"] = _default;
+var styles = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)"
+};
+var Default = function Default() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_LoadingSpinner["default"], {
+    style: styles
+  }));
+};
+exports.Default = Default;
+var WithText = function WithText() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_LoadingSpinner["default"], {
+    text: 'Loading page...',
+    style: styles
+  }));
+};
+exports.WithText = WithText;
+var Customized = function Customized() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_LoadingSpinner["default"], {
+    width: '2px',
+    size: '20px',
+    color: 'black',
+    style: styles
+  }));
+};
+exports.Customized = Customized;

package/dist/luna/components/Login/Login.js

@@ -13,7 +13,6 @@ var _downArrow = _interopRequireDefault(require("../../images/downArrow.svg"));
 var _upArrow = _interopRequireDefault(require("../../images/up-arrow.svg"));
 var _userProfile = _interopRequireDefault(require("../../images/user-profile.svg"));
 var _useMouse2 = _interopRequireDefault(require("../../utils/hooks/useMouse"));
-var _lodash = require("lodash");
 var Login = function Login(_ref) {
   var _login$userInformatio, _login$userInformatio2, _login$userInformatio3, _login$userInformatio4;
   var login = _ref.login,
@@ -60,7 +59,7 @@ var Login = function Login(_ref) {
         if (item.machineName === "sign-out") {
           return /*#__PURE__*/_react["default"].createElement("a", {
             tabIndex: mouse ? "" : "0",
-            id: (0, _lodash.uniqueId)("id-"),
+            id: (0, _react.useId)(),
             key: index,
             className: mouse ? "sketchup-login__list-item" : "sketchup-login__list-item tagFocus",
             onClick: function onClick() {
@@ -73,7 +72,7 @@ var Login = function Login(_ref) {
         } else {
           return /*#__PURE__*/_react["default"].createElement("a", {
             tabIndex: mouse ? "" : "0",
-            id: (0, _lodash.uniqueId)("id-"),
+            id: (0, _react.useId)(),
             key: index,
             className: mouse ? "sketchup-login__list-item" : "sketchup-login__list-item tagFocus",
             href: item.url
@@ -140,7 +139,7 @@ var Login = function Login(_ref) {
     className: "logout__button"
   }, logoutText)))) : /*#__PURE__*/_react["default"].createElement("article", {
     className: mouse ? "sketchup-login" : "sketchup-login tagFocus",
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     style: {
       display: isHidden ? "none" : ""
     }

package/dist/luna/components/Login/Login.stories.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockLoginContent = exports.loginContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _addonActions = require("@storybook/addon-actions");
+var _Login = _interopRequireDefault(require("./Login"));
+var loginContent = {
+  content: {
+    text: {
+      text: "Sign In",
+      url: "/"
+    },
+    list: [{
+      text: "My Apps",
+      url: "/",
+      machineName: "my-apps"
+    }, {
+      text: "Manage My Account",
+      url: "/",
+      machineName: "manage-account"
+    }, {
+      text: "Sign out",
+      url: "/",
+      machineName: "sign-out"
+    }]
+  },
+  userInformation: {
+    name: "Laura Shamus",
+    email: "laura_shamus@trimble.com",
+    image: {
+      url: "https://fpoimg.com/500x500",
+      altText: "Placeholder image"
+    }
+  },
+  loggedIn: true,
+  setLoggedin: (0, _addonActions.action)("Set log in"),
+  handleLogin: (0, _addonActions.action)("login user"),
+  handleLogout: (0, _addonActions.action)("logout user")
+};
+exports.loginContent = loginContent;
+var mockLoginContent = {
+  content: {
+    text: "Sign In",
+    list: [{
+      text: "My Apps",
+      url: "/",
+      machineName: "my-apps"
+    }, {
+      text: "Manage My Account",
+      url: "/",
+      machineName: "manage-account"
+    }, {
+      text: "Sign out",
+      url: "/",
+      machineName: "sign-out"
+    }]
+  },
+  userInformation: null,
+  loggedIn: false,
+  setLoggedin: (0, _addonActions.action)("Set log in"),
+  handleLogin: (0, _addonActions.action)("login user")
+};
+
+// storiesOf("Not Yet Implemented/Login", module)
+//   .add("Login - not logged in", () => {
+//     return (
+//       <div style={{ display: "flex", justifyContent: "space-between" }}>
+//         <div />
+//         <Login login={mockLoginContent} />;
+//       </div>
+//     );
+//   })
+//   .add("Login - logged in", () => {
+//     return (
+//       <div style={{ display: "flex", justifyContent: "space-between" }}>
+//         <div />
+//         <Login login={loginContent} />;
+//       </div>
+//     );
+//   });
+exports.mockLoginContent = mockLoginContent;

package/dist/luna/components/MarketoForm/MarketoForm.stories.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _MarketoForm = _interopRequireDefault(require("./MarketoForm"));
+var _MarketoFormDocumentation = _interopRequireDefault(require("./MarketoFormDocumentation.mdx"));
+var inputs = [{
+  type: "text",
+  name: "Text input one",
+  value: "hello",
+  placeholder: "placeholder",
+  required: true
+}, {
+  name: "Dropdown one",
+  type: "dropdown",
+  options: ["Dog", "Cat", "Fox", "Turtle", "Frog", "Fish", "Ferret"],
+  defaultText: "select",
+  required: true
+}, {
+  type: "text",
+  name: "Text input two",
+  value: "whut",
+  placeholder: "placeholder"
+}, {
+  name: "Dropdown two",
+  type: "dropdown",
+  options: ["Red", "Orange", "Yellow", "Green", "Blue", "Purple", "Black", "White", "Grey", "Brown", "Violet"],
+  defaultText: "select"
+}, {
+  type: "text area",
+  name: "Text area",
+  label: "text area",
+  value: "",
+  placeholder: ""
+}];
+var submissionAgreementText = "I understand that by submitting my personal information to Trimble it is subject to the Trimble Privacy Notice. I agree that Trimble, its authorized representatives and its group of companies can contact me by email to promote their products and services. I consent to receive digital communications from Trimble. I understand I can opt-out of digital communications with Trimble at any time using the unsubscribe link in Trimble’s email communications.";
+var _default = {
+  component: _MarketoForm["default"],
+  title: "MXP Components/Marketo Form",
+  parameters: {
+    docs: {
+      page: _MarketoFormDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_MarketoForm["default"], {
+    inputs: inputs,
+    entries: [],
+    handleSelect: (0, _addonActions.action)("selected"),
+    handleChange: (0, _addonActions.action)("changed!")
+    // warnings={["Dropdown one"]}
+    // warningText="There are required fields missing information."
+    ,
+    submitting: true,
+    submissionAgreementText: submissionAgreementText
+  });
+};
+exports.Default = Default;

package/dist/luna/components/MarketoForm/MarketoFormDocumentation.mdx

@@ -0,0 +1 @@
+#### Marketo Form

package/dist/luna/components/MegaMenu/MegaMenu.js

@@ -13,8 +13,7 @@ require("./MegaMenu.scss");
 var _crossMediumBlue = _interopRequireDefault(require("../../images/cross-medium-blue.svg"));
 var _crossMediumWhite = _interopRequireDefault(require("../../images/cross-medium-white.svg"));
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
-var _lodash = require("lodash");
-var _NavBar = require("../../other-organisms/NavBar/NavBar");
+var _NavBar = require("../NavBar/NavBar");
 var _FeatureSection = require("./menu-generators/FeatureSection");
 var _AllSections = require("./menu-generators/AllSections");
 var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -217,7 +216,7 @@ var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     display: initialDisplayNone ? 'none' : 'block'
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("mega-menu-"),
+    id: (0, _react.useId)(),
     tabIndex: mouse ? "" : "0",
     className: "ter-mega-menu ".concat(isOpen ? "ter-mega-menu--is-open" : "", " ").concat(mouse ? "" : "tabFocus", " ").concat(returnDeployedChildClass(), "\n      ").concat(displayIcons ? "ter-mega-menu--with-icon" : ""),
     onKeyDown: function onKeyDown(e) {
@@ -231,10 +230,10 @@ var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-label": "".concat(content.text, " menu")
   }, /*#__PURE__*/_react["default"].createElement("p", {
     "data-depth": 1,
-    id: (0, _formatID["default"])("".concat(content.text, "-mega-menu-nav-text")),
+    id: (0, _formatID["default"])("".concat(content.text, "-mega-menu-nav-text-").concat((0, _react.useId)())),
     className: "ter-mega-menu__nav-text ".concat(isOpen ? "ter-mega-menu__nav-text--is-open" : "", "\n        ").concat(active ? "active" : "", "\n        ").concat(theme ? "ter-mega-menu__nav-text--".concat(theme) : "", "\n        ").concat(displayIcons ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ").concat(displayIcons && theme ? "ter-mega-menu__nav-text--with-icon" : "", "\n        ")
   }, content.text, /*#__PURE__*/_react["default"].createElement("img", {
-    id: (0, _lodash.uniqueId)("cross-icon-"),
+    id: (0, _react.useId)(),
     src: theme === "blue" ? _crossMediumWhite["default"] : _crossMediumBlue["default"],
     alt: "cross icon",
     "aria-label": isOpen ? "Opened" : "Closed",
@@ -245,11 +244,11 @@ var MegaMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, navHeightStyles), displayStyles)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-mega-menu__left-section ".concat(isOpen ? "ter-mega-menu__left-section--is-open" : "", " ").concat(!collapsed ? "ter-mega-menu__left-section--is-uncollapsed" : ""),
-    id: (0, _lodash.uniqueId)("id-")
+    id: (0, _react.useId)()
   }, /*#__PURE__*/_react["default"].createElement(_AllSections.AllSections, {
     sectionProps: allMenuProps
   })), !collapsed && ((_content$featuredLink = content.featuredLinks) === null || _content$featuredLink === void 0 ? void 0 : _content$featuredLink.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-feature-section ".concat(isOpen ? "ter-feature-section--is-open" : "")
   }, /*#__PURE__*/_react["default"].createElement(_FeatureSection.FeatureSection, {
     featureProps: allMenuProps

package/dist/luna/components/MegaMenu/menu-generators/FullSubMenu.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _rightCaretLightGray = _interopRequireDefault(require("../../../images/right-caret-light-gray.svg"));
 var _rightCaretMediumGray = _interopRequireDefault(require("../../../images/right-caret-medium-gray.svg"));
-var _NavBar = require("../../../other-organisms/NavBar/NavBar");
+var _NavBar = require("../../NavBar/NavBar");
 var _formatID = _interopRequireDefault(require("../../../utils/formatID"));
 var _SubMenu = _interopRequireDefault(require("./SubMenu"));
 var FullSubMenu = function FullSubMenu(props) {

package/dist/luna/components/MegaMenu/menu-generators/PartialSubMenu.js

@@ -8,9 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.PartialSubMenu = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _formatID = _interopRequireDefault(require("../../../utils/formatID"));
-var _lodash = require("lodash");
 var _terraOne = require("terra-one");
-var _NavBar = require("../../../other-organisms/NavBar/NavBar");
+var _NavBar = require("../../NavBar/NavBar");
 var PartialSubMenu = function PartialSubMenu(props) {
   var _category$link, _category$link2;
   var menuProps = props.menuProps;
@@ -23,12 +22,12 @@ var PartialSubMenu = function PartialSubMenu(props) {
   return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
     key: category === null || category === void 0 ? void 0 : category.contentfulId
   }, ((category === null || category === void 0 ? void 0 : category.url) || (category === null || category === void 0 ? void 0 : (_category$link = category.link) === null || _category$link === void 0 ? void 0 : _category$link.url)) && /*#__PURE__*/_react["default"].createElement("div", {
-    id: (0, _lodash.uniqueId)("id-"),
+    id: (0, _react.useId)(),
     className: "ter-mega-menu__left-title",
     "aria-controls": "".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-title-link")
   }, /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, {
     to: (category === null || category === void 0 ? void 0 : category.url) || (category === null || category === void 0 ? void 0 : (_category$link2 = category.link) === null || _category$link2 === void 0 ? void 0 : _category$link2.url),
-    id: "".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-title-link").concat((0, _lodash.uniqueId)("-")),
+    id: "".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-title-link-").concat((0, _react.useId)()),
     Link: Link,
     depth: 2,
     tabIndex: mouse ? "" : "0",
@@ -38,7 +37,7 @@ var PartialSubMenu = function PartialSubMenu(props) {
     },
     target: typeof (category === null || category === void 0 ? void 0 : category.external) === 'boolean' ? category !== null && category !== void 0 && category.external ? "_blank" : "_self" : null
   }, /*#__PURE__*/_react["default"].createElement("p", {
-    id: (0, _formatID["default"])("".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-title-link-text")),
+    id: (0, _formatID["default"])("".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-title-link-text-").concat((0, _react.useId)())),
     className: " ter-mega-menu__left-title--text ".concat(deployedSubsection === (category === null || category === void 0 ? void 0 : category.contentfulId) ? "ter-mega-menu__left-title--text--is-open" : "", " ")
   }, category === null || category === void 0 ? void 0 : category.text))), deployedSubsection === (category === null || category === void 0 ? void 0 : category.contentfulId) && /*#__PURE__*/_react["default"].createElement("div", {
     className: "ter-right-section ter-right-section__fill-placeholder"

package/dist/luna/components/MegaMenu/menu-generators/SubMenu.js

@@ -7,16 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _formatID = _interopRequireDefault(require("../../../utils/formatID"));
-var _lodash = require("lodash");
 var _terraOne = require("terra-one");
 var _TertiaryMenu = require("./TertiaryMenu");
 var _rightCaretMediumGray = _interopRequireDefault(require("../../../images/right-caret-medium-gray.svg"));
 var _rightCaretLightGray = _interopRequireDefault(require("../../../images/right-caret-light-gray.svg"));
-var _NavBar = require("../../../other-organisms/NavBar/NavBar");
+var _NavBar = require("../../NavBar/NavBar");
 var SubMenu = function SubMenu(props) {
   var menuProps = props.menuProps,
     isOpen = props.isOpen,
@@ -65,14 +63,12 @@ var SubMenu = function SubMenu(props) {
     if (highest != null) setMaxActiveNavItems(highest);
   };
   var generateTertiaryMenu = function generateTertiaryMenu(category) {
-    var _React$createElement;
     var tertiaryIsOpen = deployedTertiary === (category === null || category === void 0 ? void 0 : category.contentfulId);
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: category === null || category === void 0 ? void 0 : category.contentfulId
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "ter-right-section__clip ".concat(isOpen ? "ter-right-section__clip--is-open" : "")
-    }, /*#__PURE__*/_react["default"].createElement("div", (_React$createElement = {
-      id: (0, _lodash.uniqueId)("id-"),
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       tabIndex: mouse ? "" : "0",
       onMouseOver: function onMouseOver() {
         setIsMousedOver(category === null || category === void 0 ? void 0 : category.contentfulId);
@@ -92,8 +88,10 @@ var SubMenu = function SubMenu(props) {
       },
       "aria-haspopup": "menu",
       "aria-expanded": tertiaryIsOpen,
-      "aria-label": "".concat(category === null || category === void 0 ? void 0 : category.text, " sub menu")
-    }, (0, _defineProperty2["default"])(_React$createElement, "id", (0, _formatID["default"])("".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-left-title-text"))), (0, _defineProperty2["default"])(_React$createElement, "className", "ter-mega-menu__left-title ".concat(tertiaryIsOpen ? "ter-mega-menu__left-title--is-open-tertiary" : "", " ").concat(mouse ? "" : "tabFocus")), _React$createElement), /*#__PURE__*/_react["default"].createElement("div", {
+      "aria-label": "".concat(category === null || category === void 0 ? void 0 : category.text, " sub menu"),
+      id: (0, _formatID["default"])("".concat(category === null || category === void 0 ? void 0 : category.text, "-mega-menu-left-title-text-").concat((0, _react.useId)())),
+      className: "ter-mega-menu__left-title ".concat(tertiaryIsOpen ? "ter-mega-menu__left-title--is-open-tertiary" : "", " ").concat(mouse ? "" : "tabFocus")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "ter-mega-menu__left-title--caret-wrapper"
     }, /*#__PURE__*/_react["default"].createElement("p", {
       className: "ter-mega-menu__left-title--text ".concat(tertiaryIsOpen && !isMousedOver ? "ter-mega-menu__left-title--text--is-open" : "")
@@ -116,7 +114,6 @@ var SubMenu = function SubMenu(props) {
       if (link !== null && link !== void 0 && link.links) {
         return generateTertiaryMenu(link);
       } else {
-        var _React$createElement2;
         return /*#__PURE__*/_react["default"].createElement("div", {
           key: (link === null || link === void 0 ? void 0 : link.text) + " " + index,
           onMouseOver: function onMouseOver() {
@@ -126,13 +123,18 @@ var SubMenu = function SubMenu(props) {
             return subMouseLeave();
           },
           className: "ter-right-section__clip ".concat(isOpen ? "ter-right-section__clip--is-open" : "")
-        }, /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, (_React$createElement2 = {
+        }, /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, {
           depth: 3,
           Link: Link,
-          id: (0, _lodash.uniqueId)("id-"),
-          tabIndex: mouse ? "" : "0"
-        }, (0, _defineProperty2["default"])(_React$createElement2, "id", (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.text, "-right-section-link"))), (0, _defineProperty2["default"])(_React$createElement2, "to", link === null || link === void 0 ? void 0 : link.url), (0, _defineProperty2["default"])(_React$createElement2, "href", link === null || link === void 0 ? void 0 : link.href), (0, _defineProperty2["default"])(_React$createElement2, "className", "ter-right-section__link ".concat(childOpen === (link === null || link === void 0 ? void 0 : link.contentfulId) ? "ter-right-section__link--is-open" : "", " ").concat(mouse ? "" : "tabFocus", "\n              ")), (0, _defineProperty2["default"])(_React$createElement2, "onClick", closeAllDropDowns), (0, _defineProperty2["default"])(_React$createElement2, "target", typeof (link === null || link === void 0 ? void 0 : link.external) === 'boolean' ? link !== null && link !== void 0 && link.external ? "_blank" : "_self" : null), _React$createElement2), /*#__PURE__*/_react["default"].createElement("p", {
-          id: (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.text, "-mega-menu-item-link-text")),
+          tabIndex: mouse ? "" : "0",
+          id: (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.text, "-right-section-link-").concat((0, _react.useId)())),
+          to: link === null || link === void 0 ? void 0 : link.url,
+          href: link === null || link === void 0 ? void 0 : link.href,
+          className: "ter-right-section__link ".concat(childOpen === (link === null || link === void 0 ? void 0 : link.contentfulId) ? "ter-right-section__link--is-open" : "", " ").concat(mouse ? "" : "tabFocus", "\n              "),
+          onClick: closeAllDropDowns,
+          target: typeof (link === null || link === void 0 ? void 0 : link.external) === 'boolean' ? link !== null && link !== void 0 && link.external ? "_blank" : "_self" : null
+        }, /*#__PURE__*/_react["default"].createElement("p", {
+          id: (0, _formatID["default"])("".concat(link === null || link === void 0 ? void 0 : link.text, "-mega-menu-item-link-text-").concat((0, _react.useId)())),
           className: "ter-right-section__link--underline ".concat(childOpen === (link === null || link === void 0 ? void 0 : link.contentfulId) ? "ter-right-section__link--underline--is-open" : "")
         }, link === null || link === void 0 ? void 0 : link.text)));
       }