From cc45a548c6675ab1328abb68efd59cbf9ea7de7b Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 12 Oct 2023 12:19:04 -0500
Subject: [PATCH 1/2] feat(keyboard): replace Codepens with playgrounds using
 modern syntax

---
 docs/developing/keyboard.md                   | 125 +-----------------
 .../usage/v7/keyboard/enterkeyhint/angular.md |  14 ++
 .../usage/v7/keyboard/enterkeyhint/demo.html  |  33 +++++
 .../usage/v7/keyboard/enterkeyhint/index.md   |  17 +++
 .../v7/keyboard/enterkeyhint/javascript.md    |  14 ++
 .../usage/v7/keyboard/enterkeyhint/react.md   |  23 ++++
 static/usage/v7/keyboard/enterkeyhint/vue.md  |  27 ++++
 static/usage/v7/keyboard/inputmode/angular.md |  19 +++
 static/usage/v7/keyboard/inputmode/demo.html  |  44 ++++++
 static/usage/v7/keyboard/inputmode/index.md   |  17 +++
 .../usage/v7/keyboard/inputmode/javascript.md |  19 +++
 static/usage/v7/keyboard/inputmode/react.md   |  28 ++++
 static/usage/v7/keyboard/inputmode/vue.md     |  32 +++++
 13 files changed, 291 insertions(+), 121 deletions(-)
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/angular.md
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/demo.html
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/index.md
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/javascript.md
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/react.md
 create mode 100644 static/usage/v7/keyboard/enterkeyhint/vue.md
 create mode 100644 static/usage/v7/keyboard/inputmode/angular.md
 create mode 100644 static/usage/v7/keyboard/inputmode/demo.html
 create mode 100644 static/usage/v7/keyboard/inputmode/index.md
 create mode 100644 static/usage/v7/keyboard/inputmode/javascript.md
 create mode 100644 static/usage/v7/keyboard/inputmode/react.md
 create mode 100644 static/usage/v7/keyboard/inputmode/vue.md

diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md
index ad0fb4c0eb0..f8e95318870 100644
--- a/docs/developing/keyboard.md
+++ b/docs/developing/keyboard.md
@@ -2,7 +2,6 @@
 title: Keyboard
 ---
 
-import Codepen from '@components/global/Codepen';
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
@@ -28,77 +27,9 @@ For a list of accepted values, see the <a href="https://developer.mozilla.org/en
 
 ### Usage
 
-````mdx-code-block
-<Tabs
-  defaultValue="javascript"
-  groupId="framework"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```html
-<IonItem>
-  <IonLabel>Username or Email</IonLabel>
-  <IonInput inputmode="email"></IonInput>
-</IonItem>
-
-<IonItem>
-  <IonLabel>Enter a number</IonLabel>
-  <IonTextarea inputmode="numeric"></IonTextarea>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<ion-item>
-  <ion-label>Username or Email</ion-label>
-  <ion-input inputmode="email"></ion-input>
-</ion-item>
-
-<ion-item>
-  <ion-label>Enter a number</ion-label>
-  <ion-textarea inputmode="numeric"></ion-textarea>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
+import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';
 
-<Codepen user="ionic" slug="abvJVVv" height="400" />
+<Inputmode />
 
 :::note
 The `inputmode` attribute is supported on devices running Chrome 66+ and iOS Safari 12.2+: https://caniuse.com/#search=inputmode
@@ -114,57 +45,9 @@ For a list of accepted values, see the <a href="https://html.spec.whatwg.org/dev
 
 ### Usage
 
-````mdx-code-block
-<Tabs
-  groupId="framework"
-  defaultValue="javascript"
-  values={[
-    { value: 'javascript', label: 'JavaScript' },
-    { value: 'angular', label: 'Angular' },
-    { value: 'react', label: 'React' },
-    { value: 'vue', label: 'Vue' },
-  ]
-}>
-<TabItem value="javascript">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-<TabItem value="angular">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-<TabItem value="react">
-
-```html
-<IonItem>
-  <IonLabel>Enter search query</IonLabel>
-  <IonInput enterkeyhint="search" type="search"></IonInput>
-</IonItem>
-```
-</TabItem>
-<TabItem value="vue">
-
-```html
-<ion-item>
-  <ion-label>Enter search query</ion-label>
-  <ion-input enterkeyhint="search" type="search"></ion-input>
-</ion-item>
-```
-</TabItem>
-</Tabs>
-````
+import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';
 
-<Codepen user="ionic" slug="GRpWyRB" height="350" />
+<Enterkeyhint />
 
 :::note
 The `enterkeyhint` attribute is supported on devices running Chrome 77+ and iOS Safari 13.4+.
diff --git a/static/usage/v7/keyboard/enterkeyhint/angular.md b/static/usage/v7/keyboard/enterkeyhint/angular.md
new file mode 100644
index 00000000000..a5fe24f6d7c
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/angular.md
@@ -0,0 +1,14 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
+      <code slot="label">enterkeyhint="search"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
+      <code slot="label">enterkeyhint="send"</code>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/keyboard/enterkeyhint/demo.html b/static/usage/v7/keyboard/enterkeyhint/demo.html
new file mode 100644
index 00000000000..139c3fc36e2
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/demo.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Keyboard</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
+                <code slot="label">enterkeyhint="search"</code>
+              </ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
+                <code slot="label">enterkeyhint="send"</code>
+              </ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/keyboard/enterkeyhint/index.md b/static/usage/v7/keyboard/enterkeyhint/index.md
new file mode 100644
index 00000000000..eeadc6869c6
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/index.md
@@ -0,0 +1,17 @@
+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
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/keyboard/enterkeyhint/demo.html"
+/>
diff --git a/static/usage/v7/keyboard/enterkeyhint/javascript.md b/static/usage/v7/keyboard/enterkeyhint/javascript.md
new file mode 100644
index 00000000000..c3ca7469739
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/javascript.md
@@ -0,0 +1,14 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
+      <code slot="label">enterkeyhint="search"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
+      <code slot="label">enterkeyhint="send"</code>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/keyboard/enterkeyhint/react.md b/static/usage/v7/keyboard/enterkeyhint/react.md
new file mode 100644
index 00000000000..44cf3f2ba5c
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonInput } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput enterkeyhint="search" labelPlacement="stacked" placeholder="Enter search query">
+          <code slot="label">enterkeyhint="search"</code>
+        </IonInput>
+      </IonItem>
+      <IonItem>
+        <IonInput enterkeyhint="send" labelPlacement="stacked" placeholder="Type a message">
+          <code slot="label">enterkeyhint="send"</code>
+        </IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
+
diff --git a/static/usage/v7/keyboard/enterkeyhint/vue.md b/static/usage/v7/keyboard/enterkeyhint/vue.md
new file mode 100644
index 00000000000..7753a8be265
--- /dev/null
+++ b/static/usage/v7/keyboard/enterkeyhint/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input enterkeyhint="search" label-placement="stacked" placeholder="Enter search query">
+        <code slot="label">enterkeyhint="search"</code>
+      </ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input enterkeyhint="send" label-placement="stacked" placeholder="Type a message">
+        <code slot="label">enterkeyhint="send"</code>
+      </ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonList, IonItem, IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonList, IonItem, IonInput,
+    },
+  });
+</script>
+```
diff --git a/static/usage/v7/keyboard/inputmode/angular.md b/static/usage/v7/keyboard/inputmode/angular.md
new file mode 100644
index 00000000000..36124635c54
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input inputmode="email" labelPlacement="stacked" placeholder="Enter a username or email address">
+      <code slot="label">inputmode="email"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input inputmode="numeric" labelPlacement="stacked" placeholder="Enter an integer">
+      <code slot="label">inputmode="numeric"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input inputmode="decimal" labelPlacement="stacked" placeholder="Enter a decimal">
+      <code slot="label">inputmode="decimal"</code>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/keyboard/inputmode/demo.html b/static/usage/v7/keyboard/inputmode/demo.html
new file mode 100644
index 00000000000..6361438d6db
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/demo.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Keyboard</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-list {
+        min-width: 320px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
+                <code slot="label">inputmode="email"</code>
+              </ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
+                <code slot="label">inputmode="numeric"</code>
+              </ion-input>
+            </ion-item>
+            <ion-item>
+              <ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
+                <code slot="label">inputmode="decimal"</code>
+              </ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/keyboard/inputmode/index.md b/static/usage/v7/keyboard/inputmode/index.md
new file mode 100644
index 00000000000..44379c3901a
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/index.md
@@ -0,0 +1,17 @@
+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
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/keyboard/inputmode/demo.html"
+/>
diff --git a/static/usage/v7/keyboard/inputmode/javascript.md b/static/usage/v7/keyboard/inputmode/javascript.md
new file mode 100644
index 00000000000..d4be8a190c0
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
+      <code slot="label">inputmode="email"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
+      <code slot="label">inputmode="numeric"</code>
+    </ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
+      <code slot="label">inputmode="decimal"</code>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```
diff --git a/static/usage/v7/keyboard/inputmode/react.md b/static/usage/v7/keyboard/inputmode/react.md
new file mode 100644
index 00000000000..a06d9d411f6
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/react.md
@@ -0,0 +1,28 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonInput } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput inputmode="email" labelPlacement="stacked" placeholder="Enter a username or email address">
+          <code slot="label">inputmode="email"</code>
+        </IonInput>
+      </IonItem>
+      <IonItem>
+        <IonInput inputmode="numeric" labelPlacement="stacked" placeholder="Enter an integer">
+          <code slot="label">inputmode="numeric"</code>
+        </IonInput>
+      </IonItem>
+      <IonItem>
+        <IonInput inputmode="decimal" labelPlacement="stacked" placeholder="Enter a decimal">
+          <code slot="label">inputmode="decimal"</code>
+        </IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```
+
diff --git a/static/usage/v7/keyboard/inputmode/vue.md b/static/usage/v7/keyboard/inputmode/vue.md
new file mode 100644
index 00000000000..15ab0d5148b
--- /dev/null
+++ b/static/usage/v7/keyboard/inputmode/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input inputmode="email" label-placement="stacked" placeholder="Enter a username or email address">
+        <code slot="label">inputmode="email"</code>
+      </ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input inputmode="numeric" label-placement="stacked" placeholder="Enter an integer">
+        <code slot="label">inputmode="numeric"</code>
+      </ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-input inputmode="decimal" label-placement="stacked" placeholder="Enter a decimal">
+        <code slot="label">inputmode="decimal"</code>
+      </ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonList, IonItem, IonInput } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonList, IonItem, IonInput,
+    },
+  });
+</script>
+```

From 8e2be4a1f8eefccf18add6a1a1ddce18f972006c Mon Sep 17 00:00:00 2001
From: amandaesmith3 <amanda.s@ionic.io>
Date: Thu, 12 Oct 2023 12:19:44 -0500
Subject: [PATCH 2/2] lint

---
 static/usage/v7/keyboard/enterkeyhint/react.md | 1 -
 static/usage/v7/keyboard/enterkeyhint/vue.md   | 4 +++-
 static/usage/v7/keyboard/inputmode/react.md    | 1 -
 static/usage/v7/keyboard/inputmode/vue.md      | 4 +++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/static/usage/v7/keyboard/enterkeyhint/react.md b/static/usage/v7/keyboard/enterkeyhint/react.md
index 44cf3f2ba5c..eb088650737 100644
--- a/static/usage/v7/keyboard/enterkeyhint/react.md
+++ b/static/usage/v7/keyboard/enterkeyhint/react.md
@@ -20,4 +20,3 @@ function Example() {
 }
 export default Example;
 ```
-
diff --git a/static/usage/v7/keyboard/enterkeyhint/vue.md b/static/usage/v7/keyboard/enterkeyhint/vue.md
index 7753a8be265..a52b2b90d92 100644
--- a/static/usage/v7/keyboard/enterkeyhint/vue.md
+++ b/static/usage/v7/keyboard/enterkeyhint/vue.md
@@ -20,7 +20,9 @@
 
   export default defineComponent({
     components: {
-      IonList, IonItem, IonInput,
+      IonList,
+      IonItem,
+      IonInput,
     },
   });
 </script>
diff --git a/static/usage/v7/keyboard/inputmode/react.md b/static/usage/v7/keyboard/inputmode/react.md
index a06d9d411f6..5e56f0973bd 100644
--- a/static/usage/v7/keyboard/inputmode/react.md
+++ b/static/usage/v7/keyboard/inputmode/react.md
@@ -25,4 +25,3 @@ function Example() {
 }
 export default Example;
 ```
-
diff --git a/static/usage/v7/keyboard/inputmode/vue.md b/static/usage/v7/keyboard/inputmode/vue.md
index 15ab0d5148b..3a65c04b073 100644
--- a/static/usage/v7/keyboard/inputmode/vue.md
+++ b/static/usage/v7/keyboard/inputmode/vue.md
@@ -25,7 +25,9 @@
 
   export default defineComponent({
     components: {
-      IonList, IonItem, IonInput,
+      IonList,
+      IonItem,
+      IonInput,
     },
   });
 </script>