@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/stories/ButtonAuditReview.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ButtonAuditReview.spec.d.ts.map

package/dist/stories/ButtonAuditReview.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAuditReview.spec.d.ts","sourceRoot":"","sources":["../../src/lib/stories/ButtonAuditReview.spec.js"],"names":[],"mappings":""}

package/dist/stories/ButtonAuditReview.spec.js

@@ -0,0 +1,422 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, it } from 'vitest';
+import ButtonAuditReview from './ButtonAuditReview.svelte';
+
+describe('ButtonAuditReview', () => {
+  describe('Component Rendering', () => {
+    it('should render the main heading', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Button Audit Review')).toBeInTheDocument();
+    });
+
+    it('should render the last updated date', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Last updated: December 30, 2024')).toBeInTheDocument();
+    });
+
+    it('should render all main sections', () => {
+      render(ButtonAuditReview);
+      expect(screen.getAllByText(/Buttons Without Variant/).length).toBeGreaterThan(0);
+      expect(screen.getByText(/Visual Comparison: Current vs Recommended/)).toBeInTheDocument();
+      expect(screen.getByText(/Recent Fixes/)).toBeInTheDocument();
+      expect(screen.getByText(/Valid Variants Reference/)).toBeInTheDocument();
+      expect(screen.getByText('Button Variant Decision Guide')).toBeInTheDocument();
+      expect(screen.getAllByText(/How to Find Buttons Without Variant/).length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Summary Cards', () => {
+    it('should render three summary cards', () => {
+      const { container } = render(ButtonAuditReview);
+      const summaryCards = container.querySelectorAll('.grid.grid-cols-3 > div');
+      expect(summaryCards).toHaveLength(3);
+    });
+
+    it('should display the total buttons without variant count (260)', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('260')).toBeInTheDocument();
+      expect(screen.getAllByText('Buttons Without Variant').length).toBeGreaterThan(0);
+    });
+
+    it('should display the recent fix sessions count', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(screen.getByText('Recent Fix Sessions')).toBeInTheDocument();
+      // Check the green card has the count 4
+      const greenCard = container.querySelector('.bg-green-50.border-green-400');
+      expect(greenCard?.textContent).toContain('4');
+    });
+
+    it('should display the valid variants count', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(screen.getByText('Valid Variants')).toBeInTheDocument();
+      // Check the blue card has the count 15
+      const blueCards = container.querySelectorAll('.bg-blue-50.border-blue-400');
+      const summaryBlueCard = blueCards[0];
+      expect(summaryBlueCard?.textContent).toContain('15');
+    });
+
+    it('should render status badges on summary cards', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Needs Review')).toBeInTheDocument();
+      expect(screen.getByText('Today')).toBeInTheDocument();
+      expect(screen.getByText('Reference')).toBeInTheDocument();
+    });
+  });
+
+  describe('Buttons Without Variant Section', () => {
+    it('should render the warning icon', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.textContent).toContain('⚠');
+    });
+
+    it('should render the table with correct headers', () => {
+      const { container } = render(ButtonAuditReview);
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+      const headers = table?.querySelectorAll('th');
+      expect(headers?.length).toBe(4);
+      expect(screen.getAllByText('File').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Count').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Context').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Status').length).toBeGreaterThan(0);
+    });
+
+    it('should render high priority items', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('routes/a/profile/venue/add/+page.svelte')).toBeInTheDocument();
+      expect(screen.getByText('Add venue form')).toBeInTheDocument();
+    });
+
+    it('should render medium priority items', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('routes/a/venues/[venueID]/[eventID]/tickets/+page.svelte')).toBeInTheDocument();
+      expect(screen.getByText('Event tickets')).toBeInTheDocument();
+    });
+
+    it('should render button counts correctly', () => {
+      const { container } = render(ButtonAuditReview);
+      const table = container.querySelector('table');
+      // High priority - 8 buttons
+      expect(table?.textContent).toContain('8');
+      // Check the table contains various counts
+      expect(table?.textContent).toContain('5');
+      expect(table?.textContent).toContain('3');
+    });
+
+    it('should display total count in summary box', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/Total: ~260 buttons/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Visual Examples Section', () => {
+    it('should render all visual example categories', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Tertiary Actions (Edit, View, Details)')).toBeInTheDocument();
+      expect(screen.getByText('Cancel / Dismiss Buttons')).toBeInTheDocument();
+      expect(screen.getByText('Dropdown / Menu Items')).toBeInTheDocument();
+      expect(screen.getByText('Icon-Only Buttons')).toBeInTheDocument();
+      expect(screen.getByText('Primary CTAs (Correct as default)')).toBeInTheDocument();
+    });
+
+    it('should render category descriptions', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Text-only actions that should not compete with primary CTAs')).toBeInTheDocument();
+      expect(screen.getByText('Secondary actions that close modals or cancel operations')).toBeInTheDocument();
+    });
+
+    it('should render "Needs Fix" badge for incorrect categories', () => {
+      const { container } = render(ButtonAuditReview);
+      const needsFixBadges = container.querySelectorAll('.bg-red-100.text-red-700');
+      expect(needsFixBadges.length).toBeGreaterThan(0);
+    });
+
+    it('should render "Correct" badge for correct categories', () => {
+      const { container } = render(ButtonAuditReview);
+      const correctBadges = container.querySelectorAll('.bg-green-100.text-green-700');
+      expect(correctBadges.length).toBeGreaterThan(0);
+    });
+
+    it('should render current vs recommended comparison labels', () => {
+      render(ButtonAuditReview);
+      const currentLabels = screen.getAllByText('Current (no variant):');
+      const recommendedLabels = screen.getAllByText(/Recommended:/);
+      expect(currentLabels.length).toBeGreaterThan(0);
+      expect(recommendedLabels.length).toBeGreaterThan(0);
+    });
+
+    it('should render the key insight box', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/Key insight:/)).toBeInTheDocument();
+      expect(screen.getByText(/Buttons without variant all render as solid blue/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Recent Fixes Section', () => {
+    it('should render the checkmark icon', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.textContent).toContain('✓');
+    });
+
+    it('should render all recent fix descriptions', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Lineup page buttons')).toBeInTheDocument();
+      expect(screen.getByText('Edit spot modal performer search')).toBeInTheDocument();
+      expect(screen.getByText('Actions dropdown in LineupSection')).toBeInTheDocument();
+      expect(screen.getByText('Batch invalid variant fixes')).toBeInTheDocument();
+    });
+
+    it('should render fix items for lineup page buttons', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Changed + Add button to use Carbon Add icon with text-white')).toBeInTheDocument();
+      expect(screen.getByText('Changed + New spot button to use Carbon Add icon with text-white')).toBeInTheDocument();
+    });
+
+    it('should render fix items for modal performer search', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Added variant="menu-item" to performer search result buttons')).toBeInTheDocument();
+    });
+
+    it('should render fix items for actions dropdown', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/Fixed dropdown not opening/)).toBeInTheDocument();
+      expect(screen.getByText(/Added actionsDropdownOpen state/)).toBeInTheDocument();
+    });
+
+    it('should render batch fix items', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/alternative → gray-outline/)).toBeInTheDocument();
+      expect(screen.getByText(/default → blue-solid/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Valid Variants Reference Section', () => {
+    it('should render all valid variant names', () => {
+      const { container } = render(ButtonAuditReview);
+      // Check that key variant names are present in the document
+      expect(container.textContent).toContain('default');
+      expect(container.textContent).toContain('alternative');
+      expect(container.textContent).toContain('outline');
+      expect(container.textContent).toContain('red');
+      expect(container.textContent).toContain('ghost');
+      expect(container.textContent).toContain('icon');
+      expect(container.textContent).toContain('toggle');
+      expect(container.textContent).toContain('menu-item');
+      expect(container.textContent).toContain('link');
+      expect(container.textContent).toContain('card');
+      expect(container.textContent).toContain('nav');
+    });
+
+    it('should render variant usage descriptions', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Main CTAs, Save, Submit')).toBeInTheDocument();
+      expect(screen.getByText('Cancel, Secondary actions')).toBeInTheDocument();
+      expect(screen.getByText('Delete, destructive actions')).toBeInTheDocument();
+    });
+
+    it('should render variant aliases where applicable', () => {
+      const { container } = render(ButtonAuditReview);
+      // Check within the Valid Variants section
+      const validVariantsSection = Array.from(container.querySelectorAll('section')).find(
+        section => section.textContent.includes('Valid Variants Reference')
+      );
+      expect(validVariantsSection?.textContent).toContain('blue-solid');
+      expect(validVariantsSection?.textContent).toContain('gray-outline');
+      expect(validVariantsSection?.textContent).toContain('blue-outline');
+    });
+
+    it('should display all 15 variants in grid layout', () => {
+      const { container } = render(ButtonAuditReview);
+      const variantCards = container.querySelectorAll('.grid.grid-cols-2 > div');
+      expect(variantCards.length).toBeGreaterThanOrEqual(15);
+    });
+  });
+
+  describe('Decision Guide Section', () => {
+    it('should render the decision guide heading', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Button Variant Decision Guide')).toBeInTheDocument();
+    });
+
+    it('should render "When to use each variant" section', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('When to use each variant')).toBeInTheDocument();
+    });
+
+    it('should render usage guidelines for variants', () => {
+      const { container } = render(ButtonAuditReview);
+      const decisionGuide = Array.from(container.querySelectorAll('section')).find(
+        section => section.textContent.includes('Button Variant Decision Guide')
+      );
+      expect(decisionGuide?.textContent).toContain('Primary CTAs: Save, Submit');
+      expect(decisionGuide?.textContent).toContain('Secondary CTAs: Invite, Export');
+      expect(decisionGuide?.textContent).toContain('Cancel, Close, Filter');
+      expect(decisionGuide?.textContent).toContain('Delete confirmations, destructive actions');
+    });
+
+    it('should render "Common mistakes" section', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Common mistakes')).toBeInTheDocument();
+    });
+
+    it('should render mistake examples', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/No variant on dropdown items/)).toBeInTheDocument();
+      expect(screen.getByText(/No variant on Cancel/)).toBeInTheDocument();
+      expect(screen.getByText(/Invalid variant names fall back to default/)).toBeInTheDocument();
+    });
+
+    it('should render the tip box', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText(/Tip:/)).toBeInTheDocument();
+      expect(screen.getByText(/When in doubt, use alternative for secondary actions/)).toBeInTheDocument();
+    });
+  });
+
+  describe('How to Find Issues Section', () => {
+    it('should render the grep command', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.textContent).toContain('grep -rn');
+      expect(container.textContent).toContain('--include="*.svelte"');
+    });
+
+    it('should render the instruction text', () => {
+      render(ButtonAuditReview);
+      expect(screen.getByText('Run this command in micdrop-frontend:')).toBeInTheDocument();
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have proper max-width container', () => {
+      const { container } = render(ButtonAuditReview);
+      const mainContainer = container.querySelector('.max-w-7xl');
+      expect(mainContainer).toBeInTheDocument();
+    });
+
+    it('should have proper spacing between sections', () => {
+      const { container } = render(ButtonAuditReview);
+      const spacedContainer = container.querySelector('.space-y-8');
+      expect(spacedContainer).toBeInTheDocument();
+    });
+
+    it('should render all sections with proper borders', () => {
+      const { container } = render(ButtonAuditReview);
+      const borderedSections = container.querySelectorAll('.border-2');
+      expect(borderedSections.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Color Coding and Visual Indicators', () => {
+    it('should use yellow theme for buttons without variant section', () => {
+      const { container } = render(ButtonAuditReview);
+      const yellowSection = container.querySelector('.bg-yellow-50.border-yellow-400');
+      expect(yellowSection).toBeInTheDocument();
+    });
+
+    it('should use orange theme for visual comparison section', () => {
+      const { container } = render(ButtonAuditReview);
+      const orangeSection = container.querySelector('.bg-orange-50.border-orange-400');
+      expect(orangeSection).toBeInTheDocument();
+    });
+
+    it('should use green theme for recent fixes section', () => {
+      const { container } = render(ButtonAuditReview);
+      const greenSection = container.querySelector('.bg-green-50.border-green-400');
+      expect(greenSection).toBeInTheDocument();
+    });
+
+    it('should use blue theme for decision guide section', () => {
+      const { container } = render(ButtonAuditReview);
+      const blueSection = container.querySelector('.bg-blue-50.border-blue-400');
+      expect(blueSection).toBeInTheDocument();
+    });
+  });
+
+  describe('Data Integrity', () => {
+    it('should display consistent button count across sections', () => {
+      const { container } = render(ButtonAuditReview);
+      // Check that 260 appears in summary card
+      expect(screen.getByText('260')).toBeInTheDocument();
+      // Check that ~260 appears in total message
+      expect(screen.getByText(/~260 buttons/)).toBeInTheDocument();
+    });
+
+    it('should display correct date for all recent fixes', () => {
+      const { container } = render(ButtonAuditReview);
+      // Check that December 30, 2024 appears in multiple places
+      const matches = screen.getAllByText(/December 30, 2024/);
+      expect(matches.length).toBeGreaterThan(0);
+    });
+
+    it('should render all table rows for buttons without variant', () => {
+      const { container } = render(ButtonAuditReview);
+      // Should have high priority, medium priority, and remaining items
+      const tableRows = container.querySelectorAll('tbody tr');
+      expect(tableRows.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Interactive Elements', () => {
+    it('should render buttons in visual examples', () => {
+      const { container } = render(ButtonAuditReview);
+      // Should have buttons for current and recommended states
+      const buttons = container.querySelectorAll('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    it('should render buttons with different variants in reference section', () => {
+      const { container } = render(ButtonAuditReview);
+      // Valid variants section should contain multiple button instances
+      const validVariantsSection = Array.from(container.querySelectorAll('section')).find(
+        section => section.textContent.includes('Valid Variants Reference')
+      );
+      expect(validVariantsSection).toBeInTheDocument();
+      const buttonsInSection = validVariantsSection?.querySelectorAll('button');
+      expect(buttonsInSection?.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should use semantic HTML structure', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.querySelector('h1')).toBeInTheDocument();
+      expect(container.querySelector('h2')).toBeInTheDocument();
+      expect(container.querySelector('h3')).toBeInTheDocument();
+    });
+
+    it('should have proper table structure', () => {
+      const { container } = render(ButtonAuditReview);
+      const table = container.querySelector('table');
+      expect(table).toBeInTheDocument();
+      expect(table?.querySelector('thead')).toBeInTheDocument();
+      expect(table?.querySelector('tbody')).toBeInTheDocument();
+    });
+
+    it('should use code elements for code snippets', () => {
+      const { container } = render(ButtonAuditReview);
+      const codeElements = container.querySelectorAll('code');
+      expect(codeElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Content Completeness', () => {
+    it('should render all emoji indicators', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.textContent).toContain('⚠');
+      expect(container.textContent).toContain('👁');
+      expect(container.textContent).toContain('✓');
+    });
+
+    it('should render all status badges', () => {
+      render(ButtonAuditReview);
+      expect(screen.getAllByText('Review').length).toBeGreaterThan(0);
+    });
+
+    it('should contain comprehensive guidance text', () => {
+      const { container } = render(ButtonAuditReview);
+      expect(container.textContent).toContain('variant');
+      expect(container.textContent).toContain('blue-solid');
+      expect(container.textContent).toContain('visual hierarchy');
+    });
+  });
+});

package/dist/stories/ButtonAuditReview.stories.svelte

@@ -1,14 +1,14 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ButtonAuditReview from "./ButtonAuditReview.svelte";
-
-  const { Story } = defineMeta({
-    title: "Design System/Button Audit Review",
-    component: ButtonAuditReview,
-    parameters: {
-      layout: 'fullscreen',
-    }
-  });
-</script>
-
-<Story name="All Issues" />
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import ButtonAuditReview from "./ButtonAuditReview.svelte";
+
+  const { Story } = defineMeta({
+    title: "Design System/Button Audit Review",
+    component: ButtonAuditReview,
+    parameters: {
+      layout: 'fullscreen',
+    }
+  });
+</script>
+
+<Story name="All Issues" />