docs(thumbnail): add component playgrounds and new svg

docs/api/thumbnail.md

@@ -1,11 +1,6 @@
 ---
 title: "ion-thumbnail"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/thumbnail/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/thumbnail/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 
 import Props from '@site/static/auto-generated/thumbnail/props.md';
 import Events from '@site/static/auto-generated/thumbnail/events.md';
@@ -20,153 +15,30 @@ import Slots from '@site/static/auto-generated/thumbnail/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
 
 Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
+## Basic
 
+import Basic from '@site/static/usage/thumbnail/basic/index.md';
 
+<Basic />
 
-## Usage
-
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
-
-<TabItem value="angular">
-
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="javascript">
-
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
-
-</TabItem>
-
-
-<TabItem value="react">
-
-```tsx
-import React from 'react';
-import { IonThumbnail, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const ThumbnailExample: React.FC = () => (
-  <IonContent>
-    <IonThumbnail>
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-    </IonThumbnail>
-
-    <IonItem>
-      <IonThumbnail slot="start">
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
-      </IonThumbnail>
-      <IonLabel>Item Thumbnail</IonLabel>
-    </IonItem>
-  </IonContent>
-);
-```
-
-
-</TabItem>
-
-
-<TabItem value="stencil">
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
-  tag: 'thumbnail-example',
-  styleUrl: 'thumbnail-example.css'
-})
-export class ThumbnailExample {
-  render() {
-    return [
-      <ion-thumbnail>
-        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-      </ion-thumbnail>,
-
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y"/>
-        </ion-thumbnail>
-        <ion-label>Item Thumbnail</ion-label>
-      </ion-item>
-    ];
-  }
-}
-```
-
-
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-thumbnail>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
+## Item Thumbnails
 
-  <ion-item>
-    <ion-thumbnail slot="start">
-      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-    </ion-thumbnail>
-    <ion-label>Item Thumbnail</ion-label>
-  </ion-item>
-</template>
+import Item from '@site/static/usage/thumbnail/item/index.md';
 
-<script>
-import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
-import { defineComponent } from 'vue';
+<Item />
 
-export default defineComponent({
-  components: { IonItem, IonLabel, IonThumbnail }
-});
-</script>
-```
+## Theming
 
-</TabItem>
+import Theming from '@site/static/usage/thumbnail/theming/index.md';
 
-</Tabs>
+<Theming />
 
 ## Properties
 <Props />
@@ -184,4 +56,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
+<Slots />

static/usage/thumbnail/basic/angular.md

@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```

static/usage/thumbnail/basic/demo.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-thumbnail>
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        </ion-thumbnail>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

static/usage/thumbnail/basic/index.md

@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/basic/demo.html" />

static/usage/thumbnail/basic/javascript.md

@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```

static/usage/thumbnail/basic/react.md

@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonThumbnail>
+        <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+      </IonThumbnail>
+    </>
+  );
+}
+export default Example;
+```

static/usage/thumbnail/basic/vue.md

@@ -0,0 +1,16 @@
+```html
+<template>
+  <ion-thumbnail>
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+</template>
+
+<script lang="ts">
+  import { IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonThumbnail },
+  });
+</script>
+```

static/usage/thumbnail/item/angular.md

@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```

static/usage/thumbnail/item/demo.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Thumbnail</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-item>
+          <ion-thumbnail slot="start">
+            <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+          </ion-thumbnail>
+          <ion-label>Item Thumbnail</ion-label>
+        </ion-item>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

static/usage/thumbnail/item/index.md

@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/thumbnail/item/demo.html" />

static/usage/thumbnail/item/javascript.md

@@ -0,0 +1,8 @@
+```html
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```

static/usage/thumbnail/item/react.md

@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonItem>
+        <IonThumbnail slot="start">
+          <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+        </IonThumbnail>
+        <IonLabel>Item Thumbnail</IonLabel>
+      </IonItem>
+    </>
+  );
+}
+export default Example;
+```

static/usage/thumbnail/item/vue.md

@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+    </ion-thumbnail>
+    <ion-label>Item Thumbnail</ion-label>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonItem, IonLabel, IonThumbnail },
+  });
+</script>
+```

static/usage/thumbnail/theming/angular.md

@@ -0,0 +1,5 @@
+```html
+<ion-thumbnail>
+  <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/demos/api/thumbnail/thumbnail.svg" />
+</ion-thumbnail>
+```