All files / web/src/components/practice PerfectSessionCelebration.stories.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { Meta, StoryObj } from '@storybook/react'
import { css } from '../../../styled-system/css'
import { PerfectSessionCelebration } from './PerfectSessionCelebration'

// ============================================================================
// Meta
// ============================================================================

const meta: Meta<typeof PerfectSessionCelebration> = {
  title: 'Practice/PerfectSessionCelebration',
  component: PerfectSessionCelebration,
  decorators: [
    (Story) => (
      <div
        className={css({
          padding: '2rem',
          maxWidth: '500px',
          margin: '0 auto',
        })}
      >
        <Story />
      </div>
    ),
  ],
  parameters: {
    layout: 'centered',
  },
}

export default meta
type Story = StoryObj<typeof PerfectSessionCelebration>

// ============================================================================
// Stories
// ============================================================================

export const Default: Story = {
  args: {
    studentName: 'Sonia',
  },
}

export const LongName: Story = {
  args: {
    studentName: 'Alexandria Constantinopolous-McGillicuddy',
  },
}

// ============================================================================
// Dark Mode
// ============================================================================

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  decorators: [
    (Story) => (
      <div
        className={css({
          padding: '2rem',
          maxWidth: '500px',
          margin: '0 auto',
          backgroundColor: 'gray.900',
          borderRadius: '12px',
        })}
        data-theme="dark"
      >
        <Story />
      </div>
    ),
  ],
  args: {
    studentName: 'Sonia',
  },
}