luna-one 3.1.597 → 3.1.599

package/dist/luna/components/Carousel/CarouselDocumentation.mdx

@@ -1,161 +1,161 @@
-#### Carousel
-
-###### Props -
-
-- `content` **(required)** - object containing cards, with following props
-  - `cards` - array containing objects for generating cards
-    - `eyebrow` - string for generating card eyebrow text
-    - `header` - string for generating card header text
-    - `text` - string for generating card body text
-    - `cardAlignment` - boolean for changing position of card image: usually determined by parent component
-    - `image` - object for generating card image
-      - `url` - string for generating image source text
-      - `altText` - string for generating image accessibility text
-      - `src` - string source of image
-    - `gatsbyImage` - boolean for use with image, allows use of GatsbyImage component
-    - `cardLink` - object for generating card link
-      - `url` - string for generating CTA href or React Router `to`
-      - `text` - string for generating CTA text
-    - `Link` - optional - either a react-router-dom or gatsby-link component
-    - `bgColor` - string used for determining background-color of card - currently only `grey` is available.
-  - `displayButton` - boolean for when a button is desired (required to display button)
-  - `cardAlignment` - boolean for changing position of card image: image-top or image-bottom options toggled by `false` and `true` respectively
-- `motion` - boolean used to indicate whether or not motion should be used
-- `paddingClass` - string containing the container padding class name
-
-###### Example -
-
-```
-const CardImage = "../images/dummy-image.png";
-const content = {
-  const cards = [
-  {
-    image: { src: CardImage, altText: "FPO Image" },
-    eyebrow: "Eyebrow Option",
-    header: "Trimble S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    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 S9 HP",
-    cardLink: {
-      url: "/#",
-      text: "Read more",
-    },
-    text:
-      "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
-  },
-]
-  cardAlignment: true,
-  displayButton: true
-};
-
-return (
-  <Carousel content={content} motion />
-)
-```
+#### Carousel
+
+###### Props -
+
+- `content` **(required)** - object containing cards, with following props
+  - `cards` - array containing objects for generating cards
+    - `eyebrow` - string for generating card eyebrow text
+    - `header` - string for generating card header text
+    - `text` - string for generating card body text
+    - `cardAlignment` - boolean for changing position of card image: usually determined by parent component
+    - `image` - object for generating card image
+      - `url` - string for generating image source text
+      - `altText` - string for generating image accessibility text
+      - `src` - string source of image
+    - `gatsbyImage` - boolean for use with image, allows use of GatsbyImage component
+    - `cardLink` - object for generating card link
+      - `url` - string for generating CTA href or React Router `to`
+      - `text` - string for generating CTA text
+    - `Link` - optional - either a react-router-dom or gatsby-link component
+    - `bgColor` - string used for determining background-color of card - currently only `grey` is available.
+  - `displayButton` - boolean for when a button is desired (required to display button)
+  - `cardAlignment` - boolean for changing position of card image: image-top or image-bottom options toggled by `false` and `true` respectively
+- `motion` - boolean used to indicate whether or not motion should be used
+- `paddingClass` - string containing the container padding class name
+
+###### Example -
+
+```
+const CardImage = "../images/dummy-image.png";
+const content = {
+  const cards = [
+  {
+    image: { src: CardImage, altText: "FPO Image" },
+    eyebrow: "Eyebrow Option",
+    header: "Trimble S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    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 S9 HP",
+    cardLink: {
+      url: "/#",
+      text: "Read more",
+    },
+    text:
+      "Combines top field technologies with the highest level of accuracy and most advanced engineering features.",
+  },
+]
+  cardAlignment: true,
+  displayButton: true
+};
+
+return (
+  <Carousel content={content} motion />
+)
+```