Update viewport addon documentation

addons/viewport/README.md

@@ -26,12 +26,60 @@ import '@storybook/addon-viewport/register'
 
 This will register the Viewport Addon to Storybook and will show up in the action area.
 
-## FAQ
+## Add New Device
 
-#### How do I add a new device?
+After importing the Storybook Viewport Addon in the `addons.js` file as described earlier, you need to add the new device in the `config.js` file in your `.storybook` directory.
 
-Unfortunately, this is currently not supported.
+```js
+import { addViewports } from '@storybook/addon-viewport';
+
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+addViewports(newViewports);
+```
+
+This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices
+
+## Use Completely New Set of Devices
 
-#### How can I make a custom screen size?
+You can replace the entire devices with your own set by simply calling `setViewports` in `config.js` file.
+
+```js
+import { setViewports } from '@storybook/addon-viewport';
+
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+setViewports(newViewports);
+```
 
-Unfortunately, this is currently not supported.
+This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD`