luna-one 3.1.593 → 3.1.594

package/dist/luna/components/BlockListItems/BlockListItemsDocumentation.mdx

@@ -0,0 +1,339 @@
+#### Block List Items
+
+###### Props -
+- `content` **(required)** - object containing content for the selected block type, fields vary based on type - see individual sub-components for details
+- `type` **(required)** - required to render the correct type of block list - e.g. `bounded_cards`, `icon_mini_blocks`  
+- `motion` - boolean used to indicate whether or not motion should be used
+- `zIndex` - used to manually set the z-index of the component
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const CardImage = "../images/dummy-image.png";
+const content = {
+  type: "bounded_cards",
+  const variant1BCards = [
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S9 HP",
+      buttonSecondary: true,
+      cardLink: {
+        url: "/#",
+        text: "Button",
+        type: "ter-button--secondary-1",
+      },
+      text:
+        "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble Zephyr 3 for GIS",
+      buttonSecondary: true,
+      cardLink: {
+        url: "/#",
+        text: "Button",
+        type: "ter-button--secondary",
+      },
+    },
+    {
+      image: { src: CardImage, altText: "FPO Image" },
+      eyebrow: "Eyebrow Option",
+      header: "Trimble S5",
+      buttonSecondary: true,
+      cardLink: {
+        url: "/#",
+        text: "Button",
+        type: "ter-button--secondary",
+      },
+      text:
+        "The no nonsense workhorse that works efficiently and dependably while maintaining the highest possible accuracy",
+    }
+  ],
+  cardAlignment: true,
+  displayButton: true
+};
+
+return (
+  <ListFeat content={content} motion />
+)
+
+export const IconMiniBlocks = () => (
+  <div style={{ maxWidth: "1232px", margin: "0 auto" }}>
+    <BlockListItems
+      type="icon_mini_blocks"
+      content={{
+        blocks: [
+          {
+            header: "Communications",
+            link: "https://www.trimble.com",
+            text: "Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet",
+          },
+          {
+            header: "Communications",
+            link: "https://www.trimble.com",
+            text: "Lorem Ipsum dolor sit amet...",
+          },
+          {
+            header: "Communications",
+            link: "https://www.trimble.com",
+            text: "Lorem Ipsum dolor sit amet...",
+          },
+          {
+            header: "Communications",
+            link: "https://www.trimble.com",
+            text: "Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet",
+          },
+        ],
+        alignment: "left,
+        largeBlock: false
+      }}
+    />
+  </div>
+);
+
+export const IconListItemBlocks = () => (
+  <div style={{ maxWidth: "1232px", margin: "0 auto" }}>
+    <BlockListItems
+      type="icon_list_item_blocks"
+      content={{
+        blocks: [
+          {
+            icon: "enclosed-arrow-right-dark-32px",
+            header: "Regulatory Compliance",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet",
+            link: {
+              url: "https://www.trimble.com",
+              text: "Explore more"
+            }
+          },
+          {
+            icon: "enclosed-arrow-right-dark-32px",
+            header: "Supply Chain Visibility",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "File Manager and Loader. Deserunt aute magna pariatur sunt aliquip cupidatat cillum aliqua magna. Reprehenderit labore excepteur commodo incididunt. Deserunt aute magna pariatur sunt aliquip cupidatat.",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Transportation & Logistics Lorem ipsum dolor sit amet magna aute.",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "File Manager and Loader. Deserunt aute magna pariatur sunt aliquip cupidatat cillum aliqua excepteur commodo incididunt.  ",
+          },
+          {
+            header: "Transportation & Logistics",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "File Manager and Loader. Deserunt aute magna pariatur sunt aliquip cupidatat cillum aliqua.",
+          },
+          {
+            header: "Regulatory Compliance",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet. Lorem Ipsum dolor sit amet",
+            link: {
+              url: "https://www.trimble.com",
+              text: "Explore more"
+            }
+          },
+          {
+            header: "Supply Chain Visibility",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "File Manager and Loader. Deserunt aute magna pariatur sunt aliquip cupidatat cillum aliqua magna. Reprehenderit labore excepteur commodo incididunt. Deserunt aute magna pariatur sunt aliquip cupidatat.",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Transportation & Logistics Lorem ipsum dolor sit amet magna aute.",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "Lorem Ipsum dolor sit amet...",
+          },
+          {
+            header: "Transportation & Logistics",
+            link: text("Block Links", "https://www.trimble.com"),
+            text: "File Manager and Loader. Deserunt aute magna pariatur sunt aliquip cupidatat cillum aliqua.",
+          },
+        ],
+      }}
+    />
+  </div>
+);
+
+export const BioBlocks = () => (
+  <div style={{ maxWidth: "1232px", margin: "0 auto" }}>
+    <BlockListItems
+      type="bio_blocks"
+      content={{
+        blocks: [
+          {
+            header: "Patience Turner",
+            subHeader: "Senior Vice President",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "https://www.trimble.com",
+              text: "Explore more"
+            }
+          },
+          {
+            header: "Angelique Shroeder",
+            subHeader: "Senior Vice President, Operations and Head of Sustainability",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Emmanuel Macdonald",
+            subHeader: "Senior Vice President, Chief Digital Officer",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Blake Daugherty",
+            subHeader: "Senior Vice President, Finance and Chief Accounting Officer",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Patience Turner",
+            subHeader: "Senior Vice President",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "https://www.trimble.com",
+              text: "Explore more"
+            }
+          },
+          {
+            header: "Angelique Shroeder",
+            subHeader: "Senior Vice President, Operations and Head of Sustainability",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Emmanuel Macdonald",
+            subHeader: "Senior Vice President, Chief Digital Officer",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+          {
+            header: "Blake Daugherty",
+            subHeader: "Senior Vice President, Finance and Chief Accounting Officer",
+            image: {
+              focalPointImage: {
+                height: 4000,
+                title: "dog",
+                url:
+                  "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+                width: 6000,
+                x: 3549,
+                y: 1811,
+              },
+            },
+            text: "LG/P/Book Body copy nim aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat. MxChar Count 150",
+            link: {
+              url: "/",
+              text: "Explore"
+            }
+          },
+        ],
+      }}
+    />
+  </div>
+);
+
+```

package/dist/luna/components/BrowserSupportBanner/BrowserSupportBanner.scss

@@ -1,7 +1,7 @@
-.browser-support-banner {
-  z-index: 10;
-}
-
-.remove-alert {
-	display: none;
+.browser-support-banner {
+  z-index: 10;
+}
+
+.remove-alert {
+	display: none;
 } 

package/dist/luna/components/BrowserSupportBanner/BrowserSupportBrowser.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _react = _interopRequireDefault(require("react"));
+var _pattern = _interopRequireDefault(require("../../../../images/pattern.png"));
+var _react2 = require("@storybook/react");
+var _BrowserSupportBanner = _interopRequireDefault(require("./BrowserSupportBanner"));
+var content = {
+  text: "WARNING: Internet Explorer is not recommended for use of this site. Please switch your browser to Chrome, Firefox, or Safari.",
+  type: "danger",
+  browser: "chrome"
+};
+
+// storiesOf("Not Yet Implemented/Browser Support Banner", module).add(
+//   "Browser Support Banner",
+//   () => {
+//     return <BrowserSupportBanner content={content} />;
+//   }
+// );

package/dist/luna/components/CTAButtons/CTAButtons.scss

@@ -1,20 +1,20 @@
-@import "../../../global-styles/terra.scss";
-
-.cta-buttons-container {
-  width: 100%;
-  font-family: $header-font-family;
-
-  &.center {
-    .cta-buttons {
-      justify-content: center;
-    }
-  }
-
-  .cta-buttons {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-    margin: 40px 0 0 0;
-  }
+@import "../../../global-styles/terra.scss";
+
+.cta-buttons-container {
+  width: 100%;
+  font-family: $header-font-family;
+
+  &.center {
+    .cta-buttons {
+      justify-content: center;
+    }
+  }
+
+  .cta-buttons {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 40px;
+    margin: 40px 0 0 0;
+  }
 }

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

@@ -0,0 +1,142 @@
+"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.VideoButtons = exports.LunaLinkVideoBtn = exports.Default = exports.Dark = exports.CenterAligned = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _terraOne = require("terra-one");
+var _CTAButtons = _interopRequireDefault(require("../CTAButtons/CTAButtons"));
+var _CTAButtonsDocumentation = _interopRequireDefault(require("./CTAButtonsDocumentation.mdx"));
+var _Video = _interopRequireDefault(require("../Video/Video"));
+var buttons = [{
+  text: "Button 1",
+  url: "/"
+}, {
+  text: "Button 2",
+  url: "https://www.trimble.com/"
+}];
+var _default = {
+  component: _CTAButtons["default"],
+  title: "MXP Components/CTA Buttons",
+  parameters: {
+    docs: {
+      page: _CTAButtonsDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_CTAButtons["default"], {
+    buttons: buttons
+  });
+};
+exports.Default = Default;
+var Dark = function Dark() {
+  return /*#__PURE__*/_react["default"].createElement(_CTAButtons["default"], {
+    variant: "dark",
+    buttons: buttons
+  });
+};
+exports.Dark = Dark;
+var CenterAligned = function CenterAligned() {
+  return /*#__PURE__*/_react["default"].createElement(_CTAButtons["default"], {
+    alignment: "center",
+    buttons: buttons
+  });
+};
+exports.CenterAligned = CenterAligned;
+var VideoButtons = function VideoButtons() {
+  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 thumbnail2 = {
+    src: "https://fpoimg.com/450x450",
+    alt: "fpo"
+  };
+  var video2 = {
+    url: "https://www.youtube.com/embed/W6NZfCO5SIk",
+    allowFullScreen: true
+  };
+  var videoContent2 = {
+    transcript: "View Transcript here",
+    closeTranscript: "Hide Transcript",
+    transcriptText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    video: video2,
+    thumbnail: thumbnail2,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  var videoButtons = [{
+    text: "texty",
+    // url: "/"
+    video: videoContent
+    // setOverride,
+    // override,
+  }, {
+    text: "Button here",
+    video: videoContent2
+    // setOverride: setOverride,
+  }];
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_CTAButtons["default"], {
+    alignment: "center",
+    buttons: videoButtons
+  }));
+};
+exports.VideoButtons = VideoButtons;
+var LunaLinkVideoBtn = function LunaLinkVideoBtn() {
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    override = _useState4[0],
+    setOverride = _useState4[1];
+  var thumbnail1 = {
+    src: "https://fpoimg.com/720x450",
+    alt: "fpo"
+  };
+  var video1 = {
+    url: "https://www.youtube.com/embed/UY7r0juBF8Y",
+    allowFullScreen: true,
+    uuid: "UrtwArRETP23TP9yGgCEd6"
+  };
+  var videoContent1 = {
+    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: video1,
+    thumbnail: thumbnail1,
+    setVideoProgress: function setVideoProgress() {},
+    variant: "variant_7"
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_terraOne.LunaLink, {
+    alignment: "center",
+    children: "text",
+    video: videoContent1,
+    VideoComponent: _Video["default"],
+    setOverride: setOverride,
+    override: override
+  }));
+};
+exports.LunaLinkVideoBtn = LunaLinkVideoBtn;

package/dist/luna/components/CTAButtons/CTAButtonsDocumentation.mdx

@@ -0,0 +1,33 @@
+#### CTA Buttons
+
+###### Props -
+
+- `variant` - string that determines the CTA appearance (either light or dark)
+- `alignment` - string that sets the CTA text alignment (either left or center)
+- `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
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const buttons = [
+  {
+    "text": "Button 1",
+    "url": "/"
+  },
+  {
+    "text": "Button 2",
+    "url": "/"
+  }
+]
+
+return (
+  <CTAButtons
+    variant="dark"
+    alignment="center"
+    buttons={buttons}
+  />
+);
+```