aria-live-storybook-addon/dist/cjs/components/PanelContent.js

Observe and log aria-live region changes in the addon panel

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PanelContent = exports.RequestDataButton = void 0;

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _components = require("@storybook/components");

var _List = require("./List");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var RequestDataButton = (0, _theming.styled)(_components.Button)({
  marginTop: "1rem"
});
exports.RequestDataButton = RequestDataButton;

/**
 * Checkout https://github.com/storybookjs/storybook/blob/next/addons/jest/src/components/Panel.tsx
 * for a real world example
 */
var PanelContent = function PanelContent(_ref) {
  var results = _ref.results;
  var politeChanges = results.changes.filter(function (change) {
    return change.assertiveness === "polite";
  });
  var assertiveChanges = results.changes.filter(function (change) {
    return change.assertiveness === "assertive";
  });
  return /*#__PURE__*/_react["default"].createElement(_components.TabsState, {
    initial: "polite",
    backgroundColor: (0, _theming.convert)(_theming.themes.normal).background.hoverable
  }, /*#__PURE__*/_react["default"].createElement("div", {
    id: "polite",
    title: "".concat(politeChanges.length, " Polite"),
    color: (0, _theming.convert)(_theming.themes.normal).color.warning
  }, /*#__PURE__*/_react["default"].createElement(_List.List, {
    items: politeChanges
  })), /*#__PURE__*/_react["default"].createElement("div", {
    id: "assertive",
    title: "".concat(assertiveChanges.length, " Assertive"),
    color: (0, _theming.convert)(_theming.themes.normal).color.negative
  }, /*#__PURE__*/_react["default"].createElement(_List.List, {
    items: assertiveChanges
  })));
};

exports.PanelContent = PanelContent;