@studiocms/ui 0.1.0 → 0.3.0

package/src/components/Modal/modal.ts

@@ -6,6 +6,11 @@ class ModalHelper {
 	private isForm = false;
 	private modalForm: HTMLFormElement;
 
+	/**
+	 * A helper to manage modals.
+	 * @param id The ID of the modal.
+	 * @param triggerID The ID of the element that should trigger the modal.
+	 */
 	constructor(id: string, triggerID?: string) {
 		const element = document.getElementById(id) as HTMLDialogElement;
 
@@ -32,6 +37,11 @@ class ModalHelper {
 		}
 	}
 
+	/**
+	 * A helper function which adds event listeners to the modal buttons to close the modal when clicked.
+	 * @param id The ID of the modal.
+	 * @param dismissable Whether the modal is dismissable.
+	 */
 	private addButtonListeners = (id: string, dismissable: boolean) => {
 		if (
 			dismissable ||
@@ -54,6 +64,9 @@ class ModalHelper {
 		}
 	};
 
+	/**
+	 * A helper function to close the modal when the user clicks outside of it.
+	 */
 	private addDismissiveClickListener = () => {
 		this.element.addEventListener('click', (e: MouseEvent) => {
 			if (!e.target) return;
@@ -69,14 +82,25 @@ class ModalHelper {
 		});
 	};
 
+	/**
+	 * A function to show the modal.
+	 */
 	public show = () => {
 		this.element.showModal();
+		this.element.focus();
 	};
 
+	/**
+	 * A function to hide the modal.
+	 */
 	public hide = () => {
 		this.element.close();
 	};
 
+	/**
+	 * A function to add another trigger to show the modal with.
+	 * @param elementID The ID of the element that should trigger the modal when clicked.
+	 */
 	public bindTrigger = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -87,6 +111,10 @@ class ModalHelper {
 		element.addEventListener('click', this.show);
 	};
 
+	/**
+	 * Registers a callback for the cancel button.
+	 * @param func The callback function.
+	 */
 	public registerCancelCallback = (func: () => void) => {
 		if (!this.cancelButton) {
 			throw new Error('Unable to register cancel callback without a cancel button.');
@@ -100,6 +128,11 @@ class ModalHelper {
 		});
 	};
 
+	/**
+	 * Registers a callback for the confirm button.
+	 * @param func The callback function. If the modal is a form, the function will be called with
+	 * the form data as the first argument.
+	 */
 	public registerConfirmCallback = (func: (data?: FormData | undefined) => void) => {
 		if (!this.confirmButton) {
 			throw new Error('Unable to register cancel callback without a confirmation button.');

package/src/components/RadioGroup.astro

@@ -2,33 +2,75 @@
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the RadioGroup component.
+ */
 interface Option {
+	/**
+	 * The label of the option.
+	 */
 	label: string;
+	/**
+	 * The value of the option.
+	 */
 	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
 	disabled?: boolean;
 }
 
+/**
+ * The props for the RadioGroup component.
+ */
 interface Props {
+	/**
+	 * The label of the radio group.
+	 */
 	label: string;
+	/**
+	 * The color of the radio group. Defaults to `default`.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * The default value of the radio group. Needs to be one of the values in the options.
+	 */
 	defaultValue?: string;
+	/**
+	 * The options to display in the radio group.
+	 */
 	options: Option[];
+	/**
+	 * Whether the radio group is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The name of the radio group.
+	 */
 	name?: string;
+	/**
+	 * Whether the radio group is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
+	/**
+	 * Whether the radio group is horizontal. Defaults to `false`.
+	 */
 	horizontal?: boolean;
+	/**
+	 * Additional classes to apply to the radio group.
+	 */
 	class?: string;
 }
 
 const {
 	label,
-	color,
+	color = 'default',
 	defaultValue,
 	options,
-	disabled,
+	disabled = false,
+	isRequired = false,
+	horizontal = false,
 	name = generateID('radio'),
-	isRequired,
-	horizontal,
 	class: className,
 } = Astro.props;
 ---
@@ -45,18 +87,24 @@ const {
   <span>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
-  <div class="sui-radio-inputs">
-    {options.map(({ label, value, disabled: individuallyDisabled }) => (
+  <div class="sui-radio-inputs" role="radiogroup">
+    {options.map(({ label, value, disabled: individuallyDisabled }, i) => (
       <label
         for={value}
         class="sui-radio-label"
         class:list={[ individuallyDisabled && "disabled" ]}
       >
         <div class="sui-radio-box-container">
-          <div class="sui-radio-box" />
+          <div 
+            class="sui-radio-box" 
+            role="radio" 
+            tabindex={i === 0 ? 0 : -1} 
+            aria-checked={value === defaultValue}
+            aria-label={label}
+          />
         </div>
         <input 
-          class="sui-radio-toggle" 
+          class="sui-radio-toggle"
           type="radio" 
           value={value} 
           id={value} 
@@ -70,6 +118,78 @@ const {
     ))}
   </div>
 </div>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-radio-container');
+
+  for (const element of elements) {
+    if (element.dataset.initialized) continue;
+    
+    element.dataset.initialized = 'true';
+
+    const radioBoxes = element.querySelectorAll<HTMLDivElement>('.sui-radio-box');
+
+    let i = 0;
+
+    for (const radioBox of radioBoxes) {
+      radioBox.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === " ") {
+          e.preventDefault();
+
+          const input = (e.target as HTMLDivElement).parentElement!.parentElement!.querySelector<HTMLInputElement>('.sui-radio-toggle')!;
+
+          if (input.disabled) return;
+
+          input.checked = true;
+        }
+
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+          e.preventDefault();
+
+          let nextRadioBox: HTMLDivElement | undefined;
+
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) nextRadioBox = radioBoxes[index + 1];
+          });
+
+          if (!nextRadioBox) return;
+
+          radioBox.tabIndex = -1;
+          nextRadioBox.tabIndex = 0;
+          nextRadioBox.focus();
+          nextRadioBox.click();
+        }
+
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+          e.preventDefault();
+
+          let previousRadioBox: HTMLDivElement | undefined;
+
+          radioBoxes.forEach((box, index) => {
+            if (box === radioBox) previousRadioBox = radioBoxes[index - 1];
+          });
+
+          if (!previousRadioBox) return;
+
+          radioBox.tabIndex = -1;
+          previousRadioBox.tabIndex = 0;
+          previousRadioBox.focus();
+          previousRadioBox.click();
+        }
+      });
+
+      i++;
+    }
+    element.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter') return;
+
+      const checkbox = element.querySelector<HTMLInputElement>('.sui-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+</script>
 <style>
   .sui-radio-container {
     display: flex;
@@ -164,6 +284,10 @@ const {
     transition: all .15s ease;
   }
 
+  .sui-radio-box:focus-visible {
+    outline-color: hsl(var(--text-normal)) !important;
+  }
+
   .sui-radio-toggle {
     width: 0;
     height: 0;

package/src/components/Row.astro

@@ -1,8 +1,17 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
+/**
+ * The props for the row component.
+ */
 interface Props extends HTMLAttributes<'div'> {
+	/**
+	 * Whether the row should be aligned to the center. Defaults to `false`.
+	 */
 	alignCenter?: boolean;
+	/**
+	 * The size of the gap between the children. Defaults to `md`.
+	 */
 	gapSize?: 'sm' | 'md' | 'lg';
 }