pattern-library/src/components/10-atoms/button/story.args.js at develop · axa-ch-webhub-cloud/pattern-library · GitHub

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
import { iconList } from '../icon/icon-list';

const variants = {
  default: '',
  red: 'red',
  secondary: 'secondary',
  inverted: 'inverted',
  'Inverted-blue-ocean': 'inverted-blue-ocean',
  'inverted-red-tosca': 'inverted-red-tosca',
  'inverted-purple-logan': 'inverted-purple-logan',
  'inverted-green-viridian': 'inverted-green-viridian',
  'inverted-blue-teal': 'inverted-blue-teal',
};

const sizes = {
  default: null,
  large: 'large',
  small: 'small',
};

export const invertedBgs = {
  inverted: '#00008f',
  'inverted-blue-ocean': '#4976ba',
  'inverted-red-tosca': '#914146',
  'inverted-purple-logan': '#9190ac',
  'inverted-green-viridian': '#668980',
  'inverted-blue-teal': '#027180',
};

export const args = {
  slot: 'Calculate Premium',
  variant: 'default',
  size: 'default',
  icon: 'none',
  block: false,
  disabled: false,
  motionOff: false,
  type: 'button',
  href: '',
  external: false,
};

export const argTypes = {
  slot: { control: 'text' },
  variant: {
    control: 'radio',
    options: Object.keys(variants),
    mapping: variants,
    labels: variants,
  },
  block: { control: 'boolean' },
  size: {
    control: 'radio',
    options: Object.keys(sizes),
    mapping: sizes,
    labels: sizes,
  },
  icon: {
    control: 'select',
    options: Object.keys(iconList),
    mapping: iconList,
    labels: iconList,
  },
  disabled: { control: 'boolean' },
  motionOff: { control: 'boolean' },
  type: {
    control: 'radio',
    options: ['button', 'submit', 'reset'],
  },
  href: { control: 'text' },
  external: { control: 'boolean' },
};