Cerberus v0.22 Release

1
import { Button, ButtonGroup } from '@cerberus/react'
2

3
function ButtonGroupDemo() {
4
  return (
5
    <ButtonGroup>
6
      <Button>Button 1</Button>
7
      <Button>Button 2</Button>
8
      <Button>Button 3</Button>
9
    </ButtonGroup>
10
  )
11
}

1
import { Button, ButtonGroup, IconButton } from '@cerberus/react'
2
import { ChevronDown } from '@carbon/icons-react'
3
import { HStack } from 'styled-system/jsx'
4

5
function AttachedButtonGroupDemo() {
6
  return (
7
    <HStack justify="center" w="full">
8
      <ButtonGroup layout="attached">
9
        <Button>Main action</Button>
10
        <IconButton ariaLabel="View options" shape="square" usage="filled">
11
          <ChevronDown />
12
        </IconButton>
13
      </ButtonGroup>
14

15
      <ButtonGroup layout="attached">
16
        <Button usage="outlined">Main action</Button>
17
        <IconButton ariaLabel="View options" shape="square" usage="outlined">
18
          <ChevronDown />
19
        </IconButton>
20
      </ButtonGroup>
21
    </HStack>
22
  )
23
}

1
import { SplitButton, MenuItem } from '@cerberus/react'
2
import { Save, Download } from '@carbon/icons-react'
3

4
function SplitButtonDemo() {
5
  return (
6
    <SplitButton actionText="Copy">
7
      <MenuItem value="save">
8
        <Save size={16} />
9
        Save
10
      </MenuItem>
11
      <MenuItem value="save_as">
12
        <Save size={16} />
13
        Save As
14
      </MenuItem>
15
      <MenuItem value="export">
16
        <Download size={16} />
17
        Export
18
      </MenuItem>
19
    </SplitButton>
20
  )
21
}

1
import { Field, Input } from '@cerberus/react'
2
import { Box, VStack } from 'styled-system/jsx'
3

4
function HiddenLabelFields() {
5
  return (
6
    <Box w="1/2">
7
      <VStack alignItems="flex-start" gap="lg" w="full">
8
        <Field
9
          label="Search something"
10
          helperText="Label is hidden but accessible to screen readers"
11
          hideLabel
12
        >
13
          <Input name="search" type="search" placeholder="Type to search..." />
14
        </Field>
15
        <Field
16
          label="Global search"
17
          hideLabel
18
          required
19
        >
20
          <Input name="global-search" type="search" placeholder="Search the entire site..." />
21
        </Field>
22
      </VStack>
23
    </Box>
24
  )
25
}

1
import { useCTAModal, createCTAModalActions, Field, Input, Textarea } from '@cerberus/react'
2
import { VStack } from 'styled-system/jsx'
3

4
function CTAWithCustomContent() {
5
  const { show } = useCTAModal()
6

7
  const handleClick = useCallback(() => {
8
    show({
9
      heading: 'Create New Item',
10
      content: (
11
        <VStack alignItems="flex-start" gap="lg" w="full">
12
          <Field label="Name">
13
            <Input placeholder="e.g., Cerberus" />
14
          </Field>
15
          <Field label="Description">
16
            <Textarea placeholder="e.g., Cerberus is a design system..." />
17
          </Field>
18
        </VStack>
19
      ),
20
      actions: createCTAModalActions([
21
        {
22
          text: 'Create',
23
          handleClick: () => alert('Created'),
24
        },
25
        {
26
          text: 'Cancel',
27
          handleClick: () => {},
28
        },
29
      ]),
30
    })
31
  }, [show])
32

33
  return <Button onClick={handleClick}>Create Item</Button>
34
}

1
import { useConfirmModal } from '@cerberus/react'
2

3
function ConfirmWithoutAvatar() {
4
  const confirm = useConfirmModal()
5

6
  const handleConfirm = useCallback(async () => {
7
    const userConsent = await confirm.show({
8
      heading: 'Confirm Action',
9
      description: 'Are you sure you want to proceed?',
10
      actionText: 'Yes, proceed',
11
      cancelText: 'Cancel',
12
      showAvatar: false, // Hide the avatar
13
    })
14

15
    if (userConsent) {
16
      // Handle confirmed action
17
    }
18
  }, [confirm])
19

20
  return <Button onClick={handleConfirm}>Confirm Action</Button>
21
}