luna-one 3.1.593 → 3.1.595

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

@@ -0,0 +1,585 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavWithThumbnail = exports.NavTopWithTwoTabs = exports.NavTopWithThreeTabs = exports.NavTopWithOneTab = exports.NavTopThumbnailSquare = exports.NavTopThumbnailRound = exports.NavTopDark = exports.NavTop = exports.NavRightThumbnailSquare = exports.NavRightThumbnailRound = exports.NavRightDark = exports.NavRightCards = exports.NavRight = exports.NavLeftThumbnailSquare = exports.NavLeftThumbnailRound = exports.NavLeftDark = exports.NavLeft = exports.NavDarkWithThumbnail = exports.NavBottomWithTwoTabs = exports.NavBottomWithThreeTabs = exports.NavBottomWithOneTab = exports.NavBottomThumbnailSquare = exports.NavBottomThumbnailRound = exports.NavBottomDark = exports.NavBottom = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _TabsDocumentation = _interopRequireDefault(require("./TabsDocumentation.mdx"));
+var _BlockListItems = _interopRequireDefault(require("../BlockListItems/BlockListItems"));
+var _PullQuote = _interopRequireDefault(require("../PullQuote/PullQuote"));
+var variant1ACards = [{
+  image: {
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  eyebrow: "Eyebrow Option",
+  header: "Trimble S9 HP®",
+  cardLink: {
+    url: "/#",
+    text: "Button"
+  },
+  text: "Combines top field technologies with the highest level of accuracy and most advanced engineering features."
+}, {
+  image: {
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  eyebrow: "Eyebrow Option",
+  header: "Trimble Zephyr 3 for GIS",
+  cardLink: {
+    url: "/#",
+    text: "Button"
+  }
+}, {
+  image: {
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  eyebrow: "Eyebrow Option",
+  header: "Trimble S5",
+  cardLink: {
+    url: "/#",
+    text: "Button"
+  },
+  text: "The no nonsense workhorse that works efficiently and dependably while maintaining the highest possible accuracy"
+}, {
+  image: {
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  eyebrow: "Eyebrow Option",
+  header: "Yo I am a title! Woooo",
+  cardLink: {
+    url: "/#",
+    text: "Button"
+  },
+  text: "Uncompromising performance, range, accuracy and speed."
+}];
+var variant1A = {
+  cards: variant1ACards,
+  cardAlignment: true,
+  displayButton: true,
+  theme: {
+    color: "#26292E",
+    backgroundColor: "#F1F1F6",
+    theme: "concrete-gray"
+  },
+  tab: true
+};
+var quote = {
+  source: "Gariatur Nostrud Pariatur",
+  sourceTitle: "TITLE OR CREDENTIALS FOR THE QUOTEE",
+  text: '"Pull Quote can be aliquip aliqua aliqua id qui aute anim reprehenderit tempor velit est sint laborum. Cillum et laboris aliquip consequat"'
+};
+var ctaLight = {
+  className: "primary--2",
+  text: "Call To Action",
+  url: "https://example.com"
+};
+var variant1APQ = {
+  quote: quote,
+  cta: ctaLight,
+  topImage: {},
+  sideImage: {
+    alt: "dog",
+    focalPointImage: {
+      height: 4000,
+      title: "dog",
+      url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      width: 6000,
+      x: 3549,
+      y: 1811
+    }
+  },
+  imagePosition: "Left",
+  imageWidth: "1/4",
+  appearance: "Light"
+};
+var tabs = [{
+  header: "Tab Header Title More Text More Lorem ipsum",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1APQ,
+    variant: "variant1"
+  })
+}, {
+  header: "Tab Header with Bounded Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "bounded_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}, {
+  header: "Tab Header with App Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "app_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}, {
+  header: "Tab Header with Unbounded Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "unbounded_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}];
+var singularTab = [{
+  header: "Tab Header Title More Text More Lorem ipsum",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1APQ,
+    variant: "variant1"
+  })
+}];
+var doubleTabs = [{
+  header: "Tab Header Title More Text More Lorem ipsum",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1APQ,
+    variant: "variant1"
+  })
+}, {
+  header: "Tab Header with Bounded Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "bounded_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}];
+var tripleTabs = [{
+  header: "Tab Header Title More Text More Lorem ipsum",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_PullQuote["default"], {
+    content: variant1APQ,
+    variant: "variant1"
+  })
+}, {
+  header: "Tab Header with Bounded Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "bounded_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}, {
+  header: "Tab Header with App Cards",
+  description: "Anim aliquip aliqua a liqua id qui aute anim",
+  image: {
+    url: "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+    alt: "Picture of black, brown, and white dog"
+  },
+  content: /*#__PURE__*/_react["default"].createElement(_BlockListItems["default"], {
+    type: "app_cards",
+    content: variant1A,
+    paddingClass: "double-padding"
+  })
+}];
+var _default = {
+  component: _Tabs["default"],
+  title: "MXP Components/Tabs",
+  parameters: {
+    docs: {
+      page: _TabsDocumentation["default"]
+    }
+  }
+};
+exports["default"] = _default;
+var NavWithThumbnail = function NavWithThumbnail() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "left",
+    displayThumbnails: true,
+    tabs: tabs
+  }));
+};
+exports.NavWithThumbnail = NavWithThumbnail;
+var NavRightCards = function NavRightCards() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "right",
+    displayThumbnails: true,
+    tabs: tabs
+  }));
+};
+exports.NavRightCards = NavRightCards;
+var NavTop = function NavTop() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavTop = NavTop;
+var NavTopWithOneTab = function NavTopWithOneTab() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    displayThumbnails: false,
+    tabs: singularTab
+  }));
+};
+exports.NavTopWithOneTab = NavTopWithOneTab;
+var NavTopWithTwoTabs = function NavTopWithTwoTabs() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    displayThumbnails: false,
+    tabs: doubleTabs
+  }));
+};
+exports.NavTopWithTwoTabs = NavTopWithTwoTabs;
+var NavTopWithThreeTabs = function NavTopWithThreeTabs() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    displayThumbnails: false,
+    tabs: tripleTabs
+  }));
+};
+exports.NavTopWithThreeTabs = NavTopWithThreeTabs;
+var NavBottom = function NavBottom() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavBottom = NavBottom;
+var NavBottomWithOneTab = function NavBottomWithOneTab() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    displayThumbnails: false,
+    tabs: singularTab
+  }));
+};
+exports.NavBottomWithOneTab = NavBottomWithOneTab;
+var NavBottomWithTwoTabs = function NavBottomWithTwoTabs() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    displayThumbnails: false,
+    tabs: doubleTabs
+  }));
+};
+exports.NavBottomWithTwoTabs = NavBottomWithTwoTabs;
+var NavBottomWithThreeTabs = function NavBottomWithThreeTabs() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    displayThumbnails: false,
+    tabs: tripleTabs
+  }));
+};
+exports.NavBottomWithThreeTabs = NavBottomWithThreeTabs;
+var NavLeft = function NavLeft() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "left",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavLeft = NavLeft;
+var NavRight = function NavRight() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "right",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavRight = NavRight;
+var NavDarkWithThumbnail = function NavDarkWithThumbnail() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    variant: "text-background-dark",
+    displayThumbnails: true,
+    tabs: tabs
+  }));
+};
+exports.NavDarkWithThumbnail = NavDarkWithThumbnail;
+var NavTopDark = function NavTopDark() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    variant: "text-background-dark",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavTopDark = NavTopDark;
+var NavBottomDark = function NavBottomDark() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    variant: "text-background-dark",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavBottomDark = NavBottomDark;
+var NavLeftDark = function NavLeftDark() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "left",
+    variant: "text-background-dark",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavLeftDark = NavLeftDark;
+var NavRightDark = function NavRightDark() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "right",
+    variant: "text-background-dark",
+    displayThumbnails: false,
+    tabs: tabs
+  }));
+};
+exports.NavRightDark = NavRightDark;
+var NavTopThumbnailRound = function NavTopThumbnailRound() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    variant: "thumbnail-round",
+    tabs: tabs
+  }));
+};
+exports.NavTopThumbnailRound = NavTopThumbnailRound;
+var NavBottomThumbnailRound = function NavBottomThumbnailRound() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    variant: "thumbnail-round",
+    tabs: tabs
+  }));
+};
+exports.NavBottomThumbnailRound = NavBottomThumbnailRound;
+var NavLeftThumbnailRound = function NavLeftThumbnailRound() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "left",
+    variant: "thumbnail-round",
+    tabs: tabs
+  }));
+};
+exports.NavLeftThumbnailRound = NavLeftThumbnailRound;
+var NavRightThumbnailRound = function NavRightThumbnailRound() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "right",
+    variant: "thumbnail-round",
+    tabs: tabs
+  }));
+};
+exports.NavRightThumbnailRound = NavRightThumbnailRound;
+var NavTopThumbnailSquare = function NavTopThumbnailSquare() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "top",
+    variant: "thumbnail-square",
+    tabs: tabs
+  }));
+};
+exports.NavTopThumbnailSquare = NavTopThumbnailSquare;
+var NavBottomThumbnailSquare = function NavBottomThumbnailSquare() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "bottom",
+    variant: "thumbnail-square",
+    tabs: tabs
+  }));
+};
+exports.NavBottomThumbnailSquare = NavBottomThumbnailSquare;
+var NavLeftThumbnailSquare = function NavLeftThumbnailSquare() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "left",
+    variant: "thumbnail-square",
+    tabs: tabs
+  }));
+};
+exports.NavLeftThumbnailSquare = NavLeftThumbnailSquare;
+var NavRightThumbnailSquare = function NavRightThumbnailSquare() {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: "1120px",
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    orientation: "right",
+    variant: "thumbnail-square",
+    tabs: tabs
+  }));
+};
+exports.NavRightThumbnailSquare = NavRightThumbnailSquare;

package/dist/luna/components/Tabs/TabsDocumentation.mdx

@@ -0,0 +1,94 @@
+#### Tabs
+
+###### Props -
+
+- `orientation` - string that determines the position of the tabs nav in relation to tab content
+- `variant` - string that determines the appearance of the tab nav
+- `displayThumbnails` - boolean that determines if image thumbnails will be displayed on text tab variants
+- `paddingClass` - string containing a css class name to be used for the component wrapper padding
+- `tabs` - array of objects containing all tab information
+  - `header` - string containing the header to be displayed in a tab's nav entry
+  - `description` - string containing the description to be displayed in a tab's nav entry
+  - `image` - object containing the information for the image to be displayed in a tab's nav entry
+    - `url` - string containing the image source
+    - `alt` - string containing the image alt text
+  - `content` - react component/dom element to be displayed as the tab's content
+
+###### Example -
+
+```
+const tabs = [
+  {
+    "header": "Tab Header Title More Text More Lorem ipsum",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 1</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header Title 2",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 2</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header Title More Text More Lorem ipsum 3",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 3</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header Title 4",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 4</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header Title 5",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 5</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header Title More Text 6",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 6</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+  {
+    "header": "Tab Header 7",
+    "description": "Anim aliquip aliqua a liqua id qui aute anim",
+    "image": {
+      "url": "//images.ctfassets.net/citn2sn5tdjr/7wBhLKP8AN67gmNO0MJzsP/151f11bbe5130466fbe942aa63fd42fa/dog.jpg",
+      "alt": "Picture of black, brown, and white dog",
+    },
+    "content": <div><h1>Tab content 7</h1><img src="https://picsum.photos/1000/500" alt="image thumbnail" /></div>,
+  },
+]
+
+return (
+  <Tabs orientation="top"
+    variant="text-background-dark"
+    displayThumbnails={true}
+    paddingClass="container-padding-class"
+    tabs={tabs}
+  />
+);
+```