luna-one 3.1.593 → 3.1.595

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.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}
+  />
+);
+```

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TransparentWithLightText = exports.TransparentWithDarkText = exports.Default = exports.DarkNavyThemeWithoutIcon = exports.DarkGrayThemeWithPadding = exports.ConcreteGrayTheme = exports.BlueTheme = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _IconTextList = _interopRequireDefault(require("./IconTextList"));
+var _IconTextListDocumentation = _interopRequireDefault(require("./IconTextListDocumentation.mdx"));
+var _themes = require("../../utils/themes");
+var items = [{
+  icon: "ico-annotate-48px",
+  headline: "Headline Lorem ipsum dolor sit amet®",
+  body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+}, {
+  icon: "mxp-icon-connection",
+  headline: "Headline Lorem ipsum dolor sit amet",
+  body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+}, {
+  icon: "ico-annotate-48px",
+  headline: "Headline Lorem ipsum dolor sit amet",
+  body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. <ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li></ul>"
+}];
+var _default = {
+  component: _IconTextList["default"],
+  title: "MXP Components/Icon Text List",
+  parameters: {
+    docs: {
+      page: _IconTextListDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items
+  });
+};
+exports.Default = Default;
+var ConcreteGrayTheme = function ConcreteGrayTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["concreteGray"]
+  });
+};
+exports.ConcreteGrayTheme = ConcreteGrayTheme;
+var BlueTheme = function BlueTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.BlueTheme = BlueTheme;
+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(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["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(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["transparentDarkText"]
+  }));
+};
+exports.TransparentWithDarkText = TransparentWithDarkText;
+var DarkNavyThemeWithoutIcon = function DarkNavyThemeWithoutIcon() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["darkNavy"],
+    disableIcon: true
+  });
+};
+exports.DarkNavyThemeWithoutIcon = DarkNavyThemeWithoutIcon;
+var DarkGrayThemeWithPadding = function DarkGrayThemeWithPadding() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["darkGray"],
+    paddingClass: "ter-icon-text-list--extra-padding"
+  });
+};
+exports.DarkGrayThemeWithPadding = DarkGrayThemeWithPadding;

package/dist/luna/components/IconTextList/IconTextListDocumentation.mdx

@@ -0,0 +1,46 @@
+#### Icon Text List
+
+###### Props -
+
+- `items` - array of objects, each with `icon`, `headline` and `body` as strings to represent the icon text items.
+- `theme` - object with `backgroundColor`, `color` and `iconColor` as strings to represent hex value for background color.
+- `disableIcon` - boolean to don't display icon.
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const theme = {
+  color: "#FFFFFF",
+  backgroundColor: "#0063A3",
+  iconColor: "#FFFFFF",
+};
+
+const items = [
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  },
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  },
+  {
+    icon: "ico-annotate-48px",
+    headline : "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. <ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li></ul>"
+  }
+];
+
+
+return (
+	  <IconTextList
+      items={items}
+      theme={theme}
+      disableIcon={false}
+      paddingClass="custom-class"
+    />
+);
+```

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

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SplitImageGalleryFlipped = exports.SplitImageGalleryAltFlipped = exports.SplitImageGalleryAlt = exports.SplitImageGallery = exports.DefaultImageGalleryAlt = exports.DefaultImageGallery = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CtaWithHeader = _interopRequireDefault(require("../CtaWithHeader/CtaWithHeader"));
+var _ImageGallery = _interopRequireDefault(require("../ImageGallery/ImageGallery"));
+var _IconTextList = _interopRequireDefault(require("../IconTextList/IconTextList"));
+var _ImageGalleryDocumentation = _interopRequireDefault(require("./ImageGalleryDocumentation.mdx"));
+var imagesArray = [{
+  x: 2580,
+  y: 4700,
+  title: "home-hero-original",
+  height: 900,
+  width: 2280,
+  url: "https://images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg"
+}, {
+  url: "https://images.ctfassets.net/citn2sn5tdjr/5D1pWT2efLAhK4Jnvsa8SW/14ba92accea63bb461f0437621a56a7d/800x400.jpg",
+  title: "Truck Image",
+  alt: "Truck",
+  x: 80,
+  y: 250
+}, {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+  style: {
+    maxHeight: "100vh"
+  }
+}, {
+  url: "https://images.ctfassets.net/citn2sn5tdjr/6BaM3yT27uyIyHAetghuCv/81e91fce8276cd653ee87969a33f90fa/transportation_superhero.png",
+  alt: "Truck",
+  x: 12,
+  y: 24
+}, {
+  url: "https://images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+  alt: "Truck",
+  x: 80,
+  y: 250
+}, {
+  url: "https://images.ctfassets.net/citn2sn5tdjr/6BaM3yT27uyIyHAetghuCv/81e91fce8276cd653ee87969a33f90fa/transportation_superhero.png",
+  alt: "Truck",
+  x: 12,
+  y: 24
+}];
+var contentDefault = {
+  images: imagesArray,
+  thumbnailAlignment: true
+};
+var contentDefault2 = {
+  images: imagesArray,
+  thumbnailAlignment: false
+};
+var _default = {
+  component: _ImageGallery["default"],
+  title: "MXP Components/Image Gallery",
+  parameters: {
+    docs: {
+      page: _ImageGalleryDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var buttons = [{
+  text: "Button 1",
+  url: "https://trimble.com"
+}, {
+  text: "Button 2",
+  url: "/"
+}];
+var ctaSideContent = /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+  eyebrow: "Eyebrow option",
+  headline: "Header title",
+  subhead: "Subhead can go here.",
+  content: "<p>Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. Consectetur <a href='/'>commodo nisi laborum</a> 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.</p>\n<ul>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n<li>Cillum et laboris aliquip consequat. El nu consectetur commodo nisi laborum voluptate.</li>\n</ul>",
+  buttons: buttons
+});
+var contentSplit = {
+  images: imagesArray,
+  thumbnailAlignment: false,
+  contentType: "CtaWithHeader",
+  reverseAlignment: false,
+  sideContent: ctaSideContent
+};
+var contentSplitFlipped = {
+  images: imagesArray,
+  thumbnailAlignment: true,
+  contentType: "CtaWithHeader",
+  reverseAlignment: true,
+  sideContent: ctaSideContent
+};
+var iconTextListContent = /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+  items: [{
+    icon: "ico-annotate-48px",
+    headline: "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  }, {
+    icon: "mxp-icon-connection",
+    headline: "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec."
+  }, {
+    icon: "ico-annotate-48px",
+    headline: "Headline Lorem ipsum dolor sit amet",
+    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. <ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit congue pellentesque rhoncus, at ac commodo ornare interdum arcu. </li></ul>"
+  }]
+});
+var contentSplit2 = {
+  images: imagesArray,
+  thumbnailAlignment: false,
+  contentType: "IconTextList",
+  reverseAlignment: false,
+  sideContent: iconTextListContent
+};
+var contentSplit2Flipped = {
+  images: imagesArray,
+  thumbnailAlignment: true,
+  contentType: "IconTextList",
+  reverseAlignment: true,
+  sideContent: iconTextListContent
+};
+var DefaultImageGallery = function DefaultImageGallery() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentDefault
+  }));
+};
+exports.DefaultImageGallery = DefaultImageGallery;
+var DefaultImageGalleryAlt = function DefaultImageGalleryAlt() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentDefault2
+  }));
+};
+exports.DefaultImageGalleryAlt = DefaultImageGalleryAlt;
+var SplitImageGallery = function SplitImageGallery() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentSplit,
+    type: "Split"
+  }));
+};
+exports.SplitImageGallery = SplitImageGallery;
+var SplitImageGalleryFlipped = function SplitImageGalleryFlipped() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentSplitFlipped,
+    type: "Split"
+  }));
+};
+exports.SplitImageGalleryFlipped = SplitImageGalleryFlipped;
+var SplitImageGalleryAlt = function SplitImageGalleryAlt() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentSplit2,
+    type: "Split"
+  }));
+};
+exports.SplitImageGalleryAlt = SplitImageGalleryAlt;
+var SplitImageGalleryAltFlipped = function SplitImageGalleryAltFlipped() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '1280px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ImageGallery["default"], {
+    content: contentSplit2Flipped,
+    type: "Split"
+  }));
+};
+// export const MosaicGallery = () => <ImageGallery content={contentDefault} />;
+// export const MosaicGalleryFullWidth = () => <ImageGallery content={contentDefault} />;
+exports.SplitImageGalleryAltFlipped = SplitImageGalleryAltFlipped;