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

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

import React from "react";
import { styled, themes, convert } from "@storybook/theming";
import { TabsState, Button } from "@storybook/components";
import { List } from "./List";
export var RequestDataButton = styled(Button)({
  marginTop: "1rem"
});

/**
 * Checkout https://github.com/storybookjs/storybook/blob/next/addons/jest/src/components/Panel.tsx
 * for a real world example
 */
export 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.createElement(TabsState, {
    initial: "polite",
    backgroundColor: convert(themes.normal).background.hoverable
  }, /*#__PURE__*/React.createElement("div", {
    id: "polite",
    title: "".concat(politeChanges.length, " Polite"),
    color: convert(themes.normal).color.warning
  }, /*#__PURE__*/React.createElement(List, {
    items: politeChanges
  })), /*#__PURE__*/React.createElement("div", {
    id: "assertive",
    title: "".concat(assertiveChanges.length, " Assertive"),
    color: convert(themes.normal).color.negative
  }, /*#__PURE__*/React.createElement(List, {
    items: assertiveChanges
  })));
};