@dtdot/lego 2.0.1 → 2.2.0

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

@@ -2,6 +2,7 @@
 export interface ChecklistItemProps {
     id: string;
     label: string;
+    colour?: string;
 }
 export interface ChecklistProps {
     items: ChecklistItemProps[];

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

@@ -37,9 +37,9 @@ const Checklist = ({ items, value, onChange, noSplitGap, large }) => {
     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 })))),
+            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, colour: item.colour })))),
         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 }))))));
+            React.createElement(ChecklistItem, { label: item.label, value: value.includes(item.id), onChange: (checked) => handleChange(item.id, checked), large: !!large, colour: item.colour }))))));
 };
 export default Checklist;

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

@@ -4,6 +4,7 @@ export interface ChecklistItemProps {
     value: boolean;
     onChange: (value: boolean) => void;
     large: boolean;
+    colour?: string;
 }
-declare const ChecklistItem: ({ label, value, onChange, large }: ChecklistItemProps) => JSX.Element;
+declare const ChecklistItem: ({ label, value, onChange, large, colour }: ChecklistItemProps) => JSX.Element;
 export default ChecklistItem;

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

@@ -15,7 +15,8 @@ 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.theme.colours.background};
+  background-color: ${(props) => props.$highlightColour ? `${props.$highlightColour}20` : props.theme.colours.background};
+  border-left: ${(props) => (props.$highlightColour ? `3px solid ${props.$highlightColour}` : '3px solid transparent')};
 
   user-select: none;
   cursor: pointer;
@@ -40,7 +41,7 @@ const Strikethrough = styled.div `
   padding-left: 2px;
   background-color: ${(props) => props.theme.colours.defaultBorder};
 `;
-const ChecklistItem = ({ label, value, onChange, large }) => {
+const ChecklistItem = ({ label, value, onChange, large, colour }) => {
     const theme = useTheme();
     const handleChange = (event) => {
         if (event.target.checked) {
@@ -50,7 +51,7 @@ const ChecklistItem = ({ label, value, onChange, large }) => {
             onChange(false);
         }
     };
-    return (React.createElement(Outerlabel, { checked: value, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-testid": value ? 'checklist-item-checked' : 'checklist-item' },
+    return (React.createElement(Outerlabel, { checked: value, "$highlightColour": colour, whileHover: { backgroundColor: theme.colours.cardBackground }, "data-testid": value ? 'checklist-item-checked' : 'checklist-item' },
         React.createElement(Checkmark, { checked: value, large: large }),
         React.createElement(Spacer, null),
         label,

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

@@ -2,6 +2,7 @@
 export interface ToggleProps {
     value: boolean;
     onChange: (value: boolean) => void;
+    label?: string;
 }
-declare const Toggle: ({ value, onChange }: ToggleProps) => JSX.Element;
+declare const Toggle: ({ value, onChange, label }: ToggleProps) => JSX.Element;
 export default Toggle;

package/build/components/Toggle/Toggle.component.js

@@ -2,6 +2,15 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
 import darkTheme from '../../theme/dark.theme';
+const Container = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const Label = styled.span `
+  font-size: 14px;
+  color: ${(props) => props.theme.colours.defaultFont};
+`;
 const ToggleOuter = styled(motion.div) `
   width: 42px;
   height: 24px;
@@ -29,8 +38,10 @@ const toggleDotVariants = {
     off: { transform: 'translateX(4px)' },
     on: { transform: 'translateX(22px)' },
 };
-const Toggle = ({ value, onChange }) => {
-    return (React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value), "data-testid": 'toggle' },
-        React.createElement(ToggleDot, { animate: value ? 'on' : 'off', variants: toggleDotVariants, transition: { type: 'spring', duration: 0.3 } })));
+const Toggle = ({ value, onChange, label }) => {
+    return (React.createElement(Container, null,
+        label && React.createElement(Label, null, label),
+        React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value), "data-testid": 'toggle' },
+            React.createElement(ToggleDot, { animate: value ? 'on' : 'off', variants: toggleDotVariants, transition: { type: 'spring', duration: 0.3 } }))));
 };
 export default Toggle;

package/build/index.d.ts

@@ -40,6 +40,7 @@ export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';
 export { default as Text } from './components/Text/Text.component';
 export { default as TextArea } from './components/TextArea/TextArea.component';
+export { default as Toggle } from './components/Toggle/Toggle.component';
 export { default as LoginScreen } from './screens/Login/Login.screen';
 export { default as RegisterScreen } from './screens/Register/Register.screen';
 export { default as VerificationScreen } from './screens/Verification/Verification.screen';
@@ -57,5 +58,6 @@ export { LoginData } from './screens/Login/Login.screen';
 export { VerificationData } from './screens/Verification/Verification.screen';
 export { default as FileContext } from './contexts/File.context';
 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';

package/build/index.js

@@ -40,6 +40,7 @@ export { default as Swimlane } from './components/Swimlane/Swimlane.component';
 export { default as Table } from './components/Table/Table.component';
 export { default as Text } from './components/Text/Text.component';
 export { default as TextArea } from './components/TextArea/TextArea.component';
+export { default as Toggle } from './components/Toggle/Toggle.component';
 export { default as LoginScreen } from './screens/Login/Login.screen';
 export { default as RegisterScreen } from './screens/Register/Register.screen';
 export { default as VerificationScreen } from './screens/Verification/Verification.screen';

package/package.json

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