luna-one 3.1.592 → 3.1.594

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

@@ -0,0 +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}
+  />
+)
+
+```

package/dist/{application → luna}/components/NavBarHandler/NavBarHandler.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _NavBar = _interopRequireDefault(require("../../../luna/other-organisms/NavBar/NavBar"));
+var _NavBar = _interopRequireDefault(require("../NavBar/NavBar"));
 var NavBarHandler = function NavBarHandler(_ref) {
   var _navCTAOverride$link, _navCTAOverride$link2;
   var data = _ref.data,

package/dist/luna/components/NavBarTop/NavBarTop.js

@@ -13,10 +13,10 @@ var _iconSearch = _interopRequireDefault(require("../../images/icon-search.svg")
 var _formatID = _interopRequireDefault(require("../../utils/formatID"));
 var _lodash = require("lodash");
 var _utilizeFocus = require("../../utils/utilizeFocus");
-var _NavBar = require("../../other-organisms/NavBar/NavBar");
+var _NavBar = require("../NavBar/NavBar");
 var _terraOne = require("terra-one");
 var _NavSearch = _interopRequireDefault(require("../NavSearch/NavSearch"));
-var _LanguageSelector = _interopRequireDefault(require("../../other-organisms/LanguageSelector/LanguageSelector"));
+var _LanguageSelector = _interopRequireDefault(require("../LanguageSelector/LanguageSelector"));
 var NavBarTop = function NavBarTop(props) {
   var _languageSelectorData, _languageSelectorData2, _languageSelectorData3;
   var searchField = props.searchField,

package/dist/luna/components/NavSearch/NavSearch.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 require("./NavSearch.scss");
-var _closeBlue = _interopRequireDefault(require("../../../application/assets/images/close-blue.svg"));
+var _closeBlue = _interopRequireDefault(require("../../images/close-blue.svg"));
 var NavSearch = function NavSearch(_ref) {
   var deployed = _ref.deployed,
     searchComponent = _ref.searchComponent,

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

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ShortDescriptionNoImage = exports.ShortDescriptionGrouped = exports.ShortDescription = exports.LongDescription = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _NonTimeBasedListEntries = _interopRequireDefault(require("./NonTimeBasedListEntries"));
+var _NonTimeBasedListEntriesDocumentation = _interopRequireDefault(require("./NonTimeBasedListEntriesDocumentation.mdx"));
+var sidebarImage = {
+  focalPointImage: {
+    height: 4000,
+    title: "dog",
+    url: "//images.ctfassets.net/citn2sn5tdjr/1VxW40ovs5rgwQVMGnB5vu/4e355963c7782b6e5d30d8cd64642e9e/board-of-directors-pattern3-400x1280.jpg",
+    width: 6000,
+    x: 0,
+    y: 0
+  },
+  alt: "Dog"
+};
+var placeHolderEntry1 = {
+  eyebrow: "Test Eyebrow",
+  header: "NO LINK HERE®",
+  subhead: "Test Subhead",
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    focalPointImage: {
+      height: 240,
+      title: "test thumbnail image",
+      url: "https://picsum.photos/240",
+      width: 240,
+      x: 0,
+      y: 0
+    },
+    alt: "test thumbnail image"
+  },
+  summary: "<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src=\"/\">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>",
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 1",
+  role: "test role"
+};
+var placeHolderEntry2 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  link: {
+    url: "/",
+    text: "Test Link Two"
+  },
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    focalPointImage: {
+      height: 240,
+      title: "dog",
+      url: "https://picsum.photos/240",
+      width: 240,
+      x: 0,
+      y: 0
+    }
+  },
+  alt: "test thumbnail image",
+  summary: "<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src=\"/\">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>",
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 2",
+  role: "test role"
+};
+var placeHolderEntry3 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  summary: "<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src=\"/\">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>",
+  industryCategory: "Test Industry",
+  role: "test role"
+};
+var entries = [placeHolderEntry1, placeHolderEntry1, placeHolderEntry2, placeHolderEntry1, placeHolderEntry2, placeHolderEntry2, placeHolderEntry3, placeHolderEntry3];
+var _default = {
+  component: _NonTimeBasedListEntries["default"],
+  title: "MXP Components/Non Time Based List Entries",
+  parameters: {
+    docs: {
+      page: _NonTimeBasedListEntriesDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var ShortDescription = function ShortDescription() {
+  return /*#__PURE__*/_react["default"].createElement(_NonTimeBasedListEntries["default"], {
+    variant: "short-description",
+    sidebarImage: sidebarImage,
+    entries: entries
+  });
+};
+exports.ShortDescription = ShortDescription;
+var ShortDescriptionGrouped = function ShortDescriptionGrouped() {
+  return /*#__PURE__*/_react["default"].createElement(_NonTimeBasedListEntries["default"], {
+    variant: "short-description",
+    sidebarImage: sidebarImage,
+    entries: entries,
+    groupEntries: true
+  });
+};
+exports.ShortDescriptionGrouped = ShortDescriptionGrouped;
+var ShortDescriptionNoImage = function ShortDescriptionNoImage() {
+  return /*#__PURE__*/_react["default"].createElement(_NonTimeBasedListEntries["default"], {
+    variant: "short-description",
+    entries: entries,
+    groupEntries: true
+  });
+};
+exports.ShortDescriptionNoImage = ShortDescriptionNoImage;
+var LongDescription = function LongDescription() {
+  return /*#__PURE__*/_react["default"].createElement(_NonTimeBasedListEntries["default"], {
+    variant: "long-description",
+    entries: entries
+  });
+};
+exports.LongDescription = LongDescription;

package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntriesDocumentation.mdx

@@ -0,0 +1,89 @@
+#### Non Time Based List Entries
+
+###### Props -
+
+- `variant` - string that determines the list entries appearance (either short-description or long-description)
+- `sidebarImage` - object containing the sidebar image information
+  - `src` - string containing the sidebar image source
+  - `alt` - string containing the sidebar image alt text
+- `groupEntries` - boolean determining if short-description entries will be grouped
+- `entries` - array of objects containing list entry information
+  - `eyebrow` - string containing the entry eyebrow text
+  - `header` - string containing the entry header text
+  - `subhead` - string containing the entry subhead text
+  - `link` - link object containing text and url:
+    - `url` - string for link url
+    - `text` - string for link text
+  - `customAriaLabel` - string containing the entry link aria label
+  - `image` - object containing the entry image
+    - `src` - string containing the image source
+    - `alt` - string containing the image alt text
+  - `summary` - HTML DOM string to be used as the entry description
+  - `industryCategory` - string containing the entry industry or category
+  - `groupingCategory` - string containing the entry grouping category (used when groupEntries is set to true)
+  - `role` - string containing the entry role text
+- `paddingClass` - string containing the name of the padding class to be inserted into the wrapper
+
+###### Example -
+
+```
+let sidebarImage = {
+  src: "https://picsum.photos/320/943",
+  alt: "Sidebar Image",
+}
+
+let placeHolderEntry1 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  link: "/",
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    src: "https://picsum.photos/240",
+    alt: "test thumbnail image",
+  },
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 1",
+  role: "test role",
+}
+
+let placeHolderEntry2 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  link: "/",
+  customAriaLabel: "Custom Aria Label",
+  image: {
+    src: "https://picsum.photos/240",
+    alt: "test thumbnail image"
+  },
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  groupingCategory: "Test Category Group 2",
+  role: "test role",
+}
+
+let placeHolderEntry3 = {
+  eyebrow: "Test Eyebrow",
+  header: "Test Header",
+  subhead: "Test Subhead",
+  summary: `<p>Short bio can have a limit on the character count. Aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales. Et,&nbsp;<a src="/">pellentesque sed natoque</a>&nbsp;sit. Ut vitae id feugiat ornare amet. In faucibus elit turpis lacus potenti tincidunt lectus leo.</p><p>Commodo est ullamco pariatur ut nostrud pariatur. Condimentum eu nulla consequat sed eget. Accumsan, sed consectetur molestie diam urna etiam sem enim. A orci tincidunt lectus semper morbi sit quis leo. Faucibus mattis egestas turpis tempor senectus mauris tellus lacus sodales.</p>`,
+  industryCategory: "Test Industry",
+  role: "test role",
+}
+
+let entries = [placeHolderEntry1, placeHolderEntry2, placeHolderEntry3]
+
+
+
+return (
+  <NonTimeBasedListEntries
+    variant="short-description"
+    sidebarImage={sidebarImage}
+    entries={entries}
+    groupEntries={true}
+    paddingClass="test-padding-class"
+  />
+);
+```

package/dist/luna/components/NonTimeBasedListEntries/NonTimeBasedListEntriesMethods.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ShortDescriptionCardWrapper = exports.ShortDescriptionCard = exports.LongDescriptionCard = exports.Group = exports.CalculatePageLimit = exports.CalculateGroupedEntriesTotal = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _trimble_logo = _interopRequireDefault(require("../../../application/assets/images/trimble_logo.png"));
+var _trimble_logo = _interopRequireDefault(require("../../images/trimble_logo.png"));
 var _checkForExternalLink = _interopRequireDefault(require("../../utils/checkForExternalLink"));
 var _terraOne = require("terra-one");
 var _formatSpecialCharText = _interopRequireDefault(require("../../utils/formatSpecialCharText"));

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

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ShortText = exports.OverMaxText = exports.MaxTextLink = exports.MaxText = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _OverlayNotice = _interopRequireDefault(require("./OverlayNotice"));
+var _OverlayNoticeDocumentation = _interopRequireDefault(require("./OverlayNoticeDocumentation.mdx"));
+var _addonActions = require("@storybook/addon-actions");
+var _default = {
+  component: _OverlayNotice["default"],
+  title: "MXP Components/Overlay Notice",
+  parameters: {
+    docs: {
+      page: _OverlayNoticeDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var shortHeader = "Register for Dimensions 2022®";
+var header = "Dimensions 2022 registration is now open®";
+var longHeader = "This is a very long header. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie.®";
+var shortButton = {
+  text: "Register",
+  url: "/"
+};
+var button = {
+  text: "Register Now",
+  url: "/"
+};
+var buttonExternal = {
+  text: "Register Now",
+  url: "https://www.google.com",
+  external: true
+};
+var longButton = {
+  text: "This is exceptionally long button text",
+  url: "/"
+};
+var ShortContent = function ShortContent() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum."));
+};
+var ContentNoLink = function ContentNoLink() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat."));
+};
+var ContentWithLink = function ContentWithLink() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "Early-bird registrants now receive VIP access Day 1 of the event. View", " "), /*#__PURE__*/_react["default"].createElement("a", {
+    href: "/"
+  }, "Conference Details"), /*#__PURE__*/_react["default"].createElement("p", null, ". "));
+};
+var VeryLongContent = function VeryLongContent() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat."), /*#__PURE__*/_react["default"].createElement("p", null, "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur commodo nisi laborum voluptate. Commodo est ullamco pariatur ut nostrud pariatur. Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat."));
+};
+var _handleClose = (0, _addonActions.action)("Banner dismissed");
+var ShortText = function ShortText() {
+  return /*#__PURE__*/_react["default"].createElement(_OverlayNotice["default"], {
+    header: shortHeader,
+    button: shortButton,
+    details: /*#__PURE__*/_react["default"].createElement(ShortContent, null),
+    handleClose: _handleClose
+  });
+};
+exports.ShortText = ShortText;
+ShortText.storyName = "Character count is below recommneded max ";
+var MaxText = function MaxText() {
+  return /*#__PURE__*/_react["default"].createElement(_OverlayNotice["default"], {
+    header: header,
+    button: button,
+    details: /*#__PURE__*/_react["default"].createElement(ContentNoLink, null),
+    handleClose: _handleClose
+  });
+};
+exports.MaxText = MaxText;
+MaxText.storyName = "Character count Recommended max ";
+var MaxTextLink = function MaxTextLink() {
+  return /*#__PURE__*/_react["default"].createElement(_OverlayNotice["default"], {
+    header: header,
+    button: buttonExternal,
+    details: /*#__PURE__*/_react["default"].createElement(ContentWithLink, null),
+    handleClose: _handleClose
+  });
+};
+exports.MaxTextLink = MaxTextLink;
+MaxTextLink.storyName = "Recommended max character count with link";
+var OverMaxText = function OverMaxText() {
+  return /*#__PURE__*/_react["default"].createElement(_OverlayNotice["default"], {
+    header: longHeader,
+    button: longButton,
+    details: /*#__PURE__*/_react["default"].createElement(VeryLongContent, null),
+    handleClose: _handleClose
+  });
+};
+exports.OverMaxText = OverMaxText;
+OverMaxText.storyName = "Recommended max character count exceeded";

package/dist/luna/components/OverlayNotice/OverlayNoticeDocumentation.mdx

@@ -0,0 +1,45 @@
+#### Overlay Notice
+
+###### Props -
+
+- `header` - string containing the headline text.
+- `button` - object containing the following properties:
+  - `url` - string containing the url that opens when the button is clicked.
+  - `text` - string containing the button text.
+  - `external` - boolean that determines if the link is external. If true, the 'external arrow' icon will render.
+    `details` - react component that renders the html for the details section. The styling of this component is equipped to handle `<p>` and `<a>` tags.
+- `handleClose` - function that is called when the close button is pressed.
+
+###### Example -
+
+```
+
+const shortHeader = "Register for Dimensions 2022";
+
+const shortButton = {
+  text: "Register",
+  url: "/",
+};
+
+const ShortContent = () => (
+  <>
+    <p>
+      Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est
+      sint laborum.
+    </p>
+  </>
+);
+
+const handleClose = () => {
+  console.log('Banner dismissed!');
+}
+
+return (
+  <OverlayNotice
+    header={shortHeader}
+    button={shortButton}
+    details={<ShortContent />}
+    handleClose={handleClose}
+  />
+);
+```