luna-one 3.1.593 → 3.1.595

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

@@ -0,0 +1,574 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoCTA = exports.TopHalfTheme = exports.TopHalfRightContent = exports.TopHalfLottie = exports.TopHalf = exports.TopBottomTriangle = exports.TopBottomSquareAnimation = exports.TopBottomSquare = exports.TopBottomNoInset = exports.TopBottomContentInsetTwoByTwo = exports.TopBottomContentInset = exports.TopBottomCircle = exports.TopBottomAnimationNoInset = exports.FullPageWithMotion = exports.FullPageContentIconTextList = exports.FullPageContentDataPoint = exports.FullPageContent2x2 = exports.DefaultLottieAnimation = exports.Default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _FullBackgroundHero = _interopRequireDefault(require("./FullBackgroundHero"));
+var _FullBackgroundHeroDocumentation = _interopRequireDefault(require("./FullBackgroundHeroDocumentation.mdx"));
+var _CtaWithHeader = _interopRequireDefault(require("../CtaWithHeader/CtaWithHeader"));
+var _IconTextList = _interopRequireDefault(require("../IconTextList/IconTextList"));
+var _x = _interopRequireDefault(require("../2x2/2x2"));
+var _DataPoint = _interopRequireDefault(require("../DataPoint/DataPoint"));
+var _themes = require("../../utils/themes");
+var backgroundImage = {
+  type: "image",
+  image: {
+    desktop: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/2pQuJHibljq0FuqRB5m0jP/4ebaffd99bdb9b05e34324cd88719b10/Group_10119.png",
+      alt: "placeholder image"
+    },
+    tablet: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/QcO5xYofvz14fudrczZFT/8ef2ef55ff7e99511673358f4051e0a2/Group_10120.png",
+      alt: "placeholder image"
+    },
+    mobile: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7c5cxHy45szc6WtMLiDlgA/df2b7022abd252da024181651f18b35a/Mask_Group.png",
+      alt: "placeholder image"
+    }
+  },
+  lazyLoad: false
+};
+var backgroundImageLottie = {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+  lazyLoad: false
+};
+var backgroundImage1 = {
+  type: "focalPointImage",
+  focalPointImage: {
+    alt: "Union Station Image",
+    x: 2000,
+    y: 2000,
+    title: "union-station-h6",
+    height: 4000,
+    width: 4000,
+    url: "//images.ctfassets.net/citn2sn5tdjr/2nAd2u2LPTRHYP2kyZRxgD/62a45291d89c9bf91e6ef13c62c9efca/Group_10115.png"
+  },
+  lazyLoad: false
+};
+var backgroundImage3 = {
+  type: "focalPointImage",
+  focalPointImage: {
+    alt: "Union Station Image",
+    x: 2000,
+    y: 2000,
+    title: "union-station-h6",
+    height: 4000,
+    width: 4000,
+    url: "//images.ctfassets.net/citn2sn5tdjr/N6O34Vfezv62BbzBCsv7W/ad54effe0972ad1320b8bd99e16c6431/Group_10039.png"
+  }
+};
+var backgroundImage4 = {
+  type: "image",
+  image: {
+    desktop: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/N6O34Vfezv62BbzBCsv7W/ad54effe0972ad1320b8bd99e16c6431/Group_10039.png",
+      alt: "placeholder image"
+    },
+    tablet: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/N6O34Vfezv62BbzBCsv7W/ad54effe0972ad1320b8bd99e16c6431/Group_10039.png",
+      alt: "placeholder image"
+    },
+    mobile: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/N6O34Vfezv62BbzBCsv7W/ad54effe0972ad1320b8bd99e16c6431/Group_10039.png",
+      alt: "placeholder image"
+    }
+  }
+};
+var dogFocalPointImage = {
+  type: "focalPointImage",
+  focalPointImage: {
+    height: 4000,
+    title: "dog",
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    width: 6000,
+    x: 3549,
+    y: 1811
+  }
+};
+var backgroundImage2 = {
+  type: "image",
+  image: {
+    desktop: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/1ZzxIE2WgixKLiyT2jepC7/83772d1a246064a67db9792d7d8eb9a3/Group_10127__1_.png",
+      alt: "placeholder image"
+    },
+    tablet: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/4VNuj7ZOAwmpJqLlvNw7SV/c9d4c6fdcd759a59d4013be5478012d2/tablet1.png",
+      alt: "placeholder image"
+    },
+    mobile: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/4tQUpE1zqFl3j0cv3uCghK/8b814d6a3426269d49b234723060c70f/Mobile.png",
+      alt: "placeholder image"
+    }
+  }
+};
+var backgroundBottomImage = {
+  type: "image",
+  image: {
+    desktop: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    },
+    tablet: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    },
+    mobile: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    }
+  },
+  lazyLoad: false
+};
+var rightImage = {
+  type: "image",
+  image: {
+    src: "//images.ctfassets.net/citn2sn5tdjr/3yivTFzl74XS2Wkcdl0P5P/9076a8d09c5f5cc6bbea8228571bf9e7/Group_101__1_.png",
+    alt: "placeholder"
+  }
+};
+var rightImageAnimation = {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
+};
+var rightImageFocused = {
+  type: "focalPointImage",
+  focalPointImage: {
+    x: 1280,
+    y: 900,
+    title: "home-hero-original",
+    height: 900,
+    width: 1280,
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg"
+  }
+};
+var eyebrow = "Eyebrow Lorem ipsum";
+var headline = "Headline title™";
+var subhead = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+var CTAContent = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Blandit vitae molestie aliquam iaculis eu et ultricies nec. Facilisis velit orci, amet mattis arcu pretium a. Tincidunt lacinia tempus dignissim elementum.</p>";
+var buttons = [{
+  text: "Button 1",
+  url: "/"
+}, {
+  text: "Button 2",
+  url: "/"
+}];
+var LeftContent = function LeftContent() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "transparent-light-text",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: CTAContent,
+    buttons: buttons
+  });
+};
+var LeftContentDark = function LeftContentDark() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "transparent-dark-text",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: CTAContent,
+    buttons: buttons
+  });
+};
+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: "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>"
+}];
+var RightContent = function RightContent() {
+  return /*#__PURE__*/_react["default"].createElement(_IconTextList["default"], {
+    items: items,
+    theme: _themes.themes["blue"],
+    paddingClass: "ter-icon-text-list--extra-padding"
+  });
+};
+var dataPoint = [{
+  type: "Data Point",
+  points: [{
+    header: "Header",
+    description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+    icon: {
+      type: "enclosed-check-dark-48px"
+    }
+  }]
+}];
+var ForestFocalPointImage = {
+  type: "Image",
+  alt: "FPO PlaceHolder Image",
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url: "//images.ctfassets.net/citn2sn5tdjr/7zF5J9FlzLzm2SFrT6inNJ/2fe28905a10bd27e8d6b178d3a8239e6/save.png",
+    x: 480,
+    y: 640
+  }
+};
+var AnotherFocalPointImage = {
+  type: "Image",
+  alt: "FPO PlaceHolder Image",
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url: "//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg",
+    x: 480,
+    y: 640
+  }
+};
+var dataPointContent = {
+  topLeftContent: dataPoint,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [ForestFocalPointImage],
+  topRightBackgroundColor: "dark-navy",
+  topRightIsImage: true,
+  bottomLeftContent: [AnotherFocalPointImage],
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomLeftIsImage: true,
+  bottomRightContent: dataPoint,
+  bottomRightBackgroundColor: "dark-navy",
+  shortDataPointContent: false
+};
+var TwoByTwoContent = function TwoByTwoContent() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: dataPointContent,
+    isNested: true
+  });
+};
+var points = [{
+  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"
+  }
+}];
+var DataPointContent = function DataPointContent() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: _themes.themes["blue"],
+    variant: "variant_2b"
+  });
+};
+var content = {
+  backgroundImage: backgroundImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null)
+};
+var contentLottie = {
+  backgroundImage: backgroundImageLottie,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null)
+};
+var content1 = {
+  backgroundImage: backgroundImage1,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+  rightContent: /*#__PURE__*/_react["default"].createElement(RightContent, null)
+};
+var content12x2 = {
+  backgroundImage: backgroundImage1,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+  rightContent: /*#__PURE__*/_react["default"].createElement(TwoByTwoContent, null),
+  rightContentType: "Contentful2X2"
+};
+var content1DataPoint = {
+  backgroundImage: backgroundImage1,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+  rightContent: /*#__PURE__*/_react["default"].createElement(DataPointContent, null)
+};
+var content2 = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage2,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null)
+};
+var content2Animation = {
+  variant: "variant-2",
+  backgroundImage: backgroundImageLottie,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null)
+};
+var content3 = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage2,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightImage: dogFocalPointImage,
+  shapeType: "square",
+  shapeBorderColor: "#F1F1F6"
+};
+var content4 = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage2,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightImage: dogFocalPointImage,
+  shapeType: "circle",
+  shapeBorderColor: "#0063A3"
+};
+var content5 = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage2,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightImage: dogFocalPointImage,
+  shapeType: "triangle",
+  shapeBorderColor: "#89C6ED"
+};
+var content6 = {
+  variant: "variant-2-inset",
+  backgroundImage: backgroundImage4,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightContent: /*#__PURE__*/_react["default"].createElement(RightContent, null)
+};
+var content6DataPoint = {
+  variant: "variant-2-inset",
+  backgroundImage: backgroundImage4,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightContent: /*#__PURE__*/_react["default"].createElement(TwoByTwoContent, null)
+};
+var content7 = {
+  variant: "variant-3",
+  backgroundImage: backgroundImage3,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null)
+};
+var content7Lottie = {
+  variant: "variant-3",
+  backgroundImage: backgroundImageLottie,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null)
+};
+var content8 = {
+  variant: "variant-3",
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+  rightImage: rightImage
+};
+var content9 = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage2,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContentDark, null),
+  rightImage: rightImageAnimation,
+  shapeType: "square",
+  shapeBorderColor: "#F1F1F6"
+};
+var content10 = {
+  variant: "variant-3",
+  leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+  rightImage: backgroundImage3
+};
+var _default = {
+  component: _FullBackgroundHero["default"],
+  title: "MXP Components/Full Background Hero",
+  parameters: {
+    docs: {
+      page: _FullBackgroundHeroDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content,
+    theme: _themes.themes["darkGray"]
+  });
+};
+exports.Default = Default;
+var DefaultLottieAnimation = function DefaultLottieAnimation() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: contentLottie,
+    theme: _themes.themes["darkGray"]
+  });
+};
+exports.DefaultLottieAnimation = DefaultLottieAnimation;
+var FullPageWithMotion = function FullPageWithMotion() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content,
+    theme: _themes.themes["darkGray"],
+    motion: true
+  });
+};
+exports.FullPageWithMotion = FullPageWithMotion;
+var FullPageContentIconTextList = function FullPageContentIconTextList() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content1,
+    theme: _themes.themes["darkGray"]
+  });
+};
+exports.FullPageContentIconTextList = FullPageContentIconTextList;
+var FullPageContent2x2 = function FullPageContent2x2() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content12x2,
+    theme: _themes.themes["darkGray"]
+  });
+};
+exports.FullPageContent2x2 = FullPageContent2x2;
+var FullPageContentDataPoint = function FullPageContentDataPoint() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content1DataPoint,
+    theme: _themes.themes["darkGray"]
+  });
+};
+exports.FullPageContentDataPoint = FullPageContentDataPoint;
+var TopBottomNoInset = function TopBottomNoInset() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content2,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomNoInset = TopBottomNoInset;
+var TopBottomAnimationNoInset = function TopBottomAnimationNoInset() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content2Animation,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomAnimationNoInset = TopBottomAnimationNoInset;
+var TopBottomSquare = function TopBottomSquare() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content3,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomSquare = TopBottomSquare;
+var TopBottomSquareAnimation = function TopBottomSquareAnimation() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content9,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomSquareAnimation = TopBottomSquareAnimation;
+var TopBottomCircle = function TopBottomCircle() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content4,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomCircle = TopBottomCircle;
+var TopBottomTriangle = function TopBottomTriangle() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content5,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomTriangle = TopBottomTriangle;
+var TopBottomContentInset = function TopBottomContentInset() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content6,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomContentInset = TopBottomContentInset;
+var TopBottomContentInsetTwoByTwo = function TopBottomContentInsetTwoByTwo() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content6DataPoint,
+    theme: _themes.themes["white"]
+  });
+};
+exports.TopBottomContentInsetTwoByTwo = TopBottomContentInsetTwoByTwo;
+var TopHalf = function TopHalf() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content7,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.TopHalf = TopHalf;
+var TopHalfLottie = function TopHalfLottie() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content7Lottie,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.TopHalfLottie = TopHalfLottie;
+var TopHalfRightContent = function TopHalfRightContent() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content10,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.TopHalfRightContent = TopHalfRightContent;
+var TopHalfTheme = function TopHalfTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: content8,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.TopHalfTheme = TopHalfTheme;
+var VideoCTA = function VideoCTA() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    override = _useState2[0],
+    setOverride = _useState2[1];
+  var thumbnail = {
+    src: "https://fpoimg.com/720x450",
+    alt: "fpo"
+  };
+  var video = {
+    url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+    allowFullScreen: true,
+    uuid: "UrtwArRETP23TP9yGgCEd6"
+  };
+  var videoContent = {
+    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: video,
+    thumbnail: thumbnail,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  var videoButtons = [{
+    text: "CLICK ME I OPEN A VIDEO!",
+    video: videoContent,
+    setOverride: setOverride,
+    override: override
+  }, {
+    text: "I also open a video!",
+    video: videoContent,
+    setOverride: setOverride
+  }];
+  var contentVideoCTA = {
+    backgroundImage: backgroundImage1,
+    leftContent: /*#__PURE__*/_react["default"].createElement(LeftContent, null),
+    rightContent: /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+      variant: "transparent-light-text",
+      alignment: "center",
+      eyebrow: eyebrow,
+      headline: headline,
+      subhead: subhead,
+      content: content,
+      buttons: videoButtons
+    }),
+    rightContentType: "Contentful2X2"
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FullBackgroundHero["default"], {
+    content: contentVideoCTA,
+    theme: _themes.themes["white"]
+  }));
+};
+exports.VideoCTA = VideoCTA;

package/dist/luna/components/FullBackgroundHero/FullBackgroundHeroDocumentation.mdx

@@ -0,0 +1,94 @@
+#### Full Background Hero
+
+###### Props -
+
+- `content` **(required)** - object containing background images and contents for each variants
+	- `variant` - string to indicate page layout. This defaults to "variant-1"
+	    - `variant-1`       - Full page
+	    - `variant-2`       - Top - Bottom (Right shape)
+	    - `variant-2-inset` - Top - Bottom (Right content)
+	    - `variant-3`       - Top Half
+	- `backgroundImage` - object with `type` as a string and `image` as an object to support component background image. Type can be `image` or `focalPointImage`.
+	- `bottomBackgroundImage` - object with `type` as a string and `image` as an object to support component bottom background image. Type can be `image` or `focalPointImage`.
+	- `leftContent` - react component/dom element to be displayed on the left side of the Hero
+	- `rightContent` - react component/dom element to be displayed on the right side of the Hero
+	- `rightImage` - object with `type` as a string and `image` as an object to support component right image. Type can be `image` or `focalPointImage`.
+	- `shapeType` - string to indicate shape type (`quarter`, `circle`, or `triangle`) to render on the right side.
+	- `shapeBorderColor` - string to indicate the color or the shape image.
+- `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color.
+- `motion` - boolean to indicate if the content to be displayed with fade animation.
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const backgroundImage = {
+  type: "focalPointImage",
+  focalPointImage: {
+    x: 2000,
+    y: 2000,
+    title: "union-station-h6",
+    height: 4000,
+    width: 4000,
+    url: "//images.ctfassets.net/citn2sn5tdjr/2nAd2u2LPTRHYP2kyZRxgD/62a45291d89c9bf91e6ef13c62c9efca/Group_10115.png",
+  },
+};
+
+const backgroundBottomImage = {
+  type: "image",
+  image: {
+    desktop: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    },
+    tablet: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    },
+    mobile: {
+      src: "//images.ctfassets.net/citn2sn5tdjr/7GfvRv0H0H4wt5BuNz6ML1/ab2d2a0a61665b03499f489dc39bee3e/Group_10128.png",
+      alt: "placeholder image"
+    },
+  },
+};
+
+const dogFocalPointImage = {
+  type: "focalPointImage",
+  focalPointImage: {
+    height: 4000,
+    title: "dog",
+    url:
+      "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    width: 6000,
+    x: 3549,
+    y: 1811,
+  },
+};
+
+const LeftContent = () => (
+  <></>
+);
+
+const RightContent = () => (
+  <></>
+);
+
+const content = {
+  variant: "variant-2",
+  backgroundImage: backgroundImage,
+  bottomBackgroundImage: backgroundBottomImage,
+  leftContent: <LeftContent />,
+  rightImage: dogFocalPointImage,
+  shapeType: "circle",
+  shapeBorderColor: "#0063A3",
+};
+
+return (
+	  <FullBackgroundHero
+      content={content}
+      theme={theme}
+      motion
+      paddingClass="custom-class"
+    />
+);
+```