@dtdot/lego 2.0.0-3 → 2.0.0-5

package/build/components/Heading/Heading.component.d.ts

@@ -6,5 +6,6 @@ declare const Heading: {
     ({ children }: HeadingProps): JSX.Element;
     SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
     FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+    DividerHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 };
 export default Heading;

package/build/components/Heading/Heading.component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import DividerHeading from './_DividerHeading.component';
 import FormHeading from './_FormHeading.component';
 import SubHeading from './_SubHeading.component';
 const HeadingContainer = styled.h2 `
@@ -14,4 +15,5 @@ const HeadingContainer = styled.h2 `
 const Heading = ({ children }) => React.createElement(HeadingContainer, null, children);
 Heading.SubHeading = SubHeading;
 Heading.FormHeading = FormHeading;
+Heading.DividerHeading = DividerHeading;
 export default Heading;

package/build/components/Heading/_DividerHeading.component.d.ts

@@ -0,0 +1,2 @@
+declare const DividerHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export default DividerHeading;

package/build/components/Heading/_DividerHeading.component.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+const DividerHeading = styled.h3 `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  width: 100%;
+  padding: 8px;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+export default DividerHeading;

package/build/components/MinimalMenu/MinimalMenu.component.d.ts

@@ -4,6 +4,7 @@ export interface MinimalMenuProps {
 }
 declare const MinimalMenu: {
     ({ children }: MinimalMenuProps): JSX.Element;
+    Header: ({ hiddenMenu, text, rightContent }: import("./_MinimalMenuHeader.component").MinimalMenuHeaderProps) => JSX.Element;
     Item: ({ icon, active, onClick, "data-cy": dataCy }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
     Page: ({ children, hiddenMenu }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
 };

package/build/components/MinimalMenu/MinimalMenu.component.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
+import MinimalMenuHeader from './_MinimalMenuHeader.component';
 import MinimalMenuItem from './_MinimalMenuItem.component';
 import MinimalMenuPage from './_MinimalMenuPage.component';
 import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
@@ -11,6 +12,7 @@ const MinimalMenu = ({ children }) => {
     }
     return React.createElement(DesktopMinimalMenuContainer, null, children);
 };
+MinimalMenu.Header = MinimalMenuHeader;
 MinimalMenu.Item = MinimalMenuItem;
 MinimalMenu.Page = MinimalMenuPage;
 export default MinimalMenu;

package/build/components/MinimalMenu/_MinimalMenuHeader.component.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface MinimalMenuHeaderProps {
+    /** Set the page to be in hidden menu mode.
+     * This is useful for rendering your app and preventing re-renders between a un-authenticated no-menu mode and the regular authenticated mode
+     **/
+    hiddenMenu?: boolean;
+    text?: string;
+    rightContent?: React.ReactNode;
+}
+/**
+ * A header that is designed to be nested within the page content.
+ * You can use a header per page or simply use a single header for your entire application.
+ */
+declare const MinimalMenuHeader: ({ hiddenMenu, text, rightContent }: MinimalMenuHeaderProps) => JSX.Element;
+export default MinimalMenuHeader;

package/build/components/MinimalMenu/_MinimalMenuHeader.component.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+const MinimalMenuHeaderContainer = styled.div ``;
+const Header = styled.div `
+  height: 48px;
+  background-color: ${(props) => props.theme.colours.cardBackground};
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const HeaderItem = styled.div `
+  padding: 0 16px;
+`;
+const TitleText = styled.div `
+  font-family: ${(props) => props.theme.fonts.subHeading.family};
+  font-size: ${(props) => props.theme.fonts.subHeading.size};
+  font-weight: ${(props) => props.theme.fonts.subHeading.weight};
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
+/**
+ * A header that is designed to be nested within the page content.
+ * You can use a header per page or simply use a single header for your entire application.
+ */
+const MinimalMenuHeader = ({ hiddenMenu, text, rightContent }) => {
+    return (React.createElement(MinimalMenuHeaderContainer, { hiddenMenu: !!hiddenMenu },
+        React.createElement(Header, null,
+            React.createElement(HeaderItem, null, text && React.createElement(TitleText, null, text)),
+            React.createElement(HeaderItem, null, rightContent))));
+};
+export default MinimalMenuHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "2.0.0-3",
+  "version": "2.0.0-5",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {