Merge branch 'next' into a11y-design-enhancements

# Conflicts:
#	addons/a11y/package.json
#	addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

.github/automention.yml

@@ -0,0 +1,12 @@
+'app: angular': ['kroeder', 'igor-dv']
+'app: react-native': ['benoitdion']
+'app: vue': ['backbone87']
+'api: addons': ['ndelangen']
+'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
+'addon: storysource': ['igor-dv', 'libetl']
+'addon: knobs': ['leoyli']
+typescript: ['kroeder', 'gaetanmaisse', 'ndelangen']
+theming: ['ndelangen', 'domyen']
+cra: ['mrmckeb']
+cli: ['Keraito']
+dependencies: ['ndelangen']

.github/main.workflow

@@ -1,3 +1,9 @@
+action "Danger JS" {
+  uses = "danger/danger-js@master"
+  secrets = ["GITHUB_TOKEN"]
+  args = "--dangerfile .ci/danger/dangerfile.ts"
+}
+
 workflow "Dangerfile JS Pull" {
   on = "pull_request"
   resolves = "Danger JS"
@@ -8,8 +14,19 @@ workflow "Dangerfile JS Label" {
   resolves = "Danger JS"
 }
 
-action "Danger JS" {
-  uses = "danger/danger-js@master"
+# ===
+
+action "Automention" {
+  uses = "shilman/automention@master"
   secrets = ["GITHUB_TOKEN"]
-  args = "--dangerfile .ci/danger/dangerfile.ts"
+}
+
+workflow "Automention Issues" {
+  on = "issues"
+  resolves = "Automention"
+}
+
+workflow "Automention PRs" {
+  on = "pull_request"
+  resolves = "Automention"
 }

CONTRIBUTING.md

@@ -90,7 +90,7 @@ After that, the `run` directory content will be compared with `snapshots`. You c
 
 In that case, please check the git diff before committing to make sure it only contains the intended changes.
 
-#### 2c. Link `storybook` and any other required dependencies:
+#### 2c. Link `storybook` and any other required dependencies
 
 If you want to test your own existing project using the GitHub version of storybook, you need to `link` the packages you use in your project.
 

MIGRATION.md

@@ -1,6 +1,6 @@
 # Migration
 
-- [From version 4.0.x to 5.1.x](#from-version-40x-to-51x)
+- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
   - [React native server](#react-native-server)
 - [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
   - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
@@ -53,7 +53,7 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
-## From version 4.1.x to 5.1.x
+## From version 5.0.x to 5.1.x
 
 ### React native server
 

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.1.0-alpha.22",
+  "version": "5.1.0-alpha.30",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,20 +26,20 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.22",
-    "@storybook/api": "5.1.0-alpha.22",
-    "@storybook/client-logger": "5.1.0-alpha.22",
-    "@storybook/components": "5.1.0-alpha.22",
-    "@storybook/core-events": "5.1.0-alpha.22",
-    "@storybook/theming": "5.1.0-alpha.22",
+    "@storybook/addons": "5.1.0-alpha.30",
+    "@storybook/api": "5.1.0-alpha.30",
+    "@storybook/client-logger": "5.1.0-alpha.30",
+    "@storybook/components": "5.1.0-alpha.30",
+    "@storybook/core-events": "5.1.0-alpha.30",
+    "@storybook/theming": "5.1.0-alpha.30",
     "axe-core": "^3.2.2",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "hoist-non-react-statics": "^3.3.0",
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",
-    "react-redux": "^6.0.1",
+    "react-redux": "^7.0.2",
     "react-sizeme": "^2.5.2",
     "redux": "^4.0.1",
     "util-deprecate": "^1.0.2"

addons/a11y/src/components/ColorBlindness.tsx

@@ -114,6 +114,7 @@ export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnes
         onVisibilityChange={this.onVisibilityChange}
         tooltip={<TooltipLinkList links={colorList} />}
         closeOnClick
+        onDoubleClick={() => this.setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
           <Icons icon="mirror" />

addons/a11y/src/components/Report/Rules.tsx

@@ -75,7 +75,7 @@ const formatSeverityText = (severity: string) => {
 };
 
 const Rule: FunctionComponent<RuleProps> = ({ rule }) => {
-  let badgeType = '';
+  let badgeType: any = null;
   switch (rule.impact) {
     case ImpactValue.CRITICAL:
       badgeType = 'critical';

addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap

@@ -125,6 +125,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
             "app": "#F6F9FC",
             "bar": "#FFFFFF",
             "content": "#FFFFFF",
+            "critical": "#FF4400",
             "gridCellSize": 10,
             "hoverable": "rgba(0,0,0,.05)",
             "negative": "#FEDED2",
@@ -256,6 +257,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
           "color": Object {
             "ancillary": "#22a699",
             "border": "rgba(0,0,0,.1)",
+            "critical": "#FFFFFF",
             "dark": "#666666",
             "darker": "#444444",
             "darkest": "#333333",
@@ -316,7 +318,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
         }
       }
     >
-      <Connect(HighlightToggle)>
+      <ConnectFunction>
         <HighlightToggle
           addElement={[Function]}
           elementsToHighlight={Array []}
@@ -341,7 +343,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
             />
           </Styled(input)>
         </HighlightToggle>
-      </Connect(HighlightToggle)>
+      </ConnectFunction>
     </ThemeProvider>
   </ThemedHighlightToggle>
 </Provider>

addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

@@ -63,12 +63,12 @@ exports[`A11YPanel should render loader when it's running 1`] = `
     <div
       className="emotion-4"
     >
-      <Styled(Icon)
+      <Styled(Icons)
         icon="sync"
         inline={true}
         status="running"
       >
-        <Icon
+        <Icons
           className="emotion-2"
           icon="sync"
           inline={true}
@@ -94,8 +94,8 @@ exports[`A11YPanel should render loader when it's running 1`] = `
               </Styled(path)>
             </svg>
           </Svg>
-        </Icon>
-      </Styled(Icon)>
+        </Icons>
+      </Styled(Icons)>
        Please wait while a11y scan is running ...
     </div>
   </Component>

addons/a11y/src/typings.d.ts

@@ -1,4 +1,2 @@
-// TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
 declare module 'react-sizeme';

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.1.0-alpha.22",
+  "version": "5.1.0-alpha.30",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -21,11 +21,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.22",
-    "@storybook/api": "5.1.0-alpha.22",
-    "@storybook/components": "5.1.0-alpha.22",
-    "@storybook/core-events": "5.1.0-alpha.22",
-    "@storybook/theming": "5.1.0-alpha.22",
+    "@storybook/addons": "5.1.0-alpha.30",
+    "@storybook/api": "5.1.0-alpha.30",
+    "@storybook/components": "5.1.0-alpha.30",
+    "@storybook/core-events": "5.1.0-alpha.30",
+    "@storybook/theming": "5.1.0-alpha.30",
     "core-js": "^2.6.5",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",

addons/actions/src/typings.d.ts

@@ -1,4 +1,3 @@
 // TODO: following packages need definition files or a TS migration
-declare module '@storybook/components';
 declare module 'global';
 declare module 'react-inspector';

addons/backgrounds/README.md

@@ -83,3 +83,14 @@ storiesOf('Button', module)
     backgrounds: { disable: true },
   });
 ```
+
+## Events
+
+If you want to react to a background change—for instance to implement some custom logic in your Storybook—you can subscribe to the `storybook/background/update` event. It will be emitted when the user changes the background.
+
+```js
+addonAPI.getChannel().on('storybook/background/update', (bg) => {
+  console.log('Background color', bg.selected);
+  console.log('Background name', bg.name);
+});
+```

addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "5.1.0-alpha.22",
+  "version": "5.1.0-alpha.30",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -25,12 +25,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.22",
-    "@storybook/api": "5.1.0-alpha.22",
-    "@storybook/client-logger": "5.1.0-alpha.22",
-    "@storybook/components": "5.1.0-alpha.22",
-    "@storybook/core-events": "5.1.0-alpha.22",
-    "@storybook/theming": "5.1.0-alpha.22",
+    "@storybook/addons": "5.1.0-alpha.30",
+    "@storybook/api": "5.1.0-alpha.30",
+    "@storybook/client-logger": "5.1.0-alpha.30",
+    "@storybook/components": "5.1.0-alpha.30",
+    "@storybook/core-events": "5.1.0-alpha.30",
+    "@storybook/theming": "5.1.0-alpha.30",
     "core-js": "^2.6.5",
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",

addons/backgrounds/src/constants.ts

@@ -1,2 +1,6 @@
 export const ADDON_ID = 'storybook/background';
 export const PARAM_KEY = 'backgrounds';
+
+export const EVENTS = {
+  UPDATE: `${ADDON_ID}/update`,
+};

addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import memoize from 'memoizerific';
 
-import { Combo, Consumer } from '@storybook/api';
+import { Combo, Consumer, API } from '@storybook/api';
 import { Global, Theme } from '@storybook/theming';
 
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { PARAM_KEY } from '../constants';
+import { PARAM_KEY, EVENTS } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
 
 interface Item {
@@ -31,12 +31,12 @@ const createBackgroundSelectorItem = memoize(1000)(
     name: string,
     value: string,
     hasSwatch: boolean,
-    change: (arg: { selected: string; expanded: boolean }) => void
+    change: (arg: { selected: string; name: string }) => void
   ): Item => ({
     id: id || name,
     title: name,
     onClick: () => {
-      change({ selected: value, expanded: false });
+      change({ selected: value, name });
     },
     value,
     right: hasSwatch ? <ColorIcon background={value} /> : undefined,
@@ -96,13 +96,16 @@ interface State {
   expanded: boolean;
 }
 
-export class BackgroundSelector extends Component<{}, State> {
+export class BackgroundSelector extends Component<{ api: API }, State> {
   state: State = {
     selected: null,
     expanded: false,
   };
 
-  change = (args: State) => this.setState(args);
+  change = ({ selected, name }: { selected: string; name: string }) => {
+    this.props.api.emit(EVENTS.UPDATE, { selected, name });
+    this.setState({ selected, expanded: false });
+  };
 
   onVisibilityChange = (s: boolean) => {
     if (this.state.expanded !== s) {

addons/backgrounds/src/register.tsx

@@ -4,11 +4,11 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
-    render: () => <BackgroundSelector />,
+    render: () => <BackgroundSelector api={api} />,
   });
 });

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "5.1.0-alpha.22",
+  "version": "5.1.0-alpha.30",
   "description": "Storybook decorator to center components",
   "keywords": [
     "addon",