@studiocms/ui 0.1.0 → 0.3.0

package/src/components/Card.astro

@@ -1,16 +1,31 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 
+/**
+ * Props for the card component.
+ */
 type Props<As extends HTMLTag = 'div'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	/**
+	 * The polymorphic component to render the card as. Defaults to `div`.
+	 */
 	as?: As;
-	class?: string;
+	/**
+	 * Whether the card should be full width. Defaults to `false`.
+	 */
 	fullWidth?: boolean;
+	/**
+	 * Whether the card should be full height. Defaults to `false`.
+	 */
 	fullHeight?: boolean;
+	/**
+	 * The variant of the card. Defaults to `default`.
+	 */
+	variant?: 'default' | 'filled';
 };
 
-const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = Astro.props;
+const { as: As = 'div', fullWidth, fullHeight, variant = 'default', ...props } = Astro.props;
 ---
-<As class="sui-card" class:list={[fullWidth && "full-w", fullHeight && "full-h", className]} {...props}>
+<As class="sui-card" class:list={[fullWidth && "full-w", fullHeight && "full-h", variant]} {...props}>
   <div class="sui-card-header">
     <slot name="header" />
   </div>
@@ -30,6 +45,11 @@ const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = As
     height: fit-content;
   }
 
+  .sui-card.filled {
+    background-color: hsl(var(--background-step-3));
+    border: none;
+  }
+
   .sui-card.full-w {
     width: 100%;
   }
@@ -54,6 +74,10 @@ const { as: As = 'div', class: className, fullWidth, fullHeight, ...props } = As
     padding: 1rem;
   }
 
+  .filled .sui-card-footer {
+    border: none;
+  }
+
   @media screen and (max-width: 840px) {
     .sui-card {
       width: 100%;

package/src/components/Checkbox.astro

@@ -3,13 +3,37 @@ import Checkmark from '../icons/Checkmark.astro';
 import type { StudioCMSColorway } from '../utils/colors';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the Checkbox component.
+ */
 interface Props {
+	/**
+	 * The label of the checkbox.
+	 */
 	label: string;
+	/**
+	 * The size of the checkbox. Defaults to `md`.
+	 */
 	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * The color of the checkbox. Defaults to `default`.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * Whether the checkbox is checked by default.
+	 */
 	defaultChecked?: boolean;
+	/**
+	 * Whether the checkbox is disabled.
+	 */
 	disabled?: boolean;
+	/**
+	 * The name of the checkbox.
+	 */
 	name?: string;
+	/**
+	 * Whether the checkbox is required.
+	 */
 	isRequired?: boolean;
 }
 
@@ -38,7 +62,13 @@ const iconSizes = {
     size,
   ]}
 >
-  <div class="sui-checkmark-container">
+  <div
+    class="sui-checkmark-container"
+    tabindex="0"
+    role="checkbox"
+    aria-checked={defaultChecked} 
+    aria-labelledby={`label-${name}`}
+    >
     <Checkmark
       class={'sui-checkmark'}
       width={iconSizes[size]}
@@ -52,12 +82,45 @@ const iconSizes = {
       disabled={disabled}
       required={isRequired}
       class="sui-checkbox"
+      hidden
     />
   </div>
-  <span>
+  <span id={`label-${name}`}>
     {label} <span class="req-star">{isRequired && "*"}</span>
   </span>
 </label>
+<script>
+  const elements = document.querySelectorAll<HTMLDivElement>('.sui-checkmark-container');
+  const checkbox = document.querySelectorAll<HTMLInputElement>('.sui-checkbox');
+
+  for (const element of elements) {
+    if (element.dataset.initialized) continue;
+    
+    element.dataset.initialized = 'true';
+
+    element.addEventListener('keydown', (e) => {
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+
+      e.preventDefault();
+
+      const checkbox = element.querySelector<HTMLInputElement>('.sui-checkbox');
+        
+      if (!checkbox) return;
+
+      checkbox.click();
+    });
+  }
+
+  for (const box of checkbox) {
+    if (box.dataset.initialized) continue;
+
+    box.dataset.initialized = 'true';
+
+    box.addEventListener('change', (e) => {
+      box.parentElement!.ariaChecked = (e.target as HTMLInputElement).checked ? 'true' : 'false';
+    });
+  }
+</script>
 <style>
   .sui-checkmark-label {
     display: flex;
@@ -82,7 +145,13 @@ const iconSizes = {
     border: 2px solid hsl(var(--default-base));
     border-radius: .5rem;
     cursor: pointer;
-    transition: all .15s ease;
+    transition: background-color .15s, border .15s, transform .15s;
+    transition-timing-function: ease;
+  }
+
+  .sui-checkmark-container:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
   }
 
   .sui-checkmark-label:hover .sui-checkmark-container {

package/src/components/Divider.astro

@@ -1,12 +1,18 @@
 ---
+/**
+ * Props for the divider component.
+ */
 interface Props {
+	/**
+	 * The background color of the divider, used to "hide" content behind the slot. Defaults to `background-base`.
+	 */
 	background?: 'background-base' | 'background-step-1' | 'background-step-2' | 'background-step-3';
 }
 
 const { background = 'background-base' } = Astro.props;
 ---
 <div class="sui-divider-container">
-  <div class="sui-divider-line" />
+  <hr class="sui-divider-line" />
   <div class="sui-divider-content" style={`background-color: hsl(var(--${background}));`}>
     <slot />
   </div>
@@ -29,6 +35,7 @@ const { background = 'background-base' } = Astro.props;
     height: 1px;
     background-color: hsl(var(--border));
     z-index: 1;
+    border: none;
   }
 
   .sui-divider-content {

package/src/components/Dropdown/Dropdown.astro

@@ -3,21 +3,63 @@ import Icon from '../../utils/Icon.astro';
 import type { StudioCMSColorway } from '../../utils/colors';
 import type { HeroIconName } from '../../utils/iconType';
 
+/**
+ * An option in the dropdown.
+ */
 interface Option {
+	/**
+	 * The label of the option.
+	 */
 	label: string;
+	/**
+	 * The value of the option, returned by the helper when listened for.
+	 */
 	value: string;
+	/**
+	 * Whether the option is disabled.
+	 */
 	disabled?: boolean;
+	/**
+	 * The color of the option.
+	 */
 	color?: StudioCMSColorway;
+	/**
+	 * The icon to display next to the option.
+	 */
 	icon?: HeroIconName;
+	/**
+	 * The href to link to when the option is clicked. When given, the option will be rendered as an anchor tag.
+	 */
 	href?: string;
 }
 
+/**
+ * The props for the Dropdown component.
+ */
 interface Props {
+	/**
+	 * The options to display in the dropdown.
+	 */
 	options: Option[];
+	/**
+	 * Whether the dropdown is disabled.
+	 */
 	disabled?: boolean;
+	/**
+	 * The ID of the dropdown. Required because of the helper.
+	 */
 	id: string;
+	/**
+	 * The alignment of the dropdown, defaults to `center`. Will not work on mobile due to size constraints.
+	 */
 	align?: 'start' | 'center' | 'end';
+	/**
+	 * The type of click with which the dropdown is clicked. Defaults to `left`.
+	 */
 	triggerOn?: 'left' | 'right' | 'both';
+	/**
+	 * The offset of the dropdown from the trigger element in pixels.
+	 */
 	offset?: number;
 }
 
@@ -42,12 +84,21 @@ const {
   <div class="sui-dropdown-toggle" id={`${id}-toggle-btn`}>
     <slot />
   </div>
-  <ul class="sui-dropdown" class:list={[align]} role="listbox" id={`${id}-dropdown`} transition:persist transition:persist-props>
+  <ul 
+    class="sui-dropdown" 
+    class:list={[align]}
+    role="listbox" id={`${id}-dropdown`} 
+    transition:persist
+    transition:persist-props
+    aria-labelledby={`${id}-toggle-btn`}
+  >
     {options.map(({ value, disabled, color, label, icon, href }) => (
       <li
         class="sui-dropdown-option"
         data-value={value}
         class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
+        role="option"
+        aria-selected="false"
       >
         {icon && (
           <Icon width={24} height={24} name={icon} />
@@ -197,7 +248,7 @@ const {
     user-select: none;
   }
 
-  .sui-dropdown-option:hover {
+  .sui-dropdown-option:hover, .sui-dropdown-option:focus, .sui-dropdown-option.focused {
     background-color: hsl(var(--background-step-3));
   }
 
@@ -208,6 +259,8 @@ const {
   .sui-dropdown-link {
     padding: .5rem .75rem;
     width: 100%;
+    text-decoration: none;
+    color: hsl(var(--text-normal));
   }
 
   .sui-dropdown-option.primary {

package/src/components/Dropdown/dropdown.ts

@@ -6,9 +6,15 @@ class DropdownHelper {
 	private alignment: 'start' | 'center' | 'end';
 	private triggerOn: 'left' | 'right' | 'both';
 	private fullWidth = false;
+	private focusIndex = -1;
 
 	active = false;
 
+	/**
+	 * A helper function to interact with dropdowns.
+	 * @param id The ID of the dropdown.
+	 * @param fullWidth Whether the dropdown should be full width. Not needed normally.
+	 */
 	constructor(id: string, fullWidth?: boolean) {
 		this.container = document.getElementById(`${id}-container`) as HTMLDivElement;
 
@@ -22,6 +28,44 @@ class DropdownHelper {
 		this.toggleEl = document.getElementById(`${id}-toggle-btn`) as HTMLDivElement;
 		this.dropdown = document.getElementById(`${id}-dropdown`) as HTMLUListElement;
 
+		if (fullWidth) this.fullWidth = true;
+
+		this.hideOnClickOutside(this.container);
+
+		this.initialBehaviorRegistration();
+		this.initialOptClickRegistration();
+	}
+
+	/**
+	 * Registers a click callback for the dropdown options. Whenever one of the options
+	 * is clicked, the callback will be called with the value of the option.
+	 * @param func The callback function.
+	 */
+	public registerClickCallback = (func: (value: string) => void) => {
+		const dropdownOpts = this.dropdown.querySelectorAll('li');
+
+		for (const opt of dropdownOpts) {
+			opt.removeEventListener('click', this.hide);
+
+			opt.addEventListener('click', () => {
+				func(opt.dataset.value || '');
+				this.hide();
+			});
+		}
+	};
+
+	/**
+	 * Sets up all listeners for the dropdown.
+	 */
+	private initialBehaviorRegistration = () => {
+		window.addEventListener('scroll', this.hide);
+		document.addEventListener('keydown', (e) => {
+			if (e.key === 'Escape') this.hide();
+		});
+		document.addEventListener('astro:before-preparation', () => {
+			this.dropdown.classList.remove('initialized');
+		});
+
 		if (this.triggerOn === 'left') {
 			this.toggleEl.addEventListener('click', this.toggle);
 		} else if (this.triggerOn === 'both') {
@@ -37,31 +81,56 @@ class DropdownHelper {
 			});
 		}
 
-		if (fullWidth) this.fullWidth = true;
+		this.toggleEl.addEventListener('keydown', (e) => {
+			if (!this.active) return;
 
-		window.addEventListener('scroll', this.hide);
-		document.addEventListener('astro:before-preparation', () => {
-			this.dropdown.classList.remove('initialized');
-		});
+			if (e.key === 'Enter') {
+				e.preventDefault();
 
-		this.hideOnClickOutside(this.container);
+				const focused = this.dropdown.querySelector('li.focused') as HTMLLIElement;
 
-		this.initialOptClickRegistration();
-	}
+				if (!focused) {
+					this.hide();
+					return;
+				}
 
-	public registerClickCallback = (func: (value: string) => void) => {
-		const dropdownOpts = this.dropdown.querySelectorAll('li');
+				focused.click();
+			}
 
-		for (const opt of dropdownOpts) {
-			opt.removeEventListener('click', this.hide);
+			if (e.key === 'ArrowDown') {
+				e.preventDefault();
 
-			opt.addEventListener('click', () => {
-				func(opt.dataset.value || '');
-				this.hide();
-			});
-		}
+				this.focusIndex =
+					this.focusIndex === this.dropdown.children.length - 1 ? 0 : this.focusIndex + 1;
+			}
+
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+
+				this.focusIndex =
+					this.focusIndex === 0 ? this.dropdown.children.length - 1 : this.focusIndex - 1;
+			}
+
+			if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+				if (this.focusIndex > this.dropdown.children.length - 1) {
+					this.focusIndex = 0;
+				}
+
+				this.dropdown.querySelector('li.focused')?.classList.remove('focused');
+
+				const newFocus = this.dropdown.children[this.focusIndex] as HTMLLIElement;
+
+				if (!newFocus) return;
+
+				newFocus.classList.add('focused');
+				newFocus.focus();
+			}
+		});
 	};
 
+	/**
+	 * Registers callbacks to hide the dropdown when an option is clicked.
+	 */
 	private initialOptClickRegistration = () => {
 		const dropdownOpts = this.dropdown.querySelectorAll('li');
 
@@ -70,6 +139,9 @@ class DropdownHelper {
 		}
 	};
 
+	/**
+	 * A function to toggle the dropdown.
+	 */
 	public toggle = () => {
 		if (this.active) {
 			this.hide();
@@ -79,13 +151,22 @@ class DropdownHelper {
 		this.show();
 	};
 
+	/**
+	 * A function to hide the dropdown.
+	 */
 	public hide = () => {
 		this.dropdown.classList.remove('active');
 		this.active = false;
+		this.focusIndex = -1;
+
+		this.dropdown.querySelector('li.focused')?.classList.remove('focused');
 
 		setTimeout(() => this.dropdown.classList.remove('above', 'below'), 200);
 	};
 
+	/**
+	 * A function to show the dropdown.
+	 */
 	public show = () => {
 		const isMobile = window.matchMedia('screen and (max-width: 840px)').matches;
 
@@ -145,11 +226,17 @@ class DropdownHelper {
 			CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
 		) {
 			this.dropdown.classList.add('active', 'below');
+			this.focusIndex = -1;
 		} else {
 			this.dropdown.classList.add('active', 'above');
+			this.focusIndex = this.dropdown.children.length;
 		}
 	};
 
+	/**
+	 * A jQuery-like function to hide the dropdown when clicking outside of it.
+	 * @param element The element to hide when clicking outside of it.
+	 */
 	private hideOnClickOutside = (element: HTMLElement) => {
 		const outsideClickListener = (event: MouseEvent) => {
 			if (!event.target) return;

package/src/components/Footer.astro

@@ -1,13 +1,30 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 
+interface FooterLink {
+	/**
+	 * The label of the link.
+	 */
+	label: string;
+	/**
+	 * The href of the link.
+	 */
+	href: string;
+}
+
+/**
+ * The props for the footer component.
+ */
 interface Props extends HTMLAttributes<'footer'> {
+	/**
+	 * The links to display in the footer.
+	 */
 	links: {
-		[label: string]: {
-			label: string;
-			href: string;
-		}[];
+		[label: string]: FooterLink[];
 	};
+	/**
+	 * The copyright text to display in the footer.
+	 */
 	copyright: string;
 }
 

package/src/components/Input.astro

@@ -2,14 +2,41 @@
 import type { HTMLAttributes } from 'astro/types';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the input component.
+ */
 interface Props extends HTMLAttributes<'input'> {
+	/**
+	 * The label of the input.
+	 */
 	label?: string;
+	/**
+	 * The type of the input. Defaults to `text`.
+	 */
 	type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+	/**
+	 * The placeholder of the input.
+	 */
 	placeholder?: string;
+	/**
+	 * Whether the input is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
+	/**
+	 * The name attribute for the input. Useful for form submission.
+	 */
 	name?: string;
+	/**
+	 * Whether the input is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * The default value of the input.
+	 */
 	defaultValue?: string;
+	/**
+	 * Additional classes to apply to the input.
+	 */
 	class?: string;
 }
 

package/src/components/Modal/Modal.astro

@@ -8,12 +8,36 @@ interface ButtonType {
 	color: StudioCMSColorway;
 }
 
+/**
+ * The props for the Modal component.
+ */
 interface Props {
+	/**
+	 * The ID of the modal. Required due to the helper.
+	 */
 	id: string;
+	/**
+	 * The size of the modal. Defaults to `md`.
+	 */
 	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * Whether the modal is dismissable. Defaults to `true`.
+	 */
 	dismissable?: boolean;
+	/**
+	 * The cancel button of the modal. If a string is given, the button will have the danger color and flat variant,
+	 * and the string will be the label. If ButtonType is given, the button will have the color and variant specified.
+	 */
 	cancelButton?: string | ButtonType;
+	/**
+	 * The action button of the modal. If a string is given, the button will have the primary color and solid variant,
+	 * and the string will be the label. If ButtonType is given, the button will have the color and variant specified.
+	 */
 	actionButton?: string | ButtonType;
+	/**
+	 * Whether the modal is a form. Defaults to `false`. When set to true, the modal helpers submit callback will include
+	 * the form data.
+	 */
 	isForm?: boolean;
 }
 
@@ -34,7 +58,7 @@ const {
   data-has-cancel-button={cancelButton}
   class="sui-modal"
   class:list={[size]}
-  data-form={`${isForm}`}
+  data-form={isForm}
 >
   <div class="sui-modal-header">
     <slot name="header" />
@@ -83,6 +107,7 @@ const {
     overflow: visible;
     margin: auto;
     z-index: 50;
+    max-width: calc(100% - 4rem);
   }
 
   .sui-modal.sm {
@@ -139,6 +164,11 @@ const {
     background-color: hsl(var(--default-base));
   }
 
+  .x-mark-container:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
   .sui-modal-footer {
     display: none;
   }