luna-one 3.1.593 → 3.1.595

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

@@ -0,0 +1,806 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.White = exports.Variant8MediaRight = exports.Variant8MediaLeft = exports.Variant8C = exports.Variant7MediaRight = exports.Variant7MediaLeft = exports.Variant6MediaTop = exports.Variant6MediaBottom = exports.Variant6ImageOnly = exports.Variant3MediaRight = exports.Variant3MediaLeft = exports.Variant2MediaRight = exports.Variant2MediaLeft = exports.Variant1MediaRight = exports.Variant1MediaLeft = exports.Variant1MediaAnimationLeft = exports.Variant10MediaRightFullWidth = exports.Variant10MediaLeftFullWidth = exports.Variant10AnimationLeftFullWidth = exports.TrimbleDarkGray = exports.TrimbleBlue = exports.DarkNavy = exports.ConcreteGray = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _SuperHero = _interopRequireDefault(require("./SuperHero"));
+var _SuperHeroDocumentation = _interopRequireDefault(require("./SuperHeroDocumentation.mdx"));
+var _ctaTwo;
+// import "../styles/storyStyles.scss";
+
+var focalPointImage = {
+  focalPointImage: {
+    x: 2000,
+    y: 2000,
+    title: "union-station-h6",
+    height: 4000,
+    width: 4000,
+    url: "https://fpoimg.com/1000x1000"
+  }
+};
+
+// TODO - add CTA class names once we have those implemented in Terra
+var theme1 = {
+  color: "#26292E",
+  backgroundColor: "#ffffff"
+};
+var theme2 = {
+  color: "#26292E",
+  backgroundColor: "#F1F1F6"
+};
+var theme3 = {
+  color: "#ffffff",
+  backgroundColor: "#252A2E"
+};
+var theme4 = {
+  color: "#ffffff",
+  backgroundColor: "#0063A3"
+};
+var theme5 = {
+  color: "#ffffff",
+  backgroundColor: "#003054"
+};
+var eyebrow = "Eyebrow Option";
+var header = "Header Title®";
+var subHeader = "Anim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat.";
+var text = "<p>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.</p><p>hello</p>";
+var ctas = (0, _defineProperty2["default"])({
+  ctaOne: {
+    text: "Button",
+    url: "https://trimble.com",
+    size: "lg"
+  },
+  ctaTwo: (_ctaTwo = {
+    text: "Button",
+    url: "https://trimble.com"
+  }, (0, _defineProperty2["default"])(_ctaTwo, "text", "First Button"), (0, _defineProperty2["default"])(_ctaTwo, "url", "/#"), (0, _defineProperty2["default"])(_ctaTwo, "size", "lg"), _ctaTwo)
+}, "ctaTwo", {
+  text: "Second Button",
+  url: "/#",
+  size: "lg"
+});
+var longCtas = {
+  ctaOne: {
+    text: "This is exceptionally long CTA button text",
+    url: "/#",
+    size: "lg"
+  },
+  ctaTwo: {
+    text: "Download Our Ultimate Guide To Precision Ag Ebook Now",
+    url: "/#",
+    size: "lg"
+  }
+};
+var image = {
+  src: "https://fpoimg.com/800x600",
+  alt: "placeholder"
+};
+var variant1 = "variant_1";
+var variant2 = "variant_2";
+var variant3 = "variant_3";
+var contentSide = "left";
+var contentSide1 = "right";
+var thumbnail = {
+  src: "https://fpoimg.com/720x450",
+  alt: "fpo"
+};
+var video = {
+  url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+  allowFullScreen: true,
+  uuid: "UrtwArRETP23TP9yGgCEd6"
+};
+var vidyardVideo = {
+  url: null,
+  allowFullScreen: true,
+  uuid: "ELv5BCNfZhgji83ocGbTV1",
+  vidyard: true
+};
+var content = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: ctas,
+  focusedImage: {
+    focalPointImage: {
+      x: 0,
+      y: 0,
+      title: "union-station-h6",
+      height: 405,
+      width: 721,
+      url: "https://fpoimg.com/721x405"
+    }
+  },
+  contentSide1: contentSide1,
+  variant: variant1,
+  lazyLoad: false
+};
+var contentLottie = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: ctas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  contentSide1: contentSide1,
+  variant: variant1
+};
+var content1 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: ctas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 405,
+  //     width: 721,
+  //     url: "https://fpoimg.com/721x405",
+  //   },
+  // },
+  contentSide: contentSide,
+  variant: variant1,
+  theme: theme1
+};
+var content2 = {
+  eyebrow: "WHY TRIMBLE",
+  header: "What sets Trimble apart",
+  subHeader: subHeader,
+  text: "<p>40+ years of industry leadership<br /><br />25–50% efficiency gains over traditional solutions<br /><br />Up to 30% cost savings<br /><br />15% of revenue reinvested in R&D<br /><br />40 offices worldwide<br /><br />Sales & support networks in over 125 countries<br /><br />Solutions estimated to prevent over 7 million metric tons of greenhouse gas emissions annually</p>",
+  ctas: ctas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 560,
+  //     width: 560,
+  //     url: "https://fpoimg.com/560x560",
+  //   },
+  // },
+  contentSide: contentSide,
+  variant: variant2,
+  theme: theme1
+};
+var content3 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 560,
+  //     width: 560,
+  //     url: "https://fpoimg.com/560x560",
+  //   },
+  // },
+  contentSide1: contentSide1,
+  variant: variant2,
+  theme: theme1
+};
+var content4 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 304,
+  //     width: 720,
+  //     url: "https://fpoimg.com/720x304",
+  //   },
+  // },
+  contentSide: contentSide,
+  variant: variant3,
+  theme: theme1
+};
+var content6 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 405,
+  //     width: 721,
+  //     url: "https://fpoimg.com/721x405",
+  //   },
+  // },
+  contentSide1: contentSide1,
+  variant: variant1,
+  theme: theme1
+};
+var content7 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  focusedImage: focalPointImage,
+  contentSide1: contentSide1,
+  variant: variant1,
+  theme: theme2
+};
+var content8 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 405,
+  //     width: 721,
+  //     url: "https://fpoimg.com/721x405",
+  //   },
+  // },
+  contentSide1: contentSide1,
+  variant: variant1,
+  theme: theme3
+};
+var content9 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: focalPointImage,
+  contentSide1: contentSide1,
+  variant: variant1,
+  theme: theme4
+};
+var content10 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: focalPointImage,
+  contentSide1: contentSide1,
+  variant: variant1,
+  theme: theme5
+};
+var content13 = {
+  variant: "variant_6",
+  contentSide: "bottom",
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  }
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 490,
+  //     width: 1120,
+  //     url: "https://fpoimg.com/1120x490",
+  //   },
+  // },
+};
+
+var content14 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 490,
+  //     width: 1120,
+  //     url: "https://fpoimg.com/1120x490",
+  //   },
+  // },
+  variant: "variant_6",
+  theme: theme1,
+  contentSide: "top"
+};
+var content16 = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  video: video,
+  thumbnail: {
+    src: "https://fpoimg.com/1120x490",
+    alt: "fpo"
+  },
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  variant: "variant_6",
+  theme: theme1,
+  contentSide: "bottom",
+  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."
+};
+var videoContent = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  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.",
+  ctas: longCtas,
+  video: video,
+  thumbnail: thumbnail,
+  theme: theme1,
+  variant: "variant_7",
+  contentSide: contentSide1
+  // override: true,
+};
+
+var vidyardVideoContent = {
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  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. 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.",
+  ctas: longCtas,
+  video: vidyardVideo,
+  thumbnail: {
+    focalPointImage: {
+      x: 0,
+      y: 0,
+      title: "union-station-h6",
+      height: 450,
+      width: 720,
+      url: "https://fpoimg.com/730x450"
+    }
+  },
+  theme: theme1,
+  variant: "variant_7",
+  contentSide: contentSide
+};
+var heroContent = {
+  image: image,
+  eyebrow: eyebrow,
+  header: header,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  contentSide: "left",
+  variant: "variant_8",
+  // focusedImage: {
+  //   focalPointImage: {
+  //     x: 0,
+  //     y: 0,
+  //     title: "union-station-h6",
+  //     height: 720,
+  //     width: 720,
+  //     url: "https://fpoimg.com/720x720",
+  //   },
+  // },
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+  },
+  alt: focalPointImage.title
+};
+var heroContent2 = {
+  header: header,
+  eyebrow: eyebrow,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  contentSide: "right",
+  variant: "variant_8",
+  focusedImage: {
+    focalPointImage: {
+      x: 0,
+      y: 0,
+      title: "union-station-h6",
+      height: 720,
+      width: 720,
+      url: "https://fpoimg.com/720x720"
+    }
+  },
+  alt: focalPointImage.title
+};
+var heroContent5 = {
+  header: header,
+  eyebrow: eyebrow,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  contentSide: "left",
+  variant: "variant_10",
+  focusedImage: {
+    focalPointImage: {
+      x: 0,
+      y: 0,
+      title: "union-station-h6",
+      height: 720,
+      width: 1057,
+      url: "https://fpoimg.com/1057x720"
+    }
+  },
+  alt: focalPointImage.title
+};
+var heroContent5Animation = {
+  header: header,
+  eyebrow: eyebrow,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  contentSide: "left",
+  variant: "variant_10",
+  superHeroAnimation: {
+    type: "lottieAnimation",
+    src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+    ratio: {
+      height: 1,
+      width: 1
+    }
+  },
+  alt: focalPointImage.title
+};
+var heroContent6 = {
+  header: header,
+  eyebrow: eyebrow,
+  subHeader: subHeader,
+  text: text,
+  ctas: longCtas,
+  contentSide: "right",
+  variant: "variant_10",
+  focusedImage: {
+    focalPointImage: {
+      x: 0,
+      y: 0,
+      title: "union-station-h6",
+      height: 720,
+      width: 1057,
+      url: "https://fpoimg.com/1057x720"
+    }
+  },
+  alt: focalPointImage.title
+};
+var heroContent7 = {
+  header: header,
+  eyebrow: eyebrow,
+  subHeader: subHeader,
+  text: text,
+  ctas: ctas,
+  contentSide: "right",
+  variant: "variant_8",
+  dataPoints: [{
+    header: "Header",
+    description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+    icon: {
+      type: "enclosed-check-dark-48px"
+    }
+  }, {
+    header: "Header",
+    description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+    icon: {
+      type: "enclosed-check-dark-48px"
+    }
+  }, {
+    header: "Header",
+    description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+    icon: {
+      type: "enclosed-check-dark-48px"
+    }
+  }],
+  focusedImage: focalPointImage,
+  alt: focalPointImage.title
+};
+var renderComponentWithPadding = function renderComponentWithPadding(component) {
+  var _content$theme;
+  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",
+    style: {
+      backgroundColor: (content === null || content === void 0 ? void 0 : (_content$theme = content.theme) === null || _content$theme === void 0 ? void 0 : _content$theme.backgroundColor) || null
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: fullWidth ? "default-layout__full-content-child" : "default-layout__children"
+  }, component)));
+};
+var _default = {
+  component: _SuperHero["default"],
+  title: "MXP Components/Super Hero",
+  parameters: {
+    docs: {
+      page: _SuperHeroDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Variant3MediaLeft = function Variant3MediaLeft() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    override = _useState2[0],
+    setOverride = _useState2[1];
+  var thumbnail2 = {
+    src: "https://fpoimg.com/720x450",
+    alt: "fpo"
+  };
+  var video2 = {
+    url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+    allowFullScreen: true,
+    uuid: "UrtwArRETP23TP9yGgCEd6"
+  };
+  var videoContent2 = {
+    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: video2,
+    thumbnail: thumbnail2,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  var content5 = {
+    eyebrow: eyebrow,
+    header: "HEADER",
+    subHeader: subHeader,
+    text: text,
+    ctas: {
+      ctaOne: {
+        text: "This is exceptionally long CTA",
+        video: videoContent2,
+        size: "lg",
+        setOverride: setOverride,
+        override: override
+      },
+      ctaTwo: {
+        url: "/",
+        text: "hi"
+      }
+    },
+    superHeroAnimation: {
+      type: "lottieAnimation",
+      src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+    },
+    // focusedImage: {
+    //   focalPointImage: {
+    //     x: 0,
+    //     y: 0,
+    //     title: "union-station-h6",
+    //     height: 304,
+    //     width: 720,
+    //     url: "https://fpoimg.com/720x304",
+    //   },
+    // },
+    contentSide1: contentSide1,
+    variant: variant3,
+    theme: theme1
+  };
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content5
+  }));
+};
+exports.Variant3MediaLeft = Variant3MediaLeft;
+Variant3MediaLeft.storyName = "Side Margins, ⅔ Media, Image Left, 304px Max Height with Video CTA ";
+var Variant3MediaRight = function Variant3MediaRight() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content4
+  }));
+};
+exports.Variant3MediaRight = Variant3MediaRight;
+Variant3MediaRight.storyName = "Side Margins, ⅔ Media, Image Right, 304px Max Height";
+var Variant1MediaLeft = function Variant1MediaLeft() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content,
+    paddingClass: "my-styles"
+  }));
+};
+exports.Variant1MediaLeft = Variant1MediaLeft;
+Variant1MediaLeft.storyName = "Side Margins, ⅔ Media, Image Left, 405px Max Height";
+var Variant1MediaAnimationLeft = function Variant1MediaAnimationLeft() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: contentLottie,
+    paddingClass: "my-styles"
+  }));
+};
+exports.Variant1MediaAnimationLeft = Variant1MediaAnimationLeft;
+Variant1MediaAnimationLeft.storyName = "Side Margins, ⅔ Media, Lottie Animation Left, 405px Max Height";
+var Variant1MediaRight = function Variant1MediaRight() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content1
+  }));
+};
+exports.Variant1MediaRight = Variant1MediaRight;
+Variant1MediaRight.storyName = "Side Margins, ⅔ Media, Image Right, 405px Max Height";
+var Variant7MediaLeft = function Variant7MediaLeft() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: videoContent,
+    paddingClass: "my-styles"
+  }));
+};
+exports.Variant7MediaLeft = Variant7MediaLeft;
+Variant7MediaLeft.storyName = "Side Margins, ⅔ Media, Video Left, 450px Max Height";
+var Variant7MediaRight = function Variant7MediaRight() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: vidyardVideoContent
+  }));
+};
+exports.Variant7MediaRight = Variant7MediaRight;
+Variant7MediaRight.storyName = "Side Margins, ⅔ Media, Video Right, 450px Max Height";
+var Variant2MediaLeft = function Variant2MediaLeft() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content3
+  }));
+};
+exports.Variant2MediaLeft = Variant2MediaLeft;
+Variant2MediaLeft.storyName = "Side Margins, ½ Media, Image Left, 560px Max Height";
+var Variant2MediaRight = function Variant2MediaRight() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content2
+  }));
+};
+exports.Variant2MediaRight = Variant2MediaRight;
+Variant2MediaRight.storyName = "Side Margins, ½ Media, Image Right, 560px Max Height";
+
+//media only
+var Variant6ImageOnly = function Variant6ImageOnly() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content13
+  }));
+};
+exports.Variant6ImageOnly = Variant6ImageOnly;
+Variant6ImageOnly.storyName = "Side Margins, Image Only, 490px Max Height";
+var Variant6MediaTop = function Variant6MediaTop() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content16
+  }));
+};
+exports.Variant6MediaTop = Variant6MediaTop;
+Variant6MediaTop.storyName = "Side Margins, Media Top";
+var Variant6MediaBottom = function Variant6MediaBottom() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content14
+  }));
+};
+exports.Variant6MediaBottom = Variant6MediaBottom;
+Variant6MediaBottom.storyName = "Side Margins, Media Bottom";
+var Variant10MediaLeftFullWidth = function Variant10MediaLeftFullWidth() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent5
+  });
+};
+exports.Variant10MediaLeftFullWidth = Variant10MediaLeftFullWidth;
+Variant10MediaLeftFullWidth.storyName = "Full Width, ⅔ Media, Image Left, 720px Max Height";
+var Variant10AnimationLeftFullWidth = function Variant10AnimationLeftFullWidth() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent5Animation
+  });
+};
+exports.Variant10AnimationLeftFullWidth = Variant10AnimationLeftFullWidth;
+Variant10AnimationLeftFullWidth.storyName = "Full Width, ⅔ Media, Animation Left, 720px Max Height";
+var Variant10MediaRightFullWidth = function Variant10MediaRightFullWidth() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent6
+  });
+};
+exports.Variant10MediaRightFullWidth = Variant10MediaRightFullWidth;
+Variant10MediaRightFullWidth.storyName = "Full Width, ⅔ Media, Image Right, 720px Max Height";
+var Variant8MediaLeft = function Variant8MediaLeft() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent2
+  });
+};
+exports.Variant8MediaLeft = Variant8MediaLeft;
+Variant8MediaLeft.storyName = "Full Width, ½ Media, Image Right, 720px Max Height";
+
+// labels are correct, but story names aren't (image placement is flipped)
+var Variant8MediaRight = function Variant8MediaRight() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent
+  });
+};
+exports.Variant8MediaRight = Variant8MediaRight;
+Variant8MediaRight.storyName = "Full Width, ½ Media, Image Left, 720px Max Height";
+var Variant8C = function Variant8C() {
+  return /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: heroContent7
+  });
+};
+exports.Variant8C = Variant8C;
+Variant8C.storyName = "Full Width, ½ Media, Image Right, Data Points, 720px Max Height";
+var White = function White() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content6
+  }), false, content6);
+};
+exports.White = White;
+var ConcreteGray = function ConcreteGray() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content7
+  }), false, content7);
+};
+exports.ConcreteGray = ConcreteGray;
+var TrimbleDarkGray = function TrimbleDarkGray() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content8
+  }), false, content8);
+};
+exports.TrimbleDarkGray = TrimbleDarkGray;
+var TrimbleBlue = function TrimbleBlue() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content9
+  }), false, content9);
+};
+exports.TrimbleBlue = TrimbleBlue;
+var DarkNavy = function DarkNavy() {
+  return renderComponentWithPadding( /*#__PURE__*/_react["default"].createElement(_SuperHero["default"], {
+    content: content10
+  }), false, content10);
+};
+exports.DarkNavy = DarkNavy;