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
import React from 'react'
import { Collapsible, Flex, Text } from '@dailykit/ui'

export default {
   title: 'Collapsible'
}

export const CollapsibleCards = () => {
   return (
      <>
         {[1, 2, 3].map(i => (
            <Collapsible
               key={i}
               title={i !== 2 ? 'Title' : ''}
               isHeadClickable={i !== 1}
               head={
                  <Flex
                     margin='10px 0'
                     container
                     alignItems='center'
                     justifyContent='space-between'
                     width='100%'
                  >
                     <Text as='title'> Head </Text>
                     <Text as='p'> Actions </Text>
                  </Flex>
               }
               body={
                  <Flex
                     margin='10px 0'
                     container
                     alignItems='center'
                     justifyContent='space-between'
                  >
                     <Text as='title'> Body </Text>
                     <Text as='p'> Actions </Text>
                  </Flex>
               }
               defaultOpen={i === 1}
               isDraggable={i !== 1}
            />
         ))}
      </>
   )
}