From 67488b2eca3bef64a4809b1255ee95971dac87a4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 28 Mar 2018 12:20:16 -0400
Subject: [PATCH] docs(action-sheet): add javascript and angular example docs

---
 .../components/action-sheet/docs/angular.md   | 56 +++++++++++++++++++
 .../action-sheet/docs/javascript.md           | 44 +++++++++++++++
 core/src/components/action-sheet/readme.md    | 44 ---------------
 3 files changed, 100 insertions(+), 44 deletions(-)
 create mode 100644 core/src/components/action-sheet/docs/angular.md
 create mode 100644 core/src/components/action-sheet/docs/javascript.md

diff --git a/core/src/components/action-sheet/docs/angular.md b/core/src/components/action-sheet/docs/angular.md
new file mode 100644
index 0000000000..45ffa5ce06
--- /dev/null
+++ b/core/src/components/action-sheet/docs/angular.md
@@ -0,0 +1,56 @@
+```javascript
+import { Component } from '@angular/core';
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'action-sheet-example',
+  templateUrl: 'action-sheet-example.html',
+  styleUrls: ['./action-sheet-example.css'],
+})
+export class ActionSheetExample {
+
+  constructor(public actionSheetController: ActionSheetController) {}
+
+  presentActionSheet() {
+    const actionSheet = this.actionSheetController.create({
+      title: "Albums",
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'arrow-dropright-circle',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        icon: 'close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+
+    actionSheet.present();
+  }
+
+}
+```
diff --git a/core/src/components/action-sheet/docs/javascript.md b/core/src/components/action-sheet/docs/javascript.md
new file mode 100644
index 0000000000..03811422ba
--- /dev/null
+++ b/core/src/components/action-sheet/docs/javascript.md
@@ -0,0 +1,44 @@
+```javascript
+async function presentActionSheet() {
+  const actionSheetController = document.querySelector('ion-action-sheet-controller');
+  await actionSheetController.componentOnReady();
+
+  const actionSheet = await actionSheetController.create({
+    title: "Albums",
+    buttons: [{
+      text: 'Delete',
+      role: 'destructive',
+      icon: 'trash',
+      handler: () => {
+        console.log('Delete clicked');
+      }
+    }, {
+      text: 'Share',
+      icon: 'share',
+      handler: () => {
+        console.log('Share clicked');
+      }
+    }, {
+      text: 'Play (open modal)',
+      icon: 'arrow-dropright-circle',
+      handler: () => {
+        console.log('Play clicked');
+      }
+    }, {
+      text: 'Favorite',
+      icon: 'heart',
+      handler: () => {
+        console.log('Favorite clicked');
+      }
+    }, {
+      text: 'Cancel',
+      icon: 'close',
+      role: 'cancel',
+      handler: () => {
+        console.log('Cancel clicked');
+      }
+    }]
+  });
+  await actionSheet.present();
+}
+```
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 4740ecf8ef..a239cf60f3 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -10,50 +10,6 @@ An action sheet can be created by the [Action Sheet Controller](../../action-she
 
 A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
 
-```javascript
-async function presentBasic() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
-  await actionSheetController.componentOnReady();
-
-  const actionSheetElement = await actionSheetController.create({
-    title: "Albums",
-    buttons: [{
-      text: 'Delete',
-      role: 'destructive',
-      icon: 'trash',
-      handler: () => {
-        console.log('Delete clicked');
-      }
-    }, {
-      text: 'Share',
-      icon: 'share',
-      handler: () => {
-        console.log('Share clicked');
-      }
-    }, {
-      text: 'Play (open modal)',
-      icon: 'arrow-dropright-circle',
-      handler: () => {
-        console.log('Play clicked');
-      }
-    }, {
-      text: 'Favorite',
-      icon: 'heart',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheetElement.present();
-}
-```
 
 <!-- Auto Generated Below -->