@licklist/design 0.78.5-dev.41 → 0.78.5-dev.45

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.tsx

@@ -0,0 +1,237 @@
+import React from 'react'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeThroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  BulletListIcon,
+  NumberedListIcon,
+  UndoIcon,
+  RedoIcon,
+  ParagraphIcon,
+  QuoteAltIcon,
+  DividerIcon,
+} from './Icons'
+import './WYSIWYGEditor.scss'
+
+export interface WYSIWYGEditorProps {
+  label?: string
+  error?: string
+  helpText?: string
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
+  label,
+  error,
+  helpText,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+}) => {
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const isInternalChange = React.useRef(false)
+
+  // Only update innerHTML when value changes externally (not from user input)
+  React.useEffect(() => {
+    if (contentRef.current) {
+      if (isInternalChange.current) {
+        isInternalChange.current = false
+        return
+      }
+
+      const currentHTML = contentRef.current.innerHTML
+      if (currentHTML !== value) {
+        contentRef.current.innerHTML = value || ''
+      }
+    }
+  }, [value])
+
+  const handleInput = () => {
+    if (contentRef.current) {
+      isInternalChange.current = true
+      onChange?.(contentRef.current.innerHTML)
+    }
+  }
+
+  const execCommand = (command: string, value?: string) => {
+    if (command === 'insertHorizontalRule') {
+      const selection = window.getSelection()
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        range.deleteContents()
+
+        const hr = document.createElement('hr')
+        const p = document.createElement('p')
+        p.innerHTML = '<br>' // Ensure the paragraph is "typeable"
+
+        // Insert HR and then the paragraph after it
+        range.insertNode(p)
+        range.insertNode(hr)
+
+        // Move cursor to the new paragraph
+        const newRange = document.createRange()
+        newRange.setStart(p, 0)
+        newRange.setEnd(p, 0)
+        newRange.collapse(true)
+        selection.removeAllRanges()
+        selection.addRange(newRange)
+
+        handleInput()
+        return
+      }
+    }
+    document.execCommand(command, false, value)
+    handleInput()
+  }
+
+  return (
+    <div className="wysiwyg-editor">
+      {label && (
+        <label className="wysiwyg-editor__label">
+          {label}
+        </label>
+      )}
+      <div className={`wysiwyg-editor__wrapper ${error ? 'wysiwyg-editor__wrapper--error' : ''}`}>
+        <div className="wysiwyg-editor__toolbar">
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Bold"
+            onClick={() => execCommand('bold')}
+          >
+            <BoldIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Italic"
+            onClick={() => execCommand('italic')}
+          >
+            <ItalicIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Underline"
+            onClick={() => execCommand('underline')}
+          >
+            <UnderlineIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Strikethrough"
+            onClick={() => execCommand('strikeThrough')}
+          >
+            <StrikeThroughIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Heading 1"
+            onClick={() => execCommand('formatBlock', 'H1')}
+          >
+            <Heading1Icon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Heading 2"
+            onClick={() => execCommand('formatBlock', 'H2')}
+          >
+            <Heading2Icon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Paragraph"
+            onClick={() => {
+              execCommand('formatBlock', 'P')
+              execCommand('removeFormat')
+            }}
+          >
+            <ParagraphIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Quote"
+            onClick={() => execCommand('formatBlock', 'BLOCKQUOTE')}
+          >
+            <QuoteAltIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Bullet List"
+            onClick={() => execCommand('insertUnorderedList')}
+          >
+            <BulletListIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Numbered List"
+            onClick={() => execCommand('insertOrderedList')}
+          >
+            <NumberedListIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Divider"
+            onClick={() => execCommand('insertHorizontalRule')}
+          >
+            <DividerIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Undo"
+            onClick={() => {
+              if (document.queryCommandEnabled('undo')) {
+                document.execCommand('undo', false)
+                handleInput()
+              }
+            }}
+          >
+            <UndoIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Redo"
+            onClick={() => {
+              if (document.queryCommandEnabled('redo')) {
+                document.execCommand('redo', false)
+                handleInput()
+              }
+            }}
+          >
+            <RedoIcon />
+          </button>
+        </div>
+        <div
+          ref={contentRef}
+          className={`wysiwyg-editor__content ${disabled ? 'wysiwyg-editor__content--disabled' : ''}`}
+          contentEditable={!disabled}
+          suppressContentEditableWarning
+          onInput={handleInput}
+          data-placeholder={placeholder}
+        />
+      </div>
+      {helpText && (
+        <span className="wysiwyg-editor__help-text">{helpText}</span>
+      )}
+      {error && <span className="wysiwyg-editor__error-text">{error}</span>}
+    </div>
+  )
+}
+

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

@@ -0,0 +1,3 @@
+export { WYSIWYGEditor } from './WYSIWYGEditor'
+export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
+

package/src/v2/components/index.ts

@@ -0,0 +1,37 @@
+// Form Components
+export { FormField } from './FormField'
+export type { FormFieldProps } from './FormField'
+
+export { NewInput } from './NewInput'
+export type { NewInputProps } from './NewInput'
+
+export { Checkbox } from './Checkbox'
+export type { CheckboxProps } from './Checkbox'
+
+export { WYSIWYGEditor } from './WYSIWYGEditor'
+export type { WYSIWYGEditorProps } from './WYSIWYGEditor'
+
+export { NewPageHeader } from './NewPageHeader'
+export type { NewPageHeaderProps } from './NewPageHeader'
+
+export { SectionHeader } from './SectionHeader'
+export type { SectionHeaderProps } from './SectionHeader'
+
+// Existing Components
+export { Button, ButtonText } from './Button'
+export type { ButtonProps, ButtonTextProps } from './Button'
+
+export { Select } from './Select'
+
+export { Tooltip } from './Tooltip'
+
+export { UserAvatar } from './UserAvatar'
+
+export { UserPanel } from './UserPanel'
+
+export { EntityHeader } from './EntityHeader'
+
+export { Alert } from './Alert'
+
+export { NPSScore } from './NPSScore'
+

package/src/v2/styles/components/Button.scss

@@ -2,59 +2,48 @@
 
 .new-button {
   display: flex;
-  gap: var(--spacing-sm, 8px);
-  align-items: center;
+  gap: var(--spacing-sm);
   justify-content: center;
-  padding: var(--spacing-sm, 8px) var(--spacing-reg, 16px);
-  border-radius: var(--radius-md, 4px);
-  font-family: var(--font-family-sans, 'Geist', sans-serif);
-  font-weight: var(--heading-h5-weight, 600);
-  font-size: var(--text-reg-size, 15px);
-  line-height: var(--text-reg-line, 18px);
+  padding: 12px 24px;
+  align-self: flex-start;
+  text-align: center;
+  align-items: center;
+  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  font-weight: 600;
+  line-height: 20px;
+  min-height: 44px;
   border: none;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
 
-  // Primary Button - Solid with gradient
+  // Primary Button - Solid purple
   &--primary {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      var(--purples-purple-500) 5.77%,
-      var(--purples-purple-700) 95.19%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(
-      180deg,
-      var(--purples-purple-50) 0%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(90deg, var(--purples-purple-500) 0%, var(--purples-purple-500) 100%);
-    color: var(--labels-main-label-white, #ffffff);
+    background: #6200EE;
+    color: #ffffff;
 
     &:hover {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #360083;
     }
 
     &:active,
     &:focus {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #360083;
     }
   }
 
-  // Primary - Soft
+  // Primary - Soft (Light purple)
   &--primary-soft {
-    background-color: var(--surfaces-main-background-action-soft, #efe6fd);
-    color: var(--labels-main-label-action, #6200ee);
+    background: #efeffe;
+    color: #5d5bf4;
 
     &:hover {
-      background-color: var(--surfaces-main-background-action-soft-hover, #ceb0fa);
+      background: #cdccfc;
     }
 
     &:active {
-      background-color: var(--surfaces-main-background-action-soft-pressed, #965ff4);
-      color: var(--labels-main-label-white, #ffffff);
+      background: #b4b4fa;
     }
   }
 
@@ -76,39 +65,32 @@
 
   // Secondary Button
   &--secondary {
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      var(--neutrals-gray-200) 5.77%,
-      var(--purples-purple-700) 95.19%,
-      var(--purples-purple-900) 100%
-    ),
-    linear-gradient(
-      180deg,
-      var(--neutrals-gray-200) 0%,
-      var(--fills-main-fill-secondary) 100%
-    ),
-    linear-gradient(90deg, var(--fills-main-fill-secondary) 0%, var(--fills-main-fill-secondary) 100%);
-    color: var(--labels-main-label-white, #ffffff);
+    border-radius: var(--sizes-radius-radius, 8px);
+    background: var(--surface-action-soft);
+    color: var(--label-action);
 
-    &:hover,
-    &:active {
-      // Same gradient for hover/pressed states
+    &:hover {
+      background: #EFE6FD;
+    }
+
+    &:active,
+    &:focus {
+      background: #EFE6FD;
     }
   }
 
   // Destructive - Soft
   &--destructive-soft {
-    background-color: var(--surfaces-main-background-danger-soft, #fceceb);
-    color: var(--labels-main-label-danger, #cc3c35);
+    border-radius: var(--radius-reg, 8px);
+    background: var(--surface-danger-soft, #fceceb);
 
     &:hover {
-      background-color: var(--surfaces-main-background-danger-soft-hover, #f5c4c2);
+      background-color: var(--surface-danger-soft-hover, #f5c4c2);
     }
 
     &:active {
-      background-color: var(--surfaces-main-background-danger-soft-pressed, #e66861);
-      color: var(--labels-main-label-white, #ffffff);
+      background-color: var(--surface-danger-soft-pressed, #e66861);
+      color: var(--label-white, #ffffff);
     }
   }
 
@@ -155,6 +137,22 @@
     pointer-events: none;
   }
 
+  /* Button text styling */
+  &__text {
+    font-family: 'Geist', sans-serif;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-align: center;
+
+    &--primary { color: var(--label-primary); }
+    &--secondary { color: var(--label-secondary); }
+    &--danger { color: var(--label-danger); }
+    &--white { color: var(--label-white); }
+    &--action { color: var(--label-action); }
+  }
+
   // Text styling
   p {
     margin: 0;

package/src/v2/styles/form/Layout.scss

@@ -0,0 +1,15 @@
+.waiver-template-form-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--padding-reg, 16px);
+  align-self: stretch;
+}
+
+.waiver-template-form-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--padding-lg, 24px);
+  align-self: stretch;
+}

package/src/v2/styles/form/NewInput.scss

@@ -1,24 +1,27 @@
 /* New Form Input Styles based on Figma design tokens */
 
 .new-form-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs, 4px);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  align-self: stretch;
+  width: 100%;
 
     &__label {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: var(--heading-h5-weight, 500);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+      color: var(--label-primary, #121E52);
+
     }
 
     &__label-optional {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
         font-size: var(--text-xs-size, 11px);
-        font-weight: var(--heading-h6-weight, 500);
+        font-weight: 400;
         line-height: var(--text-xs-line, 14px);
         color: var(--labels-main-label-secondary, #626a90);
         text-align: right;
@@ -32,34 +35,39 @@
         width: 100%;
     }
 
-    &__input {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-primary, #121e52);
-        background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
-        border-radius: var(--radius-md, 4px);
-        padding: 8px 10px;
-        height: 40px;
-        width: 100%;
-        transition: all 0.2s ease;
+  &__input {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
+    flex: 1 0 0;
+    background-color: var(--surfaces-main-background-secondary);
+    border: 2px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    padding: 8px 10px;
+    min-height: 40px;
+    background: var(--surface-secondary);
+    width: 100%;
+    transition: all 0.2s ease;
 
-        &:focus {
-            outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
-            background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        }
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
 
-        &::placeholder {
-            color: var(--labels-main-label-secondary, #626a90);
-        }
+    &:focus {
+      outline: none;
+      border-color: var(--border-selected, #6200EE);
+      background-color: var(--surfaces-main-background-secondary, #f8f8fa);
+    }
+
+    &::placeholder {
+      color: var(--labels-main-label-secondary, #626a90);
     }
+  }
 
     &__textarea {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-regular-size, 15px);
+        line-height: var(--text-regular-line, 20px);
         color: var(--labels-main-label-primary, #121e52);
         background-color: var(--surfaces-main-background-secondary, #f8f8fa);
         border: 1px solid var(--borders-main-border-primary, #e8e9ef);
@@ -70,9 +78,13 @@
         resize: vertical;
         transition: all 0.2s ease;
 
+        @media (max-width: 768px) {
+          font-size: 16px;
+        }
+
         &:focus {
             outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
 
         &::placeholder {
@@ -88,16 +100,20 @@
         border: 2px solid var(--borders-main-border-primary, #e8e9ef);
         border-radius: var(--radius-md, 4px);
         padding: 5px;
-        height: 40px;
+        min-height: 40px;
 
         input {
             flex: 1;
             border: none;
             background: transparent;
             font-family: var(--font-family-sans, 'Geist', sans-serif);
-            font-size: var(--text-sm-size, 13px);
-            line-height: var(--text-sm-line, 16px);
-            color: var(--labels-main-label-primary, #121e52);
+            font-size: var(--text-regular-size, 15px);
+            line-height: var(--text-regular-line, 20px);
+            color: var(--label-primary);
+
+            @media (max-width: 768px) {
+              font-size: 16px;
+            }
 
             &:focus {
                 outline: none;
@@ -134,24 +150,35 @@
 
             &:focus {
                 outline: none;
-                border-color: var(--borders-main-border-selected, #121e52);
+                border-color: var(--border-selected, #6200EE);
             }
         }
     }
 
     &__helper-text {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-sm-size, 13px);
-        font-weight: 400;
-        line-height: var(--text-sm-line, 16px);
-        color: var(--labels-main-label-secondary, #626a90);
-        margin: 0;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-regular-size, 15px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: var(--text-regular-line, 20px);
+      margin-top: 2px;
+      color: var(--label-secondary, #626A90);
+    }
+
+    &__error-text {
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+      margin-top: 2px;
+      color: var(--labels-status-label-error, #ef4444);
     }
 
     // States
     &--active {
         .new-form-input__input {
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
     }
 
@@ -159,14 +186,10 @@
         .new-form-input__input {
             border-color: var(--borders-status-border-error, #ef4444);
         }
-
-        .new-form-input__helper-text {
-            color: var(--labels-status-label-error, #ef4444);
-        }
     }
 
     &--disabled {
         opacity: var(--opacity-50, 0.5);
         pointer-events: none;
     }
-}
+}

package/src/v2/styles/index.scss

@@ -2,3 +2,4 @@
 @import './tokens/sizes';
 @import './tokens/status';
 @import './tokens/typography';
+@import './form/Layout';