luna-one 3.1.593 → 3.1.595

package/dist/luna/components/ComparisonTable/ComparisonTableDocumentation.mdx

@@ -0,0 +1,159 @@
+#### Comparison Table
+
+###### Props -
+- `data` **(required)** - object containing comparison table data, with following props
+  - `showImages` - (boolean) for display of images, defaults to 
+  - `comparisonColumnGroups` - fields for comparison in the table, including any tooltip text. Product fields must match these in order to function properly.
+    - `columnName` - (text) field for column name in table
+    - `tooltipText` (optional) - (text) text to display in tooltip for this field
+  - `productDetails` - (object) product data object for fields in the table
+    - `productName` - (text) name of product for comparison
+    - `image` (optional) - (object) product image for display
+      - `url` - (text) product image URL
+    - `subheading` - (text) product subheading
+    - `productLink` - (text) link to product page
+    - `productAttributes` - product attributes for comparison in table - these must match the comparison columns in the `comparisonColumnGroups` data.
+      - `name` - (text) name of the attribute
+      - `value` - (text) value of the attribute
+
+###### Example -
+
+```
+const content = {
+  comparisonColumnGroups: [
+    {
+      categoryName: "ISO",
+      comparisonColumns: [
+        {
+          columnName: "Universal Terminal",
+          tooltipText: "Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet. Universal terminal is a lorem ipsum dolor sit amet.",
+        },
+        {
+          columnName: "Task Controller",
+        },
+        {
+          columnName: "ISO TC Section Control",
+        },
+      ]
+    },
+    {
+      categoryName: "Field IQ",
+      comparisonColumns: [
+        {
+          columnName: "Controlled Channels",
+        },
+        {
+          columnName: "Field IQ Section Control",
+          tooltipText: "Universal terminal is a lorem ipsum dolor sit amet.",
+        },
+        {
+          columnName: "FIQ Controlled Product Drives",
+        },
+      ]
+    },
+    {
+      categoryName: "Serial Rate/TUVR",
+      comparisonColumns: [
+        {
+          columnName: "Population/Blockage Monitoring",
+        },
+        {
+          columnName: "Controlled Channels",
+        },
+      ]
+    }
+  ],
+  productDetails: [
+    {
+      productName: "Product Name",
+      image: {
+        url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      },
+      subheading: "Subheading Lorem Ipsum",
+      productLink: {
+        url: "/products/product-name"
+      },
+      productAttributes: [
+        { value: true },
+        { value: "Up to 96 Sections", columnWidth: "medium" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room Lorem ipsum dolor sit amet.", columnWidth: "long" },
+        { value: "Attribute 1" },
+        { value: "" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet.", columnWidth: "long" },
+      ]
+    },
+    {
+      productName: "Product Name",
+      productTag: "Best Performance",
+      image: {
+        url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      },
+      subheading: "Subheading Lorem Ipsum",
+      productLink: {
+        url: "/products/product-name"
+      },
+      bodyText: "Body text if necessary",
+      productAttributes: [
+        { value: false },
+        { value: "Up to 96 Sections" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
+        { value: "Attribute 1" },
+        { value: "" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
+      ]
+    },
+    {
+      productName: "Product Name",
+      image: {
+        url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      },
+      subheading: "Subheading Lorem Ipsum",
+      productLink: {
+        url: "/products/product-name"
+      },
+      bodyText: "Body text if necessary",
+      productAttributes: [
+        { value: true },
+        { value: "Up to 96 Sections" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
+        { value: "Attribute 1" },
+        { value: "Up to 96 Sections" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
+      ]
+    },
+    {
+      productName: "Product Name",
+      image: {
+        url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      },
+      subheading: "Subheading Lorem Ipsum",
+      productLink: {
+        url: "/products/product-name"
+      },
+      bodyText: "Body text if necessary",
+      productAttributes: [
+        { value: false },
+        { value: "Up to 96 Sections" },
+        { value: "Attribute 3" },
+        { value: "Columns can get wider if the content within them needs more room. Lorem ipsum dolor sit amet." },
+        { value: "Attribute 1" },
+        { value: "" },
+        { value: "Attribute 3" },
+        { value: "" },
+      ]
+    },
+  ],
+};
+
+export const Default = () => (
+  <div style={{ maxWidth: "1200px", margin: "auto", padding: "0 32px" }}>
+    <ComparisonTable data={content} />
+  </div>
+);
+```

package/dist/luna/components/CtaWithHeader/CTAHeaderText.stories.js

@@ -0,0 +1,192 @@
+"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.TransparentWithLightText = exports.TransparentWithDarkText = exports.DefaultWithTextLinks = exports.Default = exports.DarkWithTextLinks = exports.DarkNavy = exports.DarkGray = exports.Dark = exports.CenterAligned = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _CtaWithHeader = _interopRequireDefault(require("../CtaWithHeader/CtaWithHeader"));
+var _CTAHeaderTextDocumentation = _interopRequireDefault(require("./CTAHeaderTextDocumentation.mdx"));
+var eyebrow = "Eyebrow option";
+var headline = "Header title™";
+var subhead = "The GFX-350™ display is Android™-based and easy-to-use, helping growers tackle farming operation";
+var 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>";
+var buttons = [{
+  text: "Button 1 aliqua aliqua id qui aute anim reprehenderit",
+  // url: "https://trimble.com",
+  onClick: function onClick() {}
+}, {
+  text: "Button 2 aliqua aliqua id qui aute anim reprehenderit",
+  url: "/"
+}];
+var _default = {
+  component: _CtaWithHeader["default"],
+  title: "MXP Components/CTA with Text and Header",
+  parameters: {
+    docs: {
+      page: _CTAHeaderTextDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  });
+};
+exports.Default = Default;
+var DefaultWithTextLinks = function DefaultWithTextLinks() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons,
+    textLinks: true
+  });
+};
+exports.DefaultWithTextLinks = DefaultWithTextLinks;
+var Dark = function Dark() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "dark",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  });
+};
+exports.Dark = Dark;
+var DarkWithTextLinks = function DarkWithTextLinks() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "dark",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons,
+    textLinks: true
+  });
+};
+exports.DarkWithTextLinks = DarkWithTextLinks;
+var DarkGray = function DarkGray() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "dark-gray",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  });
+};
+exports.DarkGray = DarkGray;
+var DarkNavy = function DarkNavy() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    variant: "dark-navy",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  });
+};
+exports.DarkNavy = DarkNavy;
+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(_CtaWithHeader["default"], {
+    variant: "transparent-light-text",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  }));
+};
+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(_CtaWithHeader["default"], {
+    variant: "transparent-dark-text",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  }));
+};
+exports.TransparentWithDarkText = TransparentWithDarkText;
+var CenterAligned = function CenterAligned() {
+  return /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    alignment: "center",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: buttons
+  });
+};
+exports.CenterAligned = CenterAligned;
+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: "text",
+    video: videoContent,
+    setOverride: setOverride,
+    override: override
+  }, {
+    text: "Button",
+    video: videoContent,
+    setOverride: setOverride
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CtaWithHeader["default"], {
+    alignment: "center",
+    eyebrow: eyebrow,
+    headline: headline,
+    subhead: subhead,
+    content: content,
+    buttons: videoButtons
+  }));
+};
+exports.VideoCTA = VideoCTA;

package/dist/luna/components/CtaWithHeader/CTAHeaderTextDocumentation.mdx

@@ -0,0 +1,45 @@
+#### CTA with Text and Header
+
+###### Props -
+
+- `variant` - string that determines the CTA appearance (either light or dark)
+- `alignment` - string that sets the CTA text alignment (either left or center)
+- `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)
+- `content` - HTML DOM string containing the main CTA content text (example: "<p>This is the CTA content.</p>")
+- `buttons` - object array containing information for the buttons displayed below the CTA content
+  - `text` - string that sets the button text
+  - `url` - string that sets the button url
+- `textLinks` - boolean that determines if the links will be displayed as text instead of buttons
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const content = "<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. 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>"
+
+const buttons = [
+  {
+    "text": "Button 1",
+    "url": "/"
+  },
+  {
+    "text": "Button 2",
+    "url": "/"
+  }
+]
+
+return (
+  <CTA
+    variant="dark"
+    alignment="center"
+    eyebrow="Eyebrow option"
+    headline="Header title"
+    subhead="Subhead can go here."
+    content={content}
+    buttons={buttons}
+    textLinks={true}
+  />
+);
+```

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

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Variant3White = exports.Variant3TrimbleBlue = exports.Variant3Gold = exports.Variant3DarkNavy = exports.Variant3DarkGray = exports.Variant2BackgroundImage = exports.Variant2BWhite = exports.Variant2BTrimbleBlue = exports.Variant2BGold = exports.Variant2BDarkNavy = exports.Variant2BDarkGray = exports.Variant2AWhite = exports.Variant2ATrimbleBlue = exports.Variant2AGold = exports.Variant2ADarkNavy = exports.Variant2ADarkGray = exports.Variant1White = exports.Variant1TrimbleBlue = exports.Variant1Gold = exports.Variant1DarkNavy = exports.Variant1DarkGray = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DataPointDocumentation = _interopRequireDefault(require("./DataPointDocumentation.mdx"));
+var _DataPoint = _interopRequireDefault(require("./DataPoint"));
+var _default = {
+  component: _DataPoint["default"],
+  title: "MXP Components/DataPoint",
+  parameters: {
+    docs: {
+      page: _DataPointDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var white = {
+  color: "#26292E",
+  backgroundColor: "#ffffff"
+};
+var transparent = {
+  color: "#ffffff",
+  backgroundColor: "transparent"
+};
+var darkGray = {
+  color: "#ffffff",
+  backgroundColor: "#252A2E"
+};
+var trimbleBlue = {
+  color: "#ffffff",
+  backgroundColor: "#0063A3"
+};
+var darkNavy = {
+  color: "#ffffff",
+  backgroundColor: "#003054"
+};
+var gold = {
+  color: "#252A2E",
+  backgroundColor: "#FBAD26"
+};
+var points = [{
+  header: "Header™",
+  description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+  icon: {
+    type: "mxp-icon-accurate-models"
+  }
+}, {
+  header: "Header",
+  description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+  icon: {
+    type: "mxp-icon-technologies-modeling"
+  }
+}, {
+  header: "Header",
+  description: "Anim aliquip aliqua aliqua id qui aute anim in ella",
+  icon: {
+    type: "mxp-icon-technologies-analytics"
+  }
+}];
+var Variant1White = function Variant1White() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: white,
+    variant: "variant_1"
+  });
+};
+exports.Variant1White = Variant1White;
+var Variant1DarkGray = function Variant1DarkGray() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkGray,
+    variant: "variant_1"
+  });
+};
+exports.Variant1DarkGray = Variant1DarkGray;
+var Variant1TrimbleBlue = function Variant1TrimbleBlue() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: trimbleBlue,
+    variant: "variant_1"
+  });
+};
+exports.Variant1TrimbleBlue = Variant1TrimbleBlue;
+var Variant1DarkNavy = function Variant1DarkNavy() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkNavy,
+    variant: "variant_1"
+  });
+};
+exports.Variant1DarkNavy = Variant1DarkNavy;
+var Variant1Gold = function Variant1Gold() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: gold,
+    variant: "variant_1"
+  });
+};
+exports.Variant1Gold = Variant1Gold;
+var Variant2AWhite = function Variant2AWhite() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: white,
+    variant: "variant_2a"
+  });
+};
+exports.Variant2AWhite = Variant2AWhite;
+var Variant2ADarkGray = function Variant2ADarkGray() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkGray,
+    variant: "variant_2a"
+  });
+};
+exports.Variant2ADarkGray = Variant2ADarkGray;
+var Variant2ATrimbleBlue = function Variant2ATrimbleBlue() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: trimbleBlue,
+    variant: "variant_2a"
+  });
+};
+exports.Variant2ATrimbleBlue = Variant2ATrimbleBlue;
+var Variant2ADarkNavy = function Variant2ADarkNavy() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkNavy,
+    variant: "variant_2a"
+  });
+};
+exports.Variant2ADarkNavy = Variant2ADarkNavy;
+var Variant2AGold = function Variant2AGold() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: gold,
+    variant: "variant_2a"
+  });
+};
+exports.Variant2AGold = Variant2AGold;
+var Variant2BWhite = function Variant2BWhite() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: white,
+    variant: "variant_2b"
+  });
+};
+exports.Variant2BWhite = Variant2BWhite;
+var Variant2BDarkGray = function Variant2BDarkGray() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkGray,
+    variant: "variant_2b"
+  });
+};
+exports.Variant2BDarkGray = Variant2BDarkGray;
+var Variant2BTrimbleBlue = function Variant2BTrimbleBlue() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: trimbleBlue,
+    variant: "variant_2b"
+  });
+};
+exports.Variant2BTrimbleBlue = Variant2BTrimbleBlue;
+var Variant2BDarkNavy = function Variant2BDarkNavy() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkNavy,
+    variant: "variant_2b"
+  });
+};
+exports.Variant2BDarkNavy = Variant2BDarkNavy;
+var Variant2BGold = function Variant2BGold() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: gold,
+    variant: "variant_2b"
+  });
+};
+exports.Variant2BGold = Variant2BGold;
+var Variant2BackgroundImage = function Variant2BackgroundImage() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundImage: "url('https://images.ctfassets.net/citn2sn5tdjr/4NzwDSDlGECGIiokKomsyI/f78a74130fc60ae9b4fb2e0da2f405db/city.jpg')"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: transparent,
+    variant: "variant_2b"
+  }));
+};
+exports.Variant2BackgroundImage = Variant2BackgroundImage;
+var Variant3White = function Variant3White() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: white,
+    variant: "variant_3"
+  });
+};
+exports.Variant3White = Variant3White;
+var Variant3DarkGray = function Variant3DarkGray() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkGray,
+    variant: "variant_3"
+  });
+};
+exports.Variant3DarkGray = Variant3DarkGray;
+var Variant3TrimbleBlue = function Variant3TrimbleBlue() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: trimbleBlue,
+    variant: "variant_3"
+  });
+};
+exports.Variant3TrimbleBlue = Variant3TrimbleBlue;
+var Variant3DarkNavy = function Variant3DarkNavy() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: darkNavy,
+    variant: "variant_3"
+  });
+};
+exports.Variant3DarkNavy = Variant3DarkNavy;
+var Variant3Gold = function Variant3Gold() {
+  return /*#__PURE__*/_react["default"].createElement(_DataPoint["default"], {
+    points: points,
+    theme: gold,
+    variant: "variant_3"
+  });
+};
+exports.Variant3Gold = Variant3Gold;

package/dist/luna/components/DataPoint/DataPointDocumentation.mdx

@@ -0,0 +1,40 @@
+#### DataPoint
+
+###### Props -
+
+- `points` - array of objects, each with `header`, `description`, and `icon`.
+  - _Please Note_ - points will render as a group of 3 or only one.
+- `theme` - object with `backgroundColor` and `color` as strings to represent hex value for background color.
+- `variant` - string to render type of variant. options are "variant_1". "variant_2a", "variant_2b", and "variant_3"
+- `paddingClass` - string to generate a custom class to pass into the outermost div of the component.
+
+###### Example -
+
+```
+const white = {
+  color: "#26292E",
+  backgroundColor: "#ffffff",
+};
+
+const 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" },
+  },
+];
+
+return (
+  <DataPoint points={points} theme={white} variant="variant_1" />
+);
+```