wally-ui 1.10.0 → 1.11.1

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -8,34 +8,171 @@ export const ButtonCodeExamples = {
   componentImport: `@Component({
   selector: 'app-example',
   imports: [Button],
-  templateUrl: './example.html',
-  styleUrl: './example.css'
+  templateUrl: './example.html'
 })`,
 
   // Basic usage
-  basicUsage: `<wally-button>Wally Button</wally-button>`,
+  basicUsage: `<wally-button>Click me</wally-button>`,
 
-  // Variants
-  primaryVariant: `<wally-button variant="primary">Primary Button</wally-button>`,
+  // === VARIANTS ===
+
+  // Primary (Default)
+  primaryVariant: `<!-- Default variant -->
+<wally-button>Primary Button</wally-button>
+
+<!-- Explicit primary -->
+<wally-button variant="primary">Primary Button</wally-button>`,
+
+  // Secondary
   secondaryVariant: `<wally-button variant="secondary">Secondary Button</wally-button>`,
 
-  // States
+  // Destructive
+  destructiveVariant: `<wally-button variant="destructive">Delete Account</wally-button>`,
+
+  // Outline
+  outlineVariant: `<wally-button variant="outline">Outline Button</wally-button>`,
+
+  // Ghost
+  ghostVariant: `<wally-button variant="ghost">Ghost Button</wally-button>`,
+
+  // Link
+  linkVariant: `<!-- Internal navigation -->
+<wally-button variant="link" href="/components">View Components</wally-button>
+
+<!-- External link -->
+<wally-button variant="link" href="https://github.com">GitHub</wally-button>`,
+
+  // === STATES ===
+
   disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
-  loading: `<wally-button [loading]="true">Loading</wally-button>`,
+
+  loading: `<wally-button [loading]="true">Loading...</wally-button>`,
+
   notification: `<wally-button [showNotification]="true">Messages</wally-button>`,
 
-  // Types
+  // === PRODUCTION EXAMPLES ===
+
+  // CTA Button
+  ctaExample: `<!-- Call-to-Action Example -->
+<wally-button>
+  Get Started Free
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="2" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+  </svg>
+</wally-button>`,
+
+  // Login Form
+  loginExample: `<!-- Login Form Example -->
+<form (ngSubmit)="onLogin()">
+  <!-- ... form fields ... -->
+
+  <div class="flex gap-2">
+    <wally-button
+      type="submit"
+      [loading]="isLoggingIn()"
+      [disabled]="!loginForm.valid">
+      Sign In
+    </wally-button>
+
+    <wally-button
+      variant="secondary"
+      type="button"
+      (click)="goToSignUp()">
+      Create Account
+    </wally-button>
+  </div>
+</form>`,
+
+  loginExampleTs: `export class LoginComponent {
+  isLoggingIn = signal(false);
+  loginForm: FormGroup;
+
+  onLogin() {
+    this.isLoggingIn.set(true);
+
+    this.authService.login(this.loginForm.value)
+      .subscribe({
+        next: () => this.router.navigate(['/dashboard']),
+        error: () => this.isLoggingIn.set(false)
+      });
+  }
+}`,
+
+  // Delete Confirmation
+  deleteExample: `<!-- Delete Confirmation Modal -->
+<div class="modal">
+  <h2>Delete Account?</h2>
+  <p>This action cannot be undone.</p>
+
+  <div class="flex gap-2 justify-end">
+    <wally-button
+      variant="ghost"
+      (click)="closeModal()">
+      Cancel
+    </wally-button>
+
+    <wally-button
+      variant="destructive"
+      [loading]="isDeleting()"
+      (click)="confirmDelete()">
+      Delete Account
+    </wally-button>
+  </div>
+</div>`,
+
+  // Dashboard Actions
+  dashboardExample: `<!-- Dashboard Actions -->
+<div class="dashboard-header">
+  <wally-button variant="outline" (click)="exportData()">
+    Export
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+    </svg>
+  </wally-button>
+
+  <wally-button (click)="createNew()">
+    Create New
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="2" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+    </svg>
+  </wally-button>
+</div>`,
+
+  // Icon Button with Notification
+  notificationButton: `<!-- Notification Icon Button -->
+<wally-button
+  [showNotification]="hasUnreadMessages()"
+  ariaLabel="View messages">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+  </svg>
+</wally-button>`,
+
+  // === BUTTON TYPES ===
+
   submit: `<wally-button type="submit">Submit Form</wally-button>`,
+  reset: `<wally-button type="reset" variant="ghost">Reset</wally-button>`,
+
+  // === EVENTS ===
 
-  // Events
   clickTemplate: `<wally-button (click)="handleClick()">Click Me</wally-button>`,
+
   clickMethod: `handleClick(): void {
-  this.clickMessage.set('Button clicked!');
+  console.log('Button clicked!');
+  // Your logic here
 }`,
 
-  // Icons
+  // === ICONS ===
+
   iconWithText: `<wally-button>
-  Save
+  Save Changes
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -43,7 +180,7 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  iconOnly: `<wally-button>
+  iconOnly: `<wally-button ariaLabel="Notifications">
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -51,8 +188,19 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  // Accessibility
-  ariaLabel: `<wally-button ariaLabel="Save document">
+  iconLeft: `<wally-button>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="2" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+  </svg>
+  Back
+</wally-button>`,
+
+  // === ACCESSIBILITY ===
+
+  ariaLabel: `<!-- Essential for icon-only buttons -->
+<wally-button ariaLabel="Save document">
   <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" class="size-5">
     <path stroke-linecap="round" stroke-linejoin="round"
@@ -60,20 +208,135 @@ export const ButtonCodeExamples = {
   </svg>
 </wally-button>`,
 
-  ariaPressed: `<wally-button [ariaPressed]="isToggled">
-  Toggle Setting
+  ariaPressed: `<!-- For toggle buttons -->
+<wally-button [ariaPressed]="isMuted()">
+  {{ isMuted() ? 'Unmute' : 'Mute' }}
+</wally-button>`,
+
+  ariaBusy: `<!-- Automatically set when loading="true" -->
+<wally-button [loading]="isSaving()">
+  Save Changes
 </wally-button>`,
 
-  ariaBusy: `<wally-button [loading]="true">
-  Processing...
+  ariaDescribedBy: `<!-- Connect button to description -->
+<wally-button ariaDescribedBy="save-description">
+  Save
+</wally-button>
+<p id="save-description" class="sr-only">
+  Saves your changes permanently
+</p>`,
+
+  // === EDGE CASES & ADVANCED ===
+
+  // Form Integration
+  formIntegration: `<!-- Button with form validation -->
+<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
+  <!-- form fields -->
+
+  <wally-button
+    type="submit"
+    [disabled]="!myForm.valid"
+    [loading]="isSubmitting()">
+    Submit
+  </wally-button>
+</form>`,
+
+  formIntegrationTs: `export class MyComponent {
+  myForm = new FormGroup({
+    name: new FormControl('', Validators.required)
+  });
+
+  isSubmitting = signal(false);
+
+  onSubmit() {
+    if (this.myForm.valid) {
+      this.isSubmitting.set(true);
+      // API call...
+    }
+  }
+}`,
+
+  // Router Integration
+  routerExample: `<!-- Using with Angular Router -->
+<wally-button variant="link" href="/dashboard">
+  Go to Dashboard
+</wally-button>
+
+<!-- Programmatic navigation -->
+<wally-button (click)="navigateToProfile()">
+  View Profile
 </wally-button>`,
 
-  // Properties
-  propertyType: `type: string = 'button';`,
-  propertyDisabled: `disabled: boolean = false;`,
-  propertyLoading: `loading: boolean = false;`,
-  propertyShowNotification: `showNotification: boolean = false;`,
-  propertyAriaLabel: `ariaLabel: string = '';`,
-  propertyAriaPressed: `ariaPressed: boolean | undefined = undefined;`,
-  propertyAriaDescribedBy: `ariaDescribedBy: string = '';`,
-};
+  routerExampleTs: `constructor(private router: Router) {}
+
+navigateToProfile() {
+  this.router.navigate(['/profile', this.userId]);
+}`,
+
+  // Loading + Disabled behavior
+  loadingDisabledExample: `<!-- Loading takes precedence over disabled -->
+<wally-button
+  [disabled]="formInvalid()"
+  [loading]="isSaving()">
+  Save
+</wally-button>
+
+<!-- Result: When loading=true, button is disabled regardless of disabled prop -->`,
+
+  // Icon recommendations
+  iconRecommendations: `<!-- Recommended: Heroicons with size-5 (20px) -->
+<wally-button>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round" d="..." />
+  </svg>
+  Action
+</wally-button>
+
+<!-- Also works with: Lucide, Phosphor, Font Awesome SVG -->`,
+
+  // Signals pattern
+  signalsPattern: `<!-- Using Angular Signals (reactive) -->
+export class MyComponent {
+  isLoading = signal(false);
+  isDisabled = computed(() => !this.form.valid);
+
+  async handleSubmit() {
+    this.isLoading.set(true);
+    await this.api.save();
+    this.isLoading.set(false);
+  }
+}
+
+<!-- Template -->
+<wally-button
+  [loading]="isLoading()"
+  [disabled]="isDisabled()"
+  (click)="handleSubmit()">
+  Submit
+</wally-button>`,
+
+  // Button vs type="button"
+  buttonTypeExplained: `<!-- GOOD: Explicit type prevents accidental form submission -->
+<wally-button type="button" (click)="openModal()">
+  Open
+</wally-button>
+
+<!-- CAUTION: Default type="button" is safe, but explicit is better -->
+<wally-button (click)="openModal()">Open</wally-button>
+
+<!-- GOOD: Use type="submit" for form submission -->
+<form (ngSubmit)="save()">
+  <wally-button type="submit">Save</wally-button>
+</form>`,
+
+  // Href without link variant
+  hrefBehavior: `<!-- href only works with variant="link" -->
+
+<!-- CORRECT: Works as expected -->
+<wally-button variant="link" href="/page">Link</wally-button>
+
+<!-- INCORRECT: href is ignored, just a regular button -->
+<wally-button href="/page">Button</wally-button>`,
+
+};