@dtdot/lego 2.0.0-36 → 2.0.0-38

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ColourVariant } from '../../theme/theme.types';
+interface FloatingActionButtonProps {
+    icon: IconDefinition;
+    onClick: () => void;
+    variant?: ColourVariant;
+}
+declare const FloatingActionButton: React.FC<FloatingActionButtonProps>;
+export default FloatingActionButton;

package/build/components/FloatingActionButton/FloatingActionButton.component.js

@@ -0,0 +1,42 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
+const FloatingButton = styled(motion.button) `
+  position: fixed;
+  bottom: ${(props) => (props.offsetBottom ? '76px' : '20px')};
+  right: 20px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
+  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  z-index: 999;
+
+  &:hover {
+    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
+  }
+`;
+const FloatingActionButton = ({ icon, onClick, variant = 'primary' }) => {
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+    const variants = {
+        hidden: { opacity: 0, scale: 0 },
+        visible: { opacity: 1, scale: 1, transition: { duration: 0.3, delay: 0.2 } },
+        exit: { opacity: 0, scale: 0 },
+        hover: { scale: 1.05 },
+        tap: { scale: 0.95 },
+    };
+    return (React.createElement(FloatingButton, { initial: 'hidden', animate: 'visible', exit: 'exit', whileHover: 'hover', whileTap: 'tap', offsetBottom: menuExists && isMobile, variants: variants, onClick: onClick, variant: variant },
+        React.createElement(FontAwesomeIcon, { icon: icon })));
+};
+export default FloatingActionButton;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MinimalMenuContextProps {
+    menuExists: boolean;
+    isMobile: boolean;
+}
+declare const MinimalMenuContext: React.Context<MinimalMenuContextProps>;
+export default MinimalMenuContext;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+const MinimalMenuContext = React.createContext({
+    menuExists: false,
+    isMobile: false,
+});
+export default MinimalMenuContext;

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
-import responsive from '../../responsive/responsive';
+import responsive, { useIsScreenSize } from '../../responsive/responsive';
+import MinimalMenuContext from './MinimalMenu.context';
 const MinimalMenuPageContainer = styled.div `
   ${responsive.useStylesFor('tablet').andLarger(`
     padding-left: 64px;
@@ -17,6 +18,12 @@ const MinimalMenuPageContainer = styled.div `
   `}
 `;
 const MinimalMenuPage = ({ children, hiddenMenu }) => {
-    return React.createElement(MinimalMenuPageContainer, { hiddenMenu: !!hiddenMenu }, children);
+    const isMobile = useIsScreenSize('mobile');
+    const contextState = useMemo(() => ({
+        menuExists: true,
+        isMobile,
+    }), [isMobile]);
+    return (React.createElement(MinimalMenuContext.Provider, { value: contextState },
+        React.createElement(MinimalMenuPageContainer, { hiddenMenu: !!hiddenMenu }, children)));
 };
 export default MinimalMenuPage;

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

@@ -13,7 +13,7 @@ const MobileMinimalMenuOuter = styled.div `
   justify-content: space-evenly;
   align-items: center;
 
-  background-color: ${(props) => props.theme.colours.background};
+  background-color: ${(props) => props.theme.colours.cardBackground};
 `;
 const MobileMinimalMenuContainer = ({ children }) => {
     return React.createElement(MobileMinimalMenuOuter, null, children);

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

@@ -19,18 +19,22 @@ const MotionDivContainer = styled(motion.div) `
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 
   padding-top: 3px;
 `;
 const TextDiv = styled.div `
-  font-size: 11px;
+  font-size: 12px;
   padding-top: 6px;
 `;
+const StyledIcon = styled(FontAwesomeIcon) `
+  font-size: 22px;
+`;
 const iconContainerVariants = {
     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(StyledIcon, { icon: icon }),
     React.createElement(TextDiv, null, label)))));
 export default MobileMinimalMenuItem;

package/build/index.d.ts

@@ -14,7 +14,7 @@ export { default as Checklist } from './components/Checklist/Checklist.component
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
 export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
-export { default as FloatingAction } from './components/FloatingAction/FloatingAction.component';
+export { default as FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';
 export { default as Notifications } from './components/Notifications/Notifications.component';

package/build/index.js

@@ -14,7 +14,7 @@ export { default as Checklist } from './components/Checklist/Checklist.component
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
 export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
-export { default as FloatingAction } from './components/FloatingAction/FloatingAction.component';
+export { default as FloatingActionButton } from './components/FloatingActionButton/FloatingActionButton.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';
 export { default as Notifications } from './components/Notifications/Notifications.component';

package/package.json

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

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

@@ -1,7 +0,0 @@
-import React from 'react';
-interface FloatingActionProps {
-    children: React.ReactNode;
-    threshold?: number;
-}
-declare const FloatingAction: ({ children }: FloatingActionProps) => JSX.Element;
-export default FloatingAction;

package/build/components/FloatingAction/FloatingAction.component.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-const FloatingActionContainer = styled.div `
-  position: sticky;
-  bottom: 0;
-  background-color: ${(props) => props.theme.colours.background};
-`;
-const FloatingAction = ({ children }) => {
-    return React.createElement(FloatingActionContainer, null, children);
-};
-export default FloatingAction;