Add additional device options to addon-viewport

storybookjs · Jul 25, 2018 · 6a91443 · 6a91443
1 parent a57b65b
commit 6a91443
Showing 1 changed file with 56 additions and 5 deletions.
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
@@ -16,6 +16,21 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'desktop',
   },
+  galaxys5: {
+    name: 'Galaxy S5',
+    styles: {
+      height: '640px',
+      width: '360px',
+    },
+    type: 'mobile',
+  },
+  galaxys9: {
+    name: 'Galaxy S9',
+    styles: {
+      height: '1480px',
+      width: '720px',
+    },
+  },
   iphone5: {
     name: 'iPhone 5',
     styles: {
@@ -40,6 +55,20 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  iphone8p: {
+    name: 'iPhone 7 Plus',
+    styles: {
+      height: '960px',
+      width: '540px',
+    },
+  },
+  iphonex: {
+    name: 'iPhone X',
+    styles: {
+      height: '1218px',
+      width: '563px',
+    },
+  },
   ipad: {
     name: 'iPad',
     styles: {
@@ -48,13 +77,21 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'tablet',
   },
-  galaxys5: {
-    name: 'Galaxy S5',
+  ipad10p: {
+    name: 'iPad Pro 10.5-in',
     styles: {
-      height: '640px',
-      width: '360px',
+      height: '1112px',
+      width: '834px',
     },
-    type: 'mobile',
+    type: 'tablet',
+  },
+  ipad12p: {
+    name: 'iPad Pro 12.9-in',
+    styles: {
+      height: '1366px',
+      width: '1024px',
+    },
+    type: 'tablet',
   },
   nexus5x: {
     name: 'Nexus 5X',
@@ -72,5 +109,19 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  pixel: {
+    name: 'Pixel',
+    styles: {
+      height: '960px',
+      width: '540px',
+    },
+  },
+  pixelxl: {
+    name: 'Pixel XL',
+    styles: {
+      height: '1280px',
+      width: '720px',
+    },
+  },
 };
 export const DEFAULT_VIEWPORT = 'responsive';