grommet/contexts/AnnounceContext/announce-context.stories.js

focus on the essential experience

"use strict";

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react2 = require("@storybook/react");

var _themes = require("grommet/themes");

var _grommet = require("grommet");

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var Announcer = function Announcer(_ref) {
  var announce = _ref.announce,
      message = _ref.message,
      mode = _ref.mode,
      role = _ref.role;

  _react["default"].useEffect(function () {
    var timeout = 3000;
    announce(message, mode, timeout);
  }, [announce, message, mode]);

  return /*#__PURE__*/_react["default"].createElement(_grommet.Text, {
    align: "center",
    role: role,
    "aria-live": mode
  }, message);
};

Announcer.propTypes = {
  announce: _propTypes["default"].func.isRequired,
  message: _propTypes["default"].string,
  mode: _propTypes["default"].string,
  role: _propTypes["default"].string
};
Announcer.defaultProps = {
  message: 'Here is a simple announcement. This will soon disappear',
  mode: 'polite',
  role: 'log'
};

var AnnounceContextComponent = function AnnounceContextComponent(props) {
  return /*#__PURE__*/_react["default"].createElement(_grommet.Grommet, {
    theme: _themes.grommet,
    full: true
  }, /*#__PURE__*/_react["default"].createElement(_grommet.Box, {
    justify: "center",
    align: "center",
    background: "brand",
    fill: true
  }, /*#__PURE__*/_react["default"].createElement(_grommet.Heading, null, "Welcome to announcement section"), /*#__PURE__*/_react["default"].createElement(_grommet.AnnounceContext.Consumer, null, function (announce) {
    return /*#__PURE__*/_react["default"].createElement(Announcer, _extends({
      announce: announce
    }, props));
  })));
};

(0, _react2.storiesOf)('AnnounceContext', module).add('Polite', function () {
  return /*#__PURE__*/_react["default"].createElement(AnnounceContextComponent, null);
}).add('Assertive', function () {
  return /*#__PURE__*/_react["default"].createElement(AnnounceContextComponent, {
    message: "Turn on Accessibility feature to listen to this announcement.  This will soon disappear",
    mode: "assertive",
    role: "alert"
  });
});