luna-one 3.1.592 → 3.1.594

package/dist/luna/components/2x2/2x2.stories.js

@@ -0,0 +1,456 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SingleBackgroundImageAnimation = exports.SingleBackgroundImage = exports.ShortDataPointContentReverse = exports.ShortDataPointContentAnimations = exports.ShortDataPointContent = exports.OverlappingContentWithStat = exports.OverlappingContentReverse = exports.OverlappingContentAnimations = exports.OverlappingContent = exports.NonOverlappingContentReverse = exports.NonOverlappingContent = exports.HorizontalDataPointContentReverse = exports.HorizontalDataPointContent = exports.FourBackgroundImages = exports.FourBackgroundImageAnimations = exports.ContentLottieAnimations = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _react = _interopRequireDefault(require("react"));
+var _x = _interopRequireDefault(require("./2x2"));
+var _x2Documentation = _interopRequireDefault(require("./2x2Documentation.mdx"));
+var BooksFocalPointImage = {
+  type: "Image",
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url: "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+    x: 480,
+    y: 640
+  }
+};
+var DogFocalPointImage = {
+  type: "Image",
+  focalPointImage: {
+    height: 4000,
+    title: "dog",
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    width: 6000,
+    x: 3549,
+    y: 1811
+  }
+};
+var ForestFocalPointImage = {
+  type: "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",
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url: "//images.ctfassets.net/citn2sn5tdjr/1PNbZmXXwO7v2iYMY1HUkU/ab464795421712604d7ee08a887e6bcb/400x580.jpg",
+    x: 480,
+    y: 640
+  }
+};
+var LottieAnimation = {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+  // style: {
+  //   width: "100%",
+  //   height: "360px"
+  // }
+  ratio: {
+    width: 753,
+    height: 360
+  }
+};
+var LottieAnimationBg = {
+  type: "lottieAnimation",
+  src: "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json",
+  style: {
+    width: "100%",
+    height: "100vh"
+  }
+};
+var RichTextContent = function RichTextContent() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, "This content fits the container"), " consectetur adipiscing elit. Integer eleifend risus ultricies dignissim suscipit. Donec vel lacus."));
+};
+var RichTextContentOverflow = function RichTextContentOverflow() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("strong", null, /*#__PURE__*/_react["default"].createElement("h3", null, "This content is too long for the container, consectetur adipiscing elit.")), "\xA0Integer eleifend risus ultricies dignissim suscipit. Donec vel lacus non felis volutpat mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec tristique, tortor vitae varius vehicula, velit dui faucibus dui, a malesuada metus nulla et ligula. Vestibulum vitae dignissim justo, id volutpat diam. Nunc luctus felis arcu, ac accumsan justo tincidunt eu. Mauris sed augue blandit, lobortis libero et, blandit velit. Aliquam volutpat feugiat metus at facilisis. Sed id turpis neque. Nulla et ultricies justo. Proin sed volutpat leo. Pellentesque habitant morbi tristique sene ctus et netus et malesuada fames ac turpis egestas.\xA0", /*#__PURE__*/_react["default"].createElement("a", {
+    href: "/"
+  }, "Test link"), "."));
+};
+var topLeftContent = [{
+  type: "Header",
+  title: "Top Left Header",
+  headline: "This is the headline©",
+  eyebrow: "eyebrow",
+  subhead: "This is the subheadline"
+}, {
+  type: "Rich Text",
+  title: "Top Left Right Text",
+  content: /*#__PURE__*/_react["default"].createElement(RichTextContent, null)
+}];
+var topRightContent = [{
+  type: "Header",
+  title: "Top Right Header",
+  headline: "This Headline Is Too Long For The Container Because It Has Too Many Characters"
+}, {
+  type: "Rich Text",
+  title: "Top Left Right Text",
+  content: /*#__PURE__*/_react["default"].createElement(RichTextContent, null)
+}];
+var bottomLeftContent = [{
+  type: "Header",
+  title: "Top Right Header",
+  headline: "Network or Local Installation"
+}, {
+  type: "Rich Text",
+  title: "Top Left Right Text",
+  content: /*#__PURE__*/_react["default"].createElement(RichTextContentOverflow, null)
+}];
+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 dataPoints = [{
+  type: "Data Point",
+  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 stat = {
+  stat: "8mm H/15mm V",
+  subheader: "Max Precision",
+  text: "Nunc mi ipsum faucibus vitae aliquet. Anim aliquip aliqua aliqua id qui."
+};
+var statContent = [{
+  type: "Stat",
+  title: "Top Left Right Text",
+  content: stat
+}];
+var singleBackgroundContent = {
+  backgroundImages: [(0, _objectSpread2["default"])({}, BooksFocalPointImage)],
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: topRightContent,
+  topRightBackgroundColor: "dark-navy",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue"
+};
+var singleBackgroundContentAnimation = {
+  backgroundImages: [(0, _objectSpread2["default"])({}, LottieAnimationBg)],
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: topRightContent,
+  topRightBackgroundColor: "dark-navy",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue"
+};
+var fourBackgroundContent = {
+  backgroundImages: [(0, _objectSpread2["default"])({}, BooksFocalPointImage), (0, _objectSpread2["default"])({}, DogFocalPointImage), (0, _objectSpread2["default"])({}, ForestFocalPointImage), (0, _objectSpread2["default"])({}, AnotherFocalPointImage)],
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: topRightContent,
+  topRightBackgroundColor: "trimble-dark-gray",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "dark-navy"
+};
+var fourBackgroundContentAnimation = {
+  backgroundImages: [(0, _objectSpread2["default"])({}, LottieAnimationBg), (0, _objectSpread2["default"])({}, LottieAnimationBg), (0, _objectSpread2["default"])({}, LottieAnimationBg), (0, _objectSpread2["default"])({}, LottieAnimationBg)],
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: topRightContent,
+  topRightBackgroundColor: "trimble-dark-gray",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "dark-navy"
+};
+var nonOverlappingContent = {
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [ForestFocalPointImage],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [AnotherFocalPointImage],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue"
+};
+var nonOverlappingContentLottie = {
+  backgroundImages: [LottieAnimationBg],
+  topLeftContent: topLeftContent,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [LottieAnimation],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [LottieAnimation],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue"
+};
+var nonOverlappingContentReverse = {
+  topLeftContent: [BooksFocalPointImage],
+  topLeftBackgroundColor: "dark-navy",
+  topLeftIsImage: true,
+  topRightContent: topRightContent,
+  topRightBackgroundColor: "trimble-dark-gray",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomRightContent: [DogFocalPointImage],
+  bottomRightBackgroundColor: "trimble-blue",
+  bottomRightIsImage: true
+};
+var overlappingContent = {
+  topLeftContent: topRightContent,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [BooksFocalPointImage],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [AnotherFocalPointImage],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue",
+  overlappingContent: true
+};
+var overlappingContentAnimations = {
+  topLeftContent: topRightContent,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [LottieAnimationBg],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [LottieAnimationBg],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: bottomLeftContent,
+  bottomRightBackgroundColor: "trimble-blue",
+  overlappingContent: true
+};
+var overlappingContentReverse = {
+  topLeftContent: [DogFocalPointImage],
+  topLeftBackgroundColor: "dark-navy",
+  topLeftIsImage: true,
+  topRightContent: topLeftContent,
+  topRightBackgroundColor: "trimble-dark-gray",
+  bottomLeftContent: bottomLeftContent,
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomRightContent: [ForestFocalPointImage],
+  bottomRightBackgroundColor: "trimble-blue",
+  bottomRightIsImage: true,
+  overlappingContent: true
+};
+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: true
+};
+var dataPointContentAnimations = {
+  topLeftContent: dataPoint,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [LottieAnimationBg],
+  topRightBackgroundColor: "dark-navy",
+  topRightIsImage: true,
+  bottomLeftContent: [LottieAnimationBg],
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomLeftIsImage: true,
+  bottomRightContent: dataPoint,
+  bottomRightBackgroundColor: "dark-navy",
+  shortDataPointContent: true
+};
+var dataPointContentReverse = {
+  topLeftContent: [BooksFocalPointImage],
+  topLeftBackgroundColor: "trimble-blue",
+  topLeftIsImage: true,
+  topRightContent: dataPoint,
+  topRightBackgroundColor: "trimble-blue",
+  bottomLeftContent: dataPoint,
+  bottomLeftBackgroundColor: "trimble-blue",
+  bottomRightContent: [DogFocalPointImage],
+  bottomRightBackgroundColor: "trimble-blue",
+  bottomRightIsImage: true,
+  shortDataPointContent: true
+};
+var horizontalDataPointContent = {
+  topLeftContent: dataPoints,
+  topLeftBackgroundColor: "dark-navy",
+  topRightContent: [ForestFocalPointImage],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [AnotherFocalPointImage],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: dataPoints,
+  bottomRightBackgroundColor: "trimble-blue"
+};
+var horizontalDataPointContentReverse = {
+  topLeftContent: [BooksFocalPointImage],
+  topLeftBackgroundColor: "dark-navy",
+  topLeftIsImage: true,
+  topRightContent: dataPoints,
+  topRightBackgroundColor: "trimble-dark-gray",
+  bottomLeftContent: statContent,
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomRightContent: [DogFocalPointImage],
+  bottomRightBackgroundColor: "trimble-blue",
+  bottomRightIsImage: true
+};
+var overlappingContentWithStat = {
+  topLeftContent: statContent,
+  topLeftBackgroundColor: "white",
+  topRightContent: [BooksFocalPointImage],
+  topRightBackgroundColor: "trimble-dark-gray",
+  topRightIsImage: true,
+  bottomLeftContent: [AnotherFocalPointImage],
+  bottomLeftBackgroundColor: "concrete-gray",
+  bottomLeftIsImage: true,
+  bottomRightContent: statContent,
+  bottomRightBackgroundColor: "trimble-dark-gray",
+  overlappingContent: true
+};
+var _default = {
+  component: _x["default"],
+  title: "MXP Components/2x2",
+  parameters: {
+    docs: {
+      page: _x2Documentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var SingleBackgroundImage = function SingleBackgroundImage() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: singleBackgroundContent
+  });
+};
+exports.SingleBackgroundImage = SingleBackgroundImage;
+var SingleBackgroundImageAnimation = function SingleBackgroundImageAnimation() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: singleBackgroundContentAnimation
+  });
+};
+exports.SingleBackgroundImageAnimation = SingleBackgroundImageAnimation;
+var FourBackgroundImages = function FourBackgroundImages() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: fourBackgroundContent
+  });
+};
+exports.FourBackgroundImages = FourBackgroundImages;
+var FourBackgroundImageAnimations = function FourBackgroundImageAnimations() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: fourBackgroundContentAnimation
+  });
+};
+exports.FourBackgroundImageAnimations = FourBackgroundImageAnimations;
+var NonOverlappingContent = function NonOverlappingContent() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: nonOverlappingContent
+  });
+};
+exports.NonOverlappingContent = NonOverlappingContent;
+var NonOverlappingContentReverse = function NonOverlappingContentReverse() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: nonOverlappingContentReverse
+  });
+};
+exports.NonOverlappingContentReverse = NonOverlappingContentReverse;
+var ContentLottieAnimations = function ContentLottieAnimations() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: nonOverlappingContentLottie
+  });
+};
+exports.ContentLottieAnimations = ContentLottieAnimations;
+var OverlappingContent = function OverlappingContent() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: overlappingContent
+  });
+};
+exports.OverlappingContent = OverlappingContent;
+var OverlappingContentAnimations = function OverlappingContentAnimations() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: overlappingContentAnimations
+  });
+};
+exports.OverlappingContentAnimations = OverlappingContentAnimations;
+var OverlappingContentReverse = function OverlappingContentReverse() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: overlappingContentReverse
+  });
+};
+exports.OverlappingContentReverse = OverlappingContentReverse;
+var ShortDataPointContent = function ShortDataPointContent() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: dataPointContent
+  });
+};
+exports.ShortDataPointContent = ShortDataPointContent;
+var ShortDataPointContentAnimations = function ShortDataPointContentAnimations() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: dataPointContentAnimations
+  });
+};
+exports.ShortDataPointContentAnimations = ShortDataPointContentAnimations;
+var ShortDataPointContentReverse = function ShortDataPointContentReverse() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: dataPointContentReverse
+  });
+};
+exports.ShortDataPointContentReverse = ShortDataPointContentReverse;
+var HorizontalDataPointContent = function HorizontalDataPointContent() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: horizontalDataPointContent
+  });
+};
+exports.HorizontalDataPointContent = HorizontalDataPointContent;
+var HorizontalDataPointContentReverse = function HorizontalDataPointContentReverse() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: horizontalDataPointContentReverse
+  });
+};
+exports.HorizontalDataPointContentReverse = HorizontalDataPointContentReverse;
+var OverlappingContentWithStat = function OverlappingContentWithStat() {
+  return /*#__PURE__*/_react["default"].createElement(_x["default"], {
+    content: overlappingContentWithStat
+  });
+};
+exports.OverlappingContentWithStat = OverlappingContentWithStat;

package/dist/luna/components/2x2/2x2Documentation.mdx

@@ -0,0 +1,77 @@
+#### 2x2
+
+###### Props -
+
+- `content` **(required)** - An object with the following keys:
+  - `backgroundImages` - An array with zero to four items. Array lengths of 0, 1, and 4 are valid. Arrays with 2 and 3 entries will use the first item only. Each `backgroundImage` item is a `focalPointImage` object. The focal point image must have a `title` and `url`.
+  - `overlappingContent` - A boolean which determines if image content will be overlapped by text content.
+  - `topLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `topLeftIsImage` - A boolean which determines if the top left content is an image.
+  - `topLeftBackgroundColor` - A string which determines the background color of the top left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `topRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `topRightIsImage` - A boolean which determines if the top right content is an image.
+  - `topRightBackgroundColor` - A string which determines the background color of the top right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `bottomLeftContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `bottomLeftIsImage` - A boolean which determines if the bottom left content is an image.
+  - `bottomLeftBackgroundColor` - A string which determines the background color of the bottom left content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+  - `bottomRightContent` **(required)** - An array of 1 to 2 content items. Valid content types are: `Header`, `Rich Text`, `Image`, and `Data Point`.
+  - `bottomRightIsImage` - A boolean which determines if the bottom right content is an image.
+  - `bottomRightBackgroundColor` - A string which determines the background color of the bottom right content. Valid entires are `white`, `trimble-blue`, `trimble-dark-gray`, `dark-navy`, and `concrete-gray`.
+
+###### Example -
+
+```
+const RichTextContent = () => (
+  <>
+    <p>
+      <strong>This content is fits the container</strong> consectetur adipiscing
+      elit. Integer eleifend risus ultricies dignissim suscipit. Donec vel
+      lacus.
+    </p>
+  </>
+);
+
+
+const contentArray = [
+  {
+    type: "Header",
+    title: "Top Left Header",
+    headline: "This is the headline",
+    eyebrow: "eyebrow",
+    subhead: "This is the subheadline",
+  },
+  {
+    type: "Rich Text",
+    title: "Top Left Right Text",
+    content: <RichTextContent />,
+  },
+];
+
+const FocalPointImage = {
+  focalPointImage: {
+    height: 960,
+    width: 1280,
+    title: "FPO Placeholder",
+    url:
+      "//images.ctfassets.net/citn2sn5tdjr/2aIM2EvXTK5yrpIHrvP5k5/6f7a3669abb2bf2ec39b635a91da90f6/720x720.jpg",
+    x: 480,
+    y: 640,
+  },
+};
+
+const content = {
+  backgroundImages: [{ ...FocalPointImage }],
+  topLeftContent: contentArray,
+  topLeftBackgroundColor: "trimble-blue",
+  topRightContent: contentArray,
+  topRightBackgroundColor: "dark-navy",
+  bottomLeftContent: contentArray,
+  bottomLeftBackgroundColor: "dark-navy",
+  bottomRightContent: contentArray,
+  bottomRightBackgroundColor: "trimble-blue",
+};
+
+return (
+<TwoByTwo content={content} />
+);
+```

package/dist/luna/components/Accordion/Accordion.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 _Accordion = _interopRequireDefault(require("./Accordion"));
+var _AccordionDocumentation = _interopRequireDefault(require("./AccordionDocumentation.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: "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 _default = {
+  component: _Accordion["default"],
+  title: "MXP Components/Accordion ",
+  parameters: {
+    docs: {
+      page: _AccordionDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items
+  });
+};
+exports.Default = Default;
+var ConcreteGrayTheme = function ConcreteGrayTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["concreteGray"]
+  });
+};
+exports.ConcreteGrayTheme = ConcreteGrayTheme;
+var BlueTheme = function BlueTheme() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["blue"]
+  });
+};
+exports.BlueTheme = BlueTheme;
+var DarkNavyThemeWithoutIcon = function DarkNavyThemeWithoutIcon() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["darkNavy"],
+    disableIcon: true
+  });
+};
+exports.DarkNavyThemeWithoutIcon = DarkNavyThemeWithoutIcon;
+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(_Accordion["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(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["transparentDarkText"]
+  }));
+};
+exports.TransparentWithDarkText = TransparentWithDarkText;
+var DarkGrayThemeWithPadding = function DarkGrayThemeWithPadding() {
+  return /*#__PURE__*/_react["default"].createElement(_Accordion["default"], {
+    items: items,
+    theme: _themes.themes["darkGray"],
+    paddingClass: "luna-accordion--extra-padding"
+  });
+};
+exports.DarkGrayThemeWithPadding = DarkGrayThemeWithPadding;

package/dist/luna/components/Accordion/AccordionDocumentation.mdx

@@ -0,0 +1,46 @@
+#### Accordion
+
+###### 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 (
+	  <Accordion
+      items={items}
+      theme={theme}
+      disableIcon={false}
+      paddingClass="custom-class"
+    />
+);
+```