luna-one 3.1.593 → 3.1.594

package/dist/luna/components/HTMLEmbed/HTMLEmbed.scss

@@ -1,52 +1,52 @@
-@import "../../../global-styles/terra.scss";
-
-.MXP-embed {
-  &__header {
-    font-size: $heading-3-size;
-    @include benton-very-bold();
-    text-align: center;
-  }
-
-  &__subheader {
-    text-align: center;
-    font-weight: 450;
-    font-size: $subheading-size;
-  }
-
-  &__content-wrapper {
-    display: flex;
-    margin: 0 auto;
-    
-    div, section, article {
-      margin: 0 auto;
-    }
-
-    iframe {
-      margin: 0 auto;
-    }
-    &--ratio {
-      position: relative;
-      height: 100%;
-      overflow: auto;
-      &-1-1 {
-        padding-bottom: 100%;
-      }
-      &-3-4 {
-        padding-bottom: 133%;
-      }
-      &-4-3 {
-        padding-bottom: 75%;
-      }
-      & > *,
-      & > iframe {
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.MXP-embed {
+  &__header {
+    font-size: $heading-3-size;
+    @include benton-very-bold();
+    text-align: center;
+  }
+
+  &__subheader {
+    text-align: center;
+    font-weight: 450;
+    font-size: $subheading-size;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    margin: 0 auto;
+    
+    div, section, article {
+      margin: 0 auto;
+    }
+
+    iframe {
+      margin: 0 auto;
+    }
+    &--ratio {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      &-1-1 {
+        padding-bottom: 100%;
+      }
+      &-3-4 {
+        padding-bottom: 133%;
+      }
+      &-4-3 {
+        padding-bottom: 75%;
+      }
+      & > *,
+      & > iframe {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
 }

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

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IframeExampleThreeFour = exports.IframeExampleFourThree = exports.IframeExample = exports.ExampleWithScript = exports.ExampleWithOutHeaderAndSubHeader = exports.ExampleWithMarketo = exports.ExampleWithHeaderAndSubHeader = exports.ExampleWithHeader = exports.ExampleWithDocushare = exports.ExampleWithCognitoForms = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _HTMLEmbed = _interopRequireDefault(require("./HTMLEmbed"));
+var _HTMLEmbedDocumentation = _interopRequireDefault(require("./HTMLEmbedDocumentation.mdx"));
+var _themes = require("../../utils/themes");
+var header = "I am the header®";
+var subheader = "I am the subheader";
+var HTML = "<iframe id=\"iFrameGB\" width=\"980px\" height=\"1200px\" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" src=\"https://mytrimbleprotected.com/cc/servicelocator.html\" frameborder=\"no\" scrolling=\"auto\"></iframe>";
+var isScript = null;
+var content = {
+  header: header,
+  subheader: subheader,
+  HTML: HTML,
+  isScript: isScript
+};
+var content2 = {
+  HTML: "<div>\n  <p>I am an HTML block</p>\n  <p>Enjoy your day!</p>\n  </div>"
+};
+var content3 = {
+  header: "Enjoy this video! ",
+  HTML: "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/Kbuoxq5S_M4\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>"
+};
+var content4 = {
+  header: "iFrame Knowledge Center - Ratio 1/1",
+  HTML: "<iframe id=\"iFrameGB\" width=\"100%\" height=\"1000px\" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" src=\"https://mytrimbleprotected.com/cc/knowledgeCenter.html\" frameborder=\"no\" scrolling=\"auto\"></iframe>",
+  isScript: false,
+  ratio: "1:1"
+};
+var content4Two = {
+  header: "iFrame Knowledge Center - Ratio 3/4",
+  HTML: "<iframe id=\"iFrameGB\" width=\"100%\" height=\"1000px\" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" src=\"https://mytrimbleprotected.com/cc/knowledgeCenter.html\" frameborder=\"no\" scrolling=\"auto\"></iframe>",
+  isScript: false,
+  ratio: "3:4"
+};
+var content4Three = {
+  header: "iFrame Knowledge Center - Ratio 4/3",
+  HTML: "<iframe id=\"iFrameGB\" width=\"100%\" height=\"1000px\" marginwidth=\"0\" marginheight=\"0\" vspace=\"0\" hspace=\"0\" src=\"https://mytrimbleprotected.com/cc/knowledgeCenter.html\" frameborder=\"no\" scrolling=\"auto\"></iframe>",
+  isScript: false,
+  ratio: "4:3"
+};
+var content5 = {
+  header: 'News Release',
+  subheader: null,
+  HTML: "\n    <div class=\"customHTMLEmbed\">\n    <div id=\"newsContainer\"></div>\n    <script src=\"https://ww2.trimble.com/html/js/newsAJAX-mxp.js\"></script>\n    <script>generateNewsContentsMXP('newsContainer');</script>\n    </div>"
+};
+var content6 = {
+  header: 'Cognito Embed Script',
+  subheader: null,
+  HTML: "\n    <div class=\"customHTMLEmbed\">\n    <div class=\"cognito\"></div>\n    <script src=\"https://services.cognitoforms.com/s/0cXQNplKOk-LZ2g6xRL5fQ\"></script>\n    <script type=\"text/javascript\" defer>\n    Cognito.load(\"forms\", { id: \"1\" });\n    </script>\n    \n    </div>"
+};
+var content7 = {
+  header: 'Docushare',
+  subheader: null,
+  HTML: "\n    <div>\n    <br/> <br/>\n    <h6 id=\"TRLtitle\">{item title renders here}</h6>\n    <div class=\"centercol\" id=\"TRLcontent\">{docushare data renders here}</div>\n    <link href=\"https://forms.trimble.com/globalTRL.css\" media=\"screen\" rel=\"stylesheet\" type=\"text/css\" />\n    <script src=\"https://forms.trimble.com/globalTRL.js\"></script>\n    <script>loadTRLCollection(getDCSParam(), 'TRLcontent'); </script>\n    </div>"
+};
+var content8 = {
+  header: 'Marketo Form',
+  subheader: null,
+  HTML: "\n    <div>\n    <script src=\"//go.trimble.com/js/forms2/js/forms2.min.js\"></script>\n    <form id=\"mktoForm_7858\"></form>\n    <script>MktoForms2.loadForm(\"//go.trimble.com\", \"593-HFN-635\", 7858);</script>\n    </div>"
+};
+var _default = {
+  component: _HTMLEmbed["default"],
+  title: "MXP Components/HTML Embed",
+  parameters: {
+    docs: {
+      page: _HTMLEmbedDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var ExampleWithHeaderAndSubHeader = function ExampleWithHeaderAndSubHeader() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content
+  });
+};
+exports.ExampleWithHeaderAndSubHeader = ExampleWithHeaderAndSubHeader;
+var ExampleWithOutHeaderAndSubHeader = function ExampleWithOutHeaderAndSubHeader() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content2
+  });
+};
+exports.ExampleWithOutHeaderAndSubHeader = ExampleWithOutHeaderAndSubHeader;
+var ExampleWithHeader = function ExampleWithHeader() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content3
+  });
+};
+exports.ExampleWithHeader = ExampleWithHeader;
+var IframeExample = function IframeExample() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content4
+  });
+};
+exports.IframeExample = IframeExample;
+var IframeExampleThreeFour = function IframeExampleThreeFour() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content4Two
+  });
+};
+exports.IframeExampleThreeFour = IframeExampleThreeFour;
+var IframeExampleFourThree = function IframeExampleFourThree() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content4Three
+  });
+};
+exports.IframeExampleFourThree = IframeExampleFourThree;
+var ExampleWithScript = function ExampleWithScript() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content5
+  });
+};
+exports.ExampleWithScript = ExampleWithScript;
+var ExampleWithCognitoForms = function ExampleWithCognitoForms() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content6
+  });
+};
+exports.ExampleWithCognitoForms = ExampleWithCognitoForms;
+var ExampleWithDocushare = function ExampleWithDocushare() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content7
+  });
+};
+exports.ExampleWithDocushare = ExampleWithDocushare;
+var ExampleWithMarketo = function ExampleWithMarketo() {
+  return /*#__PURE__*/_react["default"].createElement(_HTMLEmbed["default"], {
+    content: content8
+  });
+};
+exports.ExampleWithMarketo = ExampleWithMarketo;

package/dist/luna/components/HTMLEmbed/HTMLEmbedDocumentation.mdx

@@ -0,0 +1,31 @@
+#### HTMLEmbed
+
+###### Props -
+
+- `content` - object with the keys `header`, `subheader`, and `HTML` with values all strings
+- `header` - string to represent Header text. This is optional
+- `subheader` - string to represent Subheader text. This is optional
+- `HTML` - string to represent an HTML block.
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const header = "I am the header";
+const subheader = "I am the subheader";
+const HTML = `<iframe id="iFrameGB" width="980px" height="1200px" marginwidth="0" marginheight="0" vspace="0" hspace="0" src="https://mytrimbleprotected.com/cc/servicelocator.html" frameborder="no" scrolling="auto"></iframe>`;
+
+const content = {
+  header,
+  subheader,
+  HTML,
+};
+
+
+
+return (
+    <HTMLEmbed
+      content={content}
+    />
+);
+```

package/dist/luna/components/Header/Header.scss

@@ -1,36 +1,36 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-header {
-  width: 100%;
-  
-  &--centered {
-    text-align: center;
-  }
-
-  &__container {
-    width: 100%;
-    margin: 0;
-
-    .eyebrow {
-      @include h1-standard-size;
-      margin: 0;
-      text-transform: uppercase;
-      font-weight: 700 !important;
-    }
-
-    .headline {
-      @include header-standard-size;
-      margin: 12px 0 0 0;
-
-      &--no-margin {
-        margin: 0;
-      }
-    }
-
-    .subhead {
-      @include subheader-standard-size;
-      margin: 6px 0 0 0;
-      font-weight: $medium-font-weight !important;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-header {
+  width: 100%;
+  
+  &--centered {
+    text-align: center;
+  }
+
+  &__container {
+    width: 100%;
+    margin: 0;
+
+    .eyebrow {
+      @include h1-standard-size;
+      margin: 0;
+      text-transform: uppercase;
+      font-weight: 700 !important;
+    }
+
+    .headline {
+      @include header-standard-size;
+      margin: 12px 0 0 0;
+
+      &--no-margin {
+        margin: 0;
+      }
+    }
+
+    .subhead {
+      @include subheader-standard-size;
+      margin: 6px 0 0 0;
+      font-weight: $medium-font-weight !important;
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TransparentLightText = exports.TransparentDarkText = exports.DefaultCentered = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _HeaderDocumentation = _interopRequireDefault(require("./HeaderDocumentation.mdx"));
+var _themes = require("../../utils/themes");
+var eyebrow = "Eyebrow option";
+var headline = "Header title®";
+var subhead = "Subhead can go here.";
+var _default = {
+  component: _Header["default"],
+  title: "MXP Components/Header",
+  parameters: {
+    docs: {
+      page: _HeaderDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead
+  });
+};
+exports.Default = Default;
+var DefaultCentered = function DefaultCentered() {
+  return /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    centered: true
+  });
+};
+exports.DefaultCentered = DefaultCentered;
+var TransparentLightText = function TransparentLightText() {
+  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(_Header["default"], {
+    theme: _themes.themes["transparentLightText"],
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead
+  }));
+};
+exports.TransparentLightText = TransparentLightText;
+var TransparentDarkText = function TransparentDarkText() {
+  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(_Header["default"], {
+    theme: _themes.themes["transparentDarkText"],
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead
+  }));
+};
+exports.TransparentDarkText = TransparentDarkText;

package/dist/luna/components/Header/HeaderDocumentation.mdx

@@ -0,0 +1,24 @@
+#### Header
+
+###### Props -
+
+- `eyebrow` - string that sets the eyebrow (small text above the headline)
+- `headline` - string that sets the headline
+- `subhead` - string that sets the subhead (secondary text below the headline)
+- `theme` - object with `color` as string to represent hex value for fonts color
+
+###### Example -
+
+```
+const eyebrow = "Eyebrow option"
+const headline = "Header title"
+const subhead = "Subhead can go here."
+
+return (
+  <Header
+    eyebrow={eyebrow}
+    headline={headline}
+    subhead={subhead}
+  />
+);
+```