@dtdot/lego 2.4.0 → 2.5.0

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

@@ -5,10 +5,19 @@ interface FloatingActionButtonProps {
     'icon': IconDefinition;
     'onClick': () => void;
     'variant'?: ColourVariant;
+    'label'?: string;
     'data-testid'?: string;
 }
 declare const FloatingActionButton: {
-    ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonProps): JSX.Element | null;
+    ({ icon, onClick, variant, label, "data-testid": dataTestId, }: FloatingActionButtonProps): JSX.Element | null;
     Provider: ({ children }: import("./_FloatingActionButton.provider").FloatingActionButtonProviderProps) => JSX.Element;
+    Secondary: ({ icon, onClick, variant, label, "data-testid": dataTestId, }: SecondaryFloatingActionButtonProps) => null;
 };
+interface SecondaryFloatingActionButtonProps {
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'label'?: string;
+    'data-testid'?: string;
+}
 export default FloatingActionButton;

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

@@ -3,19 +3,34 @@ import FloatingActionButtonContext from './_FloatingActionButton.context';
 import FloatingActionButtonProvider from './_FloatingActionButton.provider';
 import { v4 } from 'uuid';
 import FloatingActionButtonInternal from './_FloatingActionButton.internal';
-const FloatingActionButton = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
-    const { contextExists, setButton } = useContext(FloatingActionButtonContext);
+const FloatingActionButton = ({ icon, onClick, variant = 'primary', label, 'data-testid': dataTestId, }) => {
+    const { contextExists, setPrimaryButton } = useContext(FloatingActionButtonContext);
     const id = useMemo(() => v4(), []);
     useEffect(() => {
-        setButton({ id, icon, onClick, variant, dataTestId });
+        setPrimaryButton({ id, icon, onClick, variant, label, dataTestId });
         return () => {
-            setButton(undefined);
+            setPrimaryButton(undefined);
         };
-    }, [icon, onClick, variant, dataTestId, setButton]);
+    }, [icon, onClick, variant, label, dataTestId, setPrimaryButton, id]);
     if (!contextExists) {
-        return React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant, "data-testid": dataTestId });
+        return (React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant, label: label, "data-testid": dataTestId }));
     }
     return null;
 };
+const SecondaryFloatingActionButton = ({ icon, onClick, variant = 'primary', label, 'data-testid': dataTestId, }) => {
+    const { setSecondaryButtons } = useContext(FloatingActionButtonContext);
+    const id = useMemo(() => v4(), []);
+    useEffect(() => {
+        // Register this secondary FAB
+        setSecondaryButtons((prev) => [...prev, { id, icon, onClick, variant, label, dataTestId }]);
+        return () => {
+            // Unregister this secondary FAB
+            setSecondaryButtons((prev) => prev.filter((fab) => fab.id !== id));
+        };
+    }, [icon, onClick, variant, label, dataTestId, setSecondaryButtons, id]);
+    // Secondary FABs always return null - rendered by provider
+    return null;
+};
 FloatingActionButton.Provider = FloatingActionButtonProvider;
+FloatingActionButton.Secondary = SecondaryFloatingActionButton;
 export default FloatingActionButton;

package/build/components/FloatingActionButton/_FloatingActionButton.context.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Dispatch, SetStateAction } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
 export interface FabProps {
@@ -6,11 +6,21 @@ export interface FabProps {
     icon: IconDefinition | null;
     onClick: () => void;
     variant?: ColourVariant;
+    label?: string;
+    dataTestId?: string;
+}
+export interface SecondaryFabProps {
+    id: string;
+    icon: IconDefinition;
+    onClick: () => void;
+    variant?: ColourVariant;
+    label?: string;
     dataTestId?: string;
 }
 interface FloatingActionButtonContextProps {
     contextExists: boolean;
-    setButton: (props: FabProps | undefined) => void;
+    setPrimaryButton: Dispatch<SetStateAction<FabProps | undefined>>;
+    setSecondaryButtons: Dispatch<SetStateAction<SecondaryFabProps[]>>;
 }
 declare const FloatingActionButtonContext: import("react").Context<FloatingActionButtonContextProps>;
 export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.context.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 const FloatingActionButtonContext = createContext({
     contextExists: false,
-    setButton: () => { },
+    setPrimaryButton: () => { },
+    setSecondaryButtons: () => { },
 });
 export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.internal.d.ts

@@ -6,6 +6,18 @@ interface FloatingActionButtonInternalProps {
     'onClick': () => void;
     'variant'?: ColourVariant;
     'data-testid'?: string;
+    'label'?: string;
 }
-declare const FloatingActionButtonInternal: ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonInternalProps) => JSX.Element;
+declare const FloatingActionButtonInternal: (props: FloatingActionButtonInternalProps) => JSX.Element;
+interface MiniFabInternalProps {
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'label'?: string;
+    'bottom': number;
+    'staggerDelay': number;
+    'data-testid'?: string;
+}
+declare const MiniFabInternal: ({ bottom, staggerDelay, ...rest }: MiniFabInternalProps) => JSX.Element;
 export default FloatingActionButtonInternal;
+export { MiniFabInternal };

package/build/components/FloatingActionButton/_FloatingActionButton.internal.js

@@ -1,17 +1,42 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
 import zIndexConstants from '../../constants/zIndex.constants';
 import FloatingActionButtonContext from './_FloatingActionButton.context';
-const FloatingButton = styled(motion.button) `
+const FAB_SIZES = {
+    primary: {
+        width: 56,
+        height: 56,
+        fontSize: 24,
+        labelOffset: 68,
+        hoverScale: 1.1,
+        tapScale: 0.95,
+    },
+    mini: {
+        width: 40,
+        height: 40,
+        fontSize: 18,
+        labelOffset: 52,
+        hoverScale: 1.15,
+        tapScale: 0.9,
+    },
+};
+const FabContainer = styled(motion.div) `
   position: fixed;
-  bottom: ${(props) => (props.offsetBottom ? '76px' : '20px')};
+  bottom: ${(props) => {
+    if (props.bottom !== undefined)
+        return `${props.bottom}px`;
+    return props.offsetBottom ? '76px' : '20px';
+}};
   right: 20px;
-  width: 56px;
-  height: 56px;
+  z-index: ${zIndexConstants.floatingActionButton};
+`;
+const FabButton = styled(motion.button) `
+  width: ${(props) => FAB_SIZES[props.size].width}px;
+  height: ${(props) => FAB_SIZES[props.size].height}px;
   border-radius: 50%;
   background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
   color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
@@ -21,25 +46,74 @@ const FloatingButton = styled(motion.button) `
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 24px;
+  font-size: ${(props) => FAB_SIZES[props.size].fontSize}px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  z-index: ${zIndexConstants.floatingActionButton};
 
   &:hover {
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
   }
 `;
-const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
-    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+const FabLabel = styled(motion.div) `
+  position: absolute;
+  right: ${(props) => FAB_SIZES[props.size].labelOffset}px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  padding: 6px 12px;
+  border-radius: 4px;
+
+  background-color: ${(props) => props.theme.colours.tertiary.main};
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: ${(props) => props.theme.shadows.medium};
+`;
+const BaseFab = ({ icon, onClick, variant = 'primary', label, size, bottom, offsetBottom, staggerDelay = 0, 'data-testid': dataTestId, }) => {
+    const [showLabel, setShowLabel] = React.useState(false);
     const { contextExists } = useContext(FloatingActionButtonContext);
+    const sizeConfig = FAB_SIZES[size];
     const variants = {
         hidden: { opacity: 0, scale: 0 },
-        visible: { opacity: 1, scale: 1, transition: { duration: 0.3, delay: 0.2 } },
-        exit: { opacity: 0, scale: 0, transition: { duration: 0.3 } },
-        hover: { scale: 1.1 },
-        tap: { scale: 0.95 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.3,
+                delay: staggerDelay,
+            },
+        },
+        exit: {
+            opacity: 0,
+            scale: 0,
+            transition: {
+                duration: 0.3,
+                delay: staggerDelay,
+            },
+        },
+        hover: { scale: sizeConfig.hoverScale },
+        tap: { scale: sizeConfig.tapScale },
     };
-    return (React.createElement(FloatingButton, { key: 'floating-button', initial: contextExists ? 'hidden' : 'visible', animate: 'visible', exit: 'exit', whileHover: 'hover', whileTap: 'tap', offsetBottom: menuExists && isMobile, variants: variants, onClick: onClick, variant: variant, "data-testid": dataTestId },
-        React.createElement(FontAwesomeIcon, { icon: icon })));
+    const labelVariants = {
+        hidden: { opacity: 0, x: 10 },
+        visible: { opacity: 1, x: 0 },
+    };
+    return (React.createElement(FabContainer, { bottom: bottom, offsetBottom: offsetBottom, initial: contextExists ? 'hidden' : 'visible', animate: 'visible', exit: 'exit', variants: variants, onHoverStart: () => setShowLabel(true), onHoverEnd: () => setShowLabel(false) },
+        React.createElement(FabButton, { animate: 'visible', whileHover: 'hover', whileTap: 'tap', variants: variants, onClick: onClick, variant: variant, size: size, "data-testid": dataTestId },
+            React.createElement(FontAwesomeIcon, { icon: icon })),
+        label && (React.createElement(AnimatePresence, null, showLabel && (React.createElement(FabLabel, { size: size, initial: 'hidden', animate: 'visible', exit: 'hidden', variants: labelVariants, transition: { type: 'spring', duration: 0.3 } }, label))))));
+};
+const FloatingActionButtonInternal = (props) => {
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+    const { contextExists } = useContext(FloatingActionButtonContext);
+    return (React.createElement(BaseFab, { ...props, size: 'primary', offsetBottom: menuExists && isMobile, staggerDelay: contextExists ? 0.2 : 0 }));
+};
+const MiniFabInternal = ({ bottom, staggerDelay, ...rest }) => {
+    return React.createElement(BaseFab, { ...rest, size: 'mini', bottom: bottom, staggerDelay: staggerDelay });
 };
 export default FloatingActionButtonInternal;
+export { MiniFabInternal };

package/build/components/FloatingActionButton/_FloatingActionButton.provider.js

@@ -1,15 +1,27 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import FloatingActionButtonContext from './_FloatingActionButton.context';
-import FloatingActionButtonInternal from './_FloatingActionButton.internal';
+import FloatingActionButtonInternal, { MiniFabInternal } from './_FloatingActionButton.internal';
+import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
 const FloatingActionButtonProvider = ({ children }) => {
-    const [fab, setFab] = useState();
+    const [primaryFab, setPrimaryFab] = useState();
+    const [secondaryFabs, setSecondaryFabs] = useState([]);
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
     const contextVal = useMemo(() => ({
         contextExists: true,
-        setButton: setFab,
-    }), [setFab]);
+        setPrimaryButton: setPrimaryFab,
+        setSecondaryButtons: setSecondaryFabs,
+    }), []);
     return (React.createElement(FloatingActionButtonContext.Provider, { value: contextVal },
         children,
-        React.createElement(AnimatePresence, null, fab?.icon && (React.createElement(FloatingActionButtonInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant, "data-testid": fab.dataTestId })))));
+        React.createElement(AnimatePresence, null,
+            primaryFab?.icon && (React.createElement(FloatingActionButtonInternal, { key: primaryFab.id, icon: primaryFab.icon, onClick: primaryFab.onClick, variant: primaryFab.variant, label: primaryFab.label, "data-testid": primaryFab.dataTestId })),
+            secondaryFabs.map((fab, index) => {
+                const offsetBottom = menuExists && isMobile;
+                const baseOffset = offsetBottom ? 76 : 20;
+                const bottom = baseOffset + 56 + 8 + index * (40 + 10);
+                const staggerDelay = 0.2 + 0.05 * (index + 1);
+                return (React.createElement(MiniFabInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant, label: fab.label, bottom: bottom, staggerDelay: staggerDelay, "data-testid": fab.dataTestId }));
+            }))));
 };
 export default FloatingActionButtonProvider;

package/package.json

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