@duffcloudservices/site-forms 0.1.1 → 0.1.3

package/src/style.css

@@ -0,0 +1,256 @@
+.dcs-form {
+  display: grid;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.dcs-form__header {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.dcs-form__title {
+  margin: 0;
+  font-size: clamp(1.875rem, 2vw + 1.25rem, 2.5rem);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.dcs-form__description {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.dcs-form__progress {
+  font-size: 0.95rem;
+}
+
+.dcs-form__fields {
+  display: grid;
+  gap: 1rem;
+}
+
+.dcs-form-field {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.dcs-form-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.dcs-form-field__required {
+  font-weight: 700;
+}
+
+.dcs-form-input {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.75rem 0.95rem;
+  font: inherit;
+  line-height: 1.5;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid rgba(15, 23, 42, 0.16);
+  border-radius: 0.875rem;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.dcs-form-input::placeholder {
+  color: rgba(71, 85, 105, 0.75);
+}
+
+.dcs-form-input:hover {
+  border-color: rgba(37, 99, 235, 0.38);
+}
+
+.dcs-form-input:focus,
+.dcs-form-input:focus-visible {
+  outline: none;
+  border-color: rgba(37, 99, 235, 0.75);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
+}
+
+.dcs-form-input[aria-invalid='true'] {
+  border-color: rgba(220, 38, 38, 0.72);
+  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
+}
+
+.dcs-form-textarea {
+  min-height: 10rem;
+  resize: vertical;
+}
+
+.dcs-form-file {
+  min-height: 3.25rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+}
+
+.dcs-form-file::file-selector-button {
+  margin: 0 0.85rem 0 0;
+  border: 0;
+  border-radius: 9999px;
+  padding: 0.65rem 1rem;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1;
+  color: #fff;
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.dcs-form-file:hover::file-selector-button {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
+}
+
+.dcs-form-file:disabled,
+.dcs-form-file:disabled::file-selector-button {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.dcs-form-select {
+  appearance: none;
+}
+
+.dcs-form-field__help,
+.dcs-form-field__error,
+.dcs-form__submit-error {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.dcs-form-field__error,
+.dcs-form__submit-error {
+  color: #b91c1c;
+}
+
+.dcs-form__submit-error {
+  padding: 0.85rem 1rem;
+  border: 1px solid rgba(220, 38, 38, 0.28);
+  border-radius: 0.875rem;
+  background: rgba(254, 242, 242, 0.92);
+}
+
+.dcs-form__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.dcs-form__btn {
+  appearance: none;
+  border: 0;
+  border-radius: 9999px;
+  padding: 0.85rem 1.5rem;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.dcs-form__btn:hover {
+  transform: translateY(-1px);
+}
+
+.dcs-form__btn:focus,
+.dcs-form__btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22);
+}
+
+.dcs-form__btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.dcs-form__btn--submit,
+.dcs-form__btn--next {
+  color: #fff;
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
+}
+
+.dcs-form__btn--prev {
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+}
+
+.dcs-form-checkbox-group,
+.dcs-form-radio-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.dcs-form-checkbox,
+.dcs-form-radio,
+.dcs-form-checkbox-single {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+}
+
+.dcs-form-checkbox-single input,
+.dcs-form-checkbox input,
+.dcs-form-radio input {
+  margin-top: 0.2rem;
+}
+
+.dcs-form-section {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.dcs-form-section__heading,
+.dcs-form-section__help,
+.dcs-form--missing p,
+.dcs-form--success p {
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .dcs-form__fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+
+  .dcs-form-field--width-half {
+    grid-column: span 1;
+  }
+
+  .dcs-form-field--width-full,
+  .dcs-form-field--width-auto,
+  .dcs-form-field--textarea,
+  .dcs-form-field--checkbox,
+  .dcs-form-field--checkbox-group,
+  .dcs-form-field--radio,
+  .dcs-form-field--section-heading,
+  .dcs-form-field--html-block,
+  .dcs-form-field--file {
+    grid-column: 1 / -1;
+  }
+}

package/src/types.ts

@@ -1,140 +1,164 @@
-/**
- * Form type definitions — vendored snapshot of the canonical form types
- * generated from `contracts/spec/domains/portal-site-forms.yaml` (see
- * `contracts/generated/typescript/types.gen.ts`).
- *
- * This is an intentional fork of the generated types so the published
- * package has zero runtime/peer dependency on the (workspace-internal,
- * never published) `@dcs/contracts` package. When the form schema in
- * `contracts/spec/domains/portal-site-forms.yaml` changes, refresh both
- * this file and `src/schema/form-definition.schema.json`.
- *
- * Consumers should import these types from `@duffcloudservices/site-forms`
- * so the package remains the single import surface for managed-form
- * runtime code on customer sites.
- */
-
-export type PortalFormFieldType =
-  | 'text'
-  | 'email'
-  | 'tel'
-  | 'textarea'
-  | 'select'
-  | 'multiselect'
-  | 'radio'
-  | 'checkbox'
-  | 'checkbox-group'
-  | 'date'
-  | 'file'
-  | 'hidden'
-  | 'section-heading'
-  | 'html-block'
-
-export type PortalFormFieldWidth = 'full' | 'half' | 'third'
-
-export interface PortalFormFieldOption {
-  value: string
-  label: string
-}
-
-export interface PortalFormFieldValidation {
-  regex?: string
-  minLength?: number
-  maxLength?: number
-  min?: number
-  max?: number
-  accept?: string[]
-}
-
-export interface PortalFormFieldVisibleIf {
-  fieldId: string
-  equals: string | number | boolean
-}
-
-export interface PortalFormField {
-  id: string
-  type: PortalFormFieldType
-  label: string
-  helpText?: string
-  placeholder?: string
-  defaultValue?: string | number | boolean | string[]
-  required?: boolean
-  width?: PortalFormFieldWidth
-  options?: PortalFormFieldOption[]
-  validation?: PortalFormFieldValidation
-  visibleIf?: PortalFormFieldVisibleIf
-  /**
-   * Marks the field as collecting Protected Health Information.
-   * When true the value must never appear in notification emails
-   * or logs and the owning site must be in the Medical category
-   * (see `compliance.instructions.md`).
-   */
-  phi?: boolean
-  html?: string
-}
-
-export interface PortalFormStep {
-  id: string
-  title: string
-  description?: string
-  fieldIds: string[]
-}
-
-export interface PortalFormSubmissionLeadConfig {
-  kind: 'lead'
-  category?: string
-}
-
-export interface PortalFormSubmissionEmailConfig {
-  kind: 'email'
-  to: string[]
-  subjectTemplate?: string
-}
-
-export interface PortalFormSubmissionWebhookConfig {
-  kind: 'webhook'
-  url: string
-  signingSecretRef?: string
-}
-
-export type PortalFormSubmissionConfig =
-  | PortalFormSubmissionLeadConfig
-  | PortalFormSubmissionEmailConfig
-  | PortalFormSubmissionWebhookConfig
-
-export interface PortalFormDefinition {
-  formId: string
-  title: string
-  description?: string
-  submitLabel?: string
-  successMessage?: string
-  submission: PortalFormSubmissionConfig
-  steps?: PortalFormStep[]
-  fields: PortalFormField[]
-  version?: number
-  createdAt?: string
-  updatedAt?: string
-}
-
-/** Map of field id -> current value held by the form. */
-export type FormValues = Record<string, unknown>
-
-/** Per-field validation errors keyed by field id. */
-export type FormErrors = Record<string, string | undefined>
-
-export interface DcsFormSubmitPayload {
-  formId: string
-  values: FormValues
-  captchaToken?: string
-}
-
-export interface DcsFormSubmitSuccess {
-  payload: DcsFormSubmitPayload
-  response: unknown
-}
-
-export interface DcsFormSubmitError {
-  payload: DcsFormSubmitPayload
-  error: Error
-  status?: number
-}
+/**
+ * Form type definitions — vendored snapshot of the canonical form types
+ * generated from `contracts/spec/domains/portal-site-forms.yaml` (see
+ * `contracts/generated/typescript/types.gen.ts`).
+ *
+ * This is an intentional fork of the generated types so the published
+ * package has zero runtime/peer dependency on the (workspace-internal,
+ * never published) `@dcs/contracts` package. When the form schema in
+ * `contracts/spec/domains/portal-site-forms.yaml` changes, refresh both
+ * this file and `src/schema/form-definition.schema.json`.
+ *
+ * Consumers should import these types from `@duffcloudservices/site-forms`
+ * so the package remains the single import surface for managed-form
+ * runtime code on customer sites.
+ */
+
+export type PortalFormFieldType =
+  | 'text'
+  | 'email'
+  | 'tel'
+  | 'textarea'
+  | 'select'
+  | 'multiselect'
+  | 'radio'
+  | 'checkbox'
+  | 'checkbox-group'
+  | 'date'
+  | 'file'
+  | 'hidden'
+  | 'section-heading'
+  | 'html-block'
+
+export type PortalFormFieldWidth = 'full' | 'half' | 'third'
+
+export type PortalFormKind = 'freeform' | 'contact' | 'revenue-contractor' | 'resume-submission'
+
+export type PortalFormFieldRole =
+  | 'custom'
+  | 'contact-name'
+  | 'contact-email'
+  | 'contact-phone'
+  | 'contact-company'
+  | 'subject'
+  | 'message'
+  | 'summary'
+  | 'image-attachments'
+  | 'resume'
+  | 'consent'
+
+export interface PortalFormAttachmentPolicy {
+  expected?: boolean
+  required?: boolean
+  maxFiles?: number
+  maxFileSizeBytes?: number
+  accept?: string[]
+}
+
+export interface PortalFormFieldOption {
+  value: string
+  label: string
+}
+
+export interface PortalFormFieldValidation {
+  regex?: string
+  minLength?: number
+  maxLength?: number
+  min?: number
+  max?: number
+  accept?: string[]
+}
+
+export interface PortalFormFieldVisibleIf {
+  fieldId: string
+  equals: string | number | boolean
+}
+
+export interface PortalFormField {
+  id: string
+  type: PortalFormFieldType
+  label: string
+  helpText?: string
+  placeholder?: string
+  defaultValue?: string | number | boolean | string[]
+  required?: boolean
+  role?: PortalFormFieldRole
+  width?: PortalFormFieldWidth
+  options?: PortalFormFieldOption[]
+  validation?: PortalFormFieldValidation
+  visibleIf?: PortalFormFieldVisibleIf
+  /**
+   * Marks the field as collecting Protected Health Information.
+   * When true the value must never appear in notification emails
+   * or logs and the owning site must be in the Medical category
+   * (see `compliance.instructions.md`).
+   */
+  phi?: boolean
+  html?: string
+}
+
+export interface PortalFormStep {
+  id: string
+  title: string
+  description?: string
+  fieldIds: string[]
+}
+
+export interface PortalFormSubmissionLeadConfig {
+  kind: 'lead'
+  category?: string
+}
+
+export interface PortalFormSubmissionEmailConfig {
+  kind: 'email'
+  to: string[]
+  subjectTemplate?: string
+}
+
+export interface PortalFormSubmissionWebhookConfig {
+  kind: 'webhook'
+  url: string
+  signingSecretRef?: string
+}
+
+export type PortalFormSubmissionConfig =
+  | PortalFormSubmissionLeadConfig
+  | PortalFormSubmissionEmailConfig
+  | PortalFormSubmissionWebhookConfig
+
+export interface PortalFormDefinition {
+  formId: string
+  formKind?: PortalFormKind
+  submitLabel?: string
+  successMessage?: string
+  submission: PortalFormSubmissionConfig
+  attachmentPolicy?: PortalFormAttachmentPolicy
+  steps?: PortalFormStep[]
+  fields: PortalFormField[]
+  version?: number
+  createdAt?: string
+  updatedAt?: string
+}
+
+/** Map of field id -> current value held by the form. */
+export type FormValues = Record<string, unknown>
+
+/** Per-field validation errors keyed by field id. */
+export type FormErrors = Record<string, string | undefined>
+
+export interface DcsFormSubmitPayload {
+  formId: string
+  values: FormValues
+  captchaToken?: string
+}
+
+export interface DcsFormSubmitSuccess {
+  payload: DcsFormSubmitPayload
+  response: unknown
+}
+
+export interface DcsFormSubmitError {
+  payload: DcsFormSubmitPayload
+  error: Error
+  status?: number
+}