All files / molecule/coachmark/demo config.js

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
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
import Badge, {atomBadgeSizes} from '@s-ui/react-atom-badge'
import {atomButtonColors, atomButtonDesigns, atomButtonSizes} from '@s-ui/react-atom-button'
 
import {moleculeCoachmarkActionButtonIds} from '../src/index.js'
 
export const COACHMARK_STEPS_CONTENT = [
  {
    target: '.sui-molecule-coachmark-step-1',
    title: 'Tooltip example with all elements',
    content:
      'It has a badge, a close button, a heading, a description, an image on the side, a progress indicator and action buttons to continue the tour.',
    disableBeacon: true
  },
  {
    target: '.sui-molecule-coachmark-step-2',
    title: 'It has the same elements than the previous...',
    content: 'But we have removed the progress indicator and now it has a back button available'
  },
  {
    target: '.sui-molecule-coachmark-step-3',
    title: 'Antoher variant buddy',
    content: 'Whoop! Now there is only visible a heading, description, a close icon, a badge and a next button '
  },
  {
    target: '.sui-molecule-coachmark-step-4',
    title: 'Less stuff in here',
    content: 'Only heading, description and next button'
  },
  {
    target: '.sui-molecule-coachmark-step-5',
    content: 'Minimalist one, only description and next button'
  }
]
 
export const exampleBadge = <Badge size={atomBadgeSizes.MEDIUM} label={'NEW'} />
export const examlpeHeadImage = {
  url: 'https://frtassets.fotocasa.es/ut/statics/img/background-login-legal.png',
  alt: 'head image'
}
 
export const exampleImage = {
  url: 'https://s.ccdn.es/images/coches-net-PRO/anounce.svg',
  alt: 'announcement'
}
export const exampleActionButtons = [
  {
    id: moleculeCoachmarkActionButtonIds.BACK,
    color: atomButtonColors.NEUTRAL,
    design: atomButtonDesigns.OUTLINE,
    size: atomButtonSizes.SMALL
  },
  {
    id: moleculeCoachmarkActionButtonIds.NEXT,
    color: atomButtonColors.PRIMARY,
    design: atomButtonDesigns.SOLID,
    size: atomButtonSizes.SMALL
  }
]
export const exampleCloseIcon = <>{'X'}</>
 
export const COACHMARK_STEPS = {
  FIRST: 0,
  SECOND: 1,
  THIRD: 2,
  FOURTH: 3,
  FIFTH: 4
}