feat(react/ribbon): port toggle protected note

apps/client/src/widgets/react/FormToggle.css

@@ -0,0 +1,98 @@
+.switch-widget {
+    --switch-track-width: 50px;
+    --switch-track-height: 24px;
+    --switch-off-track-background: var(--more-accented-background-color);
+    --switch-on-track-background: var(--main-text-color);
+
+    --switch-thumb-width: 16px;
+    --switch-thumb-height: 16px;
+    --switch-off-thumb-background: var(--main-background-color);
+    --switch-on-thumb-background: var(--main-background-color);
+
+    display: flex;
+    align-items: center;
+}
+
+/* The track of the toggle switch */
+
+.switch-widget .switch-button {
+    display: block;
+    position: relative;
+    margin-left: 8px;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-radius: 24px;
+    background-color: var(--switch-off-track-background);
+    transition: background 200ms ease-in;
+}
+
+.switch-widget .switch-button.on {
+    background: var(--switch-on-track-background);
+    transition: background 100ms ease-out;
+}
+
+/* The thumb of the toggle switch */
+
+.switch-widget .switch-button:after {
+    --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);
+    --x: var(--y);
+
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--switch-thumb-width);
+    height: var(--switch-thumb-height);
+    background-color: var(--switch-off-thumb-background);
+    border-radius: 50%;
+    transform: translate(var(--x), var(--y));
+    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
+                background 200ms ease-out;
+}
+
+.switch-widget .switch-button.on:after {
+    --x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));
+
+    background: var(--switch-on-thumb-background);
+    transition: transform 200ms cubic-bezier(0.64, 0, 0.78, 0),
+                background 100ms ease-in;
+}
+
+
+.switch-widget .switch-button input[type="checkbox"] {
+    /* A hidden check box for accesibility purposes */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+/* Disabled state */
+.switch-widget .switch-button:not(.disabled) input[type="checkbox"],
+.switch-widget .switch-button:not(.disabled) {
+    cursor: pointer;
+}
+
+.switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) {
+    outline: 2px solid var(--button-border-color);
+    outline-offset: 2px;
+}
+
+.switch-widget .switch-button.disabled {
+    opacity: 70%;
+}
+
+.switch-widget .switch-help-button {
+    border: 0;
+    margin-left: 4px;
+    background: none;
+    cursor: pointer;
+    font-size: 1.1em;
+    color: var(--muted-text-color);
+}
+
+.switch-widget .switch-help-button:hover {
+    color: var(--main-text-color);
+}

apps/client/src/widgets/react/FormToggle.tsx

@@ -0,0 +1,47 @@
+import { t } from "../../services/i18n";
+import { openInAppHelpFromUrl } from "../../services/utils";
+import "./FormToggle.css";
+
+interface FormToggleProps {
+    currentValue: boolean | null;
+    onChange(newValue: boolean): void;
+    switchOnName: string;
+    switchOnTooltip: string;
+    switchOffName: string;
+    switchOffTooltip: string;
+    helpPage?: string;
+}
+
+export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange }: FormToggleProps) {
+    return (
+        <div className="switch-widget">
+            <span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
+
+            <label>
+                <div
+                    className={`switch-button ${currentValue ? "on" : ""}`}
+                    title={currentValue ? switchOffTooltip : switchOnTooltip }
+                >
+                    <input
+                        className="switch-toggle"
+                        type="checkbox"
+                        checked={currentValue === true}
+                        onInput={(e) => {
+                            onChange(!currentValue);
+                            e.preventDefault();
+                        }}      
+                    />
+                </div>
+            </label>
+
+            { helpPage && (
+                <button
+                    class="switch-help-button icon-action bx bx-help-circle"
+                    type="button"
+                    onClick={() => openInAppHelpFromUrl(helpPage)}
+                    title={t("open-help-page")}
+                />
+            )}
+        </div>
+    )
+}