Bump storybook and add breakpoint viewports (#7471)

We lost the viewport toggle at some point, looks like it moved to an
addon so I've added it back and mapped it to our breakpoints. This will
help us ship updates to opinionated layout components that change
margins / paddings / orientation etc...at our different breakpoints

![image](https://screenshot.click/20-58-ggs9m-yjs4r.png)


https://user-images.githubusercontent.com/6844391/196984820-4ddbbed1-00e4-4ab0-a1cb-d5a96f049242.mp4

Author: kyledurand

.changeset/spotty-maps-search.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added viewport addon to storybook and matched values to our breakpoints

polaris-react/.storybook/main.js

@@ -18,7 +18,11 @@ module.exports = {
       files: '**/*.stories.tsx',
     },
   ],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-toolbars'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-toolbars',
+    '@storybook/addon-viewport',
+  ],
   webpackFinal: (config) => {
     const extraRules = [
       {

polaris-react/.storybook/preview.js

@@ -5,6 +5,7 @@ import enTranslations from '../locales/en.json';
 import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
 import {gridOptions} from './manager';
+import {breakpoints} from '@shopify/polaris-tokens';
 
 function StrictModeDecorator(Story, context) {
   const {strictMode} = context.globals;
@@ -79,6 +80,17 @@ export const globalTypes = {
   },
   ...gridOptions,
 };
+const viewPorts = Object.entries({
+  ...breakpoints,
+  'breakpoints-xs': '20rem', // Replace the 0px xs breakpoint with 320px (20rem) for testing small screens
+}).map(([key, value]) => {
+  return {
+    name: key,
+    styles: {width: value, height: '100%'},
+  };
+});
+
+export const parameters = {viewport: {viewports: {...viewPorts}}};
 
 export const decorators = [
   GridOverlayDecorator,

polaris-react/package.json

@@ -83,11 +83,12 @@
     "@shopify/postcss-plugin": "^5.0.1",
     "@shopify/react-testing": "^4.1.0",
     "@shopify/storybook-a11y-test": "1.0.1",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-toolbars": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-toolbars": "^6.5.12",
+    "@storybook/addon-viewport": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@types/node": "^16.11.11",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",