@licklist/design 0.78.32 → 0.78.34

package/src/v2/components/FormField/FormField.tsx

@@ -9,27 +9,25 @@ export interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
-  ({ label, error, helpText, required, className = '', ...props }, ref) => {
-    return (
-      <div className={`form-field ${className}`}>
-        {label && (
-          <label className="form-field__label">
-            {label}
-            {required && <span className="form-field__required">*</span>}
-          </label>
-        )}
-        <input
-          ref={ref}
-          className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
-          {...props}
-        />
-        {helpText && !error && (
-          <span className="form-field__help-text">{helpText}</span>
-        )}
-        {error && <span className="form-field__error-text">{error}</span>}
-      </div>
-    )
-  }
+  ({ label, error, helpText, required, className = '', ...props }, ref) => (
+    <div className={`form-field ${className}`}>
+      {label && (
+        <label className="form-field__label">
+          {label}
+          {required && <span className="form-field__required">*</span>}
+        </label>
+      )}
+      <input
+        ref={ref}
+        className={`form-field__input ${error ? 'form-field__input--error' : ''}`}
+        {...props}
+      />
+      {helpText && !error && (
+        <span className="form-field__help-text">{helpText}</span>
+      )}
+      {error && <span className="form-field__error-text">{error}</span>}
+    </div>
+  )
 )
 
 FormField.displayName = 'FormField'

package/src/v2/components/Modal/DeleteModal.scss

@@ -0,0 +1,254 @@
+.delete-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.delete-modal {
+  background: white;
+  border-radius: 12px;
+  width: 95%;
+  max-width: 800px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  animation: slideUp 0.2s ease-in-out;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.delete-modal__content {
+  padding: 48px;
+}
+
+.delete-modal__title {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 32px;
+  font-weight: 700;
+  color: #14215A;
+  margin: 0 0 24px 0;
+  line-height: 40px;
+}
+
+.delete-modal__description-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.delete-modal__description {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  font-size: 20px;
+  font-weight: 400;
+  color: #626A90;
+  margin: 0;
+  line-height: 28px;
+}
+
+.delete-modal__confirmation {
+  margin-bottom: 40px;
+}
+
+.delete-modal__label {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  display: block;
+  font-size: 20px;
+  color: #14215A;
+  margin-bottom: 16px;
+  font-weight: 600;
+
+  strong {
+    font-weight: 700;
+  }
+}
+
+.delete-modal__input {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  width: 100%;
+  padding: 16px 24px;
+  font-size: 20px;
+  border: 1px solid #E8E9EF;
+  border-radius: 12px;
+  outline: none;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+  color: #14215A;
+
+  &::placeholder {
+    color: #626A90;
+    opacity: 0.6;
+  }
+
+  &:focus {
+    border-color: #D2D5E3;
+  }
+}
+
+.delete-modal__actions {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.delete-modal__button {
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
+  padding: 12px 32px;
+  font-size: 20px;
+  font-weight: 600;
+  border-radius: 12px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  font-family: inherit;
+  outline: none;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &--delete {
+    background-color: #CC3C35;
+    color: white;
+
+    &:disabled {
+      opacity: 0.5;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: #b33630;
+    }
+  }
+
+  &--cancel {
+    background-color: transparent;
+    color: var(--label-primary);
+    border: 2px solid #D2D5E3;
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-secondary);
+    }
+  }
+}
+
+// Mobile styles
+@media (max-width: 768px) {
+  .delete-modal {
+    max-width: 90%;
+    width: 90%;
+  }
+
+  .delete-modal__content {
+    padding: 32px 24px;
+  }
+
+  .delete-modal__title {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 16px;
+  }
+
+  .delete-modal__description-group {
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .delete-modal__description {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .delete-modal__confirmation {
+    margin-bottom: 32px;
+  }
+
+  .delete-modal__label {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .delete-modal__actions {
+    gap: 12px;
+  }
+
+  .delete-modal__button {
+    padding: 10px 24px;
+    font-size: 16px;
+    min-height: 52px;
+  }
+}
+
+@media (max-width: 480px) {
+  .delete-modal {
+    max-width: 95%;
+    width: 95%;
+  }
+
+  .delete-modal__content {
+    padding: 24px 16px;
+  }
+
+  .delete-modal__title {
+    font-size: 20px;
+    line-height: 28px;
+    margin-bottom: 12px;
+  }
+
+  .delete-modal__description-group {
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  .delete-modal__description {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .delete-modal__confirmation {
+    margin-bottom: 24px;
+  }
+
+  .delete-modal__label {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  .delete-modal__actions {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .delete-modal__button {
+    width: 100%;
+    padding: 8px 20px;
+    font-size: 14px;
+    min-height: 48px;
+  }
+}
+

package/src/v2/components/Modal/DeleteModal.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react'
+import './DeleteModal.scss'
+import { NewInput } from '../NewInput'
+
+export interface DeleteModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+  title: string
+  description?: string
+  description_1?: string
+  confirmationText: string
+  confirmationPlaceholder?: string
+  isDeleting?: boolean
+}
+
+export const DeleteModal: React.FC<DeleteModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  description_1,
+  confirmationText,
+  confirmationPlaceholder,
+  isDeleting = false,
+}) => {
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => {
+    if (!isOpen) {
+      setInputValue('')
+    }
+  }, [isOpen])
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  const handleConfirm = () => {
+    if (inputValue === confirmationText) {
+      onConfirm()
+    }
+  }
+
+  const isConfirmDisabled = inputValue !== confirmationText || isDeleting
+
+  if (!isOpen) return null
+
+  return (
+    <div className="delete-modal-overlay" role="presentation" onClick={handleClose}>
+      <div className="delete-modal" role="presentation" onClick={(e) => e.stopPropagation()}>
+        <div className="delete-modal__content">
+          <h2 className="delete-modal__title">{title}</h2>
+
+          <div className="delete-modal__description-group">
+            {description && (
+              <p className="delete-modal__description">{description}</p>
+            )}
+
+            {description_1 && (
+              <p className="delete-modal__description">{description_1}</p>
+            )}
+          </div>
+
+          <div className="delete-modal__confirmation">
+            <p className="delete-modal__label">
+              Type <strong>{confirmationText}</strong> to confirm deletion
+            </p>
+            <NewInput
+              type="text"
+              placeholder={confirmationPlaceholder || confirmationText}
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              autoFocus
+            />
+          </div>
+
+          <div className="delete-modal__actions">
+            <button
+              type="button"
+              className="delete-modal__button delete-modal__button--delete"
+              onClick={handleConfirm}
+              disabled={isConfirmDisabled}
+            >
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </button>
+            <button
+              type="button"
+              className="delete-modal__button delete-modal__button--cancel"
+              onClick={handleClose}
+              disabled={isDeleting}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/v2/components/Modal/index.ts

@@ -0,0 +1,3 @@
+export { DeleteModal } from './DeleteModal'
+export type { DeleteModalProps } from './DeleteModal'
+

package/src/v2/components/NPSScore/NPSScore.scss

@@ -1,12 +1,18 @@
 .nps-score {
     width: 100%;
     margin-top: 24px;
+    padding: 0 1rem;
+    box-sizing: border-box;
+
+    @media (max-width: 576px) {
+        padding: 0 16px;
+    }
 
     &__container {
-        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        background: var(--surface-secondary);
         border-radius: 16px;
         padding: 24px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        border: 1px solid var(--border-primary);
     }
 
     &__question {
@@ -14,7 +20,7 @@
         font-size: 18px;
         font-weight: 600;
         line-height: 24px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 16px 0;
     }
 
@@ -34,7 +40,7 @@
             font-family: var(--font-family-sans);
             font-size: 14px;
             font-weight: 500;
-            color: var(--labels-main-label-secondary, #626A90);
+            color: var(--label-secondary);
         }
 
         &--desktop {
@@ -57,7 +63,7 @@
     }
 
     &__label-icon {
-        color: var(--fills-main-fill-secondary, #626A90);
+        color: var(--fill-secondary);
         flex-shrink: 0;
     }
 
@@ -79,18 +85,18 @@
         font-weight: 600;
         transition: all 0.2s ease;
         cursor: pointer;
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        color: var(--labels-main-label-primary, #121E52);
+        background: var(--surface-primary);
+        border: 1px solid var(--border-primary);
+        color: var(--label-primary);
 
         &:hover:not(&--selected) {
-            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+            background: var(--surface-primary-hover);
         }
 
         &--selected {
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             border-color: transparent;
-            color: #FFFFFF;
+            color: var(--label-primary-alt);
         }
     }
 
@@ -113,7 +119,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin-bottom: 8px;
     }
 
@@ -127,7 +133,7 @@
     &__optional {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
     }
 
     &__textarea {
@@ -135,39 +141,39 @@
         min-height: 100px;
         padding: 12px;
         border-radius: 8px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--border-primary);
+        background: var(--surface-primary);
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         resize: vertical;
         box-sizing: border-box;
 
         &::placeholder {
-            color: var(--labels-main-label-tertiary, #9CA3AF);
+            color: var(--label-secondary);
         }
 
         &:focus {
             outline: none;
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
         }
 
         &--error {
-            border-color: var(--fills-main-fill-danger, #DC2626);
+            border-color: var(--fill-danger);
         }
     }
 
     &__hint {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 4px 0 0 0;
     }
 
     &__error {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--fills-main-fill-danger, #DC2626);
+        color: var(--fill-danger);
         margin: 4px 0 0 0;
     }
 
@@ -175,7 +181,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-action, #2563EB);
+        color: var(--label-action);
         text-decoration: underline;
         background: none;
         border: none;
@@ -184,17 +190,18 @@
         transition: color 0.2s ease;
 
         &:hover {
-            color: var(--labels-main-label-action-hover, #1D4ED8);
+            color: var(--label-action);
         }
     }
 
     &__roles {
         display: grid;
         grid-template-columns: 1fr;
-        gap: 12px;
+        gap: 8px;
 
         @media (min-width: 640px) {
             grid-template-columns: repeat(2, 1fr);
+            gap: 4px;
         }
 
         @media (min-width: 1024px) {
@@ -217,8 +224,8 @@
         width: 20px;
         height: 20px;
         border-radius: 50%;
-        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 2px solid var(--border-primary);
+        background: var(--surface-primary);
         margin: 0;
         cursor: pointer;
         flex-shrink: 0;
@@ -234,12 +241,12 @@
             width: 10px;
             height: 10px;
             border-radius: 50%;
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             transition: transform 0.2s ease;
         }
 
         &:checked {
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
 
             &::before {
                 transform: translate(-50%, -50%) scale(1);
@@ -248,7 +255,7 @@
 
         &:focus {
             outline: none;
-            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+            box-shadow: 0 0 0 2px var(--border-action);
         }
     }
 
@@ -259,33 +266,7 @@
     &__role-label {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
-    }
-
-    &__submit {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 12px 24px;
-        border-radius: 8px;
-        border: none;
-        background: var(--fills-main-fill-primary, #14215A);
-        color: #FFFFFF;
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: background 0.2s ease;
-        width: fit-content;
-
-        &:hover:not(:disabled) {
-            background: var(--fills-main-fill-primary-hover, #1a2a6e);
-        }
-
-        &:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
+        color: var(--label-primary);
     }
 
     &__success {
@@ -298,7 +279,7 @@
     }
 
     &__success-icon {
-        color: var(--fills-main-fill-success, #10B981);
+        color: var(--fill-status-success);
         margin-bottom: 16px;
     }
 
@@ -306,14 +287,14 @@
         font-family: var(--font-family-sans);
         font-size: 24px;
         font-weight: 600;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 8px 0;
     }
 
     &__success-message {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 0;
     }
 }