luna-one 3.1.596 → 3.1.598

package/dist/luna/components/NavBar/NavigationBarDocumentation.mdx

@@ -1,245 +1,245 @@
-#### NavBar
-
-###### Notes -
-
-This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the corresponding organism that the window should scroll to.
-
-This parent component consists of the `<NavBarTop />`, `<UtilityNav />`, `<NavSearch />`, `<Flyout />`, `<LanguageSelector />`, `<Login />`, and various menu components. All props are listed below.
-
-###### Props -
-
-- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
-- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
-- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.
-- `featuredLink` - object consisting of `url` and `text`. This will display on the far right of the main (middle) section.
-- `isExpanded` - boolean that determines if navigation menus are displayed as collapsed hierarchies or expanded lists. If `isExpanded` is set to true, only one level of menu will be displayed (tertiary navigation items will be ignored). Additionally, if `isExpanded` is set to true, Luna will check for `imageUrl` and `description` keys on each link object. If seen, the image and description will display instead of text.
-- `disableSectorFlyout` - boolean that determines if the sector fly-out menu is displayed.
-- `disableSearch` - boolean that determines if the search input is displayed.
-- `disableLanguageRegion` - boolean that determines if the language/region selector item is displayed.
-- `disableLogin` - boolean that determines if the login item is displayed.
-- `navOptions` - array of objects used for generating the main (middle) section of the nav. All objects will have a type indicating whether to render a `<MegaMenu />` (type = 'category'), a simple drop down of links `<MiniMenu />` (type = 'links'), or a single link `singleLink` (type = 'link'). See examples below on how to load up these objects. The `MegaMenu` can render a child both with and without subcategories. `MegaMenu` can also hold an array of `featuredLinks` with a corresponding `featuredLinksTitle`.
-- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
-- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
-- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
-- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
-- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
-- `searchComponent` - react component used to render the search input and results.
-- `searchDeployed` - boolean that determines if the search modal is displayed on initial render.
-- `setSearchDeployed` **(required)** - method used to set the search modal state.
-
-###### Example -
-
-```
-const rightLinks = [
-  {
-    url: "/link",
-    text: "Contact Us",
-  }
-];
-
-const logo = {
-  url: Logo (should be imported in the application),
-  altText: 'Trimble Logo',
-  link: {
-    url: 'www.trimble.com'
-  }
-};
-
-const divisionName = 'Geospatial';
-const location = 'N. America';
-
-const location = this.props.location
-
-const utilityNav = {
-  pageTitle: "Trimble Accubid Enterprise",
-  links: [
-    {
-      text: "Product Anchor One",
-      url: "/#"
-    },
-    {
-      text: "Product Anchor Two",
-      url: "/#"
-    }
-  ]
-};
-
-const megaMenu = {
-  type: "category",
-  text: "Products",
-  featuredLinksTitle: "Featured Links",
-  featuredLinks: [
-    {
-      url: "/#products",
-      text: "All Products",
-    },
-    {
-      url: "/1",
-      text: "What's New",
-    },
-  ],
-  links: [
-    {
-      text: "Mechanical",
-      links: [
-        {
-          url: "/#",
-          text: "BIM Collaboration"
-        },
-        {
-          url: "/#",
-          text: "MEP Content"
-        }
-      ]
-    },
-    {
-      text: "Electrical",
-      links: [
-        {
-          url: "/#",
-          text: "Design/Detailing"
-        },
-        {
-          url: "/#",
-          text: "Project Management"
-        }
-      ]
-    },
-    {
-      text: "Plumbing",
-      link: {url: "/#"}
-    },
-  ]
-};
-
-const miniMenus = [
-  {
-    type: "links",
-    text: "Services",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  },
-  {
-    type: "links",
-    text: "Resources",
-    links: [
-      {
-        url: "/#",
-        text: "Link One"
-      },
-      {
-        url: "/#",
-        text: "Link Two"
-      }
-    ]
-  }
-];
-
-const singleLink = {
-  type: "link",
-  url: "/#",
-  text: "Process"
-};
-
-const languageSelectorData = {
-  labels: {
-    currentRegion: "Current Region",
-    cancel: "Cancel",
-    save: "Save"
-  },
-  regions: [
-    {
-      region: "North America",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "UK and Middle East",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "France",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Germany and Austria",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    },
-    {
-      region: "Switzerland",
-      languages: [
-        "EN: English (US)",
-        "EN-UK: English (UK)",
-        "FR: French",
-        "DE: German",
-        "NL: Dutch"
-      ]
-    }
-  ],
-  currentRegionLanguage: {
-    region: "UK and Middle East",
-    language: "EN-UK"
-  },
-
-  activeRegion: {
-    region: "UK and Middle East",
-    language: "EN: English"
-  },
-
-  companyDivision: "MEP"
-
-};
-
-
-return (
-  <NavBar
-    location={location}
-    rightLinks={rightLinks}
-    currentLanguage={{ region: "N. America", language: "EN: English" }}
-    logo={logo}
-    divisionName="MEP"
-    navCTA={navCTA}
-    navOptions={[megaMenu, ...miniMenus, singleLink]}
-    utilityNav={utilityNav}
-    languageSelectorData={languageSelectorData}
-    isExpanded={false}
-    disableSectorFlyOut={false}
-    disableSearch={false}
-    disableLanguageRegion={false}
-    disableSectorFlyOut={true}
-    disableLogin={true}
-  />
-)
-
-```
+#### NavBar
+
+###### Notes -
+
+This component uses the `react-slidedown` library for the innerpage navigation links in the `utilityNav`. The `link.url` string should be a reference to the name of the `<Element>` that wraps the corresponding organism that the window should scroll to.
+
+This parent component consists of the `<NavBarTop />`, `<UtilityNav />`, `<NavSearch />`, `<Flyout />`, `<LanguageSelector />`, `<Login />`, and various menu components. All props are listed below.
+
+###### Props -
+
+- `rightLinks` - array of objects used for generating links to the right of the search icon. Each object requires `url` and `text` strings.
+- `logo` **(required)** - object consisting of `url` and `altText` strings (for generating the logo image) in addition to a link object with a `url` string for generating the `href` property.
+- `divisionName` **(required)** - string used for generating the name of the Trimble division that is to the right of the logo.
+- `featuredLink` - object consisting of `url` and `text`. This will display on the far right of the main (middle) section.
+- `isExpanded` - boolean that determines if navigation menus are displayed as collapsed hierarchies or expanded lists. If `isExpanded` is set to true, only one level of menu will be displayed (tertiary navigation items will be ignored). Additionally, if `isExpanded` is set to true, Luna will check for `imageUrl` and `description` keys on each link object. If seen, the image and description will display instead of text.
+- `disableSectorFlyout` - boolean that determines if the sector fly-out menu is displayed.
+- `disableSearch` - boolean that determines if the search input is displayed.
+- `disableLanguageRegion` - boolean that determines if the language/region selector item is displayed.
+- `disableLogin` - boolean that determines if the login item is displayed.
+- `navOptions` - array of objects used for generating the main (middle) section of the nav. All objects will have a type indicating whether to render a `<MegaMenu />` (type = 'category'), a simple drop down of links `<MiniMenu />` (type = 'links'), or a single link `singleLink` (type = 'link'). See examples below on how to load up these objects. The `MegaMenu` can render a child both with and without subcategories. `MegaMenu` can also hold an array of `featuredLinks` with a corresponding `featuredLinksTitle`.
+- `utilityNav` - object consisting of a `pageTitle` string as well as a `links` array of objects consisting of `text` and `url` strings. See example below.
+- `currentLanguage` - object with `region` and `language` strings that indicate the current region and language selected.
+- `languageSelectorData` - object consisting of data needed to populate the `LanguageSelector` component. See example below.
+- `setLanguage` - method used to set the region and language, which it takes as string key/values in an object as an argument
+- `location` - prop used to close the mobile menu when a user clicks on one of the rightLinks. In your project, pass in `location={this.props.location}`
+- `searchComponent` - react component used to render the search input and results.
+- `searchDeployed` - boolean that determines if the search modal is displayed on initial render.
+- `setSearchDeployed` **(required)** - method used to set the search modal state.
+
+###### Example -
+
+```
+const rightLinks = [
+  {
+    url: "/link",
+    text: "Contact Us",
+  }
+];
+
+const logo = {
+  url: Logo (should be imported in the application),
+  altText: 'Trimble Logo',
+  link: {
+    url: 'www.trimble.com'
+  }
+};
+
+const divisionName = 'Geospatial';
+const location = 'N. America';
+
+const location = this.props.location
+
+const utilityNav = {
+  pageTitle: "Trimble Accubid Enterprise",
+  links: [
+    {
+      text: "Product Anchor One",
+      url: "/#"
+    },
+    {
+      text: "Product Anchor Two",
+      url: "/#"
+    }
+  ]
+};
+
+const megaMenu = {
+  type: "category",
+  text: "Products",
+  featuredLinksTitle: "Featured Links",
+  featuredLinks: [
+    {
+      url: "/#products",
+      text: "All Products",
+    },
+    {
+      url: "/1",
+      text: "What's New",
+    },
+  ],
+  links: [
+    {
+      text: "Mechanical",
+      links: [
+        {
+          url: "/#",
+          text: "BIM Collaboration"
+        },
+        {
+          url: "/#",
+          text: "MEP Content"
+        }
+      ]
+    },
+    {
+      text: "Electrical",
+      links: [
+        {
+          url: "/#",
+          text: "Design/Detailing"
+        },
+        {
+          url: "/#",
+          text: "Project Management"
+        }
+      ]
+    },
+    {
+      text: "Plumbing",
+      link: {url: "/#"}
+    },
+  ]
+};
+
+const miniMenus = [
+  {
+    type: "links",
+    text: "Services",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  },
+  {
+    type: "links",
+    text: "Resources",
+    links: [
+      {
+        url: "/#",
+        text: "Link One"
+      },
+      {
+        url: "/#",
+        text: "Link Two"
+      }
+    ]
+  }
+];
+
+const singleLink = {
+  type: "link",
+  url: "/#",
+  text: "Process"
+};
+
+const languageSelectorData = {
+  labels: {
+    currentRegion: "Current Region",
+    cancel: "Cancel",
+    save: "Save"
+  },
+  regions: [
+    {
+      region: "North America",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "UK and Middle East",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "France",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Germany and Austria",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    },
+    {
+      region: "Switzerland",
+      languages: [
+        "EN: English (US)",
+        "EN-UK: English (UK)",
+        "FR: French",
+        "DE: German",
+        "NL: Dutch"
+      ]
+    }
+  ],
+  currentRegionLanguage: {
+    region: "UK and Middle East",
+    language: "EN-UK"
+  },
+
+  activeRegion: {
+    region: "UK and Middle East",
+    language: "EN: English"
+  },
+
+  companyDivision: "MEP"
+
+};
+
+
+return (
+  <NavBar
+    location={location}
+    rightLinks={rightLinks}
+    currentLanguage={{ region: "N. America", language: "EN: English" }}
+    logo={logo}
+    divisionName="MEP"
+    navCTA={navCTA}
+    navOptions={[megaMenu, ...miniMenus, singleLink]}
+    utilityNav={utilityNav}
+    languageSelectorData={languageSelectorData}
+    isExpanded={false}
+    disableSectorFlyOut={false}
+    disableSearch={false}
+    disableLanguageRegion={false}
+    disableSectorFlyOut={true}
+    disableLogin={true}
+  />
+)
+
+```