@twreporter/universal-header 2.2.15-rc.2 → 2.3.0-rc.0

package/lib/components/channels.js

@@ -7,414 +7,82 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
 
-var _theme = _interopRequireDefault(require("../utils/theme"));
-
-var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
-
-var _channels = require("../constants/channels");
-
-var _fonts = _interopRequireDefault(require("../constants/fonts"));
+var _links = require("../utils/links");
 
-var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
+var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
-var _customizedLink = _interopRequireDefault(require("./customized-link"));
+var _categorySet = require("@twreporter/core/lib/constants/category-set");
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _button = require("@twreporter/react-components/lib/button");
 
-var _css = require("@twreporter/core/lib/utils/css");
+var _icon = require("@twreporter/react-components/lib/icon");
 
-var _color = require("@twreporter/core/lib/constants/color");
-
-var _get = _interopRequireDefault(require("lodash/get"));
+var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var _ = {
-  get: _get["default"],
   map: _map["default"]
 };
-var styles = {
-  itemMargin: {
-    desktop: 0
-  },
-  itemPadding: {
-    row: [8, 16],
-    // px
-    column: [20, 32] // px
 
-  },
-  itemWidth: {
-    row: 'initial',
-    column: '100%'
-  },
-  itemBorderWidth: {
-    row: [0, 0, 0, 1],
-    column: [0, 0, 1, 0]
-  },
-  itemBorderWidthFirstChild: {
-    row: [0, 0, 0, 0],
-    column: [1, 0, 1, 0]
-  },
-  dropdownPosition: {
-    row: 'absolute',
-    column: 'relative'
-  },
-  dropdownTop: {
-    row: "calc(100% + 1px)",
-    column: 0
-  }
-};
-var dropDownMenuEffectCSS = /*#__PURE__*/(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 400ms ease-in 100ms;}"]);
-
-var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "channels__DropDownMenuWrapper",
+var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__Item",
   componentId: "nu2llv-0"
-})(["position:", ";z-index:999;width:100%;left:0;top:", ";", ""], function (props) {
-  return styles.dropdownPosition[props.direction];
-}, function (props) {
-  return styles.dropdownTop[props.direction];
-}, dropDownMenuEffectCSS);
+})(["display:flex;align-items:center;a{text-decoration:none;}"]);
 
-var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "channels__Box",
+var CategoryContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__CategoryContainer",
   componentId: "nu2llv-1"
-})(["width:100%;height:100%;"]);
+})(["display:flex;align-items:center;justify-content:space-between;width:calc(100% - 32px);padding:8px 16px;"]);
 
-var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
-  displayName: "channels__List",
+var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__ChannelContainer",
   componentId: "nu2llv-2"
-})(["height:100%;justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
-  return props.bgColor || 'white';
-}, function (props) {
-  return props.direction;
-}, function (props) {
-  return props.borderColor || _color.colorGrayscale.gray200;
-}, function (props) {
-  return (0, _css.arrayToCssShorthand)(props.borderWidth);
-});
-
-var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
-  displayName: "channels__ListItem",
-  componentId: "nu2llv-3"
-})(["display:flex;flex-direction:", ";position:relative;width:", ";height:100%;font-size:", ";letter-spacing:0.5px;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}", "}"], function (props) {
-  return props.direction;
-}, function (props) {
-  return styles.itemWidth[props.direction];
-}, _fonts["default"].size.base, (0, _css.arrayToCssShorthand)(styles.itemMargin.desktop), function (props) {
-  return props.textShadow;
-}, function (props) {
-  return (0, _css.arrayToCssShorthand)(styles.itemBorderWidth[props.direction]);
-}, function (props) {
-  return (0, _css.arrayToCssShorthand)(styles.itemBorderWidthFirstChild[props.direction]);
-}, _fonts["default"].size.base, _fonts["default"].weight.bold, function (props) {
-  return (0, _css.arrayToCssShorthand)(styles.itemPadding[props.direction]);
-}, function (props) {
-  return props.fontColor;
-}, function (props) {
-  return props.hoverBgColor;
-}, function (props) {
-  return props.hoverFontColor;
-}, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: default;\n    "]))));
-
-var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "channels__ShowOnHover",
-  componentId: "nu2llv-4"
-})(["display:none;", ":hover &{display:flex;}"], ListItem);
-
-var HideOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "channels__HideOnHover",
-  componentId: "nu2llv-5"
-})(["display:flex;", ":hover &{display:none;}"], ListItem);
-
-var invalidDataIndex = -1;
-var dropDownMenuKey = 'dropDownMenu';
-
-var Channels = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Channels, _React$PureComponent);
-
-  var _super = _createSuper(Channels);
-
-  function Channels(props) {
-    var _this;
-
-    _classCallCheck(this, Channels);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname),
-      activeDropdownIndex: invalidDataIndex
-    };
-    _this.handleDropDownChannelClick = _this._handleDropDownChannelClick.bind(_assertThisInitialized(_this));
-    _this.handleNormalChannelClick = _this._handleNormalChannelClick.bind(_assertThisInitialized(_this));
-    _this.handleDropDownMenuClick = _this._handleDropDownMenuClick.bind(_assertThisInitialized(_this));
-    _this.callback = _this._callback.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(Channels, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      if (this.context.hideHeader) {
-        this.setState({
-          activeDropdownIndex: invalidDataIndex
-        });
-      }
-    }
-  }, {
-    key: "_checkWhichChannelActive",
-    value: function _checkWhichChannelActive(currentPathname) {
-      var data = this.props.data;
-      var activeChannelIndex = invalidDataIndex;
-
-      for (var channelIndex = 0; channelIndex < data.length; channelIndex += 1) {
-        var channelItem = data[channelIndex];
-
-        if (currentPathname === channelItem.pathname) {
-          activeChannelIndex = channelIndex;
-          break;
-        }
-
-        if (channelItem.hasOwnProperty(dropDownMenuKey)) {
-          var dropDownMenuArr = channelItem[dropDownMenuKey];
-
-          for (var dropDownIndex = 0; dropDownIndex < dropDownMenuArr.length; dropDownIndex += 1) {
-            if (dropDownMenuArr[dropDownIndex].pathname === currentPathname) {
-              activeChannelIndex = channelIndex;
-              break;
-            }
-          }
-
-          if (activeChannelIndex !== invalidDataIndex) {
-            break;
-          }
-        }
-      }
-
-      return activeChannelIndex;
-    }
-  }, {
-    key: "_handleDropDownChannelClick",
-    value: function _handleDropDownChannelClick(e, channelIndex) {
-      e.preventDefault();
-      var activeDropdownIndex = this.state.activeDropdownIndex;
-      var nextActiveDropdownIndex = channelIndex === activeDropdownIndex ? invalidDataIndex : channelIndex;
-      this.setState({
-        activeDropdownIndex: nextActiveDropdownIndex
-      });
-    }
-  }, {
-    key: "_handleNormalChannelClick",
-    value: function _handleNormalChannelClick(channelIndex) {
-      this.setState({
-        activeDataIndex: channelIndex,
-        activeDropdownIndex: invalidDataIndex
-      });
-      this.callback(channelIndex);
-    }
-  }, {
-    key: "_handleDropDownMenuClick",
-    value: function _handleDropDownMenuClick(parentIndex) {
-      this.setState({
-        activeDataIndex: parentIndex,
-        activeDropdownIndex: invalidDataIndex
-      });
-      this.callback(parentIndex);
-    }
-  }, {
-    key: "_callback",
-    value: function _callback(dataIndex) {
-      var currentActivePathname = dataIndex === invalidDataIndex ? '' : this.props.data[dataIndex].pathname;
-      this.props.callback(currentActivePathname);
-    }
-  }, {
-    key: "_prepareChannelItemJSX",
-    value: function _prepareChannelItemJSX(channelItem, dataIndex, theme) {
-      var _this2 = this;
-
-      var channelLabel = channelItem.label;
-      var channelType = channelItem.type;
-      var channelLink = channelItem.link;
-
-      if (channelType === _channels.channelDropDownType) {
-        var _this$props = this.props,
-            data = _this$props.data,
-            direction = _this$props.direction;
-        var activeDropdownIndex = this.state.activeDropdownIndex;
-        var toShowDropdownMenu = activeDropdownIndex === dataIndex;
-
-        var dropdownMenuData = _.get(data, [dataIndex, dropDownMenuKey], []);
-
-        var dropdownMenuJSX = /*#__PURE__*/_react["default"].createElement(DropDownMenuWrapper, {
-          direction: direction
-        }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
-          "in": toShowDropdownMenu,
-          classNames: "effect",
-          timeout: 400,
-          exit: false,
-          mountOnEnter: true,
-          unmountOnExit: true
-        }, /*#__PURE__*/_react["default"].createElement(_dropDownMenu["default"], {
-          data: dropdownMenuData,
-          onClick: function onClick(e) {
-            return _this2.handleDropDownMenuClick(dataIndex);
-          }
-        })));
-
-        var status = toShowDropdownMenu ? 'collapse' : 'expand';
-
-        var _themeUtils$selectIco = _slicedToArray(_theme["default"].selectIcons(theme)[status], 2),
-            StatusIcon = _themeUtils$selectIco[0],
-            StatusHoverIcon = _themeUtils$selectIco[1];
-
-        var statusIconJSX = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(StatusIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(StatusHoverIcon, null)));
-
-        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
-          onClick: function onClick(e) {
-            return _this2.handleDropDownChannelClick(e, dataIndex);
-          }
-        }, channelLink), channelLabel, statusIconJSX), dropdownMenuJSX);
-      } else {
-        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
-          onClick: function onClick() {
-            return _this2.handleNormalChannelClick(dataIndex);
-          }
-        }, channelLink), channelLabel);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props2 = this.props,
-          data = _this$props2.data,
-          direction = _this$props2.direction,
-          borderWidth = _this$props2.borderWidth,
-          themeFunction = _this$props2.themeFunction;
-
-      var channelsJSX = _.map(data, function (channelItem, dataIndex) {
-        return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, {
-          key: channelItem.key
-        }, function (_ref) {
-          var theme = _ref.theme;
-
-          var _themeFunction = themeFunction(theme),
-              fontColor = _themeFunction.fontColor,
-              hoverFontColor = _themeFunction.hoverFontColor,
-              hoverBgColor = _themeFunction.hoverBgColor;
-
-          var channelItemJSX = _this3._prepareChannelItemJSX(channelItem, dataIndex, theme);
-
-          return /*#__PURE__*/_react["default"].createElement(ListItem, {
-            direction: direction,
-            onClick: _this3.handleClickChannel,
-            fontColor: fontColor,
-            hoverFontColor: hoverFontColor,
-            hoverBgColor: hoverBgColor
-          }, channelItemJSX);
-        });
-      });
-
-      return /*#__PURE__*/_react["default"].createElement(Box, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
-        var theme = _ref2.theme;
-
-        var _themeFunction2 = themeFunction(theme),
-            bgColor = _themeFunction2.bgColor,
-            borderColor = _themeFunction2.borderColor;
-
-        return /*#__PURE__*/_react["default"].createElement(List, {
-          bgColor: bgColor,
-          direction: direction,
-          borderColor: borderColor,
-          borderWidth: borderWidth
-        }, channelsJSX);
-      }));
-    }
-  }]);
-
-  return Channels;
-}(_react["default"].PureComponent);
-
-_defineProperty(Channels, "propTypes", {
-  currentPathname: _propTypes["default"].string.isRequired,
-  data: _propTypes["default"].arrayOf(_propTypes["default"].shape(_defineProperty({
-    key: _propTypes["default"].string,
-    label: _propTypes["default"].string,
-    link: _propTypes["default"].shape(_propTypes2["default"].link.propTypes),
-    pathname: _propTypes["default"].string,
-    type: _propTypes["default"].oneOf([_channels.channelDropDownType, _channels.channelLinkType])
-  }, dropDownMenuKey, _dropDownMenu["default"].propTypes.data))),
-  direction: _propTypes["default"].string,
-  borderWidth: _propTypes["default"].array,
-  themeFunction: _propTypes["default"].func,
-  callback: _propTypes["default"].func
-});
-
-_defineProperty(Channels, "defaultProps", {
-  data: [],
-  direction: 'row',
-  borderWidth: [0, 0, 0, 0],
-  themeFunction: _theme["default"].selectChannelTheme,
-  callback: function callback() {}
-});
-
-_defineProperty(Channels, "contextType", _headerContext["default"]);
+})(["display:flex;flex-direction:column;align-items:center;"]);
+
+var Channel = function Channel(_ref) {
+  var props = _extends({}, _ref);
+
+  var _useContext = (0, _react.useContext)(_headerContext["default"]),
+      isLinkExternal = _useContext.isLinkExternal,
+      releaseBranch = _useContext.releaseBranch,
+      theme = _useContext.theme;
+
+  var CategoryJsx = _.map(_categorySet.CATEGORY_ORDER, function (categoryKey) {
+    var label = _categorySet.CATEGORY_LABEL[categoryKey];
+    var link = (0, _links.getCategoryLink)(isLinkExternal, releaseBranch, "categories/".concat(categoryKey));
+    return /*#__PURE__*/_react["default"].createElement(Item, {
+      key: categoryKey
+    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
+      text: label,
+      size: "L",
+      theme: theme
+    })));
+  });
+
+  var hamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
+    releaseBranch: releaseBranch
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(ChannelContainer, props, /*#__PURE__*/_react["default"].createElement(_divider["default"], null), /*#__PURE__*/_react["default"].createElement(CategoryContainer, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
+    iconComponent: hamburgerIcon,
+    theme: theme
+  }), CategoryJsx), /*#__PURE__*/_react["default"].createElement(_divider["default"], null));
+};
 
-var _default = Channels;
+var _default = Channel;
 exports["default"] = _default;

package/lib/components/channels.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.channel = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _channels = _interopRequireDefault(require("./channels"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _theme = require("@twreporter/core/lib/constants/theme");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-disable react/prop-types */
+var _default = {
+  title: 'Channel',
+  component: _channels["default"],
+  argTypes: {
+    theme: _theme.THEME_STORYBOOK_ARG_TYPE,
+    releaseBranch: _releaseBranch.BRANCH_STORYBOOK_ARG_TYPE
+  }
+};
+exports["default"] = _default;
+
+var channel = function channel(props) {
+  var theme = props.theme,
+      releaseBranch = props.releaseBranch;
+  var context = {
+    theme: theme,
+    releaseBranch: releaseBranch,
+    isLinkExternal: true
+  };
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: context
+  }, /*#__PURE__*/_react["default"].createElement(_channels["default"], null));
+};
+
+exports.channel = channel;