@madie/madie-design-system 1.2.93 → 1.2.94

package/components/Toggle/Toggle.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+const Toggle = ({
+    checked,
+    className,
+    defaultChecked,
+    disabled,
+    id,
+    label,
+    onChange,
+    ...rest
+}) => {
+    const [uncontrolledChecked, setUncontrolledChecked] =
+        useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : uncontrolledChecked;
+    const classes = [
+        "qpp-c-toggle",
+        disabled && "qpp-c-toggle--disabled",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+
+    const handleChange = (event) => {
+        const nextChecked = event.target.checked;
+
+        if (!isControlled) {
+            setUncontrolledChecked(nextChecked);
+        }
+
+        onChange(event, nextChecked);
+    };
+
+    return (
+        <div className={classes}>
+            <label className="qpp-c-toggle__label">
+                <input
+                    checked={isChecked}
+                    className="qpp-c-toggle__input"
+                    disabled={disabled}
+                    id={id}
+                    onChange={handleChange}
+                    role="switch"
+                    type="checkbox"
+                    {...rest}
+                />
+                <span className="qpp-c-toggle__control" aria-hidden="true" />
+                {label && <span className="qpp-c-toggle__text">{label}</span>}
+            </label>
+        </div>
+    );
+};
+
+Toggle.propTypes = {
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    defaultChecked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    label: PropTypes.node,
+    onChange: PropTypes.func,
+};
+
+Toggle.defaultProps = {
+    checked: undefined,
+    className: "",
+    defaultChecked: false,
+    disabled: false,
+    label: null,
+    onChange: () => null,
+};
+
+export default Toggle;

package/components/Toggle/Toggle.stories.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import Toggle from "./Toggle";
+
+export default {
+    title: "Toggle",
+    component: Toggle,
+};
+
+export const Default = () => {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="qpp-u-padding--16">
+            <Toggle
+                checked={checked}
+                id="default-toggle"
+                label="Toggle"
+                onChange={(event, nextChecked) => setChecked(nextChecked)}
+            />
+        </div>
+    );
+};
+
+export const Disabled = () => (
+    <div className="qpp-u-padding--16">
+        <Toggle
+            defaultChecked
+            disabled
+            id="disabled-toggle"
+            label="Toggle"
+        />
+    </div>
+);

package/components/index.js

@@ -36,6 +36,7 @@ import TextField from "./TextField";
 import TimeField from "./TimeField/TimeField";
 import TextArea from "./TextArea";
 import Tooltip from "./Tooltip";
+import Toggle from "./Toggle/Toggle";
 import Toast from "./Toast";
 import Infotip from "./Infotip";
 import SearchAndFilter from "./SearchAndFilter";
@@ -173,6 +174,7 @@ export {
     TimeField,
     TextField,
     TextArea,
+    Toggle,
     Toast,
     Dropdown,
     Tooltip,