@bigbinary/neeto-molecules 1.0.110 → 1.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "1.0.110",
+  "version": "1.0.112",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -299,6 +299,11 @@
     "integrationDisconnectAlert": {
       "disconnect": "Disconnect"
     },
+    "navigationHeader": {
+      "home": "Home",
+      "resetDescription": "Are you sure you want to reset this form to the last published version? This cannot be undone.",
+      "resetTitle": "Reset form"
+    },
     "publishBlock": {
       "viewDraftVersion": "View draft version",
       "deleteDraftVersion": "Delete draft version. It'll not impact the published version",

package/types/NavigationHeader.d.ts

@@ -0,0 +1,145 @@
+import React from "react";
+import Rename from "./Rename";
+type TooltipPropType = {
+  content: string;
+  position: string;
+};
+type HomeButtonPropType = {
+  tooltip: TooltipPropType;
+  icon: React.ReactNode;
+};
+type HeaderLinkPropType = {
+  key: string;
+  to: string;
+  label: string;
+};
+type RightActionBlockPropTypes = {
+  isDraftBlockHidden: boolean;
+  previewDraftUrl: string;
+  isResetDraftButtonVisible: boolean;
+  onResetClick: () => void;
+  isResetting: boolean;
+  isPublishDisabled: boolean;
+  isPublishing: boolean;
+  handlePublish: () => void;
+  isPublishPreviewDisabled: boolean;
+  previewPublishedUrl: string;
+  isPublishButtonVisible: boolean;
+  isResetAlertOpen: boolean;
+  setIsResetAlertOpen: () => void;
+  handleReset: () => void;
+  publishAlertTitle: string;
+  publishAlertDescription: string;
+};
+type NavigationLinkPropsType = {
+  headerLinks: HeaderLinkPropType[];
+};
+type LeftBlockPropTypes = {
+  homeButtonProps?: HomeButtonPropType;
+  homeUrl: string;
+  renameProps?: Rename;
+  children?: React.ReactNode;
+};
+/**
+ *
+ * A common component to use as navigation header.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the left side of the NavigationHeader.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock
+ *       homeButtonProps={{ tooltip: { position: "right" } }}
+ *       homeUrl={homeUrl}
+ *       renameProps={{
+ *         disabled: false,
+ *         dropdownItems: [{ label: "Clone", onClick: noop }],
+ *         placeholder: "Enter a name",
+ *         value: "Feedback form",
+ *         onRename: () => noop,
+ *       }}
+ *     />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered at the center of the NavigationHeader.
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     navigationLinks={<NavigationHeader.NavigationLinks
+ *       headerLinks={[
+ *         { key: "build", to: "/build", label: "Build" },
+ *         { key: "design", to: "/design", label: "Design" },
+ *         { key: "configure", to: "/configure", label: "Configure" },
+ *       ]}
+ *     />}
+ *     rightActionBlock={<NavigationHeader.RightActionBlock {...rightBlockProps} />}
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+ * To specify the content to be rendered in the right side of the NavigationHeader
+ *
+ * @example 
+ *
+ * import React from "react";
+ * import NavigationHeader from "@bigbinary/neeto-molecules/NavigationHeader";
+ * 
+ * const Page = () => (
+ *   <NavigationHeader
+ *     rightActionBlock={<NavigationHeader.RightActionBlock
+ *       isPublishButtonVisible={false}
+ *       draftPreviewUrl="/preview/draft"
+ *       isDraftBlockHidden={false}
+ *       isResetDraftButtonVisible={true}
+ *       isResetting={false}
+ *       onResetClick={noop}
+ *       isPublishDisabled={true}
+ *       isPublishing={false}
+ *       handlePublish={noop}
+ *       isPublishPreviewDisabled={true}
+ *       publishedPreviewUrl="/preview/published"
+ *       setIsResetAlertOpen={noop}
+ *       handleReset={noop}
+ *     />}
+ *     navigationLinks={<NavigationHeader.NavigationLinks {...navigationLinkProps} />}
+ *     leftActionBlock={<NavigationHeader.LeftActionBlock {...leftBlockProps} />}
+ *   />
+ * );
+ * @endexample
+*/
+const NavigationHeader: React.FC<{
+  leftActionBlock?: React.ReactNode;
+  navigationLinks?: React.ReactNode;
+  rightActionBlock?: React.ReactNode;
+}> & {
+  RightActionBlock: React.FC<RightActionBlockPropTypes>;
+  NavigationLinks: React.FC<NavigationLinkPropsType>;
+  LeftActionBlock: React.FC<LeftBlockPropTypes>;
+};
+export default NavigationHeader;

package/types/Sidebar.d.ts

@@ -59,5 +59,6 @@ const Sidebar: React.FC<{
   helpLinkOverrides?: HelpLinks;
   extraTopLinks?: LinkType[];
   showAppSwitcher?: boolean;
+  customLogo?: any;
 }>;
 export default Sidebar;