@dtdot/lego 2.2.0 → 2.3.1

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+import { Status } from '../../theme/theme.types';
 export interface ChecklistItemProps {
     id: string;
     label: string;
-    colour?: string;
+    status?: Status;
 }
 export interface ChecklistProps {
     items: ChecklistItemProps[];

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 },
-            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, colour: item.colour })))),
+        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 },
-            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, colour: item.colour }))))));
+        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.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import { Status } from '../../theme/theme.types';
 export interface ChecklistItemProps {
     label: string;
     value: boolean;
     onChange: (value: boolean) => void;
     large: boolean;
-    colour?: string;
+    status?: Status;
 }
-declare const ChecklistItem: ({ label, value, onChange, large, colour }: ChecklistItemProps) => JSX.Element;
+declare const ChecklistItem: ({ label, value, onChange, large, status }: ChecklistItemProps) => JSX.Element;
 export default ChecklistItem;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import { Checkmark } from '../common/Checkmark.component';
+import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 const Outerlabel = styled(motion.label) `
   position: relative;
   margin-bottom: 4px;
@@ -15,8 +16,10 @@ const Outerlabel = styled(motion.label) `
   font-weight: ${(props) => props.theme.fonts.default.weight};
   color: ${(props) => (props.checked ? props.theme.colours.defaultBorder : props.theme.colours.defaultFont)};
 
-  background-color: ${(props) => props.$highlightColour ? `${props.$highlightColour}20` : props.theme.colours.background};
-  border-left: ${(props) => (props.$highlightColour ? `3px solid ${props.$highlightColour}` : '3px solid transparent')};
+  background-color: ${(props) => props.theme.colours.background};
+  border-left: 3px solid transparent;
+
+  transition: border-color 0.3s ease-in-out;
 
   user-select: none;
   cursor: pointer;
@@ -41,8 +44,12 @@ const Strikethrough = styled.div `
   padding-left: 2px;
   background-color: ${(props) => props.theme.colours.defaultBorder};
 `;
-const ChecklistItem = ({ label, value, onChange, large, colour }) => {
+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);
@@ -51,7 +58,9 @@ const ChecklistItem = ({ label, value, onChange, large, colour }) => {
             onChange(false);
         }
     };
-    return (React.createElement(Outerlabel, { checked: value, "$highlightColour": colour, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-testid": value ? 'checklist-item-checked' : 'checklist-item' },
+    return (React.createElement(Outerlabel, { checked: value, "$status": status, style: {
+            borderLeftColor: statusColour?.main ?? 'transparent',
+        }, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-testid": value ? 'checklist-item-checked' : 'checklist-item', "data-highlight": status ?? undefined },
         React.createElement(Checkmark, { checked: value, large: large }),
         React.createElement(Spacer, null),
         label,

package/build/index.d.ts

@@ -61,3 +61,4 @@ export { ButtonProps as ButtonProps } from './components/Button/Button.component
 export { ToggleProps } from './components/Toggle/Toggle.component';
 export { default as menuHelpers } from './components/Menu/menu.helpers';
 export { default as responsive } from './responsive/responsive';
+export type { Status } from './theme/theme.types';

package/package.json

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