Merge pull request #2 from storybooks/next

merge storybooks to my fork
storybookjs · Mar 26, 2019 · 0f4b04b · 0f4b04b
2 parents b5a7b3d + 7a9e145
commit 0f4b04b
Show file tree

Hide file tree

Showing 124 changed files with 2,920 additions and 1,579 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,93 @@
+## 5.1.0-alpha.17 (March 26, 2019)
+
+### Bug Fixes
+
+* Addon-a11y: move redux to dependencies ([#6286](https://github.com/storybooks/storybook/pull/6286))
+
+## 5.1.0-alpha.16 (March 26, 2019)
+
+### Bug Fixes
+
+* Upgrade `@babel/preset-env` to fix corejs option ([#6281](https://github.com/storybooks/storybook/pull/6281))
+
+## 5.1.0-alpha.15 (March 26, 2019)
+
+### Features
+
+* Addon-a11y: Highlight a11y violations on component ([#6218](https://github.com/storybooks/storybook/pull/6218))
+* HTML: Allow forced renders in @storybook/html   ([#6190](https://github.com/storybooks/storybook/pull/6190))
+
+### Bug Fixes
+
+* Core: Enforces corejs v2 for babel ([#6267](https://github.com/storybooks/storybook/pull/6267))
+* Knobs: Rename ALL panel to Other for ungrouped knobs ([#6232](https://github.com/storybooks/storybook/pull/6232))
+* UI: zoom iframe content instead zoom iframe wrapper ([#6126](https://github.com/storybooks/storybook/pull/6126))
+* Addon-actions: safe render for cyclic obj ([#6240](https://github.com/storybooks/storybook/pull/6240))
+
+### Maintenance
+
+* Addon-knobs: adds an example of a boolean knob ([#6242](https://github.com/storybooks/storybook/pull/6242))
+
+### Dependency Upgrades
+
+* Bump simplebar-react from 0.1.4 to 0.1.5 ([#6226](https://github.com/storybooks/storybook/pull/6226))
+* FIX storybook having a incompatible version of webpack with vue-cli ([#6259](https://github.com/storybooks/storybook/pull/6259))
+
+## 5.1.0-alpha.14 (March 25, 2019)
+
+### Features
+
+* Addon-backgrounds: Add custom grid size ([#6252](https://github.com/storybooks/storybook/pull/6252))
+* Addon-viewport: Show active viewport dimensions & rotate button ([#6045](https://github.com/storybooks/storybook/pull/6045))
+
+### Bug Fixes
+
+* UI: Use Fuse.js package for search ([#6244](https://github.com/storybooks/storybook/pull/6244))
+* React: Use node-logger instead of console ([#6245](https://github.com/storybooks/storybook/pull/6245))
+
+### Maintenance
+
+* Addon-links: Migrate to Typescript ([#6246](https://github.com/storybooks/storybook/pull/6246))
+
+### Dependency Upgrades
+
+* Bump react-resize-detector from 4.0.2 to 4.0.5 ([#6229](https://github.com/storybooks/storybook/pull/6229))
+
+## 5.0.5 (March 25, 2019)
+
+Bump version number (same as 5.0.4, but need to make this `latest` again!)
+
+## 3.4.12 (March 24, 2019)
+
+### Bug Fixes
+
+* UI: Workaround broken treebeard animations ([#6249](https://github.com/storybooks/storybook/pull/6249))
+
+## 5.0.4 (March 24, 2019)
+
+### Bug Fixes
+
+* UI: Fix tooltip event bindings, logger import ([#6238](https://github.com/storybooks/storybook/pull/6238))
+* CLI: Fix stories regexp in config.js ([#6180](https://github.com/storybooks/storybook/pull/6180))
+* Accessibilty: Add missing button titles ([#6124](https://github.com/storybooks/storybook/pull/6124))
+* React: Fix forked CRA support on Windows ([#6236](https://github.com/storybooks/storybook/pull/6236))
+* Addon-knkobs: Fix color type button z-index ([#6203](https://github.com/storybooks/storybook/pull/6203))
+* Angular: Fix typo in demo example  ([#6193](https://github.com/storybooks/storybook/pull/6193))
+* Addon-Info: Restore fonts and color styling ([#6186](https://github.com/storybooks/storybook/pull/6186))
+* Addon-knobs: Fix ObjectType knob react warning ([#6159](https://github.com/storybooks/storybook/pull/6159))
+* Core: Add core-js as a dep to client-api ([#6209](https://github.com/storybooks/storybook/pull/6209))
+* React: Fix logging in cra-config ([#6245](https://github.com/storybooks/storybook/pull/6245))
+
+## 4.1.16 (March 24, 2019)
+
+### Bug Fixes
+
+* UI: Workaround broken treebeard animations ([#6249](https://github.com/storybooks/storybook/pull/6249))
+
+## 4.1.15 (March 24, 2019)
+
+NPM publish failed
+
 ## 5.1.0-alpha.13 (March 23, 2019)
 
 ### Features
@@ -63,6 +153,16 @@
 * Bump ember-cli from 3.7.1 to 3.8.1 ([#6142](https://github.com/storybooks/storybook/pull/6142))
 * Bump markdown-to-jsx from 6.9.1 to 6.9.3 ([#6139](https://github.com/storybooks/storybook/pull/6139))
 
+## 5.0.3 (March 18, 2019)
+
+### Bug Fixes
+
+* Accessibility: Add missing button titles ([#6124](https://github.com/storybooks/storybook/pull/6124))
+
+### Maintenance
+
+* UI: Make update notifications much less aggressive ([#6143](https://github.com/storybooks/storybook/pull/6143))
+
 ## 5.1.0-alpha.9 (March 18, 2019)
 
 ### Maintenance

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.1.0-alpha.13",
+  "version": "5.1.0-alpha.17",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,22 +26,25 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.13",
-    "@storybook/api": "5.1.0-alpha.13",
-    "@storybook/client-logger": "5.1.0-alpha.13",
-    "@storybook/components": "5.1.0-alpha.13",
-    "@storybook/core-events": "5.1.0-alpha.13",
-    "@storybook/theming": "5.1.0-alpha.13",
+    "@storybook/addons": "5.1.0-alpha.17",
+    "@storybook/api": "5.1.0-alpha.17",
+    "@storybook/client-logger": "5.1.0-alpha.17",
+    "@storybook/components": "5.1.0-alpha.17",
+    "@storybook/core-events": "5.1.0-alpha.17",
+    "@storybook/theming": "5.1.0-alpha.17",
     "axe-core": "^3.2.2",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
     "react": "^16.8.4",
+    "react-redux": "^6.0.1",
+    "redux": "^4.0.1",
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/common-tags": "^1.8.0"
+    "@types/common-tags": "^1.8.0",
+    "@types/react-redux": "^7.0.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/addons/a11y/src/components/A11YPanel.tsx b/addons/a11y/src/components/A11YPanel.tsx
@@ -11,6 +11,15 @@ import { Tabs } from './Tabs';
 import { EVENTS } from '../constants';
 import { API } from '@storybook/api';
 
+import { Provider } from 'react-redux';
+import store, { clearElements } from '../redux-config';
+
+export enum RuleType {
+  VIOLATION,
+  PASS,
+  INCOMPLETION,
+}
+
 const Icon = styled(Icons)(
   {
     height: '12px',
@@ -81,13 +90,14 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
     const { active } = this.props;
 
     if (!prevProps.active && active) {
+      // removes all elements from the redux map in store from the previous panel
+      store.dispatch(clearElements(null));
       this.request();
     }
   }
 
   componentWillUnmount() {
     const { api } = this.props;
-
     api.off(STORY_RENDERED, this.request);
     api.off(EVENTS.RESULT, this.onUpdate);
   }
@@ -151,46 +161,62 @@ export class A11YPanel extends Component<A11YPanelProps, A11YPanelState> {
 
     return active ? (
       <Fragment>
-        {status === 'running' ? (
-          <Loader />
-        ) : (
-          <ScrollArea vertical horizontal>
-            <Tabs
-              key="tabs"
-              tabs={[
-                {
-                  label: <Violations>{violations.length} Violations</Violations>,
-                  panel: (
-                    <Report
-                      name="violations"
-                      passes={false}
-                      items={violations}
-                      empty="No a11y violations found."
-                    />
-                  ),
-                },
-                {
-                  label: <Passes>{passes.length} Passes</Passes>,
-                  panel: (
-                    <Report name={'passes'} passes items={passes} empty="No a11y check passed." />
-                  ),
-                },
-                {
-                  label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
-                  panel: (
-                    <Report
-                      name="incomplete"
-                      passes={false}
-                      items={incomplete}
-                      empty="No a11y incomplete found."
-                    />
-                  ),
-                },
-              ]}
-            />
-          </ScrollArea>
-        )}
-        <ActionBar key="actionbar" actionItems={[{ title: actionTitle, onClick: this.request }]} />
+        <Provider store={store}>
+          {status === 'running' ? (
+            <Loader />
+          ) : (
+            <ScrollArea vertical horizontal>
+              <Tabs
+                key="tabs"
+                tabs={[
+                  {
+                    label: <Violations>{violations.length} Violations</Violations>,
+                    panel: (
+                      <Report
+                        passes={false}
+                        items={violations}
+                        type={RuleType.VIOLATION}
+                        empty="No a11y violations found."
+                      />
+                    ),
+                    items: violations,
+                    type: RuleType.VIOLATION,
+                  },
+                  {
+                    label: <Passes>{passes.length} Passes</Passes>,
+                    panel: (
+                      <Report
+                        passes
+                        items={passes}
+                        type={RuleType.PASS}
+                        empty="No a11y check passed."
+                      />
+                    ),
+                    items: passes,
+                    type: RuleType.PASS,
+                  },
+                  {
+                    label: <Incomplete>{incomplete.length} Incomplete</Incomplete>,
+                    panel: (
+                      <Report
+                        passes={false}
+                        items={incomplete}
+                        type={RuleType.INCOMPLETION}
+                        empty="No a11y incomplete found."
+                      />
+                    ),
+                    items: incomplete,
+                    type: RuleType.INCOMPLETION,
+                  },
+                ]}
+              />
+            </ScrollArea>
+          )}
+          <ActionBar
+            key="actionbar"
+            actionItems={[{ title: actionTitle, onClick: this.request }]}
+          />
+        </Provider>
       </Fragment>
     ) : null;
   }

diff --git a/addons/a11y/src/components/Report/Elements.tsx b/addons/a11y/src/components/Report/Elements.tsx
@@ -4,31 +4,48 @@ import { styled } from '@storybook/theming';
 
 import { NodeResult } from 'axe-core';
 import { Rules } from './Rules';
+import { RuleType } from '../A11YPanel';
+import HighlightToggle from './HighlightToggle';
 
 const Item = styled.li({
   fontWeight: 600,
 });
-const ItemTitle = styled.span({
-  borderBottom: '1px solid rgb(130, 130, 130)',
+
+const ItemTitle = styled.span(({ theme }) => ({
+  borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
   display: 'inline-block',
-  paddingBottom: '4px',
-  marginBottom: '4px',
+  paddingBottom: '6px',
+  marginBottom: '6px',
+}));
+
+const HighlightToggleElement = styled.span({
+  fontWeight: 'normal',
+  float: 'right',
+  paddingRight: '15px',
+  input: { margin: 0, },
 });
 
 interface ElementProps {
   element: NodeResult;
   passes: boolean;
+  type: RuleType;
 }
 
-const Element: FunctionComponent<ElementProps> = ({ element, passes }) => {
+const Element: FunctionComponent<ElementProps> = ({ element, passes, type }) => {
   const { any, all, none } = element;
-
   const rules = [...any, ...all, ...none];
+  const highlightToggleId = `${type}-${element.target[0]}`;
+  const highlightLabel = `Highlight`;
 
   return (
     <Item>
-      <ItemTitle>{element.target[0]}</ItemTitle>
+      <ItemTitle>
+        {element.target[0]}
+        <HighlightToggleElement>
+          <HighlightToggle toggleId={highlightToggleId} type={type} elementsToHighlight={[element]} label={highlightLabel} />
+        </HighlightToggleElement>
+      </ItemTitle>
       <Rules rules={rules} passes={passes} />
     </Item>
   );
@@ -37,12 +54,13 @@ const Element: FunctionComponent<ElementProps> = ({ element, passes }) => {
 interface ElementsProps {
   elements: NodeResult[];
   passes: boolean;
+  type: RuleType;
 }
 
-export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes }) => (
+export const Elements: FunctionComponent<ElementsProps> = ({ elements, passes, type }) => (
   <ol>
     {elements.map((element, index) => (
-      <Element passes={passes} element={element} key={index} />
+      <Element passes={passes} element={element} key={index} type={type} />
     ))}
   </ol>
 );
diff --git a/addons/a11y/src/components/Report/HighlightToggle.test.js b/addons/a11y/src/components/Report/HighlightToggle.test.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import HighlightToggle from './HighlightToggle.tsx';
+import store from '../../redux-config.tsx';
+
+function ThemedHighlightToggle(props) {
+  return (
+    <ThemeProvider theme={convert(themes.normal)}>
+      <HighlightToggle {...props} />
+    </ThemeProvider>
+  );
+}
+
+describe('HighlightToggle component', () => {
+  test('should render', () => {
+    // given
+    const wrapper = mount(
+      <Provider store={store}>
+        <ThemedHighlightToggle />
+      </Provider>
+    );
+
+    // then
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('should match snapshot', () => {
+    // given
+    const wrapper = mount(
+      <Provider store={store}>
+        <ThemedHighlightToggle />
+      </Provider>
+    );
+
+    // then
+    expect(wrapper).toMatchSnapshot();
+  });
+});