@studiocms/ui 0.0.1 → 0.1.0

package/src/components/Dropdown/Dropdown.astro

@@ -8,9 +8,9 @@ interface Option {
 	value: string;
 	disabled?: boolean;
 	color?: StudioCMSColorway;
-  icon?: HeroIconName;
-  href?: string;
-};
+	icon?: HeroIconName;
+	href?: string;
+}
 
 interface Props {
 	options: Option[];
@@ -18,27 +18,34 @@ interface Props {
 	id: string;
 	align?: 'start' | 'center' | 'end';
 	triggerOn?: 'left' | 'right' | 'both';
-  offset?: number;
-};
-
-const { options, disabled = false, align = 'center', id, triggerOn = 'left', offset = 0 } = Astro.props;
+	offset?: number;
+}
+
+const {
+	options,
+	disabled = false,
+	align = 'center',
+	id,
+	triggerOn = 'left',
+	offset = 0,
+} = Astro.props;
 ---
 <div 
-  class="dropdown-container"
+  class="sui-dropdown-container"
   class:list={[disabled && 'disabled']}
   data-align={align}
   id={`${id}-container`}
   data-trigger={triggerOn}
-  transition:persist transition:persist-props
+  transition:persist
+  transition:persist-props
 >
-  <div class="dropdown-toggle" id={`${id}-toggle-btn`}>
+  <div class="sui-dropdown-toggle" id={`${id}-toggle-btn`}>
     <slot />
   </div>
-  <ul class="dropdown above" 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>
     {options.map(({ value, disabled, color, label, icon, href }) => (
       <li
-        class="dropdown-option"
-        role="option"
+        class="sui-dropdown-option"
         data-value={value}
         class:list={[disabled && "disabled", icon && "has-icon", color, href && "has-href"]}
       >
@@ -46,7 +53,7 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
           <Icon width={24} height={24} name={icon} />
         )}
         {href ? (
-          <a href={href} class="dropdown-link">{label}</a>
+          <a href={href} class="sui-dropdown-link">{label}</a>
         ) : (
           <span>{label}</span>
         )}
@@ -55,18 +62,18 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
   </ul>
 </div>
 <style define:vars={{ offset: `${offset}px` }}>
-  .dropdown-toggle {
+  .sui-dropdown-toggle {
     width: fit-content;
   }
 
-  .dropdown-container {
+  .sui-dropdown-container {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: .25rem;
   }
 
-  .dropdown {
+  .sui-dropdown {
     position: absolute;
     list-style: none;
     margin: 0;
@@ -134,11 +141,11 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     }
   }
 
-  .dropdown.initialized {
+  .sui-dropdown.initialized {
     animation: pop-down .15s ease forwards;
   }
 
-  .dropdown.initialized.active {
+  .sui-dropdown.initialized.active {
     display: flex;
     border: 1px solid hsl(var(--border));
     height: auto;
@@ -147,36 +154,36 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     animation: pop-up .15s ease forwards;
   }
 
-  .dropdown.initialized.below {
+  .sui-dropdown.initialized.below {
     top: calc(100% + .25rem + var(--offset)) !important;
     bottom: auto;
 
     transform-origin: top center;
   }
 
-  .dropdown.below.start {
+  .sui-dropdown.below.start {
     transform-origin: top left;
   }
 
-  .dropdown.below.end {
+  .sui-dropdown.below.end {
     transform-origin: top right;
   }
 
-  .dropdown.above {
+  .sui-dropdown.above {
     top: auto;
     bottom: calc(100% + .25rem + var(--offset)) !important;
     transform-origin: bottom center;
   }
 
-  .dropdown.above.start {
+  .sui-dropdown.above.start {
     transform-origin: bottom left;
   }
 
-  .dropdown.above.end {
+  .sui-dropdown.above.end {
     transform-origin: bottom right;
   }
 
-  .dropdown-option {
+  .sui-dropdown-option {
     padding: .5rem .75rem;
     cursor: pointer;
     font-size: .975em;
@@ -187,67 +194,68 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     align-items: center;
     width: 100%;
     white-space: normal;
+    user-select: none;
   }
 
-  .dropdown-option:hover {
+  .sui-dropdown-option:hover {
     background-color: hsl(var(--background-step-3));
   }
 
-  .dropdown-option.has-href {
+  .sui-dropdown-option.has-href {
     padding: 0;
   }
 
-  .dropdown-link {
+  .sui-dropdown-link {
     padding: .5rem .75rem;
     width: 100%;
   }
 
-  .dropdown-option.primary {
+  .sui-dropdown-option.primary {
     color: hsl(var(--primary-base));
   }
 
-  .dropdown-option.primary:hover {
+  .sui-dropdown-option.primary:hover {
     background-color: hsl(var(--primary-base));
     color: hsl(var(--text-inverted));
   }
 
-  .dropdown-option.success {
+  .sui-dropdown-option.success {
     color: hsl(var(--success-base));
   }
 
-  .dropdown-option.success:hover {
+  .sui-dropdown-option.success:hover {
     background-color: hsl(var(--success-base));
     color: hsl(var(--text-dark));
   }
 
-  .dropdown-option.warning {
+  .sui-dropdown-option.warning {
     color: hsl(var(--warning-base));
   }
 
-  .dropdown-option.warning:hover {
+  .sui-dropdown-option.warning:hover {
     background-color: hsl(var(--warning-base));
     color: hsl(var(--text-dark));
   }
 
-  .dropdown-option.danger {
+  .sui-dropdown-option.danger {
     color: hsl(var(--danger-base));
   }
 
-  .dropdown-option.danger:hover {
+  .sui-dropdown-option.danger:hover {
     background-color: hsl(var(--danger-base));
     color: hsl(var(--text-light));
   }
 
-  .dropdown-option.disabled {
+  .sui-dropdown-option.disabled {
     pointer-events: none;
     color: hsl(var(--text-muted));
   }
 
-  .dropdown-option.end {
+  .sui-dropdown-option.end {
     justify-content: space-between;
   }
 
-  .dropdown-option.has-icon {
+  .sui-dropdown-option.has-icon {
     padding-left: .5rem;
   }
 </style>

package/src/components/Dropdown/dropdown.ts

@@ -1,12 +1,13 @@
 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;
 
-	alignment: 'start' | 'center' | 'end';
-	triggerOn: 'left' | 'right' | 'both';
 	active = false;
-	fullWidth = false;
 
 	constructor(id: string, fullWidth?: boolean) {
 		this.container = document.getElementById(`${id}-container`) as HTMLDivElement;

package/src/components/Footer.astro

@@ -0,0 +1,120 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'footer'> {
+	links: {
+		[label: string]: {
+			label: string;
+			href: string;
+		}[];
+	};
+	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

@@ -11,7 +11,7 @@ interface Props extends HTMLAttributes<'input'> {
 	disabled?: boolean;
 	defaultValue?: string;
 	class?: string;
-};
+}
 
 const {
 	label,
@@ -26,16 +26,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 +46,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 +63,7 @@ const {
 		font-size: 14px;
 	}
 
-	.input {
+	.sui-input {
 		padding: .5rem 1rem;
 		border-radius: 8px;
 		border: 1px solid hsl(var(--border));
@@ -71,18 +72,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,80 @@
 ---
+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;
+}
 
 interface Props {
 	id: string;
 	size?: 'sm' | 'md' | 'lg';
 	dismissable?: boolean;
-	buttons?: ModalButton[];
+	cancelButton?: string | ButtonType;
+	actionButton?: string | ButtonType;
 	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}`}
 >
-  <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 +82,36 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
     animation: hide .25s ease;
     overflow: visible;
     margin: auto;
+    z-index: 50;
   }
 
-  .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 +139,11 @@ const { id, size = 'md', dismissable = true, isForm = false, buttons = [] } = As
     background-color: hsl(var(--default-base));
   }
 
-  .modal-footer {
+  .sui-modal-footer {
     display: none;
   }
 
-  .modal-footer:has(*) {
+  .sui-modal-footer:has(*) {
     display: flex;
     flex-direction: row;
     gap: 1rem;

package/src/components/Modal/modal.ts

@@ -1,7 +1,7 @@
 class ModalHelper {
-	public element: HTMLDialogElement;
-	public cancelButton: HTMLButtonElement | undefined;
-	public confirmButton: HTMLButtonElement | undefined;
+	private element: HTMLDialogElement;
+	private cancelButton: HTMLButtonElement | undefined;
+	private confirmButton: HTMLButtonElement | undefined;
 
 	private isForm = false;
 	private modalForm: HTMLFormElement;
@@ -33,21 +33,22 @@ class ModalHelper {
 	}
 
 	private addButtonListeners = (id: string, dismissable: boolean) => {
-		if (dismissable || !this.element.dataset.buttons) {
+		if (
+			dismissable ||
+			(!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton)
+		) {
 			const xMarkButton = document.getElementById(`${id}-btn-x`) as HTMLButtonElement;
 			xMarkButton.addEventListener('click', this.hide);
 		}
 
-		if (!this.element.dataset.buttons) return;
+		if (!!this.element.dataset.hasCancelButton && !this.element.dataset.hasActionButton) return;
 
-		const usedButtons = this.element.dataset.buttons.split(';');
-
-		if (usedButtons.includes('cancel')) {
+		if (this.element.dataset.hasCancelButton) {
 			this.cancelButton = document.getElementById(`${id}-btn-cancel`) as HTMLButtonElement;
 			this.cancelButton.addEventListener('click', this.hide);
 		}
 
-		if (usedButtons.includes('confirm')) {
+		if (this.element.dataset.hasActionButton) {
 			this.confirmButton = document.getElementById(`${id}-btn-confirm`) as HTMLButtonElement;
 			this.confirmButton.addEventListener('click', this.hide);
 		}