@licklist/design 0.78.45 → 0.78.47

package/src/v2/pages/DeleteEntity/DeleteEntityPage.scss

@@ -0,0 +1,96 @@
+.delete-entity-page {
+  padding: 0;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 48px 32px;
+
+    @media (max-width: 768px) {
+      padding: 24px 16px;
+    }
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    max-width: 672px;
+  }
+
+  &__entity-name {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__warning-card {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 24px;
+    background: var(--surface-secondary, #f8f8fa);
+    border: 1px solid var(--border-primary, #e8e9ef);
+    border-radius: 8px;
+  }
+
+  &__warning-text {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--label-status-error, #ef4444);
+    margin: 0;
+  }
+
+  &__warning-description {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    color: var(--label-secondary, #626a90);
+    margin: 0;
+  }
+
+  &__consequences {
+    list-style: disc;
+    padding-left: 20px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    li {
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 14px;
+      color: var(--label-secondary, #626a90);
+    }
+  }
+
+  &__confirm-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs, 2px);
+  }
+
+  &__confirm-label {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--label-primary, #121e52);
+    margin: 0;
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__confirm-error {
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: 11px;
+    color: var(--label-status-error, #ef4444);
+  }
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.stories.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { DeleteEntityPage } from './DeleteEntityPage'
+
+const meta: Meta<typeof DeleteEntityPage> = {
+  title: 'v2/Pages/DeleteEntity',
+  component: DeleteEntityPage,
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj<typeof DeleteEntityPage>
+
+const baseArgs = {
+  confirmWord: 'DELETE',
+  warningTitle: 'This action cannot be undone',
+  confirmLabelPrefix: 'Type',
+  confirmLabelSuffix: 'to confirm deletion',
+  confirmErrorMessage: 'Please type DELETE to confirm.',
+  isDeleting: false,
+  onDelete: () => console.log('Delete confirmed'),
+  onCancel: () => console.log('Cancel'),
+}
+
+/**
+ * **Delete Zone** — confirmation page for deleting a zone.
+ *
+ * Lists the consequences of the action and requires the user to type
+ * the confirmation word before the destructive button is enabled.
+ */
+export const DeleteZone: Story = {
+  name: 'Delete Zone',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: [
+      'Remove the zone from your venue layout',
+      'Delete all resources assigned to this zone',
+      'Cancel any future bookings linked to this zone',
+    ],
+  },
+}
+
+/**
+ * **Delete Special Hours** — confirmation page for removing a special hours schedule.
+ */
+export const DeleteSpecialHours: Story = {
+  name: 'Delete Special Hours',
+  args: {
+    ...baseArgs,
+    title: 'Delete Special Hours',
+    entityName: 'Christmas Closure',
+    deleteButtonLabel: 'Delete Schedule',
+    warningDescription:
+      'You are about to permanently delete the special hours schedule "Christmas Closure". This will:',
+    consequences: [
+      'Remove all date-specific overrides from this schedule',
+      'Restore your default opening hours for the affected dates',
+    ],
+  },
+}
+
+/**
+ * **Deleting** — destructive button shown in its loading state while the
+ * delete request is in flight.
+ */
+export const Deleting: Story = {
+  name: 'Deleting',
+  args: {
+    ...baseArgs,
+    title: 'Delete Zone',
+    entityName: 'Main Hall',
+    deleteButtonLabel: 'Delete Zone',
+    warningDescription:
+      'You are about to permanently delete the zone "Main Hall". This will:',
+    consequences: ['Remove the zone from your venue layout'],
+    isDeleting: true,
+  },
+}

package/src/v2/pages/DeleteEntity/DeleteEntityPage.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react'
+import { NewPageHeader } from '../../components/NewPageHeader'
+import { Button } from '../../components/Button/Button'
+import { NewInput } from '../../components/NewInput/NewInput'
+import './DeleteEntityPage.scss'
+
+export interface DeleteEntityPageProps {
+  /** Page title shown in the header (e.g. "Delete Zone") */
+  title: string
+  /** Name of the entity being deleted, displayed prominently */
+  entityName: string
+  /** Bullet list of consequences shown inside the warning card */
+  consequences: string[]
+  /** Label for the destructive action button */
+  deleteButtonLabel: string
+  /** Whether the delete request is in flight */
+  isDeleting: boolean
+  /** Word the user must type to confirm deletion (e.g. "DELETE") */
+  confirmWord: string
+  /** Heading inside the warning card (e.g. "This action cannot be undone") */
+  warningTitle: string
+  /** Description below the warning title */
+  warningDescription: string
+  /** Label above the confirmation input — `confirmWord` is rendered as <strong> */
+  confirmLabelPrefix: string
+  confirmLabelSuffix: string
+  /** Error message shown when the typed value does not match `confirmWord` */
+  confirmErrorMessage: string
+  onDelete: () => void | Promise<void>
+  onCancel: () => void
+}
+
+export function DeleteEntityPage({
+  title,
+  entityName,
+  consequences,
+  deleteButtonLabel,
+  isDeleting,
+  confirmWord,
+  warningTitle,
+  warningDescription,
+  confirmLabelPrefix,
+  confirmLabelSuffix,
+  confirmErrorMessage,
+  onDelete,
+  onCancel,
+}: DeleteEntityPageProps) {
+  const [confirmationInput, setConfirmationInput] = useState('')
+  const [confirmationError, setConfirmationError] = useState(false)
+
+  const handleDelete = async () => {
+    if (confirmationInput.toLowerCase() !== confirmWord.toLowerCase()) {
+      setConfirmationError(true)
+      return
+    }
+
+    await onDelete()
+  }
+
+  return (
+    <div className="delete-entity-page">
+      <NewPageHeader title={title} onCancel={onCancel} />
+      <div className="delete-entity-page__content">
+        <div className="delete-entity-page__inner">
+          <h2 className="delete-entity-page__entity-name">{entityName}</h2>
+
+          <div className="delete-entity-page__warning-card">
+            <p className="delete-entity-page__warning-text">{warningTitle}</p>
+            <p className="delete-entity-page__warning-description">
+              {warningDescription}
+            </p>
+            <ul className="delete-entity-page__consequences">
+              {consequences.map((item, i) => (
+                <li key={i}>{item}</li>
+              ))}
+            </ul>
+
+            <div className="delete-entity-page__confirm-field">
+              <p className="delete-entity-page__confirm-label">
+                {confirmLabelPrefix} <strong>{confirmWord}</strong>{' '}
+                {confirmLabelSuffix}
+              </p>
+              {confirmationError && (
+                <span className="delete-entity-page__confirm-error">
+                  {confirmErrorMessage}
+                </span>
+              )}
+              <NewInput
+                value={confirmationInput}
+                onChange={(e) => {
+                  setConfirmationInput(
+                    (e.target as HTMLInputElement).value,
+                  )
+                  setConfirmationError(false)
+                }}
+                error={confirmationError ? ' ' : undefined}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Button
+              variant="destructive-strong"
+              onClick={handleDelete}
+              disabled={isDeleting}
+              isLoading={isDeleting}
+              style={{
+                background: 'var(--fills-main-fill-danger, #cc3c35)',
+              }}
+            >
+              {deleteButtonLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DeleteEntityPage

package/src/v2/pages/DeleteEntity/index.ts

@@ -0,0 +1,2 @@
+export { DeleteEntityPage } from './DeleteEntityPage'
+export type { DeleteEntityPageProps } from './DeleteEntityPage'

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

@@ -47,6 +47,33 @@
     }
   }
 
+  // Neutral Outline (border-primary border, label-primary text)
+  &--outline {
+    border: 1px solid var(--border-primary, #e8e9ef);
+    background-color: var(--surface-primary, #ffffff);
+    color: var(--label-primary, #121e52);
+    font-weight: 500;
+    min-height: 40px;
+    padding: 8px 16px 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 20px;
+
+    svg {
+      fill: currentColor;
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary, #f8f8fa);
+      border-color: var(--border-secondary, #d0d3e3);
+    }
+
+    &:active {
+      background-color: var(--surface-tertiary, #f0f0f5);
+    }
+  }
+
   // Primary - Outline
   &--primary-outline {
     border: 2px solid var(--fills-main-fill-action, #6200ee);