Skip to content

Commit 1e3516d

Browse files
krizoulokmanekrizoulokmane
committed
Add Figma Code Connect integration for BpkButton, BpkCard, and BpkText components
1 parent 825430d commit 1e3516d

File tree

3 files changed

+586
-0
lines changed

3 files changed

+586
-0
lines changed

‎backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/button/BpkButton.figma.kt‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/**
2+
* Backpack for Android - Skyscanner's Design System
3+
*
4+
* Copyright 2018 Skyscanner Ltd
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
package net.skyscanner.backpack.compose.button
20+
21+
import androidx.compose.runtime.Composable
22+
import com.figma.code.connect.Figma
23+
import com.figma.code.connect.FigmaConnect
24+
import com.figma.code.connect.FigmaProperty
25+
import com.figma.code.connect.FigmaType
26+
import com.figma.code.connect.FigmaVariant
27+
import net.skyscanner.backpack.compose.icon.BpkIcon
28+
import net.skyscanner.backpack.compose.tokens.ArrowRight
29+
@FigmaConnect(url = "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=2965-0")
30+
@FigmaVariant(key = "Icon", value = "None")
31+
class BpkButtonCodeConnect {
32+
33+
@FigmaProperty(FigmaType.Enum, "Style")
34+
val type: BpkButtonType = Figma.mapping(
35+
"Primary" to BpkButtonType.Primary,
36+
"Secondary" to BpkButtonType.Secondary,
37+
"Featured" to BpkButtonType.Featured,
38+
"Destructive" to BpkButtonType.Destructive,
39+
"Primary on Dark" to BpkButtonType.PrimaryOnDark,
40+
"Primary on Light" to BpkButtonType.PrimaryOnLight,
41+
"Secondary on Dark" to BpkButtonType.SecondaryOnDark,
42+
"Link" to BpkButtonType.Link,
43+
"Link on Dark" to BpkButtonType.LinkOnDark,
44+
)
45+
46+
@FigmaProperty(FigmaType.Enum, "State")
47+
val enabled: Boolean = Figma.mapping(
48+
"Normal" to true,
49+
"Disabled" to false,
50+
"Loading" to true,
51+
"Pressed" to true,
52+
"Focused" to true,
53+
"Hover" to true,
54+
)
55+
56+
@FigmaProperty(FigmaType.Enum, "State")
57+
val loading: Boolean = Figma.mapping(
58+
"Normal" to false,
59+
"Disabled" to false,
60+
"Loading" to true,
61+
"Pressed" to false,
62+
"Focused" to false,
63+
"Hover" to false,
64+
)
65+
66+
@FigmaProperty(FigmaType.Enum, "Size")
67+
val size: BpkButtonSize = Figma.mapping(
68+
"Default" to BpkButtonSize.Default,
69+
"Large" to BpkButtonSize.Large,
70+
)
71+
72+
@Composable
73+
fun ButtonExample() {
74+
BpkButton(
75+
text = "Label",
76+
type = type,
77+
size = size,
78+
enabled = enabled,
79+
loading = loading,
80+
onClick = { },
81+
)
82+
}
83+
}
84+
@FigmaConnect(url = "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=2965-0")
85+
@FigmaVariant(key = "Icon", value = "Left")
86+
class BpkButtonLeftIconCodeConnect {
87+
88+
@FigmaProperty(FigmaType.Enum, "Style")
89+
val type: BpkButtonType = Figma.mapping(
90+
"Primary" to BpkButtonType.Primary,
91+
"Secondary" to BpkButtonType.Secondary,
92+
"Featured" to BpkButtonType.Featured,
93+
"Destructive" to BpkButtonType.Destructive,
94+
"Primary on Dark" to BpkButtonType.PrimaryOnDark,
95+
"Primary on Light" to BpkButtonType.PrimaryOnLight,
96+
"Secondary on Dark" to BpkButtonType.SecondaryOnDark,
97+
"Link" to BpkButtonType.Link,
98+
"Link on Dark" to BpkButtonType.LinkOnDark,
99+
)
100+
101+
@FigmaProperty(FigmaType.Enum, "State")
102+
val enabled: Boolean = Figma.mapping(
103+
"Normal" to true,
104+
"Disabled" to false,
105+
"Loading" to true,
106+
"Pressed" to true,
107+
"Focused" to true,
108+
"Hover" to true,
109+
)
110+
111+
@FigmaProperty(FigmaType.Enum, "State")
112+
val loading: Boolean = Figma.mapping(
113+
"Normal" to false,
114+
"Disabled" to false,
115+
"Loading" to true,
116+
"Pressed" to false,
117+
"Focused" to false,
118+
"Hover" to false,
119+
)
120+
121+
@FigmaProperty(FigmaType.Enum, "Size")
122+
val size: BpkButtonSize = Figma.mapping(
123+
"Default" to BpkButtonSize.Default,
124+
"Large" to BpkButtonSize.Large,
125+
)
126+
127+
@Composable
128+
fun ButtonExample() {
129+
BpkButton(
130+
text = "Label",
131+
type = type,
132+
size = size,
133+
enabled = enabled,
134+
loading = loading,
135+
icon = BpkIcon.ArrowRight,
136+
position = BpkButtonIconPosition.Start,
137+
onClick = { },
138+
)
139+
}
140+
}
141+
@FigmaConnect(url = "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=2965-0")
142+
@FigmaVariant(key = "Icon", value = "Right")
143+
class BpkButtonRightIconCodeConnect {
144+
145+
@FigmaProperty(FigmaType.Enum, "Style")
146+
val type: BpkButtonType = Figma.mapping(
147+
"Primary" to BpkButtonType.Primary,
148+
"Secondary" to BpkButtonType.Secondary,
149+
"Featured" to BpkButtonType.Featured,
150+
"Destructive" to BpkButtonType.Destructive,
151+
"Primary on Dark" to BpkButtonType.PrimaryOnDark,
152+
"Primary on Light" to BpkButtonType.PrimaryOnLight,
153+
"Secondary on Dark" to BpkButtonType.SecondaryOnDark,
154+
"Link" to BpkButtonType.Link,
155+
"Link on Dark" to BpkButtonType.LinkOnDark,
156+
)
157+
158+
@FigmaProperty(FigmaType.Enum, "State")
159+
val enabled: Boolean = Figma.mapping(
160+
"Normal" to true,
161+
"Disabled" to false,
162+
"Loading" to true,
163+
"Pressed" to true,
164+
"Focused" to true,
165+
"Hover" to true,
166+
)
167+
168+
@FigmaProperty(FigmaType.Enum, "State")
169+
val loading: Boolean = Figma.mapping(
170+
"Normal" to false,
171+
"Disabled" to false,
172+
"Loading" to true,
173+
"Pressed" to false,
174+
"Focused" to false,
175+
"Hover" to false,
176+
)
177+
178+
@FigmaProperty(FigmaType.Enum, "Size")
179+
val size: BpkButtonSize = Figma.mapping(
180+
"Default" to BpkButtonSize.Default,
181+
"Large" to BpkButtonSize.Large,
182+
)
183+
184+
@Composable
185+
fun ButtonExample() {
186+
BpkButton(
187+
text = "Label",
188+
type = type,
189+
size = size,
190+
enabled = enabled,
191+
loading = loading,
192+
icon = BpkIcon.ArrowRight,
193+
position = BpkButtonIconPosition.End,
194+
onClick = { },
195+
)
196+
}
197+
}
198+
@FigmaConnect(url = "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?node-id=2965-0")
199+
@FigmaVariant(key = "Icon", value = "Icon only")
200+
class BpkButtonIconOnlyCodeConnect {
201+
202+
@FigmaProperty(FigmaType.Enum, "Style")
203+
val type: BpkButtonType = Figma.mapping(
204+
"Primary" to BpkButtonType.Primary,
205+
"Secondary" to BpkButtonType.Secondary,
206+
"Featured" to BpkButtonType.Featured,
207+
"Destructive" to BpkButtonType.Destructive,
208+
"Primary on Dark" to BpkButtonType.PrimaryOnDark,
209+
"Primary on Light" to BpkButtonType.PrimaryOnLight,
210+
"Secondary on Dark" to BpkButtonType.SecondaryOnDark,
211+
"Link" to BpkButtonType.Link,
212+
"Link on Dark" to BpkButtonType.LinkOnDark,
213+
)
214+
215+
@FigmaProperty(FigmaType.Enum, "State")
216+
val enabled: Boolean = Figma.mapping(
217+
"Normal" to true,
218+
"Disabled" to false,
219+
"Loading" to true,
220+
"Pressed" to true,
221+
"Focused" to true,
222+
"Hover" to true,
223+
)
224+
225+
@FigmaProperty(FigmaType.Enum, "State")
226+
val loading: Boolean = Figma.mapping(
227+
"Normal" to false,
228+
"Disabled" to false,
229+
"Loading" to true,
230+
"Pressed" to false,
231+
"Focused" to false,
232+
"Hover" to false,
233+
)
234+
235+
@FigmaProperty(FigmaType.Enum, "Size")
236+
val size: BpkButtonSize = Figma.mapping(
237+
"Default" to BpkButtonSize.Default,
238+
"Large" to BpkButtonSize.Large,
239+
)
240+
241+
@Composable
242+
fun ButtonExample() {
243+
BpkButton(
244+
icon = BpkIcon.ArrowRight,
245+
contentDescription = "Label",
246+
type = type,
247+
size = size,
248+
enabled = enabled,
249+
loading = loading,
250+
onClick = { },
251+
)
252+
}
253+
}

‎backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/card/BpkCard.figma.kt‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Backpack for Android - Skyscanner's Design System
3+
*
4+
* Copyright 2018 Skyscanner Ltd
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
package net.skyscanner.backpack.compose.card
19+
20+
import androidx.compose.runtime.Composable
21+
import com.figma.code.connect.FigmaConnect
22+
23+
@FigmaConnect(url = "https://www.figma.com/design/irZ3YBx8vOm16ICkAr7mB3/Backpack-Components?m=auto&node-id=4395-2506")
24+
class BpkCardCodeConnect {
25+
26+
@Composable
27+
fun CardExample() {
28+
BpkCard(
29+
onClick = {
30+
// Handle card click
31+
},
32+
content = {
33+
// Add your card content here
34+
},
35+
)
36+
}
37+
}

0 commit comments

Comments
 (0)