luna-one 3.1.597 → 3.1.598

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

@@ -1,339 +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>
-);
-
-```
+#### 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>
+);
+
+```