luna-one 3.1.593 → 3.1.594

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