@dtdot/lego 2.3.0 → 2.3.2

package/build/components/Checklist/Checklist.component.js

@@ -36,10 +36,10 @@ const Checklist = ({ items, value, onChange, noSplitGap, large }) => {
         .sort((a, b) => checkedOrder.indexOf(a.id) - checkedOrder.indexOf(b.id));
     const unCheckedItems = items.filter((item) => !value.includes(item.id));
     return (React.createElement(LayoutGroup, { "data-testid": 'checklist' },
-        unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
+        unCheckedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id, layout: true },
             React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, status: item.status })))),
         checkedItems.length && !noSplitGap ? React.createElement(ListDivider, null) : null,
-        checkedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id },
+        checkedItems.map((item) => (React.createElement(motion.div, { layoutId: item.id, key: item.id, layout: true },
             React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, status: item.status }))))));
 };
 export default Checklist;

package/build/components/Checklist/_ChecklistItem.component.js

@@ -47,6 +47,9 @@ const Strikethrough = styled.div `
 const ChecklistItem = ({ label, value, onChange, large, status }) => {
     const theme = useTheme();
     const statusColour = status ? getThemeStatusColour(status, theme) : null;
+    if (status) {
+        console.log('ChecklistItem with status:', { label, status, statusColour, borderColor: statusColour?.main });
+    }
     const handleChange = (event) => {
         if (event.target.checked) {
             onChange(true);

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

@@ -2,12 +2,13 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
 interface FloatingActionButtonProps {
-    icon: IconDefinition;
-    onClick: () => void;
-    variant?: ColourVariant;
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'data-testid'?: string;
 }
 declare const FloatingActionButton: {
-    ({ icon, onClick, variant }: FloatingActionButtonProps): JSX.Element | null;
+    ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonProps): JSX.Element | null;
     Provider: ({ children }: import("./_FloatingActionButton.provider").FloatingActionButtonProviderProps) => JSX.Element;
 };
 export default FloatingActionButton;

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

@@ -3,7 +3,7 @@ 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' }) => {
+const FloatingActionButton = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
     const { contextExists, setButton } = useContext(FloatingActionButtonContext);
     const id = useMemo(() => v4(), []);
     useEffect(() => {
@@ -13,7 +13,7 @@ const FloatingActionButton = ({ icon, onClick, variant = 'primary' }) => {
         };
     }, [icon, onClick, variant, setButton]);
     if (!contextExists) {
-        return React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant });
+        return React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant, "data-testid": dataTestId });
     }
     return null;
 };

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

@@ -2,9 +2,10 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
 interface FloatingActionButtonInternalProps {
-    icon: IconDefinition;
-    onClick: () => void;
-    variant?: ColourVariant;
+    'icon': IconDefinition;
+    'onClick': () => void;
+    'variant'?: ColourVariant;
+    'data-testid'?: string;
 }
-declare const FloatingActionButtonInternal: ({ icon, onClick, variant }: FloatingActionButtonInternalProps) => JSX.Element;
+declare const FloatingActionButtonInternal: ({ icon, onClick, variant, "data-testid": dataTestId, }: FloatingActionButtonInternalProps) => JSX.Element;
 export default FloatingActionButtonInternal;

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

@@ -29,7 +29,7 @@ const FloatingButton = styled(motion.button) `
     background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
   }
 `;
-const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary' }) => {
+const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary', 'data-testid': dataTestId, }) => {
     const { menuExists, isMobile } = useContext(MinimalMenuContext);
     const { contextExists } = useContext(FloatingActionButtonContext);
     const variants = {
@@ -39,7 +39,7 @@ const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary' }) =>
         hover: { scale: 1.1 },
         tap: { scale: 0.95 },
     };
-    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 },
+    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 })));
 };
 export default FloatingActionButtonInternal;

package/package.json

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