@bigbinary/neeto-molecules 1.1.10 → 1.1.12

package/dist/Sidebar/index.js

@@ -0,0 +1,94 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from "react";
+import classnames from "classnames";
+import { globalProps } from "@bigbinary/neeto-commons-frontend/initializers";
+import { useLocalStorage } from "@bigbinary/neeto-commons-frontend/react-utils";
+import { Button } from "@bigbinary/neetoui";
+import { not } from "ramda";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import AppSwitcher from "./AppSwitcher";
+import Chevron from "./Chevron";
+import Footer from "./Footer";
+import Header from "./Header";
+import Links from "./Links";
+import "./sidebar.scss";
+import { getSidebarStateLocalStorageKey } from "./utils";
+var Sidebar = function Sidebar(_ref) {
+  var navLinks = _ref.navLinks,
+    customLogo = _ref.customLogo,
+    _ref$profileInfoOverr = _ref.profileInfoOverrides,
+    profileInfoOverrides = _ref$profileInfoOverr === void 0 ? {} : _ref$profileInfoOverr,
+    _ref$helpLinkOverride = _ref.helpLinkOverrides,
+    helpLinkOverrides = _ref$helpLinkOverride === void 0 ? {} : _ref$helpLinkOverride,
+    _ref$extraTopLinks = _ref.extraTopLinks,
+    extraTopLinks = _ref$extraTopLinks === void 0 ? [] : _ref$extraTopLinks,
+    _ref$showAppSwitcher = _ref.showAppSwitcher,
+    showAppSwitcher = _ref$showAppSwitcher === void 0 ? true : _ref$showAppSwitcher;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAppSwitcherOpen = _useState2[0],
+    setIsAppSwitcherOpen = _useState2[1];
+  var _useLocalStorage = useLocalStorage(getSidebarStateLocalStorageKey(), false),
+    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
+    isSidebarCollapsed = _useLocalStorage2[0],
+    setIsSidebarCollapsed = _useLocalStorage2[1];
+  var location = useLocation();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    isAppSwitcherOpen && setIsAppSwitcherOpen(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+  var productName = globalProps.appName.substr(5).toLowerCase();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "sidebar-container",
+    className: classnames("neeto-molecules-sidebar__wrapper", {
+      "neeto-molecules-sidebar__wrapper--collapsed": isSidebarCollapsed
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden",
+    "data-cy": "sidebar-wrapper",
+    "data-testid": "sidebar"
+  }, /*#__PURE__*/React.createElement(Header, {
+    customLogo: customLogo
+  }), /*#__PURE__*/React.createElement(Links, {
+    navLinks: navLinks
+  }), /*#__PURE__*/React.createElement(Footer, {
+    extraTopLinks: extraTopLinks,
+    helpLinkOverrides: helpLinkOverrides,
+    profileInfoOverrides: profileInfoOverrides,
+    showAppSwitcher: showAppSwitcher,
+    onAppSwitcherToggle: function onAppSwitcherToggle() {
+      return setIsAppSwitcherOpen(not);
+    }
+  })), isSidebarCollapsed && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-sidebar__toggler-hover-area"
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: "neeto-molecules-sidebar__toggler",
+    "data-cy": "neeto-molecules-sidebar-toggler",
+    "data-testid": "sidebar-toggleButton",
+    style: "text",
+    icon: function icon() {
+      return /*#__PURE__*/React.createElement(Chevron, {
+        style: {
+          color: "rgb(var(--neeto-".concat(productName, "-primary))")
+        }
+      });
+    },
+    tooltipProps: {
+      content: isSidebarCollapsed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
+      position: "bottom"
+    },
+    onClick: function onClick() {
+      setIsSidebarCollapsed(!isSidebarCollapsed);
+    }
+  })), showAppSwitcher && /*#__PURE__*/React.createElement(AppSwitcher, {
+    isSidebarCollapsed: isSidebarCollapsed,
+    isOpen: isAppSwitcherOpen,
+    onClose: function onClose() {
+      return setIsAppSwitcherOpen(false);
+    }
+  }));
+};
+export default Sidebar;

package/dist/Sidebar/sidebar.scss

@@ -0,0 +1,379 @@
+:root {
+  --neeto-molecules-sidebar-width: 240px;
+  --neeto-molecules-sidebar-z-index: 99998;
+
+  --neeto-chat-primary: 136, 134, 255;
+  --neeto-wireframe-primary: 106, 103, 232;
+  --neeto-site-primary: 129, 118, 255;
+  --neeto-desk-primary: 253, 148, 55;
+  --neeto-planner-primary: 82, 169, 198;
+  --neeto-replay-primary: 32, 199, 189;
+  --neeto-course-primary: 140, 214, 114;
+  --neeto-ci-primary: 255, 133, 184;
+  --neeto-invoice-primary: 70, 160, 211;
+  --neeto-quiz-primary: 254, 99, 99;
+  --neeto-runner-primary: 75, 71, 255;
+  --neeto-form-primary: 254, 128, 114;
+  --neeto-crm-primary: 96, 154, 240;
+  --neeto-changelog-primary: 255, 135, 135;
+  --neeto-deploy-primary: 20, 209, 164;
+  --neeto-kb-primary: 101, 205, 161;
+  --neeto-cal-primary: 238, 77, 95;
+  --neeto-invisible-primary: 121, 157, 250;
+  --neeto-testify-primary: 255, 158, 69;
+  --neeto-monitor-primary: 70, 181, 197;
+  --neeto-git-primary: 255, 78, 110;
+}
+
+.neeto-molecules-sidebar__wrapper {
+  display: flex;
+  position: relative;
+  width: var(--neeto-molecules-sidebar-width);
+  max-width: var(--neeto-molecules-sidebar-width);
+
+  transition: all 150ms;
+
+  &--collapsed {
+    width: 0px;
+    max-width: 0px;
+
+    .neeto-molecules-sidebar__toggler {
+      transform: scale(-1);
+      right: -36px;
+    }
+  }
+
+  &:hover {
+    .neeto-molecules-sidebar__toggler {
+      opacity: 1;
+    }
+  }
+}
+
+.neeto-molecules-sidebar {
+  width: 100%;
+  height: 100vh;
+  padding: 24px 0;
+  background-color: rgb(var(--neeto-ui-gray-100));
+  border-right: 1px solid rgb(var(--neeto-ui-gray-100));
+  z-index: var(--neeto-molecules-sidebar-z-index);
+
+  &__no-shrinkable {
+    width: var(--neeto-molecules-sidebar-width);
+    max-width: var(--neeto-molecules-sidebar-width);
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgb(var(--neeto-ui-gray-300));
+    border-radius: 50px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: "transparent";
+  }
+
+  &__toggler-hover-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    z-index: var(--neeto-molecules-sidebar-z-index);
+    width: 40px;
+  }
+
+  &__toggler {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: calc(var(--neeto-molecules-sidebar-z-index) + 1);
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  // header
+
+  &__header {
+    padding: 0 24px;
+    margin: 14px 0 28px;
+  }
+
+  &__logo {
+    svg {
+      width: auto;
+      max-width: 100%;
+      height: 20px;
+    }
+  }
+
+  // links
+
+  &__links {
+    margin-bottom: 40px;
+  }
+
+  &__link {
+    width: 100%;
+    padding: 12px 24px;
+    gap: 10px;
+    color: rgb(var(--neeto-ui-gray-800));
+    transition: var(--neeto-ui-transition);
+    position: relative;
+    text-decoration: none !important;
+
+    &-icon {
+      flex-shrink: 0;
+      transition: var(--neeto-ui-transition);
+
+      svg path {
+        vector-effect: non-scaling-stroke;
+      }
+
+      &--rotate {
+        transform: scale(-1);
+      }
+
+      &--caret {
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+      }
+    }
+
+    &-label,
+    &-sub-label {
+      text-align: left;
+      flex-grow: 1;
+    }
+
+    &:hover {
+      color: rgb(var(--neeto-ui-black));
+      background-color: rgb(var(--neeto-ui-gray-200));
+    }
+
+    &[aria-expanded="true"],
+    &:focus,
+    &:focus-visible {
+      color: rgb(var(--neeto-ui-black));
+      outline: none;
+      background-color: rgb(var(--neeto-ui-gray-200));
+    }
+
+    &.active {
+      background-color: rgb(var(--neeto-ui-white));
+      color: rgb(var(--neeto-ui-black));
+
+      .neeto-molecules-sidebar__link-label {
+        font-weight: var(--neeto-ui-font-medium);
+      }
+    }
+
+    &:hover,
+    &[aria-expanded="true"],
+    &:focus,
+    &:focus-visible,
+    &.active {
+      .neeto-molecules-sidebar__link-icon--caret {
+        opacity: 1;
+      }
+    }
+
+    &--button {
+      &:focus {
+        background-color: transparent;
+      }
+
+      &:focus-visible {
+        color: rgb(var(--neeto-ui-gray-800));
+        background-color: rgb(var(--neeto-ui-gray-200));
+      }
+    }
+  }
+
+  &__link--change-log {
+    outline: none !important;
+  }
+
+  &__sublink-wrapper {
+    padding: 4px 0;
+    background-color: rgb(var(--neeto-ui-white));
+  }
+
+  &__sublink {
+    padding: 8px 24px 8px 58px;
+    color: rgb(var(--neeto-ui-gray-700));
+    background-color: rgb(var(--neeto-ui-white));
+    transition: all 0.3s;
+    cursor: pointer;
+    text-decoration: none;
+    gap: 8px;
+
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+
+    .neeto-molecules-sidebar__link-sub-count {
+      opacity: 0.75;
+    }
+
+    &:hover {
+      color: rgb(var(--neeto-ui-gray-800));
+      text-decoration: none;
+
+      .neeto-molecules-sidebar__link-sub-count {
+        opacity: 1;
+      }
+    }
+
+    &:focus,
+    &:focus-visible {
+      color: rgb(var(--neeto-ui-gray-800));
+      outline: none;
+      text-decoration: none;
+
+      .neeto-molecules-sidebar__link-sub-count {
+        opacity: 1;
+      }
+    }
+
+    &:active,
+    &.active {
+      color: rgb(var(--neeto-ui-black));
+      font-weight: var(--neeto-ui-font-medium);
+      text-decoration: none;
+
+      .neeto-molecules-sidebar__link-sub-count {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__footer {
+    margin-top: auto;
+  }
+}
+
+.sidebar-featured-tooltip__content {
+  border-radius: 8px !important;
+  box-shadow: var(--neeto-ui-shadow-sm) !important;
+
+  .tippy-content {
+    padding: 0;
+  }
+}
+
+.sidebar-featured-tooltip {
+  padding: 12px;
+  width: 150px;
+}
+
+.sidebar-featured-tooltip__icon-wrap {
+  width: 40px;
+  height: 40px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 8px;
+  border-radius: 8px;
+  background-color: rgb(var(--neeto-ui-gray-100));
+}
+
+.sidebar-featured-tooltip__title {
+  margin-bottom: 4px;
+}
+
+.neeto-molecules-profile-popup-wrapper,
+.neeto-molecules-help-popup-wrapper {
+  box-shadow: 0px 8px 10px 1px rgba(0, 0, 0, .14), 0px 3px 14px 2px rgba(0, 0, 0, .12), 0px 5px 5px -3px rgba(0, 0, 0, .2) !important;
+  border-radius: var(--neeto-ui-rounded) !important;
+  border: 1px solid rgb(var(--neeto-ui-gray-400));
+  min-width: 240px;
+
+  .tippy-content {
+    padding: 0;
+  }
+
+  .tippy-svg-arrow {
+    display: none !important;
+  }
+}
+
+.neeto-molecules-profile-popup__top-section {
+  border-top-left-radius: var(--neeto-ui-rounded);
+  border-top-right-radius: var(--neeto-ui-rounded);
+}
+
+.neeto-molecules-profile-sublist {
+  border-top: 1px solid rgb(var(--neeto-ui-gray-400));
+}
+
+.neeto-molecules-help-sublist,
+.neeto-molecules-profile-sublist {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.neeto-molecules-profile-sublist__item,
+.neeto-molecules-help-sublist__item {
+  width: 100%;
+}
+
+.neeto-molecules-profile-sublist__item-btn,
+.neeto-molecules-help-sublist__item-btn {
+  border-radius: 0;
+  justify-content: flex-end !important;
+  min-height: 40px;
+  text-align: left;
+
+  &.active {
+    background-color: rgb(var(--neeto-ui-gray-800));
+    color: rgb(var(--neeto-ui-white));
+  }
+
+  &-icon {
+    svg {
+      path {
+        vector-effect: non-scaling-stroke;
+      }
+    }
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.neeto-molecules-sidebar__link-icon {
+  position: relative;
+}
+
+.neeto-molecules-sidebar__notif-count {
+  position: absolute;
+  right: -6px;
+  top: -6px;
+  z-index: 1;
+}
+
+.neeto-molecules-sidebar__notif-count, .neeto-molecules-help-sublist__item-btn-count {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-color: rgb(var(--neeto-ui-primary-500));
+  color: rgb(var(--neeto-ui-white));
+  border-radius: var(--neeto-ui-rounded-full);
+  font-size: var(--neeto-ui-text-xxs);
+  user-select: none;
+}

package/dist/Sidebar/utils.js

@@ -0,0 +1,18 @@
+import { all } from "ramda";
+export var isSubRouteActive = function isSubRouteActive(subRoute, location) {
+  var currentBrowserUrl = new URL(location.pathname + location.search, window.location.origin);
+  var targetUrl = new URL(subRoute, window.location.origin);
+  if (!currentBrowserUrl.pathname.startsWith(targetUrl.pathname)) {
+    return false;
+  }
+  var targetSearchParams = targetUrl.searchParams;
+  var targetSearchKeys = Array.from(targetSearchParams.keys());
+  return all(function (key) {
+    return currentBrowserUrl.searchParams.get(key) === targetSearchParams.get(key);
+  }, targetSearchKeys);
+};
+export var getSidebarStateLocalStorageKey = function getSidebarStateLocalStorageKey() {
+  var _globalProps$user, _globalProps$user2;
+  var user = ((_globalProps$user = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email) || ((_globalProps$user2 = globalProps.user) === null || _globalProps$user2 === void 0 ? void 0 : _globalProps$user2.phoneNumber);
+  return "sidebarState-".concat(user);
+};

package/dist/SubHeader/RightBlock/Columns.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["buttonProps"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { forwardRef } from "react";
+import { Column } from "@bigbinary/neeto-icons";
+import { useTranslation } from "react-i18next";
+import ManageColumns from "../../Columns";
+var Columns = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$buttonProps = _ref.buttonProps,
+    buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__columns"
+  }, /*#__PURE__*/React.createElement(ManageColumns, _extends({
+    buttonProps: _objectSpread({
+      icon: Column,
+      label: null,
+      tooltipProps: {
+        content: t("neetoMolecules.columns.columns"),
+        position: "bottom"
+      },
+      "data-testid": "columns-button",
+      "data-cy": "columns-dropdown-button"
+    }, buttonProps)
+  }, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref
+  }))));
+});
+Columns.displayName = "Columns";
+export default Columns;

package/dist/SubHeader/RightBlock/Download.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Download } from "@bigbinary/neeto-icons";
+import { Button } from "@bigbinary/neetoui";
+import { useTranslation } from "react-i18next";
+var DownloadButton = function DownloadButton(_ref) {
+  var count = _ref.count,
+    onClick = _ref.onClick,
+    _ref$dataCy = _ref["data-cy"],
+    dataCy = _ref$dataCy === void 0 ? "download-button" : _ref$dataCy;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__download"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": dataCy,
+    "data-testid": "download-button",
+    icon: Download,
+    style: "text",
+    tooltipProps: {
+      content: t("neetoMolecules.common.download"),
+      position: "bottom"
+    },
+    onClick: onClick
+  }), count && /*#__PURE__*/React.createElement("span", {
+    className: "neeto-molecules-subheader__download-count"
+  }, count));
+};
+export default DownloadButton;

package/dist/SubHeader/RightBlock/Filter.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["buttonProps"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from "react";
+import { Filters as NeetoFilters } from "@bigbinary/neeto-filters-frontend";
+import { Filter } from "@bigbinary/neeto-icons";
+import { useTranslation } from "react-i18next";
+var FilterButton = function FilterButton(_ref) {
+  var buttonProps = _ref.buttonProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__filter"
+  }, /*#__PURE__*/React.createElement(NeetoFilters, _extends({
+    buttonProps: _objectSpread({
+      "data-testid": "filter-button",
+      icon: Filter,
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.common.filter"),
+        position: "bottom"
+      },
+      label: null
+    }, buttonProps)
+  }, props)));
+};
+export default FilterButton;

package/dist/SubHeader/RightBlock/index.js

@@ -0,0 +1,21 @@
+import React from "react";
+import classnames from "classnames";
+import { isNotPresent } from "@bigbinary/neeto-commons-frontend/pure";
+import { not } from "ramda";
+import Columns from "./Columns";
+import Download from "./Download";
+import Filter from "./Filter";
+var RightBlock = function RightBlock(_ref) {
+  var downloadButtonProps = _ref.downloadButtonProps,
+    columnsButtonProps = _ref.columnsButtonProps,
+    filterProps = _ref.filterProps,
+    dataProps = _ref.dataProps;
+  var showIcons = isNotPresent(dataProps === null || dataProps === void 0 ? void 0 : dataProps.totalCount) ? true : (dataProps === null || dataProps === void 0 ? void 0 : dataProps.totalCount) > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "subheader-rightblock-buttons-container",
+    className: classnames("neeto-molecules-subheader__right-actions", {
+      hidden: not(showIcons)
+    })
+  }, downloadButtonProps && /*#__PURE__*/React.createElement(Download, downloadButtonProps), columnsButtonProps && /*#__PURE__*/React.createElement(Columns, columnsButtonProps), filterProps && /*#__PURE__*/React.createElement(Filter, filterProps));
+};
+export default RightBlock;

package/dist/SubHeader/RightBlock/utils.js

@@ -0,0 +1,13 @@
+import { removeBy } from "@bigbinary/neeto-commons-frontend/pure";
+import { __, filter, includes, toLower, trim } from "ramda";
+export var removeFixedColumns = function removeFixedColumns(fixedColumns, columnData) {
+  return removeBy({
+    dataIndex: includes(__, fixedColumns)
+  }, columnData);
+};
+export var filterBySearchTerm = function filterBySearchTerm(searchTerm, columns) {
+  return filter(function (_ref) {
+    var title = _ref.title;
+    return includes(trim(toLower(searchTerm)), trim(toLower(title)));
+  }, columns);
+};

package/dist/SubHeader/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import classnames from "classnames";
+import RightBlock from "./RightBlock";
+import "./subheader.scss";
+var SubHeader = function SubHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    leftActionBlock = _ref.leftActionBlock,
+    rightActionBlock = _ref.rightActionBlock,
+    _ref$dataCy = _ref["data-cy"],
+    dataCy = _ref$dataCy === void 0 ? "subheader" : _ref$dataCy;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(["neeto-molecules-subheader", className]),
+    "data-cy": dataCy,
+    "data-testid": "subheader"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__left-wrapper",
+    "data-cy": "subheader-left-wrapper"
+  }, leftActionBlock && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__left",
+    "data-cy": "subheader-left"
+  }, leftActionBlock)), rightActionBlock && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-subheader__right",
+    "data-cy": "subheader-right"
+  }, rightActionBlock));
+};
+SubHeader.RightBlock = RightBlock;
+export default SubHeader;