@dtdot/lego 2.0.0-4 → 2.0.0-6

package/build/components/Button/Button.component.js

@@ -35,7 +35,7 @@ const IconOuter = styled.span `
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
   background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
 
-  height: ${(props) => getIconContainerSizePx(props.size).height};
+  height: ${(props) => props.height || getIconContainerSizePx(props.size).height};
   width: ${(props) => getIconContainerSizePx(props.size).width};
 `;
 const StyledButton = styled.button `
@@ -108,7 +108,7 @@ const Button = React.forwardRef(function Button(props, ref) {
     return (React.createElement(StyledButton, { ref: ref, width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, size: size, type: type, onClick: onClick, "data-cy": dataCy || 'button' }, loading ? (React.createElement(SpinnerContainer, null,
         React.createElement(ButtonSpinner, { "data-cy": 'button-loading-spinner', variant: variant, size: size }))) : (React.createElement(ButtonInner, null,
         children && React.createElement(ButtonTextContainer, { size: size }, children),
-        icon && (React.createElement(IconOuter, { variant: variant, size: size },
+        icon && (React.createElement(IconOuter, { variant: variant, size: size, height: height },
             React.createElement(FontAwesomeIcon, { icon: icon })))))));
 });
 export default Button;

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-4",
+  "version": "2.0.0-6",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {