@studiocms/ui 0.0.1 → 0.3.0

package/src/components/Dropdown/dropdown.ts

@@ -1,13 +1,20 @@
 class DropdownHelper {
-	container: HTMLDivElement;
-	toggleEl: HTMLDivElement;
-	dropdown: HTMLUListElement;
+	private container: HTMLDivElement;
+	private toggleEl: HTMLDivElement;
+	private dropdown: HTMLUListElement;
+
+	private alignment: 'start' | 'center' | 'end';
+	private triggerOn: 'left' | 'right' | 'both';
+	private fullWidth = false;
+	private focusIndex = -1;
 
-	alignment: 'start' | 'center' | 'end';
-	triggerOn: 'left' | 'right' | 'both';
 	active = false;
-	fullWidth = 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;
 
@@ -21,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') {
@@ -36,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');
 
@@ -69,6 +139,9 @@ class DropdownHelper {
 		}
 	};
 
+	/**
+	 * A function to toggle the dropdown.
+	 */
 	public toggle = () => {
 		if (this.active) {
 			this.hide();
@@ -78,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;
 
@@ -144,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

@@ -0,0 +1,137 @@
+---
+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]: FooterLink[];
+	};
+	/**
+	 * The copyright text to display in the footer.
+	 */
+	copyright: string;
+}
+
+const { copyright, links, ...props } = Astro.props;
+---
+
+<footer {...props}>
+  <div class="upper">
+    <div>
+      <slot name="brand" />
+    </div>
+    <div class="links">
+      {Object.keys(links).map((groupLabel) => (
+        <ul>
+          <li class="sui-footer-link-label">{groupLabel}</li>
+          {links[groupLabel]!.map((item) => (
+            <li>
+              <a href={item.href}>{item.label}</a>
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  </div>
+  <hr class="separator" />
+  <div class="lower">
+    <span class="copyright-span">{copyright}</span>
+    <slot name="socials" />
+  </div>
+</footer>
+<style>
+  footer {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    background-color: hsl(var(--background-step-1));
+    padding: 2rem 10vw;
+    color: hsl(var(--text-normal)) !important;
+  }
+
+  .upper, .lower {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .links {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 2rem;
+  }
+
+  .links ul {
+    list-style-type: none;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .links ul li, .links ul li * {
+    color: hsl(var(--text-normal)) !important;
+    width: fit-content;
+  }
+
+  .links ul li:has(a):hover {
+    text-decoration: underline;
+  }
+
+  .sui-footer-link-label {
+    font-size: 1.125em;
+    font-weight: 700;
+  }
+
+  .separator {
+    height: 1px;
+    width: 100%;
+    border: none;
+    background: hsl(var(--border));
+  }
+
+  .lower {
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  @media screen and (max-width: 1440px) {
+    footer {
+      padding: 2rem;
+    }
+  }
+
+  @media screen and (max-width: 1280px) {
+    .upper {
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .links {
+      justify-content: flex-start;
+    }
+  }
+
+  @media screen and (max-width: 640px) {
+    .links ul {
+      width: calc(50% - 1rem);
+    }
+  }
+</style>

package/src/components/Input.astro

@@ -2,16 +2,43 @@
 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;
-};
+}
 
 const {
 	label,
@@ -26,16 +53,18 @@ const {
 } = Astro.props;
 ---
 
-<label for={name} class="input-label" class:list={[disabled && "disabled"]}>
-  <span class="label">
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
+<label for={name} class="sui-input-label" class:list={[disabled && "disabled"]}>
+  {label && (
+		<span class="label">
+			{label} <span class="req-star">{isRequired && "*"}</span>
+		</span>
+	)}
   <input
     placeholder={placeholder}
     name={name}
     id={name}
     type={type}
-    class="input"
+    class="sui-input"
 		class:list={[className]}
     required={isRequired}
     disabled={disabled}
@@ -44,15 +73,14 @@ const {
   />
 </label>
 <style>
-	.input-label {
+	.sui-input-label {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		gap: .25rem;
-		margin-top: .5rem;
 	}
 
-	.input-label.disabled {
+	.sui-input-label.disabled {
 		opacity: 0.5;
 		pointer-events: none;
 		color: hsl(var(--text-muted));
@@ -62,7 +90,7 @@ const {
 		font-size: 14px;
 	}
 
-	.input {
+	.sui-input {
 		padding: .5rem 1rem;
 		border-radius: 8px;
 		border: 1px solid hsl(var(--border));
@@ -71,18 +99,18 @@ const {
 		transition: all .15s ease;
 	}
 
-	.input:hover {
+	.sui-input:hover {
 		background: hsl(var(--background-step-3));
 	}
 
-	.input:active,
-	.input:focus {
+	.sui-input:active,
+	.sui-input:focus {
 		border: 1px solid hsl(var(--primary-base));
 		outline: none;
 		background: hsl(var(--background-step-2));
 	}
 
-	.disabled .input:active {
+	.disabled .sui-input:active {
 		border: 1px solid hsl(var(--border));
 	}
 

package/src/components/Modal/Modal.astro

@@ -1,57 +1,104 @@
 ---
+import type { StudioCMSColorway } from 'src/utils/colors';
 import Icon from '../../utils/Icon.astro';
 import Button from '../Button.astro';
 
-type ModalButton = 'cancel' | 'confirm';
+interface ButtonType {
+	label: string;
+	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;
-	buttons?: ModalButton[];
+	/**
+	 * 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;
-};
-
-const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = Astro.props;
+}
+
+const {
+	id,
+	size = 'md',
+	dismissable = true,
+	isForm = false,
+	cancelButton,
+	actionButton,
+} = Astro.props;
 ---
-<!-- Should: Be centered on mobile, scroll happens inside, blur bg -->
 <dialog
   popover
   id={id}
   data-dismissable={`${dismissable}`}
-  data-buttons={buttons.join(";")}
-  class="modal"
+  data-has-action-button={actionButton}
+  data-has-cancel-button={cancelButton}
+  class="sui-modal"
   class:list={[size]}
-  data-form={`${isForm}`}
+  data-form={isForm}
 >
-  <div class="modal-header">
+  <div class="sui-modal-header">
     <slot name="header" />
-    {(dismissable || buttons.length === 0) && (
+    {(dismissable || (!cancelButton && !actionButton)) && (
       <button class="x-mark-container" id={`${id}-btn-x`}>
         <Icon name="x-mark" width={24} height={24} class={'dismiss-icon'} />
       </button>
     )}
   </div>
   <form id={`${id}-form-element`}>
-    <div class="modal-body">
+    <div class="sui-modal-body">
       <slot />
     </div>
-    <div class="modal-footer">
-      {buttons.includes('cancel') && (
-        <Button id={`${id}-btn-cancel`} color='danger' variant='flat' type={isForm ? 'reset' : 'button'}>
-          Cancel
+    <div class="sui-modal-footer">
+      {cancelButton && (
+        <Button
+          id={`${id}-btn-cancel`}
+          color={typeof cancelButton === 'string' ? 'danger' : cancelButton.color} 
+          variant='flat'
+          type={isForm ? 'reset' : 'button'}
+        >
+          {typeof cancelButton === 'string' ? cancelButton : cancelButton.label}
         </Button>
       )}
-      {buttons.includes('confirm') && (
-        <Button id={`${id}-btn-confirm`} type={'submit'} color='primary' variant='solid' type={isForm ? 'submit' : 'button'}>
-          Confirm
+      {actionButton && (
+        <Button 
+          id={`${id}-btn-confirm`} 
+          type={'submit'} 
+          color={typeof actionButton === 'string' ? 'primary' : actionButton.color} 
+          variant='solid' 
+          type={isForm ? 'submit' : 'button'}
+        >
+          {typeof actionButton === 'string' ? actionButton : actionButton.label}
         </Button>
       )}
     </div>
   </form>
 </dialog>
 <style>
-  .modal {
+  .sui-modal {
     border: 1px solid hsl(var(--border));
     border-radius: .5rem;
     padding: 1.5rem;
@@ -59,35 +106,37 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
     animation: hide .25s ease;
     overflow: visible;
     margin: auto;
+    z-index: 50;
+    max-width: calc(100% - 4rem);
   }
 
-  .modal.sm {
+  .sui-modal.sm {
     width: 384px;
   }
 
-  .modal.md {
+  .sui-modal.md {
     width: 448px;
   }
 
-  .modal.lg {
+  .sui-modal.lg {
     width: 608px;
   }
 
-  .modal[open] {
+  .sui-modal[open] {
     animation: show .25s ease-in-out;
   }
 
-  html:has(.modal[open]),
-  body:has(.modal[open]) {
+  html:has(.sui-modal[open]),
+  body:has(.sui-modal[open]) {
     overflow: hidden;
   }
 
-  .modal[open]::backdrop {
+  .sui-modal[open]::backdrop {
     background-color: rgba(0, 0, 0, 0.75);
     animation: backdrop .3s ease-in-out forwards;
   }
 
-  .modal-header:has(*) {
+  .sui-modal-header:has(*) {
     margin-bottom: 1rem;
 
     display: flex;
@@ -115,11 +164,16 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
     background-color: hsl(var(--default-base));
   }
 
-  .modal-footer {
+  .x-mark-container:focus-visible {
+    outline: 2px solid hsl(var(--text-normal));
+    outline-offset: 2px;
+  }
+
+  .sui-modal-footer {
     display: none;
   }
 
-  .modal-footer:has(*) {
+  .sui-modal-footer:has(*) {
     display: flex;
     flex-direction: row;
     gap: 1rem;