Add additional device options to addon-viewport

storybookjs · Jul 25, 2018 · 205582a · 205582a
1 parent a57b65b
commit 205582a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -360,7 +360,7 @@ describe('Viewport/Panel', () => {
     });
 
     it('passes the children', () => {
-      expect(select.props().children).toHaveLength(8);
+      expect(select.props().children).toHaveLength(15);
     });
 
     it('onChange it updates the viewport', () => {

diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
@@ -40,6 +40,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,6 +62,22 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'tablet',
   },
+  ipad10p: {
+    name: 'iPad Pro 10.5-in',
+    styles: {
+      height: '1112px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
+  ipad12p: {
+    name: 'iPad Pro 12.9-in',
+    styles: {
+      height: '1366px',
+      width: '1024px',
+    },
+    type: 'tablet',
+  },
   galaxys5: {
     name: 'Galaxy S5',
     styles: {
@@ -56,6 +86,13 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  galaxys9: {
+    name: 'Galaxy S9',
+    styles: {
+      height: '1480px',
+      width: '720px',
+    },
+  },
   nexus5x: {
     name: 'Nexus 5X',
     styles: {
@@ -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';