@symbo.ls/button 2.11.162 → 2.11.166

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/index.js +95 -49
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -37,12 +37,6 @@ export const SquareButton = {
37
37
  }
38
38
  }
39
39
 
40
- export const ButtonSet = {
41
- tag: 'nav',
42
- extend: Flex,
43
- childExtend: SquareButton
44
- }
45
-
46
40
  export const CircleButton = {
47
41
  extend: SquareButton,
48
42
  props: { round: 'C' }
@@ -53,34 +47,82 @@ export const KangorooButton = {
53
47
  childExtend: IconText
54
48
  }
55
49
 
56
- export const CancelConfirmButtons = {
57
- extend: Flex,
58
- childExtend: Button,
59
- ...[
60
- { props: { text: 'Cancel' } },
61
- { props: { text: 'Confirm' } }
62
- ],
50
+ export const CommonButton = {
51
+ extend: Button,
52
+ props: {
53
+ color: 'white',
54
+ background: 'blue',
55
+ boxSize: 'fit-content',
56
+ padding: 'A A2',
57
+ round: 'Z2',
58
+ gap: 'Y2',
59
+ position: 'relative'
60
+ },
61
+ icon: {
62
+ props: { fontSize: 'C' }
63
+ },
64
+ Caption: {
65
+ props: {
66
+ text: 'Button',
67
+ line_height: '1em'
68
+ }
69
+ }
70
+ }
63
71
 
72
+ export const IconCommonButton = {
73
+ extend: CommonButton,
64
74
  props: {
65
- gap: 'Z',
66
- maxWidth: 'fit-content',
67
- childProps: {
68
- fontWeight: '500',
69
- color: 'white',
70
- padding: 'A B+X',
71
- round: 'A',
75
+ icon: { name: 'smile' },
76
+ boxSize: 'fit-content fit-content',
77
+ padding: 'A',
78
+ background: 'gray3'
79
+ },
80
+ Caption: null
81
+ }
82
+
83
+ export const ButtonSet = {
84
+ tag: 'nav',
85
+ extend: Flex,
86
+ childExtend: IconCommonButton
87
+ }
88
+
89
+ export const CancelConfirmButtons = {
90
+ extend: Flex,
91
+ childExtend: {
92
+ extend: CommonButton,
93
+ props: {
94
+ minWidth: 'D2',
72
95
  ':first-child': {
73
- background: 'transparent'
96
+ background: 'transparent',
97
+ border: '1px solid #20202B'
74
98
  },
75
99
  ':last-child': {
76
- background: '#0474F2'
77
100
  }
78
101
  }
102
+ },
103
+ ...[
104
+ { Caption: { text: 'No' } },
105
+ { Caption: { text: 'Yes' } }
106
+ ],
107
+
108
+ props: {
109
+ gap: 'Z',
110
+ maxWidth: 'fit-content'
111
+ }
112
+ }
113
+
114
+ export const IcontextButton = {
115
+ extend: CommonButton,
116
+ props: {
117
+ padding: 'A',
118
+ position: 'relative',
119
+ background: 'gray3',
120
+ icon: { name: 'smile' }
79
121
  }
80
122
  }
81
123
 
82
124
  export const DropDownButton = {
83
- extend: Button,
125
+ extend: CommonButton,
84
126
  props: {
85
127
  gap: 'Y',
86
128
  boxSize: 'fit-content fit-content',
@@ -92,39 +134,43 @@ export const DropDownButton = {
92
134
  name: 'chevronDown',
93
135
  fontSize: 'D'
94
136
  },
95
- text: 'All'
137
+ Caption: { text: 'all' }
96
138
  }
97
139
  }
98
140
 
99
- export const ButtonTemplate1 = {
100
- extend: Button,
141
+ export const DropDownButtonWithAvatar = {
142
+ extend: DropDownButton,
101
143
  props: {
102
- icon: { name: 'circle' },
103
- boxSize: 'fit-content fit-content',
104
- padding: 'A',
105
- round: 'A',
106
- color: 'white',
107
- background: '#F4454E'
108
- }
109
- }
144
+ gap: 'Z',
145
+ padding: 'Y1 Z',
146
+ round: 'Y2',
147
+ background: 'gray3'
148
+ },
110
149
 
111
- export const ButtonTemplate2 = {
112
- extend: ButtonTemplate1,
113
- icon: null,
114
- props: { text: 'Button' }
150
+ Avatar: {
151
+ boxSize: 'A1 A1'
152
+ },
153
+ Caption: {
154
+ text: 'ETH',
155
+ props: {
156
+ fontSize: 'Z1'
157
+ }
158
+ }
115
159
  }
116
160
 
117
- export const ButtonTemplate3 = {
118
- extend: ButtonTemplate1,
161
+ export const PlusMinusButtons = {
162
+ extend: Flex,
119
163
  props: {
120
- text: 'Button',
121
- gap: 'Z'
164
+ alignItems: 'center',
165
+ gap: 'A'
166
+ },
167
+ Minus: {
168
+ extend: IconButton,
169
+ props: { icon: { name: 'minus' } }
170
+ },
171
+ Value: { props: { text: '1' } },
172
+ Plus: {
173
+ extend: IconButton,
174
+ props: { icon: { name: 'plus' } }
122
175
  }
123
176
  }
124
-
125
- export const ButtonTemplate4 = {
126
- extend: ButtonTemplate3,
127
- icon: {},
128
- text: 'Button',
129
- Icon: { props: { icon: 'circle' } }
130
- }
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@symbo.ls/button",
3
- "version": "2.11.162",
3
+ "version": "2.11.166",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "fe3359a1d6c14d38f45f5e5db10ef2056947a228",
6
+ "gitHead": "18340cf2fb602bcacd0567452298edd24f47f81f",
7
7
  "dependencies": {
8
8
  "@symbo.ls/atoms": "latest",
9
9
  "@symbo.ls/icon": "latest"