luna-one 3.1.594 → 3.1.596

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

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