luna-one 3.1.593 → 3.1.594

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

@@ -0,0 +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 />
+)
+```