storybook-amp
Version:
Storybook addon for AMP Html. Allows to display in your stories AMP Html components generated with React.
77 lines (76 loc) • 3.07 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PanelContent = void 0;
var _react = _interopRequireDefault(require("react"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _components = require("@storybook/components");
var _getBase64ForAMPValidator = _interopRequireDefault(require("../utils/getBase64ForAMPValidator"));
var _getHtmlFormatForType = _interopRequireDefault(require("../utils/getHtmlFormatForType"));
var _getAmpLabelForType = _interopRequireDefault(require("../utils/getAmpLabelForType"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Tooltip = function Tooltip(_ref) {
var onHide = _ref.onHide;
return /*#__PURE__*/_react["default"].createElement(_components.TooltipMessage, {
title: "Use Online Validator",
desc: "Validate story using online Amp Validator: https://validator.ampproject.org/"
});
};
var PanelContent = function PanelContent(_ref2) {
var data = _ref2.data;
if (!data) {
return null;
}
var type = data.type,
html = data.html,
isValid = data.isValid;
var handleValidate = function handleValidate() {
var htmlFormat = (0, _getHtmlFormatForType["default"])(type);
window.open("https://validator.ampproject.org/#doc=".concat((0, _getBase64ForAMPValidator["default"])(html)).concat(htmlFormat ? "&htmlFormat=".concat(htmlFormat) : ''), "_newtab" + Date.now());
};
var typeLabel = (0, _getAmpLabelForType["default"])(type);
var outputTabTitle = "Output".concat(typeLabel ? " (".concat(typeLabel, ")") : '');
return /*#__PURE__*/_react["default"].createElement(_components.Tabs, {
id: "storybook-amp-panel-options",
backgroundColor: "rgba(0, 0, 0, 0.05)",
selected: "tabHtmlCode",
absolute: true,
tools: /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: "flex",
alignItems: "center"
}
}, html && /*#__PURE__*/_react["default"].createElement(_components.WithTooltip, {
placement: "auto",
trigger: "hover",
tooltip: /*#__PURE__*/_react["default"].createElement(Tooltip, null)
}, /*#__PURE__*/_react["default"].createElement(_components.Button, {
small: true,
outline: true,
type: "button",
onClick: function onClick(e) {
return handleValidate(e);
}
// style={{ backgroundColor: theme.barBg }}
}, "Validate")))
}, /*#__PURE__*/_react["default"].createElement("div", {
id: "tabHtmlCode",
title: outputTabTitle,
color: "#888"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "storybook-amp-source-code"
}, html === null ? /*#__PURE__*/_react["default"].createElement("div", {
style: {
padding: 10
}
}, "Loading ...") : /*#__PURE__*/_react["default"].createElement(_components.SyntaxHighlighter, {
language: "html",
showLineNumbers: true,
format: true,
copyable: true,
bordered: false,
padded: true
}, html))));
};
exports.PanelContent = PanelContent;