1// Interaction Design skill demos
2export default {
3 id: 'interaction-design',
4 tabs: [
5 {
6 id: 'states',
7 label: 'Button States',
8 caption: 'Missing states vs complete interaction feedback',
9 // This demo shows both states side-by-side, no toggle needed
10 hasToggle: false,
11 before: `
12 <div class="int-demo int-states-demo">
13 <div class="int-state-row">
14 <span class="int-state-label">Poor</span>
15 <button class="int-btn int-btn-poor">Click Me</button>
16 </div>
17 <div class="int-state-row">
18 <span class="int-state-label">Good</span>
19 <button class="int-btn int-btn-good">Click Me</button>
20 </div>
21 </div>
22 `
23 },
24 {
25 id: 'affordance',
26 label: 'Affordances',
27 caption: 'Unclear actions vs obvious clickability',
28 beforeClass: 'int-demo int-affordance-before',
29 afterClass: 'int-demo int-affordance-after',
30 before: `
31 <div class="int-demo int-affordance-before">
32 <div class="int-aff-item int-aff-poor">
33 <span>Learn more</span>
34 </div>
35 <div class="int-aff-item int-aff-poor">
36 <span>Settings</span>
37 </div>
38 </div>
39 `,
40 after: null // Uses CSS class toggle
41 },
42 {
43 id: 'feedback',
44 label: 'Feedback',
45 caption: 'Silent actions vs immediate confirmation',
46 before: `
47 <div class="int-demo int-feedback-before">
48 <button class="int-fb-btn int-fb-silent">
49 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
50 </button>
51 <span class="int-fb-label">Click — nothing happens</span>
52 </div>
53 `,
54 after: `
55 <div class="int-demo int-feedback-after">
56 <button class="int-fb-btn int-fb-active" data-action="like">
57 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
58 </button>
59 <span class="int-fb-label">Click to try!</span>
60 </div>
61 `,
62 onAfterRender: () => {
63 // Setup interactive like button
64 document.querySelectorAll('.int-fb-active[data-action="like"]').forEach(btn => {
65 btn.addEventListener('click', () => {
66 btn.classList.toggle('liked');
67 const label = btn.nextElementSibling;
68 if (label) {
69 label.textContent = btn.classList.contains('liked') ? 'Liked!' : 'Click to try!';
70 }
71 });
72 });
73 }
74 }
75 ]
76};
77
78
79