@storybook/addon-a11y 7.0.0-alpha.4 → 7.0.0-alpha.7

package/dist/cjs/components/A11yContext.js

@@ -13,6 +13,8 @@ var _api = require("@storybook/api");
 
 var _coreEvents = require("@storybook/core-events");
 
+var _addonHighlight = require("@storybook/addon-highlight");
+
 var _constants = require("../constants");
 
 const _excluded = ["active"];
@@ -58,9 +60,8 @@ const A11yContextProvider = _ref => {
   const [results, setResults] = (0, _api.useAddonState)(_constants.ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState([]);
-  const {
-    storyId
-  } = (0, _api.useStorybookState)();
+  const api = (0, _api.useStorybookApi)();
+  const storyEntry = api.getCurrentStoryData();
   const handleToggleHighlight = React.useCallback((target, highlight) => {
     setHighlighted(prevHighlighted => highlight ? [...prevHighlighted, ...target] : prevHighlighted.filter(t => !target.includes(t)));
   }, []);
@@ -76,25 +77,25 @@ const A11yContextProvider = _ref => {
   }, []);
   const handleReset = React.useCallback(() => {
     setTab(0);
-    setResults(defaultResult); // Highlights is cleared by a11yHighlights.ts
+    setResults(defaultResult); // Highlights is cleared by addon-highlight
   }, []);
   const emit = (0, _api.useChannel)({
     [_coreEvents.STORY_RENDERED]: handleRun,
     [_coreEvents.STORY_CHANGED]: handleReset
   });
   React.useEffect(() => {
-    emit(_constants.EVENTS.HIGHLIGHT, {
+    emit(_addonHighlight.HIGHLIGHT, {
       elements: highlighted,
       color: colorsByType[tab]
     });
   }, [highlighted, tab]);
   React.useEffect(() => {
-    if (active) {
-      handleRun(storyId);
+    if (active && storyEntry?.type === 'story') {
+      handleRun(storyEntry.id);
     } else {
       handleClearHighlights();
     }
-  }, [active, handleClearHighlights, emit, storyId]);
+  }, [active, handleClearHighlights, emit, storyEntry]);
   if (!active) return null;
   return /*#__PURE__*/React.createElement(A11yContext.Provider, _extends({
     value: {

package/dist/cjs/constants.js

@@ -3,27 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PARAM_KEY = exports.PANEL_ID = exports.HIGHLIGHT_STYLE_ID = exports.EVENTS = exports.ADDON_ID = void 0;
+exports.PARAM_KEY = exports.PANEL_ID = exports.EVENTS = exports.ADDON_ID = void 0;
 const ADDON_ID = 'storybook/a11y';
 exports.ADDON_ID = ADDON_ID;
 const PANEL_ID = `${ADDON_ID}/panel`;
 exports.PANEL_ID = PANEL_ID;
 const PARAM_KEY = `a11y`;
 exports.PARAM_KEY = PARAM_KEY;
-const HIGHLIGHT_STYLE_ID = 'a11yHighlight';
-exports.HIGHLIGHT_STYLE_ID = HIGHLIGHT_STYLE_ID;
 const RESULT = `${ADDON_ID}/result`;
 const REQUEST = `${ADDON_ID}/request`;
 const RUNNING = `${ADDON_ID}/running`;
 const ERROR = `${ADDON_ID}/error`;
 const MANUAL = `${ADDON_ID}/manual`;
-const HIGHLIGHT = `${ADDON_ID}/highlight`;
 const EVENTS = {
   RESULT,
   REQUEST,
   RUNNING,
   ERROR,
-  MANUAL,
-  HIGHLIGHT
+  MANUAL
 };
 exports.EVENTS = EVENTS;

package/dist/cjs/index.js

@@ -21,20 +21,6 @@ var _tsDedent = _interopRequireDefault(require("ts-dedent"));
 
 var _constants = require("./constants");
 
-var _highlight = require("./highlight");
-
-Object.keys(_highlight).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _highlight[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _highlight[key];
-    }
-  });
-});
-
 var _params = require("./params");
 
 Object.keys(_params).forEach(function (key) {

package/dist/cjs/manager.js

@@ -26,11 +26,9 @@ _addons.addons.register(_constants.ADDON_ID, api => {
 
   _addons.addons.add(_constants.PANEL_ID, {
     title() {
-      var _addonState$violation, _addonState$incomplet;
-
-      const addonState = api === null || api === void 0 ? void 0 : api.getAddonState(_constants.ADDON_ID);
-      const violationsNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$violation = addonState.violations) === null || _addonState$violation === void 0 ? void 0 : _addonState$violation.length) || 0;
-      const incompleteNb = (addonState === null || addonState === void 0 ? void 0 : (_addonState$incomplet = addonState.incomplete) === null || _addonState$incomplet === void 0 ? void 0 : _addonState$incomplet.length) || 0;
+      const addonState = api?.getAddonState(_constants.ADDON_ID);
+      const violationsNb = addonState?.violations?.length || 0;
+      const incompleteNb = addonState?.incomplete?.length || 0;
       const totalNb = violationsNb + incompleteNb;
       return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
     },

package/dist/cjs/preview.js

@@ -1,5 +1,3 @@
 "use strict";
 
-require("./a11yRunner");
-
-require("./a11yHighlight");
+require("./a11yRunner");

package/dist/esm/components/A11yContext.js

@@ -6,8 +6,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
-import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
+import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
+import { HIGHLIGHT } from '@storybook/addon-highlight';
 import { ADDON_ID, EVENTS } from '../constants';
 const colorsByType = [convert(themes.normal).color.negative, // VIOLATION,
 convert(themes.normal).color.positive, // PASS,
@@ -40,9 +41,8 @@ export const A11yContextProvider = _ref => {
   const [results, setResults] = useAddonState(ADDON_ID, defaultResult);
   const [tab, setTab] = React.useState(0);
   const [highlighted, setHighlighted] = React.useState([]);
-  const {
-    storyId
-  } = useStorybookState();
+  const api = useStorybookApi();
+  const storyEntry = api.getCurrentStoryData();
   const handleToggleHighlight = React.useCallback((target, highlight) => {
     setHighlighted(prevHighlighted => highlight ? [...prevHighlighted, ...target] : prevHighlighted.filter(t => !target.includes(t)));
   }, []);
@@ -58,25 +58,25 @@ export const A11yContextProvider = _ref => {
   }, []);
   const handleReset = React.useCallback(() => {
     setTab(0);
-    setResults(defaultResult); // Highlights is cleared by a11yHighlights.ts
+    setResults(defaultResult); // Highlights is cleared by addon-highlight
   }, []);
   const emit = useChannel({
     [STORY_RENDERED]: handleRun,
     [STORY_CHANGED]: handleReset
   });
   React.useEffect(() => {
-    emit(EVENTS.HIGHLIGHT, {
+    emit(HIGHLIGHT, {
       elements: highlighted,
       color: colorsByType[tab]
     });
   }, [highlighted, tab]);
   React.useEffect(() => {
-    if (active) {
-      handleRun(storyId);
+    if (active && storyEntry?.type === 'story') {
+      handleRun(storyEntry.id);
     } else {
       handleClearHighlights();
     }
-  }, [active, handleClearHighlights, emit, storyId]);
+  }, [active, handleClearHighlights, emit, storyEntry]);
   if (!active) return null;
   return /*#__PURE__*/React.createElement(A11yContext.Provider, _extends({
     value: {

package/dist/esm/constants.js

@@ -1,18 +1,15 @@
 export const ADDON_ID = 'storybook/a11y';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `a11y`;
-export const HIGHLIGHT_STYLE_ID = 'a11yHighlight';
 const RESULT = `${ADDON_ID}/result`;
 const REQUEST = `${ADDON_ID}/request`;
 const RUNNING = `${ADDON_ID}/running`;
 const ERROR = `${ADDON_ID}/error`;
 const MANUAL = `${ADDON_ID}/manual`;
-const HIGHLIGHT = `${ADDON_ID}/highlight`;
 export const EVENTS = {
   RESULT,
   REQUEST,
   RUNNING,
   ERROR,
-  MANUAL,
-  HIGHLIGHT
+  MANUAL
 };

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 export { PARAM_KEY } from './constants';
-export * from './highlight';
 export * from './params';
 
 if (module && module.hot && module.hot.decline) {

package/dist/esm/preview.js

@@ -1,2 +1 @@
-import './a11yRunner';
-import './a11yHighlight';
+import './a11yRunner';

package/dist/types/constants.d.ts

@@ -1,12 +1,10 @@
 export declare const ADDON_ID = "storybook/a11y";
 export declare const PANEL_ID: string;
 export declare const PARAM_KEY = "a11y";
-export declare const HIGHLIGHT_STYLE_ID = "a11yHighlight";
 export declare const EVENTS: {
     RESULT: string;
     REQUEST: string;
     RUNNING: string;
     ERROR: string;
     MANUAL: string;
-    HIGHLIGHT: string;
 };

package/dist/types/index.d.ts

@@ -1,5 +1,4 @@
 import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
 export { PARAM_KEY } from './constants';
-export * from './highlight';
 export * from './params';
 export declare const withA11y: DecoratorFunction<AnyFramework>;

package/dist/types/preview.d.ts

@@ -1,2 +1 @@
 import './a11yRunner';
-import './a11yHighlight';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.4",
+  "version": "7.0.0-alpha.7",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -38,14 +38,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.4",
-    "@storybook/api": "7.0.0-alpha.4",
-    "@storybook/channels": "7.0.0-alpha.4",
-    "@storybook/client-logger": "7.0.0-alpha.4",
-    "@storybook/components": "7.0.0-alpha.4",
-    "@storybook/core-events": "7.0.0-alpha.4",
+    "@storybook/addon-highlight": "7.0.0-alpha.7",
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/channels": "7.0.0-alpha.7",
+    "@storybook/client-logger": "7.0.0-alpha.7",
+    "@storybook/components": "7.0.0-alpha.7",
+    "@storybook/core-events": "7.0.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "7.0.0-alpha.4",
+    "@storybook/theming": "7.0.0-alpha.7",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",
     "global": "^4.4.0",
@@ -72,7 +73,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00",
+  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074",
   "storybook": {
     "displayName": "Accessibility",
     "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",

package/dist/cjs/a11yHighlight.js

@@ -1,48 +0,0 @@
-"use strict";
-
-var _global = _interopRequireDefault(require("global"));
-
-var _addons = require("@storybook/addons");
-
-var _coreEvents = require("@storybook/core-events");
-
-var _constants = require("./constants");
-
-var _highlight = require("./highlight");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  document
-} = _global.default;
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
-
-const channel = _addons.addons.getChannel();
-
-const highlight = infos => {
-  const id = _constants.HIGHLIGHT_STYLE_ID;
-  resetHighlight(); // Make sure there are no duplicated selectors
-
-  const elements = Array.from(new Set(infos.elements));
-  const sheet = document.createElement('style');
-  sheet.setAttribute('id', id);
-  sheet.innerHTML = elements.map(target => `${target}{
-          ${(0, _highlight.highlightStyle)(infos.color)}
-         }`).join(' ');
-  document.head.appendChild(sheet);
-};
-
-const resetHighlight = () => {
-  const id = _constants.HIGHLIGHT_STYLE_ID;
-  const sheetToBeRemoved = document.getElementById(id);
-
-  if (sheetToBeRemoved) {
-    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
-  }
-};
-
-channel.on(_coreEvents.STORY_CHANGED, resetHighlight);
-channel.on(_constants.EVENTS.HIGHLIGHT, highlight);

package/dist/cjs/highlight.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.highlightStyle = exports.highlightObject = void 0;
-
-const highlightStyle = color => `
-  outline: 2px dashed ${color};
-  outline-offset: 2px;
-  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
-`;
-
-exports.highlightStyle = highlightStyle;
-
-const highlightObject = color => ({
-  outline: `2px dashed ${color}`,
-  outlineOffset: 2,
-  boxShadow: '0 0 0 6px rgba(255,255,255,0.6),'
-});
-
-exports.highlightObject = highlightObject;

package/dist/esm/a11yHighlight.js

@@ -1,39 +0,0 @@
-import global from 'global';
-import { addons } from '@storybook/addons';
-import { STORY_CHANGED } from '@storybook/core-events';
-import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';
-import { highlightStyle } from './highlight';
-const {
-  document
-} = global;
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
-
-const channel = addons.getChannel();
-
-const highlight = infos => {
-  const id = HIGHLIGHT_STYLE_ID;
-  resetHighlight(); // Make sure there are no duplicated selectors
-
-  const elements = Array.from(new Set(infos.elements));
-  const sheet = document.createElement('style');
-  sheet.setAttribute('id', id);
-  sheet.innerHTML = elements.map(target => `${target}{
-          ${highlightStyle(infos.color)}
-         }`).join(' ');
-  document.head.appendChild(sheet);
-};
-
-const resetHighlight = () => {
-  const id = HIGHLIGHT_STYLE_ID;
-  const sheetToBeRemoved = document.getElementById(id);
-
-  if (sheetToBeRemoved) {
-    sheetToBeRemoved.parentNode.removeChild(sheetToBeRemoved);
-  }
-};
-
-channel.on(STORY_CHANGED, resetHighlight);
-channel.on(EVENTS.HIGHLIGHT, highlight);

package/dist/esm/highlight.js

@@ -1,10 +0,0 @@
-export const highlightStyle = color => `
-  outline: 2px dashed ${color};
-  outline-offset: 2px;
-  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
-`;
-export const highlightObject = color => ({
-  outline: `2px dashed ${color}`,
-  outlineOffset: 2,
-  boxShadow: '0 0 0 6px rgba(255,255,255,0.6),'
-});

package/dist/types/a11yHighlight.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/highlight.d.ts

@@ -1,6 +0,0 @@
-export declare const highlightStyle: (color: string) => string;
-export declare const highlightObject: (color: string) => {
-    outline: string;
-    outlineOffset: number;
-    boxShadow: string;
-};