@developer-overheid-nl/don-register-components 1.1.0 → 1.2.0

package/src/switch/Switch.tsx

@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import {
+  type ForwardedRef,
+  forwardRef,
+  type InputHTMLAttributes,
+  useId,
+} from "react";
+import styles from "./styles.module.css";
+
+export interface SwitchLabels {
+  on: string;
+  off: string;
+}
+
+export interface SwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> {
+  invalid?: boolean;
+  labels?: SwitchLabels;
+}
+
+const Switch = forwardRef(
+  (props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) => {
+    const genId = useId();
+    const {
+      id = genId,
+      disabled,
+      invalid,
+      required,
+      hidden,
+      checked,
+      defaultChecked,
+      role,
+      tabIndex,
+      className,
+      labels = { on: "ON", off: "OFF" },
+      ...restProps
+    } = props;
+
+    return (
+      <div
+        className={clsx(
+          "utrecht-form-toggle",
+          "utrecht-form-toggle--html-checkbox",
+          {
+            "utrecht-form-toggle--disabled": disabled,
+            "utrecht-form-toggle--invalid": invalid,
+            "utrecht-form-toggle--required": required,
+          },
+          styles.switch,
+          className,
+        )}
+        hidden={hidden}
+      >
+        <input
+          id={id}
+          aria-invalid={invalid || undefined}
+          type="checkbox"
+          className="utrecht-form-toggle__checkbox"
+          checked={checked}
+          defaultChecked={defaultChecked || undefined}
+          disabled={disabled || undefined}
+          required={required}
+          ref={ref}
+          role={role}
+          tabIndex={tabIndex}
+          {...restProps}
+        />
+        <label
+          htmlFor={id}
+          className={clsx(
+            "utrecht-form-toggle__track",
+            "utrecht-form-toggle__track--html-label",
+          )}
+        >
+          <div className="utrecht-form-toggle__thumb">
+            <span className="sr-only">
+              {checked || defaultChecked ? labels.on : labels.off}
+            </span>
+          </div>
+        </label>
+      </div>
+    );
+  },
+);
+
+export default Switch;

package/src/switch/styles.module.css

@@ -0,0 +1,7 @@
+.switch {
+  &:hover {
+    :global(.utrecht-form-toggle__track) {
+      background-color: var(--utrecht-form-toggle-hover-background-color);
+    }
+  }
+}

package/src/toolTip/ToolTip.tsx

@@ -0,0 +1,55 @@
+import {
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type HTMLProps,
+  type PropsWithChildren,
+  useId,
+} from "react";
+import Infobutton, { type InfoButtonProps } from "../infoButton/InfoButton";
+import styles from "./styles.module.css";
+
+interface ToolTipProps extends HTMLProps<HTMLButtonElement> {
+  id?: string;
+  className?: string;
+  text: string;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  command?: InfoButtonProps["command"];
+  commandfor?: InfoButtonProps["commandfor"];
+  interestfor?: InfoButtonProps["interestfor"];
+  popover?: HTMLAttributes<HTMLDivElement>["popover"];
+}
+
+const ToolTip = (props: PropsWithChildren<ToolTipProps>) => {
+  const genId: string = useId();
+  const {
+    id = genId,
+    className,
+    text,
+    command = "toggle-popover",
+    commandfor = genId,
+    interestfor = genId,
+    popover = "manual",
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <>
+      {children ? (
+        children
+      ) : (
+        <Infobutton
+          interestfor={interestfor}
+          commandfor={commandfor}
+          command={command}
+          {...restProps}
+        />
+      )}
+      <div className={styles.toolTip} id={id} popover={popover} role="tooltip">
+        {text}
+      </div>
+    </>
+  );
+};
+
+export default ToolTip;

package/src/toolTip/styles.module.css

@@ -0,0 +1,48 @@
+:root {
+  --don-tooltip-border-color: var(--rhc-color-cool-grey-300);
+  --don-tooltip-background-color: var(--rhc-color-cool-grey-50);
+  --don-tooltip-border-radius: var(--rhc-border-radius-md);
+  --don-tooltip-font-size: 0.875rem;
+  --don-tooltip-font-weigth: normal;
+}
+
+.triggerButton {
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.toolTip {
+  position-area: block-end span-all;
+  border: var(--don-tooltip-border-width, 1px) solid
+    var(--don-tooltip-border-color, #cbd5e1);
+  border-radius: var(--don-tooltip-border-radius, 5px);
+  background-color: var(--don-tooltip-background-color, #f8fafc);
+  box-shadow: 0 0 1px 2px rgb(127, 127, 127, 0.05);
+  font-size: var(--don-tooltip-font-size, inherit);
+  font-weight: var(--don-tooltip-font-weigth, normal);
+  padding-block: var(--don-tooltip-padding-block, 0.5rem);
+  padding-inline: var(
+    --don-tooltip-padding-inline,
+    var(--don-tooltip-padding-block, 0.5rem)
+  );
+
+  /* needed for triangle */
+  margin: 5px;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    position-area: top;
+    top: -5px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+
+    border-bottom: 5px solid var(--don-tooltip-border-color, #cbd5e1);
+  }
+}