@dtdot/lego 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
export interface ToggleProps {
|
|
3
3
|
value: boolean;
|
|
4
4
|
onChange: (value: boolean) => void;
|
|
5
|
+
label?: string;
|
|
5
6
|
}
|
|
6
|
-
declare const Toggle: ({ value, onChange }: ToggleProps) => JSX.Element;
|
|
7
|
+
declare const Toggle: ({ value, onChange, label }: ToggleProps) => JSX.Element;
|
|
7
8
|
export default Toggle;
|
|
@@ -2,6 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import { motion } from 'framer-motion';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import darkTheme from '../../theme/dark.theme';
|
|
5
|
+
const Container = styled.div `
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
|
+
`;
|
|
10
|
+
const Label = styled.span `
|
|
11
|
+
font-size: 14px;
|
|
12
|
+
color: ${(props) => props.theme.colours.defaultFont};
|
|
13
|
+
`;
|
|
5
14
|
const ToggleOuter = styled(motion.div) `
|
|
6
15
|
width: 42px;
|
|
7
16
|
height: 24px;
|
|
@@ -29,8 +38,10 @@ const toggleDotVariants = {
|
|
|
29
38
|
off: { transform: 'translateX(4px)' },
|
|
30
39
|
on: { transform: 'translateX(22px)' },
|
|
31
40
|
};
|
|
32
|
-
const Toggle = ({ value, onChange }) => {
|
|
33
|
-
return (React.createElement(
|
|
34
|
-
React.createElement(
|
|
41
|
+
const Toggle = ({ value, onChange, label }) => {
|
|
42
|
+
return (React.createElement(Container, null,
|
|
43
|
+
label && React.createElement(Label, null, label),
|
|
44
|
+
React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value), "data-testid": 'toggle' },
|
|
45
|
+
React.createElement(ToggleDot, { animate: value ? 'on' : 'off', variants: toggleDotVariants, transition: { type: 'spring', duration: 0.3 } }))));
|
|
35
46
|
};
|
|
36
47
|
export default Toggle;
|
package/build/index.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ export { default as Swimlane } from './components/Swimlane/Swimlane.component';
|
|
|
40
40
|
export { default as Table } from './components/Table/Table.component';
|
|
41
41
|
export { default as Text } from './components/Text/Text.component';
|
|
42
42
|
export { default as TextArea } from './components/TextArea/TextArea.component';
|
|
43
|
+
export { default as Toggle } from './components/Toggle/Toggle.component';
|
|
43
44
|
export { default as LoginScreen } from './screens/Login/Login.screen';
|
|
44
45
|
export { default as RegisterScreen } from './screens/Register/Register.screen';
|
|
45
46
|
export { default as VerificationScreen } from './screens/Verification/Verification.screen';
|
|
@@ -57,5 +58,6 @@ export { LoginData } from './screens/Login/Login.screen';
|
|
|
57
58
|
export { VerificationData } from './screens/Verification/Verification.screen';
|
|
58
59
|
export { default as FileContext } from './contexts/File.context';
|
|
59
60
|
export { ButtonProps as ButtonProps } from './components/Button/Button.component';
|
|
61
|
+
export { ToggleProps } from './components/Toggle/Toggle.component';
|
|
60
62
|
export { default as menuHelpers } from './components/Menu/menu.helpers';
|
|
61
63
|
export { default as responsive } from './responsive/responsive';
|
package/build/index.js
CHANGED
|
@@ -40,6 +40,7 @@ export { default as Swimlane } from './components/Swimlane/Swimlane.component';
|
|
|
40
40
|
export { default as Table } from './components/Table/Table.component';
|
|
41
41
|
export { default as Text } from './components/Text/Text.component';
|
|
42
42
|
export { default as TextArea } from './components/TextArea/TextArea.component';
|
|
43
|
+
export { default as Toggle } from './components/Toggle/Toggle.component';
|
|
43
44
|
export { default as LoginScreen } from './screens/Login/Login.screen';
|
|
44
45
|
export { default as RegisterScreen } from './screens/Register/Register.screen';
|
|
45
46
|
export { default as VerificationScreen } from './screens/Verification/Verification.screen';
|