@licklist/design 0.78.5-dev.40 → 0.78.5-dev.43

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

@@ -0,0 +1,224 @@
+import React from 'react'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikeThroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  BulletListIcon,
+  NumberedListIcon,
+  UndoIcon,
+  RedoIcon,
+  ClearFormattingIcon,
+  ParagraphIcon,
+  QuoteAltIcon,
+  TaskListIcon,
+  DividerIcon,
+  RedoAltIcon,
+} 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 && !isInternalChange.current) {
+      const currentHTML = contentRef.current.innerHTML
+      if (currentHTML !== value) {
+        contentRef.current.innerHTML = value || ''
+      }
+    }
+    isInternalChange.current = false
+  }, [value])
+
+  const handleInput = () => {
+    if (contentRef.current) {
+      isInternalChange.current = true
+      onChange?.(contentRef.current.innerHTML)
+    }
+  }
+
+  const execCommand = (command: string, value?: string) => {
+    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>
+          <div className="wysiwyg-editor__toolbar-divider" />
+          <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')}
+          >
+            <ParagraphIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Quote"
+            onClick={() => execCommand('formatBlock', 'BLOCKQUOTE')}
+          >
+            <QuoteAltIcon />
+          </button>
+          <div className="wysiwyg-editor__toolbar-divider" />
+          <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="Task List"
+            onClick={() => execCommand('insertUnorderedList')}
+          >
+            <TaskListIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Divider"
+            onClick={() => execCommand('insertHorizontalRule')}
+          >
+            <DividerIcon />
+          </button>
+          <div className="wysiwyg-editor__toolbar-divider" />
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Undo"
+            onClick={() => execCommand('undo')}
+          >
+            <UndoIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Redo"
+            onClick={() => execCommand('redo')}
+          >
+            <RedoIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Redo Alt"
+            onClick={() => execCommand('redo')}
+          >
+            <RedoAltIcon />
+          </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Clear"
+            onClick={() => execCommand('removeFormat')}
+          >
+            <ClearFormattingIcon />
+          </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/navigation/DashboardLayout/DashboardLayout.tsx

@@ -206,13 +206,14 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
 
                 
                 <main 
+                    id="scrollable"
                     className="dashboard-layout__main"
                     style={{ 
                         marginLeft: isMobile ? 0 : sidebarWidth,
                         marginTop: topHatHeight 
                     }}
                 >
-                    <div className="dashboard-layout__content">
+                    <div id="main" className="dashboard-layout__content">
                         {children}
                     </div>
                     {showFooter && <DashboardFooter version={version} />}

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: #5d5bf4;
+    color: #ffffff;
 
     &:hover {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #4241ad;
     }
 
     &:active,
     &:focus {
-      background-color: var(--fills-main-fill-action, #6200ee);
+      background: #333286;
     }
   }
 
-  // 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,22 +1,25 @@
 /* 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), serif;
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 123.077% */
+      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), serif;
         font-size: var(--text-xs-size, 11px);
         font-weight: var(--heading-h6-weight, 500);
         line-height: var(--text-xs-line, 14px);
@@ -32,32 +35,33 @@
         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), serif;
+    font-size: var(--text-sm-size, 13px);
+    line-height: var(--text-sm-line, 16px);
+    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);
-        }
+    &: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);
-        }
+    &::placeholder {
+      color: var(--labels-main-label-secondary, #626a90);
     }
+  }
 
     &__textarea {
-        font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
         font-size: var(--text-sm-size, 13px);
         line-height: var(--text-sm-line, 16px);
         color: var(--labels-main-label-primary, #121e52);
@@ -72,7 +76,7 @@
 
         &:focus {
             outline: none;
-            border-color: var(--borders-main-border-selected, #121e52);
+            border-color: var(--border-selected, #6200EE);
         }
 
         &::placeholder {
@@ -88,13 +92,13 @@
         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-family: var(--font-family-sans, 'Geist', sans-serif), serif;
             font-size: var(--text-sm-size, 13px);
             line-height: var(--text-sm-line, 16px);
             color: var(--labels-main-label-primary, #121e52);
@@ -126,7 +130,7 @@
             border: 2px solid var(--borders-main-border-primary, #e8e9ef);
             border-radius: var(--radius-md, 4px);
             text-align: center;
-            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
             font-size: var(--text-lg-size, 18px);
             font-weight: var(--heading-h3-weight, 600);
             color: var(--labels-main-label-primary, #121e52);
@@ -134,24 +138,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), serif;
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+      margin-top: 2px;
+      color: var(--label-secondary, #626A90);
+    }
+
+    &__error-text {
+      font-family: var(--font-family-sans, 'Geist', sans-serif), 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 +174,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';