@dtdot/lego 2.0.0-30 → 2.0.0-32

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

@@ -5,7 +5,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-testid": dataTestId }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
+    Item: ({ icon, label, active, onClick, "data-testid": dataTestId }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
     Page: ({ children, hiddenMenu }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
 };
 export default MinimalMenu;

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

@@ -2,9 +2,10 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 export interface MinimalMenuItemProps {
     'icon'?: IconProp;
+    'label': string;
     'active'?: boolean;
     'onClick'?: () => void;
     'data-testid'?: string;
 }
-declare const MinimalMenuItem: ({ icon, active, onClick, "data-testid": dataTestId }: MinimalMenuItemProps) => JSX.Element;
+declare const MinimalMenuItem: ({ icon, label, active, onClick, "data-testid": dataTestId }: MinimalMenuItemProps) => JSX.Element;
 export default MinimalMenuItem;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { useIsScreenSize } from '../../responsive/responsive';
 import DesktopMinimalMenuItem from './desktop/_DesktopMinimalMenuItem.component';
 import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
-const MinimalMenuItem = ({ icon, active, onClick, 'data-testid': dataTestId }) => {
+const MinimalMenuItem = ({ icon, label, active, onClick, 'data-testid': dataTestId }) => {
     const isMobile = useIsScreenSize('mobile');
     if (isMobile) {
-        return React.createElement(MobileMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-testid": dataTestId });
+        return (React.createElement(MobileMinimalMenuItem, { icon: icon, label: label, active: active, onClick: onClick, "data-testid": dataTestId }));
     }
     return React.createElement(DesktopMinimalMenuItem, { icon: icon, active: active, onClick: onClick, "data-testid": dataTestId });
 };

package/build/components/MinimalMenu/mobile/_MobileMenu.constants.js

@@ -1 +1 @@
-export const mobileMenuDefaultTransition = { type: 'spring', duration: 0.2, bounce: 0 };
+export const mobileMenuDefaultTransition = { type: 'spring', duration: 0.1, bounce: 0 };

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

@@ -1,41 +1,21 @@
-import React, { useState } from 'react';
-import { motion } from 'framer-motion';
+import React from 'react';
 import styled from 'styled-components';
-import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
-import MobileMenuBump from './_MobileMenuBump.component';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
 const MobileMinimalMenuOuter = styled.div `
   position: fixed;
   bottom: 0;
   left: 0;
 
   width: 100%;
-  height: 48px;
+  height: 56px;
   z-index: 10;
 
   display: flex;
   justify-content: space-evenly;
+  align-items: center;
 
-  background-color: ${(props) => props.theme.colours.cardBackground};
-`;
-const AnimatedMenuBumpContainer = styled(motion.div) `
-  position: fixed;
-  bottom: 46px;
-  left: 0;
-
-  width: 86px;
-  height: 24px;
-
-  svg {
-    fill: ${(props) => props.theme.colours.cardBackground};
-  }
+  background-color: ${(props) => props.theme.colours.background};
 `;
 const MobileMinimalMenuContainer = ({ children }) => {
-    const [bumpX, setBumpX] = useState(0);
-    return (React.createElement(MobileMenuBumpContext.Provider, { value: { setBumpX } },
-        React.createElement(MobileMinimalMenuOuter, null,
-            React.createElement(AnimatedMenuBumpContainer, { animate: { opacity: bumpX ? 1 : 0, x: bumpX ? bumpX - 86 / 2 : undefined, y: bumpX ? 0 : 100 }, transition: mobileMenuDefaultTransition },
-                React.createElement(MobileMenuBump, null)),
-            children)));
+    return React.createElement(MobileMinimalMenuOuter, null, children);
 };
 export default MobileMinimalMenuContainer;

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

@@ -2,9 +2,10 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 export interface MobileMinimalMenuItemProps {
     'icon'?: IconProp;
+    'label': string;
     'active'?: boolean;
     'onClick'?: () => void;
     'data-testid'?: string;
 }
-declare const MobileMinimalMenuItem: ({ icon, active, onClick, "data-testid": dataTestId }: MobileMinimalMenuItemProps) => JSX.Element;
+declare const MobileMinimalMenuItem: ({ icon, label, active, onClick, "data-testid": dataTestId, }: MobileMinimalMenuItemProps) => JSX.Element;
 export default MobileMinimalMenuItem;

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

@@ -1,14 +1,12 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { useContext, useEffect, useRef } from 'react';
+import React from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import useWindowDimensions from '../../../hooks/useWindowDimensions';
 import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
-import MobileMenuBumpContext from './_MobileMenuBump.context';
+import darkTheme from '../../../theme/dark.theme';
 const ItemContainer = styled.div `
   position: relative;
 
-  color: ${(props) => props.theme.colours.defaultFont};
   cursor: pointer;
 
   width: 48px;
@@ -17,26 +15,22 @@ const ItemContainer = styled.div `
   justify-content: center;
   align-items: center;
 `;
+const MotionDivContainer = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding-top: 3px;
+`;
+const TextDiv = styled.div `
+  font-size: 11px;
+  padding-top: 6px;
+`;
 const iconContainerVariants = {
-    active: { fontSize: '28px', y: -8 },
-};
-const MobileMinimalMenuItem = ({ icon, active, onClick, 'data-testid': dataTestId }) => {
-    const { width } = useWindowDimensions();
-    const { setBumpX } = useContext(MobileMenuBumpContext);
-    const itemRef = useRef(null);
-    useEffect(() => {
-        if (active && width > 0) {
-            const left = itemRef.current?.offsetLeft;
-            const center = left ? left + 48 / 2 : undefined;
-            setBumpX(center);
-        }
-        return () => {
-            if (active) {
-                setBumpX(undefined);
-            }
-        };
-    }, [active, setBumpX, width]);
-    return (React.createElement(ItemContainer, { onClick: onClick, ref: itemRef, "data-testid": dataTestId || 'menu-item' }, icon && (React.createElement(motion.div, { animate: active ? 'active' : undefined, style: { fontSize: '20px' }, variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
-        React.createElement(FontAwesomeIcon, { icon: icon })))));
+    base: { color: darkTheme.colours.defaultFont },
+    active: { color: darkTheme.colours.primary.hover },
 };
+const MobileMinimalMenuItem = ({ icon, label, active, onClick, 'data-testid': dataTestId, }) => (React.createElement(ItemContainer, { onClick: onClick, "data-testid": dataTestId || 'menu-item' }, icon && (React.createElement(MotionDivContainer, { animate: active ? 'active' : 'base', variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
+    React.createElement(FontAwesomeIcon, { icon: icon }),
+    React.createElement(TextDiv, null, label)))));
 export default MobileMinimalMenuItem;

package/package.json

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

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const MobileMenuBump: () => JSX.Element;
-export default MobileMenuBump;

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

@@ -1,4 +0,0 @@
-import React from 'react';
-const MobileMenuBump = () => (React.createElement("svg", { width: '86', height: '24', viewBox: '0 0 86 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-    React.createElement("path", { d: 'M86 19C86 26.6902 62.4543 22.5 41.5 22.5C22 22 0 25.1902 0 19C9 18.1902 9.91176 16.75 17.5 10.5C25.0882 4.25 31.6176 0.0597534 43 0.0597534C54.3824 0.0597534 61.4118 4.75 69 11C76.5882 17.25 79.5 18.1902 86 19Z' })));
-export default MobileMenuBump;

package/build/components/MinimalMenu/mobile/_MobileMenuBump.context.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export interface MobileMenuBumpContextProps {
-    setBumpX: (offset?: number) => void;
-}
-declare const MobileMenuBumpContext: import("react").Context<MobileMenuBumpContextProps>;
-export default MobileMenuBumpContext;

package/build/components/MinimalMenu/mobile/_MobileMenuBump.context.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-const MobileMenuBumpContext = createContext({
-    // eslint-disable-next-line
-    setBumpX: (offset) => { },
-});
-export default MobileMenuBumpContext;