@teambit/lanes.ui.menus.use-lanes-menu 0.0.83 → 0.0.85

package/dist/use-lanes-menu.d.ts

@@ -6,8 +6,10 @@ export declare type LaneImportContentProps = {
     switchedOutToCurrentLane: boolean;
     host: LanesHost;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare function UseLaneMenu({ host, viewedLaneId, currentLaneId, }: {
+export declare function UseLaneMenu({ host, viewedLaneId, currentLaneId, actionName, actionIcon, }: {
     host: LanesHost;
     viewedLaneId: LaneId;
     currentLaneId?: LaneId;
+    actionName?: string;
+    actionIcon?: string;
 }): JSX.Element;

package/dist/use-lanes-menu.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,21 +7,24 @@ exports.UseLaneMenu = void 0;
 const react_1 = __importDefault(require("react"));
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
 const documenter_ui_copy_box_1 = require("@teambit/documenter.ui.copy-box");
-const ui_foundation_ui_use_box_tab_content_1 = require("@teambit/ui-foundation.ui.use-box.tab-content");
 const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
 const ui_foundation_ui_use_box_bottom_link_1 = require("@teambit/ui-foundation.ui.use-box.bottom-link");
 const ui_foundation_ui_use_box_dropdown_1 = require("@teambit/ui-foundation.ui.use-box.dropdown");
 const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
 const use_lanes_menu_module_scss_1 = __importDefault(require("./use-lanes-menu.module.scss"));
-function UseLaneMenu({ host, viewedLaneId, currentLaneId, }) {
+function UseLaneMenu({ host, viewedLaneId, currentLaneId, actionName, actionIcon, }) {
     const switchedOutToCurrentLane = !!(currentLaneId === null || currentLaneId === void 0 ? void 0 : currentLaneId.isEqual(currentLaneId));
     const Menu = (react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.lanesMenu },
         react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.top },
             react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.title },
                 react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: use_lanes_menu_module_scss_1.default.titleIcon, of: "terminal" }),
                 react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: use_lanes_menu_module_scss_1.default.titleText }, `Bulk import from ${viewedLaneId.name}`))),
-        react_1.default.createElement(ui_foundation_ui_use_box_tab_content_1.ExpandableTabContent, { content: react_1.default.createElement(LaneImportContent, { host: host, currentLaneId: viewedLaneId, switchedOutToCurrentLane: switchedOutToCurrentLane }), drawerTitle: react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.drawerTitle }, "Learn more about Lanes"), drawerContent: react_1.default.createElement(LaneInfo, null) })));
-    return react_1.default.createElement(ui_foundation_ui_use_box_dropdown_1.UseBoxDropdown, { position: "bottom-end", className: use_lanes_menu_module_scss_1.default.useBox, Menu: Menu });
+        react_1.default.createElement(LaneImportContent, { host: host, currentLaneId: viewedLaneId, switchedOutToCurrentLane: switchedOutToCurrentLane }),
+        react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.moreInfo },
+            react_1.default.createElement(base_react_navigation_link_1.Link, { external: true, href: 'https://bit.dev/docs/lanes/lanes-overview', className: ui_foundation_ui_use_box_bottom_link_1.linkStyles },
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "information-sign" }),
+                react_1.default.createElement("div", { className: use_lanes_menu_module_scss_1.default.drawerTitle }, "Learn more about Lanes")))));
+    return (react_1.default.createElement(ui_foundation_ui_use_box_dropdown_1.UseBoxDropdown, { actionName: actionName, actionIcon: actionIcon, position: "bottom-end", className: use_lanes_menu_module_scss_1.default.useBox, Menu: Menu }));
 }
 exports.UseLaneMenu = UseLaneMenu;
 function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }) {
@@ -50,10 +42,4 @@ function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }) {
             laneId),
         react_1.default.createElement(documenter_ui_copy_box_1.CopyBox, { className: use_lanes_menu_module_scss_1.default.importContentCmd }, `bit lane import ${laneId}`)));
 }
-function LaneInfo(_a) {
-    var rest = __rest(_a, []);
-    return (react_1.default.createElement(ui_foundation_ui_use_box_tab_content_1.TabContent, Object.assign({}, rest, { className: use_lanes_menu_module_scss_1.default.moreInfo, bottom: react_1.default.createElement(base_react_navigation_link_1.Link, { external: true, href: 'https://bit.dev/docs/lanes/lanes-overview', className: ui_foundation_ui_use_box_bottom_link_1.linkStyles },
-            react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "information-sign" }),
-            react_1.default.createElement("span", null, "Getting Started with Lanes")) })));
-}
 //# sourceMappingURL=use-lanes-menu.js.map

package/dist/use-lanes-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-lanes-menu.js","sourceRoot":"","sources":["../use-lanes-menu.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,gFAAyD;AACzD,4EAA0D;AAC1D,wGAAiG;AACjG,kFAA8D;AAC9D,wGAA2E;AAE3E,kGAA4E;AAC5E,oFAA2D;AAE3D,8FAAkD;AAQlD,SAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,aAAa,GAKd;IACC,MAAM,wBAAwB,GAAG,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,aAAa,CAAC,CAAA,CAAC;IACzE,MAAM,IAAI,GAAG,CACX,uCAAK,SAAS,EAAE,oCAAM,CAAC,SAAS;QAC9B,uCAAK,SAAS,EAAE,oCAAM,CAAC,GAAG;YACxB,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;gBAC1B,8BAAC,+BAAI,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,EAAE,EAAE,EAAC,UAAU,GAAG;gBACnD,8BAAC,oCAAQ,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,IAAG,oBAAoB,YAAY,CAAC,IAAI,EAAE,CAAY,CACvF,CACF;QACN,8BAAC,2DAAoB,IACnB,OAAO,EACL,8BAAC,iBAAiB,IAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,YAAY,EAC3B,wBAAwB,EAAE,wBAAwB,GAClD,EAEJ,WAAW,EAAE,uCAAK,SAAS,EAAE,oCAAM,CAAC,WAAW,6BAA8B,EAC7E,aAAa,EAAE,8BAAC,QAAQ,OAAG,GAC3B,CACE,CACP,CAAC;IAEF,OAAO,8BAAC,kDAAc,IAAC,QAAQ,EAAC,YAAY,EAAC,SAAS,EAAE,oCAAM,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACxF,CAAC;AAjCD,kCAiCC;AAED,SAAS,iBAAiB,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,wBAAwB,EAA0B;IAClG,MAAM,MAAM,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IACpF,IAAI,wBAAwB,EAAE;QAC5B,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;YAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;gBAA8B,MAAM,CAAO;YACpF,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,WAAW,CAAW,CAChE,CACP,CAAC;KACH;IACD,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;QAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;YAAyC,MAAM,CAAO;QAC/F,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,mBAAmB,MAAM,EAAE,CAAW,CAChF,CACP,CAAC;AACJ,CAAC;AAID,SAAS,QAAQ,CAAC,EAA0B;QAArB,IAAI,cAAT,EAAW,CAAF;IACzB,OAAO,CACL,8BAAC,iDAAU,oBACL,IAAI,IACR,SAAS,EAAE,oCAAM,CAAC,QAAQ,EAC1B,MAAM,EACJ,8BAAC,iCAAI,IAAC,QAAQ,QAAC,IAAI,EAAE,2CAA2C,EAAE,SAAS,EAAE,iDAAU;YACrF,8BAAC,+BAAI,IAAC,EAAE,EAAC,kBAAkB,GAAG;YAC9B,yEAAuC,CAClC,IAEG,CACf,CAAC;AACJ,CAAC"}
+{"version":3,"file":"use-lanes-menu.js","sourceRoot":"","sources":["../use-lanes-menu.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gFAAyD;AACzD,4EAA0D;AAC1D,kFAA8D;AAC9D,wGAA2E;AAE3E,kGAA4E;AAC5E,oFAA2D;AAE3D,8FAAkD;AAQlD,SAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,UAAU,EACV,UAAU,GAOX;IACC,MAAM,wBAAwB,GAAG,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,CAAC,aAAa,CAAC,CAAA,CAAC;IACzE,MAAM,IAAI,GAAG,CACX,uCAAK,SAAS,EAAE,oCAAM,CAAC,SAAS;QAC9B,uCAAK,SAAS,EAAE,oCAAM,CAAC,GAAG;YACxB,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;gBAC1B,8BAAC,+BAAI,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,EAAE,EAAE,EAAC,UAAU,GAAG;gBACnD,8BAAC,oCAAQ,IAAC,SAAS,EAAE,oCAAM,CAAC,SAAS,IAAG,oBAAoB,YAAY,CAAC,IAAI,EAAE,CAAY,CACvF,CACF;QACN,8BAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,wBAAwB,EAAE,wBAAwB,GAAI;QAClH,uCAAK,SAAS,EAAE,oCAAM,CAAC,QAAQ;YAC7B,8BAAC,iCAAI,IAAC,QAAQ,QAAC,IAAI,EAAE,2CAA2C,EAAE,SAAS,EAAE,iDAAU;gBACrF,8BAAC,+BAAI,IAAC,EAAE,EAAC,kBAAkB,GAAG;gBAC9B,uCAAK,SAAS,EAAE,oCAAM,CAAC,WAAW,6BAA8B,CAC3D,CACH,CACF,CACP,CAAC;IAEF,OAAO,CACL,8BAAC,kDAAc,IACb,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAC,YAAY,EACrB,SAAS,EAAE,oCAAM,CAAC,MAAM,EACxB,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC;AAzCD,kCAyCC;AAED,SAAS,iBAAiB,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,wBAAwB,EAA0B;IAClG,MAAM,MAAM,GAAG,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;IAEpF,IAAI,wBAAwB,EAAE;QAC5B,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;YAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;gBAA8B,MAAM,CAAO;YACpF,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,WAAW,CAAW,CAChE,CACP,CAAC;KACH;IACD,OAAO,CACL,uCAAK,SAAS,EAAE,oCAAM,CAAC,aAAa;QAClC,uCAAK,SAAS,EAAE,oCAAM,CAAC,kBAAkB;;YAAyC,MAAM,CAAO;QAC/F,8BAAC,gCAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,gBAAgB,IAAG,mBAAmB,MAAM,EAAE,CAAW,CAChF,CACP,CAAC;AACJ,CAAC"}

package/dist/use-lanes-menu.module.scss

@@ -1,6 +1,7 @@
 .top {
   padding: 16px 24px;
   color: var(--bit-text-color, #414141);
+  padding-left: 0px;
 }
 
 .title {
@@ -35,4 +36,13 @@
 .lanesMenu {
   background-color: var(--bit-bg-color, #ffffff);
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  padding: 16px;
+}
+
+.moreInfo {
+  padding-left: 0px;
+
+  > a {
+    padding-left: 0px;
+  }
 }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/lanes.ui.menus.use-lanes-menu",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "homepage": "https://bit.dev/teambit/lanes/ui/menus/use-lanes-menu",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.lanes",
     "name": "ui/menus/use-lanes-menu",
-    "version": "0.0.83"
+    "version": "0.0.85"
   },
   "dependencies": {
     "core-js": "^3.0.0",
@@ -14,11 +14,10 @@
     "@teambit/documenter.ui.copy-box": "4.1.6",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/lane-id": "0.0.175",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.83",
+    "@teambit/lane-id": "0.0.177",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.85",
     "@teambit/ui-foundation.ui.use-box.bottom-link": "0.0.113",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.131",
-    "@teambit/ui-foundation.ui.use-box.tab-content": "0.0.114"
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.131"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",

package/use-lanes-menu.module.scss

@@ -1,6 +1,7 @@
 .top {
   padding: 16px 24px;
   color: var(--bit-text-color, #414141);
+  padding-left: 0px;
 }
 
 .title {
@@ -35,4 +36,13 @@
 .lanesMenu {
   background-color: var(--bit-bg-color, #ffffff);
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  padding: 16px;
+}
+
+.moreInfo {
+  padding-left: 0px;
+
+  > a {
+    padding-left: 0px;
+  }
 }

package/use-lanes-menu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import { CopyBox } from '@teambit/documenter.ui.copy-box';
-import { ExpandableTabContent, TabContent } from '@teambit/ui-foundation.ui.use-box.tab-content';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import { linkStyles } from '@teambit/ui-foundation.ui.use-box.bottom-link';
 import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';
@@ -20,10 +19,14 @@ export function UseLaneMenu({
   host,
   viewedLaneId,
   currentLaneId,
+  actionName,
+  actionIcon,
 }: {
   host: LanesHost;
   viewedLaneId: LaneId;
   currentLaneId?: LaneId;
+  actionName?: string;
+  actionIcon?: string;
 }) {
   const switchedOutToCurrentLane = !!currentLaneId?.isEqual(currentLaneId);
   const Menu = (
@@ -34,25 +37,30 @@ export function UseLaneMenu({
           <Ellipsis className={styles.titleText}>{`Bulk import from ${viewedLaneId.name}`}</Ellipsis>
         </div>
       </div>
-      <ExpandableTabContent
-        content={
-          <LaneImportContent
-            host={host}
-            currentLaneId={viewedLaneId}
-            switchedOutToCurrentLane={switchedOutToCurrentLane}
-          />
-        }
-        drawerTitle={<div className={styles.drawerTitle}>Learn more about Lanes</div>}
-        drawerContent={<LaneInfo />}
-      />
+      <LaneImportContent host={host} currentLaneId={viewedLaneId} switchedOutToCurrentLane={switchedOutToCurrentLane} />
+      <div className={styles.moreInfo}>
+        <Link external href={'https://bit.dev/docs/lanes/lanes-overview'} className={linkStyles}>
+          <Icon of="information-sign" />
+          <div className={styles.drawerTitle}>Learn more about Lanes</div>
+        </Link>
+      </div>
     </div>
   );
 
-  return <UseBoxDropdown position="bottom-end" className={styles.useBox} Menu={Menu} />;
+  return (
+    <UseBoxDropdown
+      actionName={actionName}
+      actionIcon={actionIcon}
+      position="bottom-end"
+      className={styles.useBox}
+      Menu={Menu}
+    />
+  );
 }
 
 function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: LaneImportContentProps) {
   const laneId = host === 'workspace' ? currentLaneId.name : currentLaneId.toString();
+
   if (switchedOutToCurrentLane) {
     return (
       <div className={styles.importContent}>
@@ -68,20 +76,3 @@ function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: La
     </div>
   );
 }
-
-type LaneInfoProps = {} & React.HTMLAttributes<HTMLDivElement>;
-
-function LaneInfo({ ...rest }: LaneInfoProps) {
-  return (
-    <TabContent
-      {...rest}
-      className={styles.moreInfo}
-      bottom={
-        <Link external href={'https://bit.dev/docs/lanes/lanes-overview'} className={linkStyles}>
-          <Icon of="information-sign" />
-          <span>Getting Started with Lanes</span>
-        </Link>
-      }
-    ></TabContent>
-  );
-}