@for-the-people-initiative/design-system 1.3.1

package/src/components/FieldSet/FieldSet.vue

@@ -0,0 +1,70 @@
+<template>
+  <fieldset class="field-set" :class="additionalClasses">
+    <legend v-if="legend || $slots.legend" class="field-set__legend">
+      <button
+        v-if="toggleable"
+        type="button"
+        class="field-set__toggle"
+        :aria-expanded="!isCollapsed"
+        @click="toggle"
+      >
+        <slot name="legend">{{ legend }}</slot>
+        <span class="field-set__toggle-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </span>
+      </button>
+      <span v-else class="field-set__legend-text">
+        <slot name="legend">{{ legend }}</slot>
+      </span>
+    </legend>
+    <div class="field-set__content-wrapper">
+      <div class="field-set__content">
+        <slot />
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<style src="./FieldSet.scss"></style>
+
+<script setup lang="ts">
+import type { FieldSetProps, FieldSetEmits } from '../../types';
+import { computed, ref, watch } from "vue";
+
+defineOptions({ name: 'FtpFieldSet' });
+
+const props = withDefaults(defineProps<FieldSetProps>(), {
+  legend: "",
+  toggleable: false,
+  collapsed: false,
+});
+
+const emit = defineEmits(["update:collapsed", "toggle"]);
+
+const isCollapsed = ref(props.collapsed);
+
+// Sync with prop changes
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    isCollapsed.value = newVal;
+  }
+);
+
+const toggle = () => {
+  isCollapsed.value = !isCollapsed.value;
+  emit("update:collapsed", isCollapsed.value);
+  emit("toggle", { collapsed: isCollapsed.value });
+};
+
+const additionalClasses = computed(() =>
+  [
+    props.toggleable && "field-set--toggleable",
+    isCollapsed.value && "field-set--collapsed",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/FileUpload/FileUpload.scss

@@ -0,0 +1,137 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: file-upload;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fileUpload-fileList-gap, $fileUpload-fileList-gap);
+}
+
+.#{$c}__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fileUpload-dropzone-padding, $fileUpload-dropzone-padding);
+  background: var(--fileUpload-dropzone-background-default, $fileUpload-dropzone-background-default);
+  border: var(--fileUpload-dropzone-border-width, $fileUpload-dropzone-border-width)
+          var(--fileUpload-dropzone-border-style, dashed)
+          var(--fileUpload-dropzone-border-color-default, $fileUpload-dropzone-border-color-default);
+  border-radius: var(--fileUpload-dropzone-radius, $fileUpload-dropzone-radius);
+  cursor: pointer;
+  transition: all var(--fileUpload-transition-duration, $fileUpload-transition-duration) ease;
+
+  &:hover {
+    background: var(--fileUpload-dropzone-background-hover, $fileUpload-dropzone-background-hover);
+    border-color: var(--fileUpload-dropzone-border-color-hover, $fileUpload-dropzone-border-color-hover);
+  }
+}
+
+.#{$c}__dropzone--active {
+  background: var(--fileUpload-dropzone-background-active, $fileUpload-dropzone-background-active);
+  border-color: var(--fileUpload-dropzone-border-color-active, $fileUpload-dropzone-border-color-active);
+
+  .#{$c}__icon {
+    color: var(--fileUpload-icon-color-active, $fileUpload-icon-color-active);
+  }
+}
+
+.#{$c}__input {
+  display: none;
+}
+
+.#{$c}__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+}
+
+.#{$c}__icon {
+  width: var(--fileUpload-icon-size, $fileUpload-icon-size);
+  height: var(--fileUpload-icon-size, $fileUpload-icon-size);
+  color: var(--fileUpload-icon-color-default, $fileUpload-icon-color-default);
+  transition: color var(--fileUpload-transition-duration, $fileUpload-transition-duration) ease;
+}
+
+.#{$c}__text-primary {
+  margin: 0;
+  font-size: var(--fileUpload-text-primary-size, $fileUpload-text-primary-size);
+  color: var(--fileUpload-text-primary-color, $fileUpload-text-primary-color);
+  font-weight: 500;
+}
+
+.#{$c}__text-secondary {
+  margin: 0;
+  font-size: var(--fileUpload-text-secondary-size, $fileUpload-text-secondary-size);
+  color: var(--fileUpload-text-secondary-color, $fileUpload-text-secondary-color);
+}
+
+.#{$c}__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fileUpload-fileList-gap, $fileUpload-fileList-gap);
+}
+
+.#{$c}__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--fileUpload-fileList-item-padding, $fileUpload-fileList-item-padding);
+  background: var(--fileUpload-fileList-item-background, $fileUpload-fileList-item-background);
+  border: var(--fileUpload-fileList-item-border-width, $fileUpload-fileList-item-border-width) solid
+          var(--fileUpload-fileList-item-border-color, $fileUpload-fileList-item-border-color);
+  border-radius: var(--fileUpload-fileList-item-radius, $fileUpload-fileList-item-radius);
+}
+
+.#{$c}__file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.#{$c}__file-name {
+  font-size: var(--fileUpload-fileList-fileName-size, $fileUpload-fileList-fileName-size);
+  color: var(--fileUpload-fileList-fileName-color, $fileUpload-fileList-fileName-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.#{$c}__file-size {
+  font-size: var(--fileUpload-fileList-fileSize-size, $fileUpload-fileList-fileSize-size);
+  color: var(--fileUpload-fileList-fileSize-color, $fileUpload-fileList-fileSize-color);
+}
+
+.#{$c}__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border: none;
+  background: transparent;
+  color: var(--fileUpload-fileList-removeButton-color-default, $fileUpload-fileList-removeButton-color-default);
+  cursor: pointer;
+  transition: color var(--fileUpload-transition-duration, $fileUpload-transition-duration) ease;
+
+  &:hover {
+    color: var(--fileUpload-fileList-removeButton-color-hover, $fileUpload-fileList-removeButton-color-hover);
+  }
+
+  svg {
+    width: var(--fileUpload-fileList-removeButton-size, $fileUpload-fileList-removeButton-size);
+    height: var(--fileUpload-fileList-removeButton-size, $fileUpload-fileList-removeButton-size);
+  }
+}
+
+// Disabled state
+.#{$c}--disabled {
+  .#{$c}__dropzone {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/src/components/FileUpload/FileUpload.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="file-upload" :class="additionalClasses">
+    <!-- Dropzone -->
+    <div
+      class="file-upload__dropzone"
+      :class="{ 'file-upload__dropzone--active': isDragging }"
+      @dragenter.prevent="onDragEnter"
+      @dragover.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+      @click="triggerFileInput"
+    >
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="file-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="isDisabled"
+        @change="onFileSelect"
+      />
+
+      <div class="file-upload__content">
+        <svg class="file-upload__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
+        </svg>
+        <p class="file-upload__text-primary">
+          <slot name="header">
+            {{ isDragging ? 'Drop files here' : 'Drag and drop files here' }}
+          </slot>
+        </p>
+        <p class="file-upload__text-secondary">
+          <slot name="subheader">
+            or click to browse
+          </slot>
+        </p>
+      </div>
+    </div>
+
+    <!-- File list -->
+    <div v-if="files.length > 0" class="file-upload__list">
+      <div
+        v-for="(file, index) in files"
+        :key="file.name + index"
+        class="file-upload__item"
+      >
+        <div class="file-upload__file-info">
+          <span class="file-upload__file-name">{{ file.name }}</span>
+          <span class="file-upload__file-size">{{ formatFileSize(file.size) }}</span>
+        </div>
+        <button
+          type="button"
+          class="file-upload__remove"
+          aria-label="Remove file"
+          @click="removeFile(index)"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./FileUpload.scss"></style>
+
+<script setup lang="ts">
+import type { FileUploadProps, FileUploadEmits } from '../../types';
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'FtpFileUpload' });
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  accept: undefined,
+  multiple: false,
+  maxFileSize: null,
+  maxFiles: null,
+  isDisabled: false,
+});
+
+const emit = defineEmits(["select", "remove", "error"]);
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+const files = ref<File[]>([]);
+
+const additionalClasses = computed(() =>
+  [
+    props.isDisabled && "file-upload--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+
+const triggerFileInput = () => {
+  if (!props.isDisabled) {
+    fileInputRef.value?.click();
+  }
+};
+
+const onDragEnter = () => {
+  if (!props.isDisabled) {
+    isDragging.value = true;
+  }
+};
+
+const onDragOver = () => {
+  if (!props.isDisabled) {
+    isDragging.value = true;
+  }
+};
+
+const onDragLeave = () => {
+  isDragging.value = false;
+};
+
+const onDrop = (event: DragEvent) => {
+  isDragging.value = false;
+  if (props.isDisabled) return;
+
+  const droppedFiles = Array.from(event.dataTransfer!.files);
+  processFiles(droppedFiles);
+};
+
+const onFileSelect = (event: Event) => {
+  const selectedFiles = Array.from((event.target as HTMLInputElement).files!);
+  processFiles(selectedFiles);
+  (event.target as HTMLInputElement).value = "";
+};
+
+const processFiles = (newFiles: any) => {
+  const validFiles = [];
+
+  for (const file of newFiles) {
+    // Check file size
+    if (props.maxFileSize && file.size > props.maxFileSize) {
+      emit("error", { type: "size", file, maxSize: props.maxFileSize });
+      continue;
+    }
+
+    // Check max files
+    if (props.maxFiles && files.value.length + validFiles.length >= props.maxFiles) {
+      emit("error", { type: "limit", file, maxFiles: props.maxFiles });
+      break;
+    }
+
+    validFiles.push(file);
+  }
+
+  if (validFiles.length > 0) {
+    if (props.multiple) {
+      files.value = [...files.value, ...validFiles];
+    } else {
+      files.value = [validFiles[0]];
+    }
+    emit("select", files.value);
+  }
+};
+
+const removeFile = (index: any) => {
+  const removed = files.value[index];
+  files.value = files.value.filter((_, i) => i !== index);
+  emit("remove", removed);
+};
+
+const formatFileSize = (bytes: any) => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+};
+
+// Expose methods for parent components
+defineExpose({
+  files,
+  clear: () => { files.value = []; },
+});
+</script>

package/src/components/Footer/Footer.scss

@@ -0,0 +1,95 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: site-footer;
+
+.#{$c} {
+  width: 100%;
+  background-color: $surface-panel;
+  border-top: 1px solid $border-subtle;
+  padding: 3rem 2rem 1.5rem;
+}
+
+.#{$c}__container {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3rem;
+}
+
+.#{$c}__brand {
+  flex-basis: 100%;
+}
+
+.#{$c}__logo {
+  height: 2rem;
+}
+
+.#{$c}__columns {
+  display: flex;
+  flex: 1;
+  gap: 3rem;
+  flex-wrap: wrap;
+}
+
+.#{$c}__column {
+  min-width: 140px;
+}
+
+.#{$c}__column-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: $text-heading;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 1rem;
+}
+
+.#{$c}__links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.#{$c}__link {
+  font-size: 0.9375rem;
+  color: $text-secondary;
+  text-decoration: none;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: $text-link;
+  }
+}
+
+.#{$c}__social {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.#{$c}__social-link {
+  font-size: 1.25rem;
+  color: $text-muted;
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: $text-link;
+  }
+}
+
+.#{$c}__bottom {
+  max-width: 1200px;
+  margin: 2rem auto 0;
+  padding-top: 1.5rem;
+  border-top: 1px solid $border-subtle;
+}
+
+.#{$c}__copyright {
+  font-size: 0.8125rem;
+  color: $text-muted;
+  margin: 0;
+}

package/src/components/Footer/Footer.vue

@@ -0,0 +1,59 @@
+<template>
+  <footer class="site-footer">
+    <div class="site-footer__container">
+      <div v-if="$slots.logo || logo" class="site-footer__brand">
+        <slot name="logo">
+          <img v-if="logo" :src="logo" alt="Logo" class="site-footer__logo" />
+        </slot>
+      </div>
+      <div class="site-footer__columns">
+        <slot>
+          <nav
+            v-for="(col, i) in columns"
+            :key="i"
+            class="site-footer__column"
+            :aria-label="col.title"
+          >
+            <h4 class="site-footer__column-title">{{ col.title }}</h4>
+            <ul class="site-footer__links">
+              <li v-for="(link, j) in col.links" :key="j">
+                <a :href="link.href" class="site-footer__link">{{ link.label }}</a>
+              </li>
+            </ul>
+          </nav>
+        </slot>
+      </div>
+      <div v-if="socialLinks?.length" class="site-footer__social">
+        <a
+          v-for="(social, i) in socialLinks"
+          :key="i"
+          :href="social.href"
+          class="site-footer__social-link"
+          :aria-label="social.label"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i :class="social.icon" aria-hidden="true" />
+        </a>
+      </div>
+    </div>
+    <div class="site-footer__bottom">
+      <slot name="bottom">
+        <p v-if="copyright" class="site-footer__copyright">{{ copyright }}</p>
+      </slot>
+    </div>
+  </footer>
+</template>
+
+<style src="./Footer.scss"></style>
+
+<script setup lang="ts">
+import type { FooterProps } from '../../types';
+
+defineOptions({ name: 'FtpFooter' });
+
+withDefaults(defineProps<FooterProps>(), {
+  columns: () => [],
+  socialLinks: () => [],
+});
+</script>

package/src/components/Form/Form.scss

@@ -0,0 +1,72 @@
+@use "../../../dist/scss/tokens" as *;
+
+// Form
+$c: form;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+
+  &--horizontal {
+    .form-field {
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+
+    .form-field__label {
+      flex-shrink: 0;
+      width: var(--form-label-width, 120px);
+      padding-top: 0.5rem;
+      text-align: right;
+    }
+
+    .form-field__control {
+      flex: 1;
+    }
+  }
+}
+
+// FormField
+$f: form-field;
+
+.#{$f} {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.#{$f}__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary, #fff);
+}
+
+.#{$f}__required {
+  color: var(--color-error, #ef4444);
+}
+
+.#{$f}__control {
+  display: flex;
+  flex-direction: column;
+}
+
+.#{$f}__error {
+  font-size: 0.75rem;
+  color: var(--color-error, #ef4444);
+}
+
+.#{$f}__hint {
+  font-size: 0.75rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+}
+
+.#{$f}--error {
+  .#{$f}__label {
+    color: var(--color-error, #ef4444);
+  }
+}

package/src/components/Form/Form.vue

@@ -0,0 +1,30 @@
+<template>
+  <form
+    class="form"
+    :class="additionalClasses"
+    @submit.prevent="$emit('submit', $event)"
+  >
+    <slot />
+  </form>
+</template>
+
+<style src="./Form.scss"></style>
+
+<script setup lang="ts">
+import type { FormProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpForm' });
+
+const props = withDefaults(defineProps<FormProps>(), {
+  layout: 'vertical',
+});
+
+defineEmits<{
+  (e: 'submit', event: Event): void
+}>();
+
+const additionalClasses = computed(() =>
+  [`form--${props.layout}`].filter(Boolean).join(' ')
+);
+</script>

package/src/components/Form/FormField.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="form-field" :class="{ 'form-field--error': !!error, 'form-field--required': required }">
+    <label v-if="label" :for="htmlFor" class="form-field__label">
+      {{ label }}
+      <span v-if="required" class="form-field__required" aria-hidden="true">*</span>
+    </label>
+    <div class="form-field__control">
+      <slot />
+    </div>
+    <small
+      v-if="error"
+      :id="errorId"
+      class="form-field__error"
+      role="alert"
+    >
+      {{ error }}
+    </small>
+    <small
+      v-else-if="hint"
+      :id="hintId"
+      class="form-field__hint"
+    >
+      {{ hint }}
+    </small>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormFieldProps } from '../../types';
+
+defineOptions({ name: 'FtpFormField' });
+
+let idCounter = 0;
+const useId = () => 'ftp-ff-' + idCounter++;
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  required: false,
+});
+
+const errorId = useId();
+const hintId = useId();
+</script>